/* ============================================================
   AUTSM PROTOCOL — 1987 CRT terminal
   black · phosphor green · thin lines · lots of empty space
   ============================================================ */

:root{
  --bg:            #000000;
  --green:         #3cff6e;
  --green-mid:     #22b84c;
  --green-dim:     #12862f;
  --line:          rgba(60,255,110,.28);
  --line-soft:     rgba(60,255,110,.14);
  --glow:          rgba(60,255,110,.45);
  --red:           #e8110f;

  --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", "Liberation Mono",
          Menlo, Consolas, "Courier New", monospace;

  --wrap: 1120px;
  --gap: 20px;
}

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

html{ background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--green);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  letter-spacing:.04em;
  text-shadow:0 0 4px var(--glow);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}

.comment{
  color:var(--green-mid);
  font-size:11px;
  letter-spacing:.16em;
  margin:0 0 10px;
  text-shadow:none;
}

.rule{
  border:0;
  border-top:1px solid var(--line);
  margin:12px 0;
}

/* ---------- CRT overlays ---------- */
.crt-scanlines,
.crt-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}

.crt-scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.34) 3px,
    rgba(0,0,0,.34) 4px
  );
  opacity:.55;
}

.crt-vignette{
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.55) 100%);
}

/* ---------- header ---------- */
.header{ border-bottom:1px solid var(--line); }
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  min-height:78px;
}

.brand img{
  width:auto;
  height:52px;
  filter:drop-shadow(0 0 8px rgba(60,255,110,.22));
}

.nav{
  display:flex;
  gap:26px;
  font-size:12px;
  letter-spacing:.16em;
}
.nav a{ padding:4px 0; border-bottom:1px solid transparent; }
.nav a:hover,
.nav a:focus-visible{ border-bottom-color:var(--green); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--green);
  background:transparent;
  color:var(--green);
  font-family:inherit;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .12s linear, color .12s linear;
}
.btn:hover,
.btn:focus-visible{
  background:var(--green);
  color:#000;
  text-shadow:none;
  box-shadow:0 0 18px rgba(60,255,110,.35);
}
.btn--sm{ padding:8px 16px; font-size:12px; }
.btn--lg{ padding:16px 28px; font-size:15px; margin-top:26px; }
.btn__caret{ font-weight:700; }

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:44px;
  align-items:start;
  padding-block:56px 44px;
}

.hero__title{
  display:flex;
  flex-direction:column;
  margin:0;
  font-size:clamp(30px, 4.6vw, 54px);
  line-height:1.06;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 10px var(--glow), 0 0 26px rgba(60,255,110,.22);
}

.hero__ticker{
  margin:16px 0 0;
  font-size:clamp(20px, 2.6vw, 30px);
  font-weight:700;
  color:var(--green);
}

.hero__chain{
  display:inline-block;
  margin:16px 0 0;
  padding:5px 11px;
  border:1px solid var(--line);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--green-mid);
  text-shadow:none;
}

.hero__copy{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--green);
}

/* ---------- terminal window ---------- */
.window{
  width:100%;
  max-width:400px;
  margin-left:auto;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 0 0 1px rgba(60,255,110,.06), 0 0 34px rgba(60,255,110,.07);
}

.window__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 12px;
  border-bottom:1px solid var(--line);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--green-mid);
  text-shadow:none;
}
.window__dots{ letter-spacing:.1em; font-size:8px; }

.window__screen{
  position:relative;
  padding:14px;
  border-bottom:1px solid var(--line);
}
/* faint grid behind the graphic */
.window__screen::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,  var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
}
.window__video{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border:1px solid var(--line);
  background:#000;
}

.window__readout{
  padding:12px 14px 14px;
  font-size:12px;
  letter-spacing:.1em;
}
.window__readout p{ margin:0; }

.readout__live{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:8px;
  margin-bottom:8px !important;
  border-bottom:1px solid var(--line);
}
.dot{
  width:7px; height:7px;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2s steps(2,end) infinite;
}
.readout__status{ color:var(--green-mid); }

.cursor{
  display:inline-block;
  width:8px; height:13px;
  margin-left:4px;
  background:var(--green);
  vertical-align:-2px;
  animation:blink 1.1s steps(2,end) infinite;
}

/* ---------- sections ---------- */
.section{ padding-block:34px; }
.section__label{ margin-bottom:16px; }

