@font-face {
  font-family: 'OpenMoji';
  src: url('https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/font/OpenMoji-color-glyf_colr_0/OpenMoji-color-glyf_colr_0.woff2') format('woff2');
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  --orange:    #e8621a;
  --orange-lt: #f07840;
  --pink:      #d94db8;
  --pink-lt:   #e870cc;
}

/* ── LIGHT ── */
:root, [data-theme="light"] {
  --bg:            #f2ede4;
  --bg2:           #e6dfd0;
  --surface:       #faf7f2;
  --border:        #111;
  --text:          #111;
  --text-mid:      #444;
  --text-dim:      #888;
  --tag-bg:        #111;
  --tag-fg:        #faf7f2;
  --shadow:        0.3rem 0.3rem 0 #111;
  --shadow-sm:     0.2rem 0.2rem 0 #111;
  --shadow-hi-btn: 0.3rem 0.3rem 0 #7a0a50; /* dark purple-pink for hi btn on light */
  --bw:            0.25rem;
}

/* ── DARK ── */
[data-theme="dark"] {
  --bg:            #191510;
  --bg2:           #211c16;
  --surface:       #241e17;
  --border:        #ddd5c0;
  --text:          #ede8de;
  --text-mid:      #b8b0a0;
  --text-dim:      #8a8070;
  --tag-bg:        #ede8de;
  --tag-fg:        #111;
  --shadow:        0.3rem 0.3rem 0 #ddd5c0;
  --shadow-sm:     0.2rem 0.2rem 0 #ddd5c0;
  --shadow-hi-btn: 0.3rem 0.3rem 0 #ddd5c0; /* same as border in dark */
  --bw:            0.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #191510;
    --bg2:           #211c16;
    --surface:       #241e17;
    --border:        #ddd5c0;
    --text:          #ede8de;
    --text-mid:      #b8b0a0;
    --text-dim:      #8a8070;
    --tag-bg:        #ede8de;
    --tag-fg:        #111;
    --shadow:        0.3rem 0.3rem 0 #ddd5c0;
    --shadow-sm:     0.2rem 0.2rem 0 #ddd5c0;
    --shadow-hi-btn: 0.3rem 0.3rem 0 #ddd5c0;
    --bw:            0.25rem;
  }
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  min-height: 100vh;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: 'Courier New', monospace;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}

em-oji {
  font-family: 'OpenMoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  font-style: normal;
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  height: 3.375rem;
  background: var(--bg);
  border-bottom: var(--bw) solid var(--border);
}

.nav-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.2rem; color: var(--text);
  letter-spacing: -0.01em;
}
/* yet.moe — "yet" is text, ".moe" is pink */
.nav-logo em { color: var(--pink); font-style: normal; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; }

.nav-links {
  display: flex; gap: 1.5rem; list-style: none;
  font-size: 0.85rem; font-weight: 500;
}
.nav-links a { color: var(--text-mid); }
.nav-links a:hover { color: var(--orange); text-decoration: none; }

.icon-btn {
  border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--text);
  width: 2.125rem; height: 2.125rem;
  font-size: 0.95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.1s, transform 0.1s;
  font-family: inherit;
}
.icon-btn:hover { box-shadow: none; transform: translate(0.2rem, 0.2rem); }

