/* =========================================================================
   zBRETT · design system  (v0.1 · 2026)
   Source of truth: "zBRETT Design System.html".
   E-paper-minimal: warm paper, warm ink, two signal tones.
     · Orange  = Funknetz  (over the air: LoRa, Beacon, Relay, live)
     · Blue    = Festnetz  (over the line: Web, Gateway, Links, focus, action)
   One typeface (JetBrains Mono). 1-bit-honest: meaning from form & position.
   ========================================================================= */

/* ---------- tokens : light (paper) is the default register ---------- */
:root{
  --paper:      #EDE7D9;   /* background            */
  --paper-2:    #F6F1E6;   /* cards / surfaces      */
  --ink:        #1A1611;   /* text / mark           */
  --ink-body:   #26221C;   /* strong body           */
  --ink-soft:   #3A342B;   /* body                  */
  --muted:      #4A4238;   /* muted body            */
  --gray:       #8A8073;   /* secondary text        */
  --gray-2:     #6A6153;   /* fine print            */
  --hair:       #E3DCCB;   /* hairline divider      */
  --thread:     #CFC6B4;   /* thread indent line    */
  --line:       #1A1611;   /* hard border           */

  --funk:       #F0521E;   /* signal · Funknetz     */
  --funk-ink:   #D6440E;   /* funk on paper (links) */
  --festnetz:   #1E90FF;   /* signal · Festnetz     */
  --festnetz-2: #1877D6;   /* festnetz pressed      */

  --on-signal:  #F6F1E6;   /* text on a signal fill */

  --grid: rgba(0,0,0,0.031);        /* paper grid line       */
  --shadow: 0 10px 30px rgba(0,0,0,0.10);
  --shadow-hi: 0 18px 48px rgba(0,0,0,0.14);

  --wrap: 1120px;
  --pad: 40px;
  --radius: 3px;

  --header-h: 62px;
}

/* ---------- tokens : dark (ink) register ---------- */
[data-theme="dark"]{
  --paper:      #14110D;
  --paper-2:    #211C16;
  --ink:        #F3EEE2;
  --ink-body:   #EAE3D4;
  --ink-soft:   #D8D0C0;
  --muted:      #B8AF9E;
  --gray:       #948B7C;
  --gray-2:     #A79E8D;
  --hair:       #322B22;
  --thread:     #3E362B;
  --line:       #4A4133;

  --funk:       #FF6A34;
  --funk-ink:   #FF7A47;
  --festnetz:   #4AA3FF;
  --festnetz-2: #6FB6FF;

  --on-signal:  #14110D;

  --grid: rgba(255,255,255,0.028);
  --shadow: 0 12px 34px rgba(0,0,0,0.44);
  --shadow-hi: 0 20px 54px rgba(0,0,0,0.5);
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-mono);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  overflow-x:hidden;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out);
}
img,svg{display:block;max-width:100%}
a{color:var(--funk-ink);text-decoration:none;transition:color .18s var(--ease-out)}
a:hover{color:var(--ink)}
::selection{background:var(--funk);color:var(--on-signal)}
:focus-visible{outline:2.5px solid var(--festnetz);outline-offset:3px;border-radius:1px}
strong,b{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:76px 0}
.section--tight{padding:52px 0}
.eyebrow{
  display:flex;align-items:baseline;gap:14px;margin-bottom:10px;
}
.eyebrow .num{font-size:11px;letter-spacing:.28em;color:var(--gray);font-weight:600}
.eyebrow h2{font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:.01em;line-height:1.15}
.lead-sm{font-size:13.5px;color:var(--gray);max-width:660px;line-height:1.7;margin-bottom:30px}

/* ---------- glyph ---------- */
.glyph{color:var(--ink);flex:0 0 auto}
.glyph .sig{fill:var(--funk)}
.glyph--soft{color:var(--thread)}
.glyph--soft .sig{fill:var(--thread)}

/* ---------- wordmark ---------- */
.wordmark{font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);display:inline-block}
.wordmark .z{font-weight:500;font-size:.62em;color:var(--gray)}
.wordmark--onink{color:var(--paper-2)}
.wordmark--onink .z{color:var(--gray)}

/* =========================================================================
   HEADER  ·  sticky compact bar + slide-down drawer
   ========================================================================= */
