:root {
  color-scheme: dark;
  --black: #020603;
  --panel: #071008;
  --grid: #17351a;
  --rule: #2c5e2c;
  --green: #58d24a;
  --bright: #8dff70;
  --sihilisko: #2fdc0c;
  --amber: #ffb000;
  --paper: #d6ecd0;
  --muted: #8eac8b;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  color: var(--paper);
  background-color: var(--black);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(141, 255, 112, .025) 4px 5px),
    linear-gradient(90deg, rgba(23, 53, 26, .18) 1px, transparent 1px),
    linear-gradient(rgba(23, 53, 26, .14) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

a { color: var(--bright); text-underline-offset: .22em; }
a:hover { color: #c7ffbc; }

.skip {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: .55rem .8rem;
  background: var(--amber);
  color: var(--black);
  transform: translateY(-150%);
}

.skip:focus { transform: none; }

.site-head,
main,
footer {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.site-head {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: block;
  width: min(450px, 46vw);
  line-height: 0;
}

.brand img { width: 100%; height: auto; }

nav { display: flex; align-items: center; gap: 1.5rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--paper); }

.nav-open {
  padding: .55rem .8rem;
  border: 1px solid var(--green);
  color: var(--bright);
}

main { overflow: hidden; }

.hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(380px, .78fr) minmax(620px, 1.35fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(4rem, 8vw, 8rem) 0;
}

h1,
h2,
p { margin-top: 0; }

h1 {
  position: relative;
  margin-bottom: 1.3rem;
  color: var(--sihilisko);
  font-family: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(3.8rem, 7.6vw, 7.6rem);
  font-stretch: condensed;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .84;
  text-shadow: 0 0 20px rgba(47, 220, 12, .42), 0 0 52px rgba(47, 220, 12, .2);
}

/* The heading is drawn the way the sihilisko mark is: not green type with
   something laid over it, but type made of scan lines. The gradient fills the
   letters themselves — a bright band, then a dark one — and the glyphs are the
   window it is seen through. The bloom around them is the text's own shadow,
   which is cast from the letter shapes whatever colour they are filled with,
   so the edges stay sharp while the halo is soft.
   The pitch is in pixels because a scan line belongs to the screen rather than
   to the type size, and the whole thing is behind @supports: a browser that
   cannot clip a background to text keeps solid green letters instead of
   transparent ones. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    color: transparent;
    background-image: repeating-linear-gradient(
      180deg,
      #3bff17 0 2px,
      rgba(47, 220, 12, .28) 2px 3px,
      rgba(6, 26, 6, .92) 3px 5px);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

h2 {
  margin-bottom: 1rem;
  color: var(--green);
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
}

.lead {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .68rem 1rem;
  border: 1px solid var(--rule);
  color: var(--paper);
  background: rgba(7, 16, 8, .85);
  font-weight: 700;
  text-decoration: none;
}

.button {
  position: relative;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(2, 6, 3, .22) 0 1px,
    rgba(2, 6, 3, 0) 1px 3px);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  opacity: .5;
  pointer-events: none;
  transition: opacity .15s ease;
}

.button::before { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.button::after { right: 3px; bottom: 3px; border-left: 0; border-top: 0; }

.button:hover::before,
.button:hover::after { opacity: 1; }

.button:hover {
  border-color: var(--paper);
  color: #fff;
  box-shadow: 0 0 14px rgba(47, 220, 12, .14), inset 0 0 12px rgba(47, 220, 12, .06);
}
.button.primary { border-color: var(--amber); color: var(--amber); }
/* The price is dimensioned rather than written: the button is the object, and
   what it costs is measured across it — from outside, where a dimension
   belongs. The extension lines stand clear of the button's top edge and run
   past the dimension line, the arrowheads point outward, and the value sits
   above the line. Exactly the furniture the editor draws around a part.
   The parts are decoration to a screen reader — the link carries the whole
   sentence in its own label — because "50 € Buy 30 days" is not how anybody
   would say it. */
.priced {
  display: inline-flex;
  flex-direction: column;
}

.dim {
  position: relative;
  display: block;
  height: 2.3rem;
}

/* The extension lines: a gap at the object, and a little overrun past the
   dimension line, as drawn ones have. */
.dim::before,
.dim::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  bottom: 4px;
  width: 1px;
  background: var(--amber);
  opacity: .8;
}

.dim::before { left: 0; }
.dim::after { right: 0; }

.dim-line {
  position: absolute;
  top: 1.75rem;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--amber);
  opacity: .8;
}

/* Arrowheads, pointing outwards at each end of the dimension line. */
.dim-line::before,
.dim-line::after {
  content: "";
  position: absolute;
  top: 50%;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translateY(-50%);
}

.dim-line::before { left: 0; border-right: 7px solid var(--amber); }
.dim-line::after { right: 0; border-left: 7px solid var(--amber); }

.dim-value {
  position: absolute;
  top: 0;
  left: 50%;
  color: var(--amber);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  /* The amount and its unit are one word on a drawing, and a phone is narrow
     enough to have broken them over two lines. */
  white-space: nowrap;
  transform: translateX(-50%);
}

