:root{
  --forest:#27342B; --forest-2:#2F4034; --deep:#1B241D; --cream:#EADFC6; --muted:#B9B29C;
  --ember:#D9812F; --ember-hi:#EA9A4A; --ember-dark:#B5641A; --moss:#6B8F4E; --earth:#4E3B2A; --bark:#8B6B47;
  --line:rgba(234,223,198,.12); --line-hi:rgba(234,223,198,.22);
  --max:1120px; --radius:20px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;overflow-x:clip}
body{
  margin:0;overflow-x:clip;color:var(--cream);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 88% -6%,rgba(217,129,47,.15),transparent 62%),
    radial-gradient(760px 480px at -8% 14%,rgba(107,143,78,.16),transparent 60%),
    var(--deep);
  background-repeat:no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cream);outline-offset:3px;border-radius:8px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---- i18n -------------------------------------------------------------
   Each translatable element ("t") holds one child per language. All children
   share one grid cell, so the element always reserves the size of the longer
   text and the inactive language is only hidden, never removed from layout.
   Result: DE and EN render with identical geometry. */
.t{display:grid;hyphens:auto;-webkit-hyphens:auto}
.t>[data-l]{grid-area:1/1;min-width:0}
html[lang="en"] .t>[data-l="de"],
html[lang="de"] .t>[data-l="en"]{visibility:hidden}
/* inline-level bilingual labels (nav, buttons, pills) */
a>.t,.btn .t,.badge .t,.eyebrow.t{width:max-content;max-width:100%}

.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--deep);padding:.5rem .9rem;border-radius:8px;z-index:30}
.skip:focus{left:8px}

/* ---- header (floating pill) ------------------------------------------ */
.top{
  position:sticky;top:12px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(calc(100% - 1.5rem),var(--max));margin:12px auto 0;padding:.5rem .6rem .5rem 1rem;
  background:rgba(27,36,29,.66);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);border-radius:999px;
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.top.scrolled{background:rgba(27,36,29,.88);border-color:var(--line-hi);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--cream);font:800 1rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
.brand img{border-radius:9px}
.top nav{display:flex;align-items:center;gap:.25rem}
.top nav>a{color:var(--cream);text-decoration:none;font-size:.95rem;font-weight:500;padding:.45rem .9rem;border-radius:999px;opacity:.82;transition:background .15s,opacity .15s}
.top nav>a:hover{opacity:1;background:rgba(234,223,198,.09)}
.lang{display:flex;margin-left:.5rem;padding:3px;border:1px solid var(--line-hi);border-radius:999px}
.lang button{background:none;border:0;color:var(--cream);font:700 .78rem var(--sans);letter-spacing:.04em;padding:.35rem .75rem;border-radius:999px;cursor:pointer;opacity:.7;transition:background .15s,color .15s}
.lang button:hover{opacity:1}
.lang button[aria-pressed="true"]{background:var(--cream);color:var(--deep);opacity:1}

