/* ---------------------------------------------------------------------
   skillbyte · English section
   One stylesheet for every page under /en. The German pages each carry
   their own inline CSS because they were built one at a time; this
   section starts as a set, so it shares a system instead of copying one.
   Palette, spacing and the Fraunces italic accent match the German site.
   ------------------------------------------------------------------ */
:root{
  --acc:#29BFDE; --acc-lt:#8FE4F6; --acc-dk:#1B9DBA;
  --ink:#F2F6F8; --mute:#93A1AD; --dim:#6E8290;
  --bg:#07090C; --card:#0E141A; --line:rgba(255,255,255,.10);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --mono:"DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Roboto","Helvetica Neue",Arial,sans-serif;color:var(--ink);
  background:radial-gradient(90% 60% at 50% -10%,#12222D 0%,var(--bg) 55%),var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}
a{color:inherit}
img,svg,video{max-width:100%;display:block}
.sx{font-family:Fraunces,Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--acc-lt)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
section{padding:clamp(56px,7vw,var(--s6)) 0}

/* ── navigation ────────────────────────────────────────────────── */
.enav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--s3);
  padding:14px clamp(20px,4vw,40px);
  background:linear-gradient(180deg,rgba(7,9,12,.94),rgba(7,9,12,.62) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.enav .lg{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.4px;flex:none}
.enav .lg svg{height:21px;width:auto}
.enav .lg .wort{display:flex;gap:0}
.enav nav{display:flex;gap:2px;margin-left:var(--s2)}
.enav nav a{font-size:14px;font-weight:600;color:var(--mute);text-decoration:none;padding:9px 13px;border-radius:100px;transition:color .2s,background .2s}
.enav nav a:hover,.enav nav a[aria-current]{color:var(--ink);background:rgba(255,255,255,.07)}
.enav .sp{flex:1}
.enav .de{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--acc-lt);
  border:1px solid rgba(143,228,246,.36);border-radius:100px;padding:8px 13px;text-decoration:none;transition:background .2s}
.enav .de:hover{background:rgba(143,228,246,.12)}
.enav .cta{background:var(--acc);color:#06141A;font-weight:800;font-size:13.5px;border-radius:100px;
  padding:11px 20px;text-decoration:none;transition:transform .15s,box-shadow .25s;white-space:nowrap}
.enav .cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(41,191,222,.34)}
.enav .burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .enav nav{position:fixed;inset:64px 12px auto 12px;flex-direction:column;gap:2px;background:#0C1319;
    border:1px solid var(--line);border-radius:16px;padding:10px;margin:0;display:none;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
  .enav nav.open{display:flex}
  .enav nav a{padding:13px 14px;font-size:15px}
  .enav .burger{display:block}
  .enav .de{display:none}
}
@media(max-width:520px){.enav .cta{padding:10px 15px;font-size:12.5px}.enav .lg{font-size:18px}}

/* ── type ──────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:blip 2.4s ease-in-out infinite;flex:none}
@keyframes blip{50%{opacity:.28}}
h1{font-size:clamp(2.1rem,5.4vw,4rem);font-weight:800;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
h2{font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:800;line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:700;line-height:1.28;letter-spacing:-.012em}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--mute);max-width:62ch}
p+p{margin-top:var(--s2)}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.hero .lead{margin-top:var(--s3)}
.hero h1{margin-top:var(--s2)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:100px;padding:14px 24px;
  font-size:15px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .25s,background .25s}
.btn.p{background:var(--acc);color:#06141A}
.btn.p:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(41,191,222,.34)}
.btn.s{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.04)}
.btn.s:hover{background:rgba(255,255,255,.09)}

/* ── number band ───────────────────────────────────────────────── */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:var(--s5)}
.band div{background:#0A1015;padding:var(--s3) var(--s3) 22px}
.band b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.band span{display:block;margin-top:6px;font-size:12.5px;color:var(--dim);line-height:1.45}
@media(max-width:860px){.band{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.band{grid-template-columns:1fr}}

/* ── cards ─────────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--s3);margin-top:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3{grid-template-columns:1fr}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:var(--s3);overflow:hidden;transition:border-color .25s,transform .25s}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:rgba(143,228,246,.4);transform:translateY(-2px)}
.card .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim)}
.card h3{margin:var(--s2) 0 10px}
.card p{font-size:14.5px;color:var(--mute)}
.card .go{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-size:13.5px;font-weight:700;color:var(--acc-lt)}
/* Watermark: the brand mark sits behind the card, the way the German
   sections do it. Low opacity, never in front of text. */
.card .wm{position:absolute;right:-34px;bottom:-40px;width:170px;opacity:.05;pointer-events:none}
.card>*{position:relative}

/* ── quote / proof ─────────────────────────────────────────────── */
.quote{border-left:2px solid var(--acc);padding-left:var(--s3);max-width:56ch}
.quote p{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:clamp(18px,2.2vw,24px);line-height:1.4;color:var(--ink)}
.quote cite{display:block;margin-top:var(--s2);font-style:normal;font-size:13px;color:var(--dim)}

/* ── steps ─────────────────────────────────────────────────────── */
.steps{counter-reset:st;margin-top:var(--s4);display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
.steps>div{background:#0A1015;padding:var(--s3);display:grid;grid-template-columns:64px 1fr;gap:var(--s3);align-items:start}
.steps>div:before{counter-increment:st;content:"0" counter(st);font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;color:var(--acc);padding-top:4px}
.steps h3{margin-bottom:8px}
.steps p{font-size:14.5px;color:var(--mute)}
@media(max-width:560px){.steps>div{grid-template-columns:1fr;gap:10px}}

/* ── faq ───────────────────────────────────────────────────────── */
.faq{margin-top:var(--s4);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:16px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:18px;font-size:22px;font-weight:400;color:var(--acc);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{padding:0 0 22px;font-size:15px;color:var(--mute);max-width:70ch}

/* ── closing cta ───────────────────────────────────────────────── */
.close{background:linear-gradient(180deg,rgba(41,191,222,.10),rgba(41,191,222,0));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.close .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.close p{margin-top:12px;color:var(--mute);max-width:52ch}

/* ── form ──────────────────────────────────────────────────────── */
.form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);max-width:560px}
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--mute);margin:var(--s2) 0 7px}
.form input,.form textarea,.form select{width:100%;background:#070B0F;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--acc)}
.form textarea{min-height:110px;resize:vertical}
.form button{width:100%;margin-top:var(--s3);background:var(--acc);color:#06141A;border:0;border-radius:100px;
  padding:15px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:transform .15s}
.form button:hover{transform:translateY(-1px)}
.form .fine{margin-top:14px;font-size:12px;color:var(--dim);line-height:1.5}
.form .ok{display:none;background:rgba(41,191,222,.10);border:1px solid rgba(143,228,246,.35);
  border-radius:14px;padding:18px;font-size:15px;color:var(--acc-lt)}
.form.done .ok{display:block}
.form.done .fields{display:none}

/* ── people ────────────────────────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:820px){.people{grid-template-columns:repeat(2,1fr)}}
.person{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.person .ph{aspect-ratio:1;background:linear-gradient(140deg,#123B48,#0B1D25);display:flex;align-items:center;justify-content:center}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .mono{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:38px;color:var(--acc-lt);opacity:.85}
.person .nm{padding:14px 16px 16px}
.person .nm b{display:block;font-size:15px}
.person .nm span{display:block;margin-top:3px;font-size:12.5px;color:var(--dim)}

/* ── misc ──────────────────────────────────────────────────────── */
.hr{height:1px;background:var(--line);border:0;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--line);border-radius:100px;padding:7px 12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}