.lang-switcher {
  display: flex;
  position: relative;
  border: var(--bw) solid var(--border);
  background: var(--bg2);
  padding: 0.18rem;
}
.lang-pill {
  position: absolute;
  top: 0.18rem; bottom: 0.18rem;
  left: 0.18rem;
  width: calc(33.333% - 0.12rem);
  background: var(--orange);
  transition: transform 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.lang-btn {
  flex: 1;
  border: none;
  background: transparent; color: var(--text-dim);
  padding: 0 0.4rem; height: 1.85rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; font-family: 'Archivo', sans-serif;
  position: relative; z-index: 1;
  transition: color 0.2s;
  white-space: nowrap;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: #fff; }

/* ── LAYOUT ── */
.wrap { max-width: 56.25rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── HERO ── */
.hero {
  padding: 5rem 1.5rem 4rem;
  max-width: 56.25rem; margin: 0 auto;
  border-bottom: var(--bw) solid var(--border);
}

.eyebrow {
  display: inline-block;
  background: var(--tag-bg); color: var(--tag-fg);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25em 0.75em; margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 1.05; letter-spacing: -0.025em;
  margin-bottom: 1.75rem; max-width: 22rem;
}
.hero h1 em { color: var(--orange); font-style: normal; }

.hero-body { max-width: 36rem; display: flex; flex-direction: column; gap: 0.875rem; }
.hero-lead { font-size: 1.05rem; color: var(--text); line-height: 1.7; font-weight: 500; }
.hero-sub { font-size: 0.9rem; color: var(--text-mid); line-height: 1.75; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.note { font-size: 0.78rem; color: var(--text-dim); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 1.2rem;
  font-family: 'Archivo', sans-serif; font-size: 0.85rem; font-weight: 600;
  border: var(--bw) solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; box-shadow: var(--shadow);
  transition: box-shadow 0.1s, transform 0.1s;
  text-decoration: none; line-height: 1;
}
.btn:hover { box-shadow: none; transform: translate(0.3rem, 0.3rem); text-decoration: none; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-lt); }
.btn-ghost { background: transparent; }

/* ── SECTION LABEL ── */
.slabel {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1.5rem;
}

/* ─────────────────────────────────────────
   SERVICES — "zine manifest" layout
   No outer box. Tier = bold section heading
   with thick colored underline. Rows = full
   width with just a bottom hairline.
───────────────────────────────────────── */
.services-section { border-bottom: var(--bw) solid var(--border); padding: 3.5rem 1.5rem; }

.svc-tier-block { margin-bottom: 2.5rem; }
.svc-tier-block:last-child { margin-bottom: 0; }

.svc-tier-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  border-bottom: var(--bw) solid;
  display: flex; align-items: center; gap: 0.75rem;
}
.svc-tier-label.t-free    { color: #3a9e58; border-color: #3a9e58; }
.svc-tier-label.t-support { color: var(--pink); border-color: var(--pink); }
.svc-tier-label.t-sponsor { color: var(--orange); border-color: var(--orange); }

.svc-tier-price {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.7;
}

.svc-row {
  display: grid;
  grid-template-columns: 12rem 1fr 1.5rem;
  align-items: center;
  gap: 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--bg2);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
  /*border-left: 0.25rem solid transparent;
  transition: border-color 0.12s, background 0.12s;*/
}
/* default hover = orange (sponsor section) */
.svc-row:hover {
  background: var(--bg2);
  border-left-color: var(--orange);
}
/* per-section accent colors */
.t-free-rows    .svc-row:hover { border-left-color: #3a9e58; }
.t-support      .svc-row:hover { border-left-color: var(--pink); }

.svc-left {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.svc-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.92rem; color: var(--text);
  display: flex; align-items: center; gap: 0.4rem;
}
.svc-url {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem; color: var(--text-dim);
}
.svc-desc {
  font-size: 0.82rem; color: var(--text-mid); line-height: 1.5;
}

.dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1.5px solid var(--border); flex-shrink: 0;
  justify-self: end;
}
.dot.up   { background: #4caf6a; animation: blink 2.5s infinite; }
.dot.soon { background: #f0a030; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── TIERS ── */
.tiers-section { border-bottom: var(--bw) solid var(--border); padding: 3.5rem 1.5rem; }

.tiers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--bw) solid var(--border);
}

.tier {
  padding: 1.75rem 1.375rem;
  border-right: var(--bw) solid var(--border);
  display: flex; flex-direction: column; gap: 0.875rem;
}
.tier:last-child { border-right: none; }

/* SUPPORTER = pink highlight */
.tier.hi {
  background: var(--pink);
}
.tier.hi .tname  { color: rgba(255,255,255,.7); }
.tier.hi .tprice { color: #fff; }
.tier.hi .tprice small { color: rgba(255,255,255,.6); }
.tier.hi .tdesc  { color: rgba(255,255,255,.75); }
.tier.hi .perk   { color: rgba(255,255,255,.9); }
.tier.hi .perk::before { color: rgba(255,255,255,.55); }
.tier.hi .poff   { color: rgba(255,255,255,.35); opacity: 1; }
.tier.hi .poff::before { content: '·'; }
.tier.hi code    { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.15); color: #fff; }
/* Fix: shadow must move with button on hover, same as normal buttons */
.tier.hi .btn {
  background: #fff; color: var(--pink); border-color: #fff;
  box-shadow: var(--shadow-hi-btn);
}
.tier.hi .btn:hover {
  background: #ffe0f8;
  box-shadow: none;
  transform: translate(0.3rem, 0.3rem);
}

.tname { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); }
.tprice { font-family: 'Archivo Black', sans-serif; font-size: 2.2rem; line-height: 1; color: var(--text); }
.tprice small { font-family: 'Archivo', sans-serif; font-size: 0.82rem; font-weight: 400; color: var(--text-dim); }
.tdesc { font-size: 0.8rem; color: var(--text-mid); line-height: 1.6; }

.perks { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.perk {
  font-size: 0.8rem; color: var(--text-mid);
  padding-left: 1rem; position: relative; line-height: 1.5;
}
.perk::before { content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 700; font-size: 0.72rem; }
.poff { color: var(--text-dim); opacity: .5; }
.poff::before { content: '·'; color: var(--text-dim) !important; }

/* ── ABOUT ── */
.about-section { border-bottom: var(--bw) solid var(--border); padding: 3.5rem 1.5rem; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.ablock h3 {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.05rem;
  margin-bottom: 0.875rem; color: var(--text);
}
.ablock p {
  font-family: 'Nunito', sans-serif; font-size: 0.9rem;
  color: var(--text-mid); line-height: 1.85;
}

.infra-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Nunito', sans-serif; font-size: 0.84rem;
}
.infra-table tr { border-bottom: 1px solid var(--bg2); }
.infra-table tr:last-child { border-bottom: none; }
.infra-table td { padding: 0.5rem 0; color: var(--text-mid); vertical-align: middle; }
.infra-table td:last-child {
  text-align: right; color: var(--text-dim);
  font-size: 0.78rem; padding-left: 1rem; white-space: nowrap;
}

.callout {
  margin-top: 2.25rem;
  border: var(--bw) solid var(--border); background: var(--surface);
  padding: 1.125rem 1.375rem; box-shadow: var(--shadow);
  font-family: 'Nunito', sans-serif; font-size: 0.88rem;
  color: var(--text-mid); line-height: 1.75;
}
.callout strong { color: var(--text); font-weight: 700; }

/* ── FOOTER ── */
footer {
  padding: 1.75rem 1.5rem; max-width: 56.25rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.flogo { font-family: 'Archivo Black', sans-serif; font-size: 0.9rem; color: var(--text-dim); }
.flogo em { color: var(--pink); font-style: normal; }
.flinks { list-style: none; display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.8rem; }
.flinks a { color: var(--text-dim); }
.flinks a:hover { color: var(--orange); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 44rem) {
  .tiers-grid { grid-template-columns: 1fr; }
  .tier { border-right: none; border-bottom: var(--bw) solid var(--border); }
  .tier:last-child { border-bottom: none; }
  .about-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  footer { flex-direction: column; align-items: flex-start; }
  .svc-row { grid-template-columns: 1fr 1.5rem; }
  .svc-desc { display: none; }
}

/* ── FADE IN ── */
.ri { opacity: 0; transform: translateY(0.75rem); animation: ri 0.4s ease forwards; }
@keyframes ri { to { opacity: 1; transform: translateY(0); } }
.d1{animation-delay:.06s} .d2{animation-delay:.13s} .d3{animation-delay:.22s} .d4{animation-delay:.32s}