/* ---------- mechanism cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
}

.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  padding:18px 16px 14px;
  min-height:250px;
  transition:border-color .12s linear, box-shadow .12s linear;
}
.card:hover{
  border-color:var(--green);
  box-shadow:0 0 22px rgba(60,255,110,.1);
}

.card__num{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--green-mid);
  text-shadow:none;
}

.pixicon{
  width:52px;
  height:52px;
  margin-bottom:16px;
  fill:var(--green);
  shape-rendering:crispEdges;
  filter:drop-shadow(0 0 5px var(--glow));
}

.card__title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
}

.card__body{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:var(--green-mid);
  text-shadow:none;
}

.card__caret{
  margin:auto 0 0;
  padding-top:14px;
  font-size:12px;
  color:var(--green-dim);
  text-shadow:none;
}

/* ---------- dashboard panels ---------- */
.panels{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:var(--gap);
  padding-bottom:64px;
}

.panel{
  border:1px solid var(--line);
  padding:18px 18px 20px;
}
.panel__label{ margin-bottom:0; }

.stats{ margin:0; }
.stats__row{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  font-size:12px;
  letter-spacing:.1em;
  border-bottom:1px dotted var(--line-soft);
}
.stats__row:last-child{ border-bottom:0; }
.stats dt{ color:var(--green-mid); text-shadow:none; }
.stats dd{
  margin:0 0 0 auto;
  font-weight:700;
  white-space:nowrap;
}

.tx{
  list-style:none;
  margin:0;
  padding:0;
  font-size:12px;
  letter-spacing:.08em;
}
.tx li{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px dotted var(--line-soft);
}
.tx li:last-child{ border-bottom:0; }
.tx__hash{ color:var(--green); }
.tx__kind{ color:var(--green-mid); text-shadow:none; font-size:11px; }
.tx__amt{ font-weight:700; white-space:nowrap; }

.tx__note{
  margin:14px 0 0;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--green-dim);
  text-shadow:none;
}

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); }

.footer__inner{
  display:grid;
  grid-template-columns:1.2fr auto 1fr;
  gap:36px;
  align-items:center;
  padding-block:26px;
}

.footer__brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.16em;
  color:var(--green-mid);
  text-shadow:none;
}
.footer__brand img{
  width:auto;
  height:44px;
}

.footer__social{ display:flex; gap:18px; justify-content:center; }
.footer__social a{
  display:grid;
  place-items:center;
  width:34px; height:34px;
  border:1px solid var(--line);
  color:var(--green);
}
.footer__social a:hover,
.footer__social a:focus-visible{
  background:var(--green);
  color:#000;
}

.footer__contract{ justify-self:end; text-align:right; font-size:11px; }

.copy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--green);
  font-family:inherit;
  font-size:11px;
  letter-spacing:.1em;
  padding:7px 10px;
  cursor:pointer;
  text-shadow:inherit;
}
.copy:hover,
.copy:focus-visible{ border-color:var(--green); }
.copy__icon{ color:var(--green-dim); text-shadow:none; }

.verified{
  margin:10px 0 0;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--green-mid);
  text-shadow:none;
}
.check{ color:var(--green); }

.footer__legal{
  border-top:1px solid var(--line);
  padding-block:14px;
  margin:0;
  text-align:center;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--green-dim);
  text-shadow:none;
}

/* On the two-column hero the window stretches to the height of the copy
   beside it, so its bottom edge lines up with the BUY button. The screen
   takes whatever is left over after the title bar and readout, and the
   video covers it. */
@media (min-width:941px){
  .hero{ align-items:stretch; }
  .hero__right{ position:relative; }
  /* Taken out of flow so the row height comes from the copy column alone —
     otherwise the window's own height would drive the row and stretch
     would have nothing to resolve against. */
  .window{
    position:absolute;
    top:0; right:0; bottom:0;
    display:flex;
    flex-direction:column;
    /* The height is fixed by the copy column, so width sets the crop the
       video takes. Track the viewport so the frame stays near 3:2 and
       never squeezes tall enough to clip the logo's circle or underline. */
    max-width:clamp(340px, 30vw, 385px);
  }
  .window__screen{ flex:1 1 auto; min-height:0; }
  .window__video{ height:100%; aspect-ratio:auto; }
}

/* ---------- animation ---------- */
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.blink{ animation:blink 1.1s steps(2,end) infinite; }

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero{ grid-template-columns:1fr; gap:34px; padding-block:40px 34px; }
  .window{ margin-inline:auto; }
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .panels{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .footer__inner{ grid-template-columns:1fr; gap:24px; justify-items:center; text-align:center; }
  .footer__contract{ justify-self:center; text-align:center; }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
  .btn--lg{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}