/* ITSABOUTTERPS v10 --- one design system, everywhere the same.
   2 fonts (system sans + mono), 2 buttons (ghost = negative, solid = positive),
   dark green base, neon accent, one subtle rising-leaf animation. */
:root {
  --bg: #0a120c;
  --panel: #101c13;
  --ink: #f0f7ef;
  --muted: #93a898;
  --line: rgba(255,255,255,.11);
  --neon: #6ee780;
  --green: #3ec96e;
  --red: #ff5a52;
  --gold: #ffd54d;
  --r: 14px;
  --grad: linear-gradient(120deg, #6ee780, #2ea36b);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
img { max-width: 100%; }

/* ---- background: rising leaves ---- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fl {
  position: absolute; bottom: -30px;
  opacity: .3;
  animation: leafrise linear infinite;
}
@keyframes leafrise {
  from { transform: translateY(0) rotate(0deg); opacity: .3; }
  to   { transform: translateY(-112vh) rotate(300deg); opacity: 0; }
}


/* ---- bottom dock (nav) ---- */
.dock {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.dock-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .22em; font-size: 11.5px; }
.dock-logo { width: 28px; height: 28px; border-radius: 50%; }
.dock-note { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.dock-links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.dock-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color .15s, background .15s;
}
.dock-links a:hover { color: var(--neon); background: rgba(110,231,128,.1); }
.dock-links img { width: 16px; height: 16px; opacity: .8; }

body { padding-bottom: 64px; }

/* ---- hero ---- */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 20px 40px;
  position: relative; z-index: 1;
}
.hero-logo {
  width: clamp(110px, 14vw, 150px); border-radius: 50%;
  margin-bottom: 20px;
}
.kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .34em;
  color: var(--neon); margin: 0 0 12px; text-transform: uppercase;
}
.display {
  margin: 0 0 30px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900; line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase;
}
.display span { color: var(--neon); }

/* ---- the 2 buttons + input ---- */
.scan {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: min(560px, 92vw);
}
.scan input {
  flex: 1 1 260px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); padding: 14px 16px; font-size: 15px;
  font-family: var(--mono); letter-spacing: 1.5px; text-transform: uppercase;
}
.scan input::placeholder { color: #5d7263; letter-spacing: 1px; }
.scan input:focus { outline: none; border-color: var(--green); }
.btn-ghost, .btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); padding: 14px 24px;
  font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: transform .12s, opacity .15s;
}
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--neon); color: var(--neon); }
.btn-ghost .btn-icn { width: 17px; height: 17px; }
.btn-solid {
  background: var(--grad); color: #06130a;
  border: 0;
  
}
.btn-solid:hover { transform: translateY(-1px); }
.btn-solid:active, .btn-ghost:active { transform: translateY(1px); }

/* ---- result page (verify) ---- */
.result {
  text-align: center; padding: 40px 30px; max-width: 560px; margin: 44px auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  
}
.result .icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.result.good .icon, .result.good h1 { color: var(--neon); }
.result.bad .icon, .result.bad h1 { color: var(--red); }
.result h1 { margin: 0 0 12px; font-size: 27px; font-weight: 800; }
.result .meta { color: var(--muted); font-size: 13px; margin-top: 16px; }
.alert {
  background: rgba(255,213,77,.08); border: 1px solid rgba(255,213,77,.4); border-radius: 12px;
  padding: 12px 16px; margin: 15px 0; font-size: 14px; text-align: left; line-height: 1.6; color: #e8d9a8;
}
.spin { animation: spin 1.2s linear infinite; display: inline-block; color: var(--neon); }
@keyframes spin { to { transform: rotate(360deg); } }
.hint { color: var(--muted); font-size: 13px; }

/* ---- generic card ---- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; 
}
.code-form { display: flex; gap: 10px; flex-wrap: wrap; }
.code-form input {
  flex: 1 1 220px; min-width: 0;
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); padding: 13px 15px; font-size: 16px;
  font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase;
}
.code-form button, button, .button-link {
  background: var(--grad); color: #06130a;
  border: 0; border-radius: 12px; padding: 13px 26px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:hover, .button-link:hover { opacity: .9; }

/* ---- footer ---- */
footer {
  position: relative; z-index: 1;
  display: flex; gap: 18px; justify-content: center; align-items: center;
  padding: 24px; font-size: 12px; color: var(--muted);
  letter-spacing: .22em; text-transform: uppercase;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ---- camera overlay ---- */
.scanoverlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(3, 8, 5, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 20px;
}
.scanoverlay[hidden] { display: none; }
#scanVideo { width: min(560px, 92vw); max-height: 70vh; border-radius: var(--r); border: 1px solid var(--line); background: #000; }
.scanmsg { color: var(--muted); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.screenclose {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); padding: 10px 28px; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.screenclose:hover { border-color: var(--neon); color: var(--neon); }

/* ---- verify page header (shared) ---- */
.top { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.logo { width: 44px; height: 44px; border-radius: 50%; }
.brand-tag { color: var(--muted); font-size: 12px; letter-spacing: .4px; }
.shop-link { margin-left: auto; color: var(--neon); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.loading { color: var(--muted); }
.result.good.warn {  }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .dock { flex-direction: column; align-items: center; gap: 10px; padding: 12px 14px; }
  .dock-links { margin-left: 0; justify-content: center; }
  .scan button[type="submit"], .btn-ghost { flex: 1 1 100%; }
}

/* ---- rig graphic (product shot, green tint) ---- */
.rig { filter: sepia(1) saturate(3.2) hue-rotate(70deg) brightness(.82) contrast(1.05); }
/* ---- rig icons rise with the leaves (green tinted) ---- */
.rigfl { filter: sepia(1) saturate(3) hue-rotate(70deg) brightness(.85); opacity: .5; }