.topbar{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(9px);
  -webkit-backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1.5px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;padding-top:0;padding-bottom:0}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .wordmark{font-size:19px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:var(--ink-soft);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:8px 12px;border-radius:2px;position:relative;
}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--funk);
}
.utils{display:flex;align-items:center;gap:8px}
.iconbtn{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  border-radius:2px;font-family:var(--font-mono);font-size:14px;transition:.18s var(--ease-out);
}
.iconbtn:hover{background:var(--ink);color:var(--paper-2)}
.lang{font-size:12px;font-weight:700;letter-spacing:.06em}
.lang .sep{color:var(--gray);margin:0 2px}
.lang a{color:var(--gray)}
.lang a[aria-current="true"]{color:var(--ink)}

.menu-toggle{display:none}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:11px 20px;border:1.5px solid var(--line);cursor:pointer;border-radius:2px;
  transition:transform .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn--primary:hover{color:var(--paper-2);box-shadow:var(--shadow)}
.btn--send{background:var(--festnetz);color:#fff;border-color:var(--festnetz)}
.btn--send:hover{color:#fff;background:var(--festnetz-2);box-shadow:0 8px 22px color-mix(in srgb,var(--festnetz) 40%,transparent)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper-2)}
.btn--sm{padding:8px 14px;font-size:12px}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding:clamp(48px,8vw,96px) 0 68px}
.hero__lock{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.hero__title{font-size:clamp(56px,11vw,104px);line-height:.9;letter-spacing:-.02em}
.origin{
  margin-top:18px;font-size:15px;letter-spacing:.03em;color:var(--muted);
  display:flex;align-items:center;gap:11px;
}
.origin .bar{width:24px;height:3px;background:var(--funk);display:inline-block;flex:0 0 auto}
.hero__sub{
  max-width:640px;margin-top:34px;font-size:16px;line-height:1.75;color:var(--muted);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero__meta{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1.5px solid var(--line);
}
.stat{display:flex;flex-direction:column;gap:3px}
.stat .n{font-size:26px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.stat .n .u{font-size:14px;font-weight:600;color:var(--gray);margin-left:3px}
.stat .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* =========================================================================
   CARDS & GRIDS
   ========================================================================= */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--duo{grid-template-columns:0.85fr 1.15fr;gap:24px;align-items:start}
@media (max-width: 780px){ .grid--duo{grid-template-columns:1fr} }

.card{
  border:1.5px solid var(--line);background:var(--paper-2);padding:26px 24px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card--ink{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.card--ink .card__title{color:var(--paper-2)}
.card--ink .card__body{color:#B7AE9F}
.card__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.card__title{font-size:15px;font-weight:700;letter-spacing:.02em}
.card__body{font-size:13px;color:var(--gray);line-height:1.65;margin-top:7px}
.card__num{font-size:13px;font-weight:800;color:var(--funk);letter-spacing:.06em}
.card__ico{height:44px;display:flex;align-items:center;color:var(--ink);margin-bottom:6px}

/* feature card with big index number */
.step{position:relative;overflow:hidden}
.step .idx{
  font-size:46px;font-weight:800;line-height:1;color:var(--ink);opacity:.14;
  position:absolute;top:14px;right:18px;font-variant-numeric:tabular-nums;
}
.step h3{font-size:16px;font-weight:700;margin:0 0 8px;letter-spacing:.01em}
.step p{font-size:13.5px;color:var(--muted);line-height:1.7}

/* pill / tags */
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:600;padding:5px 11px;border:1px solid var(--line);color:var(--ink);border-radius:2px}
.tag--on{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.tag--funk{color:var(--funk-ink);border-color:color-mix(in srgb,var(--funk) 55%,var(--line))}
.tag--web{color:var(--festnetz);border-color:color-mix(in srgb,var(--festnetz) 55%,var(--line))}

/* node status legend */
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot--live{background:var(--funk)}
.dot--relay{background:var(--festnetz)}
.dot--store{background:var(--gray)}
.legend{display:flex;flex-direction:column;gap:11px;font-size:12.5px;font-weight:600}
.legend span{display:flex;align-items:center;gap:10px}

/* callout / aha */
.callout{
  border:1.5px solid var(--line);border-left-width:5px;border-left-color:var(--funk);
  background:var(--paper-2);padding:26px 28px;
}
.callout--web{border-left-color:var(--festnetz)}
.callout p{font-size:clamp(16px,2.4vw,21px);line-height:1.5;font-weight:700;letter-spacing:-.01em}
.callout .small{font-size:13px;font-weight:400;color:var(--gray);margin-top:12px;line-height:1.7}

/* two-column prose row */
.split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start}
.prose p{font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:16px;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:17px;font-weight:700;margin:26px 0 10px}
.prose h3:first-child{margin-top:0}

/* code blocks */
pre.code{
  background:var(--ink);color:#D7CEBE;border:1.5px solid var(--line);border-radius:4px;
  padding:18px 20px;overflow-x:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  white-space:pre;tab-size:2;
}
pre.code .c{color:var(--gray)}          /* comment / dim */
pre.code .f{color:var(--funk)}          /* funk highlight */
pre.code .w{color:var(--festnetz)}      /* web highlight */
code{font-family:var(--font-mono);font-size:.92em;background:color-mix(in srgb,var(--ink) 8%,transparent);
  padding:1px 6px;border-radius:3px;color:var(--ink)}
[data-theme="dark"] pre.code{background:#0F0C08}

/* comparison table */
.tbl{width:100%;border-collapse:collapse;border:1.5px solid var(--line);background:var(--paper-2);font-size:13px}
.tbl caption{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);padding:0 0 12px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl thead th{font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--line);letter-spacing:.02em}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.k{color:var(--gray);white-space:nowrap}
.tbl .yes{color:var(--funk-ink);font-weight:700}
.tbl .no{color:var(--gray)}
.tbl tr:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}

/* =========================================================================
   THREAD DEMO  ·  the design system's signature surface
   ========================================================================= */
.demo{
  border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-2);
  box-shadow:var(--shadow);
}
.demo__chrome{
  background:var(--paper);border-bottom:1.5px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:10px 13px;
}
.demo__chrome .d{width:10px;height:10px;border-radius:50%;background:var(--thread)}
.demo__url{
  margin-left:8px;background:var(--paper-2);border:1px solid var(--hair);border-radius:4px;
  font-size:11px;color:var(--gray-2);padding:4px 12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.demo__body{padding:20px 22px}
.demo__brett{font-size:18px;font-weight:800}
.demo__meta{font-size:11px;color:var(--gray);margin-bottom:14px}
.post{border-top:1px solid var(--hair);padding:12px 0}
.post:first-of-type{border-top:2px solid var(--line)}
.post__who{font-size:12px;font-weight:700}
.post__who .t{color:var(--gray);font-weight:400}
.post__txt{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px}
.post--reply{margin-left:6px;border-left:2px solid var(--thread);border-top:0;padding:12px 0 0 15px}
.live{color:var(--funk)}
.relayed{color:var(--festnetz)}
.compose{display:flex;gap:8px;margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
.compose__field{flex:1;border:1.5px solid var(--line);background:var(--paper);font-size:12px;color:var(--gray);padding:9px 12px;border-radius:2px}

/* console mock (1-bit) */
.console{background:#26241E;border-radius:16px;padding:16px 14px 12px;box-shadow:var(--shadow-hi)}
.console__screen{
  background:#fff;color:#000;font-family:var(--font-mono);padding:13px;border-radius:3px;
  filter:grayscale(1) contrast(1.45);min-height:300px;
}
.console__top{display:flex;justify-content:space-between;font-size:11px;border-bottom:2px solid #000;padding-bottom:6px;font-weight:700}
.console__k{font-size:9px;letter-spacing:.18em;margin:10px 0 6px}
.console__row{font-size:12px;line-height:1.9;display:flex;justify-content:space-between;padding:1px 5px}
.console__row--on{background:#000;color:#fff}
.console__foot{border-top:2px solid #000;margin-top:12px;padding-top:6px;font-size:11px;font-weight:700;display:flex;gap:10px;flex-wrap:wrap}
.console__btns{display:flex;justify-content:center;gap:8px;margin-top:12px}
.console__btns span{width:26px;height:14px;background:#3A362D;border-radius:3px}
.console__btns .r{width:14px;border-radius:50%;background:var(--funk)}

/* =========================================================================
   BANNER (dark CTA strip)
   ========================================================================= */
.banner{background:var(--ink);color:var(--paper-2);border:1.5px solid var(--ink);padding:clamp(40px,6vw,64px) clamp(28px,5vw,56px)}
.banner h2{font-size:clamp(24px,4vw,38px);letter-spacing:-.02em;line-height:1.06;color:var(--paper-2)}
.banner p{color:#B7AE9F;font-size:15px;line-height:1.75;max-width:560px;margin-top:16px}
.banner .btn--ghost{color:var(--paper-2);border-color:var(--paper-2)}
.banner .btn--ghost:hover{background:var(--paper-2);color:var(--ink)}

/* honest limits list */
.limits{display:grid;gap:2px;border:1.5px solid var(--line);background:var(--line)}
.limits > div{background:var(--paper-2);padding:20px 22px}
.limits h4{font-size:14px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.limits h4::before{content:"✗";color:var(--funk-ink);font-weight:800}
.limits p{font-size:13px;color:var(--gray);line-height:1.65}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{border-top:1.5px solid var(--line);margin-top:20px;padding:52px 0 40px;background:var(--paper-2)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer__brand .wordmark{font-size:24px}
.footer__tagline{font-size:12px;color:var(--gray);margin-top:12px;letter-spacing:.03em}
.footer h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer ul a{color:var(--ink-soft);font-size:13px}
.footer ul a:hover{color:var(--funk-ink)}
.footer__base{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--hair);font-size:12px;color:var(--gray);
}
.footer__base a{color:var(--ink-soft)}
.footer__base a:hover{color:var(--funk-ink)}
.footer__legal{display:flex;gap:10px;align-items:center}

/* legal / prose pages */
.legal{max-width:760px}
.legal h2{font-size:19px;font-weight:700;margin:34px 0 10px;letter-spacing:.01em}
.legal h3{font-size:15px;font-weight:700;margin:22px 0 6px}
.legal p{font-size:14px;line-height:1.8;color:var(--ink-soft);margin-bottom:12px}
.legal ul{margin:0 0 14px 20px}
.legal li{font-size:14px;line-height:1.75;color:var(--ink-soft);margin-bottom:5px}
.legal address{font-style:normal;font-size:14px;line-height:1.9;color:var(--ink-soft)}
.legal .k{color:var(--gray)}
.todo{background:color-mix(in srgb,var(--funk) 24%,transparent);padding:0 5px;border-radius:2px;font-weight:700;color:var(--ink)}

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.drawer{
  position:fixed;inset:var(--header-h) 0 auto 0;z-index:49;
  background:var(--paper);border-bottom:1.5px solid var(--line);
  transform:translateY(-120%);transition:transform .4s var(--ease-out);
  padding:18px var(--pad) 26px;box-shadow:var(--shadow);
}
.drawer[data-open="true"]{transform:translateY(0)}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{font-size:16px;font-weight:700;color:var(--ink);padding:12px 4px;border-bottom:1px solid var(--hair)}
.drawer .btn{margin-top:18px;width:100%}
.drawer__lang{margin-top:18px;font-size:13px;font-weight:700;color:var(--gray)}
.drawer__lang a[aria-current="true"]{color:var(--ink)}
.scrimlock{overflow:hidden}

/* =========================================================================
   REVEAL animation
   ========================================================================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card--hover:hover{transform:none}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px){
  .nav, .utils .lang, .utils .theme-desktop{display:none}
  .menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border:1.5px solid var(--line);background:transparent;cursor:pointer;border-radius:2px;
  }
  .menu-toggle svg{width:20px;height:20px}
  .menu-toggle .l{stroke:var(--ink);stroke-width:2;stroke-linecap:round;transition:.3s var(--ease-out);transform-origin:center}
  .menu-toggle[aria-expanded="true"] .l1{transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .l2{opacity:0}
  .menu-toggle[aria-expanded="true"] .l3{transform:translateY(-6px) rotate(-45deg)}
  .split{grid-template-columns:1fr;gap:26px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width: 560px){
  :root{--pad:22px}
  .section{padding:56px 0}
  .hero__meta{gap:20px}
  .footer__grid{grid-template-columns:1fr}
  .hero__lock{gap:22px}
}

/* utility */
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.center{text-align:center}
.flexcol{display:flex;flex-direction:column}
.muted{color:var(--gray)}
.nowrap{white-space:nowrap}