/* BatxiKompos — coming soon
   Design language: Pink Dither OS (Taste Library · pink-dither-os)
   One flat pink ground, black-title-bar windows, 1-bit dither, giant tight grotesque,
   crop marks. Windows: square, 1px border, no shadow. */

:root {
  --pink: #F386A1;
  --plum: #3C2D31;
  --plum-muted: #6B5157;
  --ink: #1E1E1E;
  --grey: #DEDEDE;
  --white: #FEFEFE;
  --sage: #ABBAB9;
  --sky: #CFE2F6;

  /* vendor chips — inside windows only */
  --v-blue: #2D63A7;
  --v-rust: #8E4326;
  --v-green: #318F27;
  --v-magenta: #D35CB6;

  --grotesk: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -40px; z-index: 100;
  background: var(--ink); color: #fff; font: 12px var(--mono); padding: 6px 8px;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───────── Window ───────── */
.win {
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}
.win__bar {
  display: flex; align-items: center;
  height: 18px; padding: 0 5px;
  background: var(--ink); color: #fff;
  font: 400 11px/1 var(--mono);
  white-space: nowrap; overflow: hidden;
}
.win__body { padding: 8px 8px 10px; }
.win__body--grey { background: var(--grey); }
.win__body--center { text-align: center; display: grid; gap: 2px; justify-items: center; }
.win__btn {
  display: inline-block; margin-top: 10px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 0;
  font: 400 12px/1 var(--mono);
  padding: 9px 16px; text-decoration: none; cursor: pointer;
}
.win__btn:hover { background: #000; }

.chip {
  display: inline-block;
  background: var(--ink); color: #fff;
  font: 400 11px/1 var(--mono);
  padding: 2px 4px;
}
.chip--xl { font-size: 22px; padding: 3px 5px; margin-bottom: 6px; letter-spacing: -0.02em; }
.chip--pin { position: absolute; left: -1px; top: -1px; z-index: 3; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tags span { background: #cfcfcf; padding: 1px 4px; font-size: 11px; }

/* ───────── Nav ───────── */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__mark {
  width: 32px; height: 32px; background: var(--ink); color: #fff;
  display: grid; place-items: center;
}
.nav__mark svg { width: 22px; height: 22px; }
.nav__links { display: flex; gap: 0; }
.nav__links a, .nav__lang {
  background: var(--white); text-decoration: none;
  font: 500 15px/1 var(--grotesk); letter-spacing: -0.01em;
  padding: 8px 10px; color: var(--ink);
}
.nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav__end { display: flex; }
.nav__lang {
  white-space: nowrap;
  border: 0; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: #8a8a8a; height: 32px;
}
.nav__lang [aria-current="true"] { color: var(--ink); }
.nav__cta {
  white-space: nowrap;
  background: var(--ink); color: #fff; text-decoration: none;
  font: 500 15px/1 var(--grotesk); padding: 8px 12px; height: 32px;
  display: grid; place-items: center;
}

/* ───────── Hero top: sky ───────── */
.sky {
  position: relative;
  padding: 88px var(--gutter) 64px;
  display: grid; place-items: center;
  overflow: hidden;
}
/* Cloud loop stand-in: pixel clouds on a low-res canvas, scaled up with hard edges.
   Stipple dithering between five flat colours; GSAP drifts the blobs (assets/main.js). */
.sky__art { position: absolute; inset: 0; overflow: hidden; background: var(--white); }
.sky__px {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.sky__stack { position: relative; display: grid; gap: 14px; width: min(240px, 100%); }
.win--news { width: 100%; }
.win--news .win__body { font-size: 12px; }

.progress {
  position: relative; margin-top: 8px;
  height: 16px; border: 1px solid var(--ink); background: #f1f1f1;
}
.progress__fill {
  position: absolute; inset: 0 auto 0 0; width: 87%;
  background: var(--ink);
}
.progress__label {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 11px; line-height: 1;
}

/* ───────── Hero ───────── */
.hero {
  position: relative;
  padding: 8px var(--gutter) 96px;
  text-align: center;
}
.kicker { font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.display {
  margin: 20px auto 0;
  max-width: 13ch;
  font-weight: 500;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}
.text-cta {
  display: inline-block; margin-top: 36px;
  font-weight: 500; font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.035em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.text-cta:hover { text-decoration-thickness: 3px; }
.b64-rail {
  position: absolute; left: var(--gutter); top: 40px;
  width: 7ch; font: 9px/1.25 var(--mono); color: #9a9a9a;
  word-break: break-all; text-align: left;
}
@media (max-width: 900px) { .b64-rail { display: none; } }

/* ───────── Desktop stage ───────── */
.stage {
  position: relative;
  background: var(--pink);
  padding: 22px var(--gutter) 56px;
}
.stage__corners {
  position: absolute; inset: 4px 8px auto 8px;
  display: flex; justify-content: space-between;
  font: 10px var(--mono); color: var(--ink);
}
.screen {
  position: relative;
  border: 1px solid var(--ink);
  height: 600px;
  overflow: hidden;
  background-image: radial-gradient(rgba(30,30,30,.35) 0.8px, transparent 1px);
  background-size: 6px 6px;
}
.dither {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}
.screen > .win { position: absolute; z-index: 2; }

.w-idea    { left: 2%;  top: 42px;  width: 200px; }
.w-team    { left: 9%;  top: 120px; width: 220px; z-index: 3 !important; }
.w-product { left: 36%; top: 70px;  width: 220px; }
.w-status  { left: 30%; top: 190px; width: min(460px, 44%); z-index: 4 !important; }
.w-clock   { right: 2%; top: 30px;  width: 150px; }
.w-version { left: 2%;  bottom: 24px; width: 170px; }
.w-glider  { right: 2%; bottom: 24px; width: 130px; z-index: 4 !important; }

.win--tiny .win__body { padding: 6px 7px 8px; }
.clock { font-size: 22px; letter-spacing: -0.02em; }

/* status table (the "evidence" window) */
.status { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.status th, .status td { padding: 6px 4px; text-align: left; font-weight: 400; vertical-align: middle; }
.status thead th { border-bottom: 1px solid var(--ink); color: #555; }
.status tbody tr + tr th, .status tbody tr + tr td { border-top: 1px dashed #bdbdbd; }
.status th[scope="row"] { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.status td:nth-child(2) { width: 55%; }
.status .num { text-align: right; width: 3ch; }
.v { width: 9px; height: 9px; display: inline-block; flex: none; }
.v--green { background: var(--v-green); }
.v--blue { background: var(--v-blue); }
.v--rust { background: var(--v-rust); }
.v--magenta { background: var(--v-magenta); }
.track {
  position: relative; display: block; height: 10px; background: var(--grey);
}
.track b { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--ink); }
.track em {
  position: absolute; top: 2px; left: 0; width: 6px; height: 6px; background: #fff;
  animation: shuttle var(--d) linear infinite alternate;
}
@keyframes shuttle { to { left: calc(100% - 6px); } }

/* glider: 4 phases, one per 0.5s, stepped */
.glider { width: 44px; height: 44px; margin: 2px 0 6px; }
.g { fill: var(--ink); opacity: 0; animation: 2s step-end infinite; }
.g6, .g8 { opacity: 1; animation: none; }
.g1, .g5 { animation-name: ph-0101; }
.g2      { animation-name: ph-1000; }
.g3      { animation-name: ph-0110; }
.g4      { animation-name: ph-0010; }
.g7      { animation-name: ph-1001; }
.g9      { animation-name: ph-1010; }
@keyframes ph-1000 { 0% {opacity:1} 25% {opacity:0} 100% {opacity:0} }
@keyframes ph-0101 { 0% {opacity:0} 25% {opacity:1} 50% {opacity:0} 75% {opacity:1} }
@keyframes ph-0110 { 0% {opacity:0} 25% {opacity:1} 75% {opacity:0} }
@keyframes ph-0010 { 0% {opacity:0} 50% {opacity:1} 75% {opacity:0} }
@keyframes ph-1001 { 0% {opacity:1} 25% {opacity:0} 75% {opacity:1} }
@keyframes ph-1010 { 0% {opacity:1} 25% {opacity:0} 50% {opacity:1} 75% {opacity:0} }

@media (max-width: 820px) {
  .screen {
    height: auto; padding: 40px 12px 16px;
    display: grid; gap: 0;
  }
  .screen > .win { position: relative; inset: auto; width: auto; }
  .w-idea    { margin-right: 22%; }
  .w-team    { margin: -14px 8% 0 12%; }
  .w-product { margin: -14px 0 0 30%; }
  .w-status  { margin: 16px 0 0; width: auto; }
  .w-clock   { margin: 16px 45% 0 0; }
  .w-version { margin: -10px 20% 0 25%; }
  .w-glider  { margin: -10px 0 0 55%; }
}

/* ───────── Crop marks ───────── */
.crop {
  --c: currentColor; --l: 10px;
  position: relative; padding: 22px 26px;
  background:
    linear-gradient(var(--c), var(--c)) left   top    / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left   top    / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right  top    / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right  top    / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left   bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left   bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right  bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right  bottom / 1px var(--l);
  background-repeat: no-repeat;
}
.crop--center { text-align: center; margin-inline: auto; width: fit-content; max-width: 100%; }

.statement {
  margin: 0;
  font-weight: 500;
  font-size: clamp(40px, 7.4vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.statement--left { text-align: left; }

/* ───────── Manifesto (pink) ───────── */
.manifesto {
  background: var(--pink); color: var(--plum);
  padding: 72px var(--gutter) 120px;
}
.label { font: 400 11px/1.2 var(--mono); letter-spacing: 0; margin-bottom: 36px; }
.ruled { border-left: 1px solid currentColor; padding-left: 8px; }
.cols {
  display: grid; grid-template-columns: 1fr 1fr 170px; gap: 32px 40px;
  max-width: 1200px; margin: 80px auto 0;
}
.lead { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; letter-spacing: -0.01em; }
.b64 p:last-child { font: 9px/1.3 var(--mono); word-break: break-all; }
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px;
  max-width: 1200px; margin: 72px auto 0;
}
.trio .label { margin-bottom: 28px; }
.trio p:last-child { font-size: 16px; }
@media (max-width: 820px) {
  .cols, .trio { grid-template-columns: 1fr; }
  .b64 { display: none; }
}

/* ───────── Notify (sage) ───────── */
.notify {
  background: var(--sage); color: var(--ink);
  padding: 96px var(--gutter);
  display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 48px; align-items: center;
}
.notify .crop { width: fit-content; }
.win--form .win__body { padding: 14px; }
.form label { display: block; margin-bottom: 10px; }
.form__row { display: flex; gap: 0; }
.form input {
  flex: 1; min-width: 0;
  font: 400 14px/1 var(--mono); color: var(--ink);
  border: 1px solid var(--ink); border-right: 0; border-radius: 0;
  background: #fff; padding: 10px;
}
.form input:focus { outline: none; background: #fffbe6; }
.form .win__btn { margin-top: 0; }
.form__msg { min-height: 1.45em; margin-top: 10px; }
.form__msg.is-error { color: #a1182f; }
@media (max-width: 820px) { .notify { grid-template-columns: 1fr; } }

/* ───────── FAQ + footer (charcoal) ───────── */
.faq {
  background: var(--ink); color: #fff;
  padding: 96px var(--gutter) 32px;
}
.faq__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  max-width: 1200px; margin: 72px auto 0; align-items: center;
}
.faq details {
  border-left: 1px dashed rgba(255,255,255,.6); padding: 0 0 0 10px; margin-bottom: 22px;
}
.faq details[open] { border-left-style: solid; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  font: 400 12px/1.4 var(--mono); padding: 4px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 1px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center / 6px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 6px no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 6px 1px no-repeat;
}
.faq details p { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; padding: 10px 0 6px; }
.faq__logo { justify-self: center; padding: 40px; }
.faq__logo svg { width: 140px; height: 140px; color: #fff; }
@media (max-width: 820px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__logo { display: none; }
}

.footer {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1200px; margin: 120px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.25);
  font: 400 11px/1.6 var(--mono); color: rgba(255,255,255,.75);
}
.footer__name { font: 500 16px/1.4 var(--grotesk); color: #fff; }
.footer a { color: #fff; }
@media (max-width: 640px) { .footer { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track em, .g { animation: none !important; }
  .g2, .g6, .g7, .g8, .g9 { opacity: 1; }
}

@media (max-width: 560px) {
  .nav__links { display: none; }
}