.priced:hover .dim::before,
.priced:hover .dim::after,
.priced:hover .dim-line { opacity: 1; }

.button.primary:hover {
  background: var(--amber);
  color: var(--black);
  box-shadow: 0 0 18px rgba(255, 176, 0, .22);
}

.access-note {
  max-width: 32rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.terminal-shot,
.iso-shot { margin: 0; }

.terminal-shot {
  position: relative;
  border: 1px solid var(--green);
  background: var(--panel);
  box-shadow: 16px 16px 0 rgba(23, 53, 26, .45), 0 0 50px rgba(88, 210, 74, .08);
}

.terminal-shot::before,
.iso-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 4px);
}

.terminal-shot img,
.iso-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.terminal-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 70%;
  padding: .55rem .75rem;
  color: var(--amber);
  background: rgba(2, 6, 3, .92);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  font-size: .82rem;
}

.capability-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.capability-line span {
  padding: 1rem .8rem;
  text-align: center;
  color: var(--amber);
  border-right: 1px solid var(--rule);
}

.capability-line span:last-child { border-right: 0; }

.tool-ledger,
.file-section {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(2rem, 8vw, 8rem);
  padding: 7rem 0;
  border-bottom: 1px solid var(--rule);
}

.tool-ledger header p,
.file-section header p { max-width: 28rem; color: var(--muted); }

.tool-ledger dl { margin: 0; border-top: 1px solid var(--rule); }

.tool-ledger dl div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule);
}

.tool-ledger dt { color: var(--amber); font-weight: 700; }
.tool-ledger dd { margin: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 8rem);
  padding: 7rem 0;
  border-bottom: 1px solid var(--rule);
}

.iso-shot { position: relative; border: 1px solid var(--rule); background: var(--panel); }

.plain-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.plain-list li { padding: .78rem 0; border-bottom: 1px solid var(--rule); }
.plain-list li::before { content: "+"; display: inline-block; width: 1.5rem; color: var(--green); }

.file-table { border-top: 1px solid var(--rule); }
.file-table [role="row"] { display: grid; grid-template-columns: 13rem 1fr; border-bottom: 1px solid var(--rule); }
.file-table [role="cell"] { padding: .95rem 0; }
.file-table [role="cell"]:first-child { color: var(--amber); font-weight: 700; }

/* The last thing on the page is an invitation, so it stands in the middle of
   it rather than off to one side. */
.closing {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  text-align: center;
}

.closing p {
  margin: 0;
  color: var(--sihilisko);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -.02em;
}

.closing .actions { justify-content: center; }

/* The same footer the other sihilisko sites carry: who is selling, the
   business ID, how to reach them, the two documents a buyer is entitled to,
   and the stamp — which sits in the line as a signature rather than pinned to
   a corner, and takes a centred line of its own once the row wraps. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;
  padding: 1.5rem 0 3rem;
  color: var(--muted);
  font-size: .92rem;
  border-top: 1px solid var(--rule);
}

footer a { color: var(--muted); }
footer a:hover { color: var(--paper); }

.foot-sig { opacity: .55; transition: opacity .15s ease; }
.foot-sig:hover { opacity: .9; }
.foot-sig img { display: block; width: 4.6rem; height: auto; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

@media (max-width: 1000px) {
  .site-head { min-height: 92px; }
  nav a:not(.nav-open) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 720px; }
  .terminal-shot { width: calc(100% - 16px); }
  .tool-ledger, .file-section { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 680px) {
  body { font-size: 16px; background-size: auto, 48px 48px, 48px 48px; }
  .site-head, main, footer { width: min(100% - 28px, 1440px); }
  .site-head { gap: 1rem; }
  .brand { width: min(230px, 60vw); }
  .nav-open { padding: .5rem .62rem; white-space: nowrap; }
  .hero { gap: 2.5rem; padding: 4rem 0; }
  h1 { font-size: clamp(3.4rem, 18vw, 5.4rem); }
  .terminal-shot { box-shadow: 8px 8px 0 rgba(23, 53, 26, .45); }
  .terminal-shot figcaption { position: static; max-width: none; border-left: 0; }
  .capability-line { grid-template-columns: 1fr 1fr; }
  .capability-line span { border-bottom: 1px solid var(--rule); }
  .capability-line span:nth-child(even) { border-right: 0; }
  .capability-line span:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .tool-ledger, .split, .file-section { padding: 4.5rem 0; }
  .tool-ledger dl div { grid-template-columns: 6.5rem 1fr; gap: .75rem; }
  .split { grid-template-columns: 1fr; }
  .iso-shot { order: 2; }
  .file-table [role="row"] { grid-template-columns: 7.5rem 1fr; gap: .75rem; }
  .closing { gap: 1.2rem; }
  footer { justify-content: center; text-align: center; gap: .35rem 1rem; }
  .foot-sig { flex-basis: 100%; display: flex; justify-content: center; margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}