/* ---- hero -------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;
  gap:clamp(2rem,5vw,4.5rem);max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,8vw,6.5rem) clamp(1rem,4vw,2rem) clamp(3.5rem,8vw,6rem);
}
.badge{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;padding:.4rem .95rem .4rem .8rem;border:1px solid var(--line-hi);border-radius:999px;background:rgba(39,52,43,.55);font-size:.85rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(217,129,47,.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(217,129,47,.55)}70%,100%{box-shadow:0 0 0 9px rgba(217,129,47,0)}}
.hero h1{margin:0 0 1.3rem;line-height:0}
.hero h1 img{width:min(100%,600px)}
.tagline{margin:0 0 1rem;font:800 clamp(1.7rem,3.5vw,2.6rem)/1.12 var(--sans);letter-spacing:-.025em}
.tagline .l1,.tagline .l2{display:block}
.tagline .l2{color:var(--ember)}
.lead{margin:0 0 2rem;max-width:33rem;color:var(--muted);font-size:1.15rem}

.hero-text{min-width:0}
.hero-art{position:relative;isolation:isolate;justify-self:center;width:min(100%,460px)}
.hero-art .frame{position:relative;transform:rotate(2.5deg);animation:float 8s ease-in-out infinite}
.hero-art .frame::before{content:"";position:absolute;inset:-14px;z-index:-1;border:1px solid var(--line-hi);border-radius:46px;transform:rotate(-5deg)}
.hero-art img{border-radius:36px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line-hi)}
.glow{position:absolute;z-index:-2;inset:-18% -14% -8% -14%;background:radial-gradient(closest-side,rgba(217,129,47,.34),transparent 72%);animation:pulse 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- buttons ----------------------------------------------------------- */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem;max-width:35rem}
.cta.center{margin-inline:auto}
.btn{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.8rem 1rem .8rem 1.2rem;font-size:1rem;white-space:nowrap;border-radius:999px;border:1.5px solid var(--line-hi);background:rgba(39,52,43,.5);color:var(--cream);text-decoration:none;font-weight:700;letter-spacing:.005em;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);background:var(--forest-2);border-color:var(--bark)}
.btn-primary{background:linear-gradient(180deg,var(--ember-hi),var(--ember));border-color:transparent;color:#1B1208;box-shadow:0 8px 24px rgba(217,129,47,.28)}
.btn-primary:hover{background:linear-gradient(180deg,#F0A55A,var(--ember-hi));border-color:transparent;box-shadow:0 12px 30px rgba(217,129,47,.38)}
.btn .soon{font:700 .68rem var(--sans);text-transform:uppercase;letter-spacing:.09em;padding:.2rem .55rem;border-radius:999px;background:rgba(0,0,0,.24);font-style:normal}
.btn[aria-disabled="true"]{cursor:default}
.btn[aria-disabled="true"]:hover{transform:none}
.btn:not([aria-disabled="true"]) .soon{display:none}

/* ---- sections ---------------------------------------------------------- */
.block{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2rem)}
.eyebrow{margin:0 0 .8rem;font:700 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.block h2{margin:0 0 .8rem;font:800 clamp(1.9rem,4.2vw,2.9rem)/1.1 var(--sans);letter-spacing:-.03em}
.intro{max-width:44rem;margin:0 0 2.4rem;color:var(--muted);font-size:1.15rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{
  display:flex;align-items:flex-start;gap:1.3rem;padding:1.7rem;border-radius:var(--radius);
  background:linear-gradient(155deg,rgba(47,64,52,.85),rgba(39,52,43,.55));
  border:1px solid var(--line);transition:transform .2s,border-color .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(217,129,47,.5);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.ico{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(0,0,0,.24);border:1px solid var(--line)}
.ico svg{width:38px;height:38px}
.card-body{min-width:0}
.card h3{margin:.1rem 0 .4rem;font:750 1.25rem/1.25 var(--sans);letter-spacing:-.01em}
.card p{margin:0;color:var(--muted)}
.note{margin:1.6rem 0 0;font-size:.9rem;color:var(--muted);font-style:italic}

/* roadmap */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.steps li{position:relative;padding-top:2.1rem}
.steps li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--earth);box-shadow:0 0 0 4px var(--deep),0 0 0 5px var(--line-hi)}
.steps li::after{content:"";position:absolute;left:26px;right:-1.4rem;top:8px;height:2px;background:var(--earth);border-radius:2px}
.steps li:last-child::after{display:none}
.steps li.now::before{background:var(--ember);box-shadow:0 0 0 4px var(--deep),0 0 0 5px var(--ember),0 0 22px rgba(217,129,47,.65)}
.steps li.now::after{background:linear-gradient(90deg,var(--ember),var(--earth))}
.when{margin:0 0 .35rem;font:700 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.now .when{color:var(--ember)}
.steps h3{margin:0 0 .5rem;font:750 1.1rem/1.25 var(--sans);letter-spacing:-.01em}
.steps li>p:last-child{margin:0;color:var(--muted)}

/* about the developer */
.about{padding-top:clamp(1rem,3vw,2rem)}
.about-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.5rem,4vw,2.6rem);border-radius:28px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(47,64,52,.7),rgba(39,52,43,.3))}
.portrait{width:clamp(150px,22vw,220px)}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px;transform:rotate(-2.5deg);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px var(--line-hi)}
.about-text h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.about-text p:not(.eyebrow){margin:0 0 .9rem;color:var(--muted);max-width:40rem}
.about-text p:last-child{margin-bottom:0}

/* join panel */
.join{padding-top:clamp(2rem,5vw,3.5rem)}
.panel{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(2.2rem,6vw,4.2rem) clamp(1.2rem,5vw,3rem);border-radius:28px;border:1px solid var(--line-hi);
  background:radial-gradient(620px 300px at 50% -10%,rgba(217,129,47,.26),transparent 70%),linear-gradient(160deg,var(--forest-2),var(--forest));
}
.panel .intro{margin:0 auto 2rem}
.panel h2{margin-bottom:.8rem}

/* ---- footer ------------------------------------------------------------ */
footer{margin-top:1.5rem}
.tooth{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpolygon points='0,0 28,0 14,14' fill='%234E3B2A'/%3E%3C/svg%3E") repeat-x;opacity:.9}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;max-width:var(--max);margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 3rem;color:var(--muted);font-size:.95rem}
.foot p{margin:0}
.foot .brand{font-size:.9rem}
.foot .links{display:flex;gap:1.4rem}
.foot .links a{color:var(--cream);text-decoration:none;opacity:.85}
.foot .links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ---- scroll reveal (only when JS is active) ---------------------------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .card.reveal.in,.js .btn{transition-delay:0s}
.js .hero-art.reveal.in{transform:none}

/* ---- legal pages ------------------------------------------------------- */
.legal{max-width:760px;margin:0 auto;padding:3rem 1.25rem 4rem}
.legal h1{font:800 2rem var(--sans);letter-spacing:-.02em;margin:0 0 1rem}
.legal h2{font:750 1.25rem var(--sans);margin:2rem 0 .4rem}
.legal .todo{background:#3a2a17;border:1px dashed var(--ember);border-radius:10px;padding:.8rem 1rem;color:#f0d9b8}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .steps li:nth-child(2)::after{display:none}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-art{order:-1;width:min(64%,300px)}
  .top nav>a{display:none}
  .lang{margin-left:0}
  .cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .about-card{grid-template-columns:1fr;justify-items:start}
  .portrait{width:132px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{padding:0 0 1.8rem 2.4rem}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{top:.15rem}
  .steps li::after,.steps li:nth-child(2)::after{display:block;left:8px;right:auto;top:1.6rem;bottom:-.3rem;width:2px;height:auto}
  .steps li:last-child::after{display:none}
  .steps li.now::after{background:linear-gradient(180deg,var(--ember),var(--earth))}
  .card{flex-direction:column;gap:1rem}
  .foot{justify-content:center;text-align:center;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glow,.dot,.hero-art .frame{animation:none}
  .btn,.card,.top{transition:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}