/* =====================================================================
   AIwareness | Rebrand 2026 | site.css
   Blend of the AIwareness site (dark backgrounds: aurora, grid, grain,
   starfield) with the robin-hotz.com rebrand (system typography, real
   photos, panel components). Active palette: the original AIwareness
   purple > teal gradient, set by body.theme-classic (section 19) on every
   page. Without that class the four-colour rebrand gradient applies.
   Dark mode only for now.

   Contents
    1. Tokens
    2. Base, typography, helpers
    3. Ambient background (AIwareness)
    4. Icons and buttons
    5. Header, navigation, language switch
    6. Shared blocks (sections, panels, reveal)
    7. Home: hero
    8. Home: challenge to change
    9. Home: offers
   10. Home: vision and mission
   11. Home: event
   12. Home: how we work
   13. Home: founder
   14. Home: newsletter signup
   15. Home: contact
   16. Footer
   17. Hover, responsive, reduced motion
   ===================================================================== */

@property --spin-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-2: #0f0f14;
  --surface: rgba(17, 17, 24, .86);
  --surface-solid: #111118;
  --glass: rgba(16, 17, 27, .62);
  --glass-strong: rgba(12, 13, 21, .88);
  --ink: #f6f6fb;
  --text: #bfc0d0;
  --muted: #9294a9;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);
  --hover: rgba(255, 255, 255, .06);
  --c1: #6ee7ff;
  --c2: #a78bfa;
  --c3: #f472b6;
  --c4: #fdba74;
  --accent-text: #b5a0fc;
  --grad: linear-gradient(100deg, #6ee7ff 0%, #a78bfa 36%, #f472b6 68%, #fdba74 100%);
  --grad-v: linear-gradient(180deg, #6ee7ff, #a78bfa, #f472b6, #fdba74);
  --btn-ink: #0b0a14;
  --focus: #c4b5fd;
  --spot-c: rgba(255, 255, 255, .07);
  --muted-heading: #a4a6b9;
  --photo-exposure: 1.04;
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --frame-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
}

/* ---------- 2. Base, typography, helpers ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }
p { margin-bottom: 1.2em; text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(167, 139, 250, .35); color: var(--ink); }

/* Language switch: the inactive language is hidden */
html[lang="de"] .lang-en, html[lang="en"] .lang-de { display: none !important; }

h1, h2, h3 { font-family: var(--font); color: var(--ink); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
b, strong { font-weight: 650; }

.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: 40px; }
.muted { color: var(--muted); }
.skip {
  position: fixed; top: -100px; left: 20px; z-index: 200;
  padding: 12px 18px; border-radius: 12px;
  background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line-2);
}
.skip:focus { top: 14px; }

/* Gradient keyword in headings */
.o, .home-contact h2 em, .fact .n, .solution .t-title {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-style: normal; padding-bottom: .06em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 650; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad); }
.center .eyebrow::after { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(-1); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-text); font-weight: 650; font-size: .92rem;
  transition: color .2s ease;
}
.text-link:hover { color: var(--ink); }

/* Gentle colour grade for photos (filter defined inline in the page) */
.photo-grade-defs { position: absolute; width: 0; height: 0; pointer-events: none; overflow: hidden; }
.graded { filter: url("#brand-photo-grade") brightness(var(--photo-exposure)); }

/* ---------- 3. Ambient background (kept from the AIwareness site) ---------- */
.ambient { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.ambient span:nth-child(1) { width: 52vw; height: 52vw; left: 52%; top: -22vw; background: radial-gradient(circle, rgba(124, 58, 237, .5), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.ambient span:nth-child(2) { width: 46vw; height: 46vw; left: -14vw; top: -6vw; background: radial-gradient(circle, rgba(110, 231, 255, .26), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.ambient span:nth-child(3) { width: 40vw; height: 40vw; left: 30%; top: 60vh; background: radial-gradient(circle, rgba(244, 114, 182, .16), transparent 65%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-10vw, 8vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(12vw, 10vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-14vw, -16vh) scale(1.2); } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Icons and buttons ---------- */
.icon {
  display: inline-block; flex: none; width: 23px; height: 23px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.icon.sm { width: 17px; height: 17px; }
.icon-arrow { -webkit-mask-image: url(../img/icons/arrow-right.svg); mask-image: url(../img/icons/arrow-right.svg); }
.icon-check { -webkit-mask-image: url(../img/icons/check.svg); mask-image: url(../img/icons/check.svg); }
.icon-compass { -webkit-mask-image: url(../img/icons/compass.svg); mask-image: url(../img/icons/compass.svg); }
.icon-eye { -webkit-mask-image: url(../img/icons/eye.svg); mask-image: url(../img/icons/eye.svg); }
.icon-globe { -webkit-mask-image: url(../img/icons/globe.svg); mask-image: url(../img/icons/globe.svg); }
.icon-linkedin { -webkit-mask-image: url(../img/icons/linkedin.svg); mask-image: url(../img/icons/linkedin.svg); }
.icon-mail { -webkit-mask-image: url(../img/icons/mail.svg); mask-image: url(../img/icons/mail.svg); }
.icon-pin { -webkit-mask-image: url(../img/icons/pin.svg); mask-image: url(../img/icons/pin.svg); }
.icon-spark { -webkit-mask-image: url(../img/icons/spark.svg); mask-image: url(../img/icons/spark.svg); }
.icon-target { -webkit-mask-image: url(../img/icons/target.svg); mask-image: url(../img/icons/target.svg); }
.icon-users { -webkit-mask-image: url(../img/icons/users.svg); mask-image: url(../img/icons/users.svg); }
.icon-cal { -webkit-mask-image: url(../img/icons/calendar.svg); mask-image: url(../img/icons/calendar.svg); }
.icon-clock { -webkit-mask-image: url(../img/icons/clock.svg); mask-image: url(../img/icons/clock.svg); }
.icon-book { -webkit-mask-image: url(../img/icons/book.svg); mask-image: url(../img/icons/book.svg); }
.icon-mic { -webkit-mask-image: url(../img/icons/mic.svg); mask-image: url(../img/icons/mic.svg); }
.icon-award { -webkit-mask-image: url(../img/icons/award.svg); mask-image: url(../img/icons/award.svg); }
.icon-cap { -webkit-mask-image: url(../img/icons/cap.svg); mask-image: url(../img/icons/cap.svg); }
.icon-pen { -webkit-mask-image: url(../img/icons/pen.svg); mask-image: url(../img/icons/pen.svg); }

.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 999px;
  font-family: var(--font); font-size: .93rem; font-weight: 650; letter-spacing: -.005em; line-height: 1.3;
  color: var(--btn-ink); white-space: nowrap;
  background: var(--grad); background-size: 170% 100%; background-position: 0% 50%;
  transition: background-position .7s var(--ease), transform .3s var(--ease), color .3s;
}
.btn::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: var(--grad); filter: blur(18px); opacity: 0; transform: scale(.92);
  transition: opacity .35s ease, transform .35s var(--ease); pointer-events: none;
}
.btn .icon { transition: transform .3s var(--ease); }
.btn:focus-visible { outline-offset: 5px; }
.btn:focus-visible::before { opacity: .75; transform: scale(1.04); }
.btn.ghost { color: var(--ink); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.sm { padding: 11px 20px; font-size: .86rem; }

/* Full gradient frame for ghost buttons and highlighted surfaces */
.btn.ghost::after, .panel::after, .spectral-frame::after, .q-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad); pointer-events: none;
  -webkit-mask: var(--frame-mask); -webkit-mask-composite: xor;
  mask: var(--frame-mask); mask-composite: exclude;
}
.spectral-frame { position: relative; isolation: isolate; }
.spectral-frame::after { z-index: 3; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.center .ctas { justify-content: center; }

/* ---------- 5. Header, navigation, language switch ---------- */
.site-head { position: fixed; top: 14px; left: 0; right: 0; z-index: 90; pointer-events: none; }
.nav {
  position: relative; pointer-events: auto;
  width: min(1180px, calc(100% - 28px)); height: 70px; margin-inline: auto;
  padding: 0 9px 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 999px; background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .7);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-head.scrolled .nav, .site-head.menu-open .nav { background: var(--glass-strong); border-color: var(--line-2); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .75); }

/* Logo: glowing eye from the rebrand + live wordmark in the brand typeface */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); }
.brand img { width: auto; height: 30px; }
.brand-word { font-family: var(--font); font-size: 1.32rem; font-weight: 700; letter-spacing: -.015em; line-height: 1; }
.brand-word .ai { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.nav-right { display: flex; align-items: center; gap: 8px; }
.menu { display: flex; align-items: center; gap: 2px; font-size: .88rem; font-weight: 550; color: var(--ink); }
.menu > a:not(.btn), .navlink {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px;
  transition: background-color .2s ease;
}
.menu > a:not(.btn):hover, .navlink:hover, .navitem:focus-within .navlink { background: var(--hover); }
.menu > a:not(.btn)[aria-current="page"], .navlink[aria-current="page"] { background: var(--hover); }
.menu > a:not(.btn)[aria-current="page"]::before, .navlink[aria-current="page"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgba(167, 139, 250, .7); }
.navitem { position: relative; display: flex; align-items: center; }
.caret {
  width: 6px; height: 6px; margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .7;
}
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; min-width: 300px;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--surface-solid); border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.dropdown a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; transition: background .2s; }
.dropdown a:hover { background: var(--hover); }
.dd-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .22); }
.dd-ico .icon { width: 17px; height: 17px; background: var(--grad); }
.dd-t { display: block; color: var(--ink); font-size: .9rem; font-weight: 650; line-height: 1.3; }
.dd-d { display: block; color: var(--muted); font-size: .78rem; line-height: 1.45; margin-top: 2px; font-weight: 450; }
.navitem:hover .dropdown, .navitem:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Translation bar: always visible, also on mobile */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--muted);
}
.lang-switch .icon { width: 15px; height: 15px; margin-right: 4px; }
.lang-switch button {
  min-width: 36px; padding: 6px 9px; border-radius: 999px; text-align: center;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  transition: color .2s, background .2s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: var(--btn-ink); background: var(--grad); }
.nav-cta { margin-left: 4px; padding: 11px 20px; font-size: .86rem; }

.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--hover); color: var(--ink);
}
.burger-lines { position: relative; width: 18px; height: 10px; }
.burger-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger-lines i:first-child { top: 0; }
.burger-lines i:last-child { top: 8px; }
.menu-open .burger-lines i:first-child { top: 4px; transform: rotate(45deg); }
.menu-open .burger-lines i:last-child { top: 4px; transform: rotate(-45deg); }

/* ---------- 6. Shared blocks ---------- */
.sec { position: relative; padding: clamp(76px, 8vw, 112px) 0; }
.sec::before {
  content: ""; position: absolute; inset: 0 12% auto; height: 1px;
  background: var(--grad); opacity: .25; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.sec-head { margin-bottom: 48px; }
.sec-head.center, .center { text-align: center; }
.sec-head h2 { max-width: 980px; }
.sec-head.center h2 { margin-inline: auto; }
.sec-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.sec-head.split .section-intro { margin: 0; max-width: 46ch; }
.section-intro { max-width: 770px; margin: 24px auto 0; font-size: 1.04rem; line-height: 1.8; }

.panel {
  position: relative; isolation: isolate;
  border: 1px solid var(--line); border-radius: 28px;
  background: radial-gradient(500px circle at var(--mx, -9999px) var(--my, -9999px), var(--spot-c), transparent 50%), var(--surface);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.panel::after { z-index: 2; opacity: 0; transition: opacity .35s; }
.panel:focus-within::after, .solution::after { opacity: 1; }

/* Reveal on scroll (AIwareness) */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- 7. Home: hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 110px; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(ellipse at 72% 45%, rgba(139, 92, 246, .22), transparent 50%), radial-gradient(ellipse at 96% 64%, rgba(244, 114, 182, .11), transparent 36%), radial-gradient(ellipse at 18% 40%, rgba(110, 231, 255, .07), transparent 45%);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-bg {
  position: absolute; z-index: -2; inset: 110px 0 150px 40%;
  background: url("../img/photos/konferenzen.webp") 78% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 22%, #000 58%), linear-gradient(0deg, transparent, #000 26%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 22%, #000 58%), linear-gradient(0deg, transparent, #000 26%, #000 72%, transparent);
  mask-composite: intersect;
  filter: url("#brand-photo-grade") brightness(1.12);
}
.hero-main { position: relative; min-height: 660px; padding: 60px 0 90px; display: flex; align-items: center; }
.hero-main .wrap { position: relative; z-index: 3; width: min(1240px, 100%); }
.hero h1 { max-width: 760px; margin-bottom: 28px; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: 1.03; letter-spacing: -.055em; }
.hero h1 .o { display: block; width: fit-content; line-height: 1.12; }
/* Vision and mission titles: the gradient words sit on their own second line */
.vm-card h3 .o { display: block; width: fit-content; }
.hero .sub { max-width: 600px; margin-bottom: 34px; font-size: 1.08rem; line-height: 1.8; }
.hero .sub b { color: var(--ink); }
.section-intro b { color: var(--ink); }
.hero-caption {
  position: absolute; right: 6%; bottom: 172px; z-index: 2; margin: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
}
.hero-caption::before { content: ""; width: 30px; height: 1px; background: var(--grad); box-shadow: 0 0 12px var(--c2); }

/* Next-event pill (AIwareness) */
.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  font-size: .82rem; font-weight: 500; color: var(--text);
  background: rgba(17, 17, 24, .6); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color .25s, background .25s;
}
a.pill:hover { border-color: rgba(167, 139, 250, .55); background: rgba(124, 58, 237, .14); }
.pill .tag { border: 0; font-family: var(--font); font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--grad); color: var(--btn-ink); }
.pill .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
a.pill:hover .icon { transform: translateX(3px); }
.pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); animation: ping 2s infinite; flex: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 255, .65); } 70% { box-shadow: 0 0 0 10px rgba(110, 231, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 255, 0); } }
.pill.is-past { display: none; }

.hero-logos { position: relative; padding: 30px 0 42px; }
.hero-logos::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: max(40px, calc((100% - 1160px) / 2)); right: max(40px, calc((100% - 1160px) / 2));
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.hero-logos .label { margin: 0 0 22px; font-size: .72rem; font-weight: 650; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hero-logos .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.hero-logos img { width: auto; height: 40px; max-width: 210px; object-fit: contain; filter: brightness(0) invert(1); opacity: .62; transition: opacity .2s ease; }
.hero-logos .logo-giz { height: 58px; }

/* ---------- 8. Home: challenge to change ---------- */
.transform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.t-col { padding: 30px; }
.t-media { overflow: hidden; border-radius: 18px; margin-bottom: 28px; }
.t-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.problem .t-media img { filter: grayscale(1) url("#brand-photo-grade") brightness(.92); }
.t-title { margin-bottom: 12px; font-size: 1.8rem; line-height: 1.15; }
.problem .t-title { color: var(--muted-heading); }
.solution .t-title { width: fit-content; }
.t-intro { margin-bottom: 24px; font-size: .9rem; }
.t-list { display: flex; flex-direction: column; gap: 22px; }
.t-list li { display: flex; gap: 16px; font-size: .93rem; line-height: 1.75; }
.t-list b { color: var(--ink); }
.t-list .icon { margin-top: 3px; color: var(--muted); }
.section-intro a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 166, 255, .5); }
.section-intro a:hover { color: var(--accent-text); }
.solution .t-list .icon { background: var(--grad); }
.solution { border-color: transparent; box-shadow: 0 24px 70px -42px rgba(167, 139, 250, .65); }
.solution::before { content: ""; position: absolute; inset: 20% 12% 0; z-index: -1; background: var(--grad); opacity: .07; filter: blur(55px); pointer-events: none; }

/* ---------- 9. Home: offers ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.svc { display: flex; flex-direction: column; scroll-margin-top: 110px; }
.svc-media { position: relative; padding: 12px 12px 0; }
.svc-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; transition: filter .5s; }
.svc-tag {
  position: absolute; top: 24px; left: 24px; padding: 6px 12px; border-radius: 999px;
  background: rgba(6, 7, 11, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18); color: var(--ink);
  font-size: .64rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase;
}
.svc-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 28px; }
.svc h3 { margin-bottom: 16px; font-size: 1.85rem; }
.svc .desc { margin-bottom: 24px; font-size: .95rem; line-height: 1.75; }
.feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.feats li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .86rem; }
.feats li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); flex: none; }
.result { position: relative; margin-bottom: 28px; padding-left: 17px; font-size: .86rem; line-height: 1.7; }
.result::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: var(--grad-v); }
.result b { display: block; margin-bottom: 6px; color: var(--ink); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; }
.svc-cta { margin-top: auto; align-self: flex-start; padding: 13px 22px; font-size: .86rem; }
.center-action { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- 10. Home: vision and mission (AI imagery kept on purpose) ---------- */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vm-card { overflow: hidden; }
.vm-card .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 27px 27px 0 0; }
.vm-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vm-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17, 17, 24, .95)); }
.vm-card .body { padding: 6px 34px 36px; }
.vm-card .lbl { margin-bottom: 12px; color: var(--accent-text); font-size: .7rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; }
.vm-card h3 { margin-bottom: 14px; font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.2; }
.vm-card p:last-child { margin: 0; font-size: .97rem; line-height: 1.8; }

/* ---------- 11. Home: event ---------- */
.event-feature {
  position: relative; border-radius: 30px; padding: 1px; border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
              conic-gradient(from var(--spin-angle), rgba(167, 139, 250, .15), #6ee7ff, #a78bfa, #f472b6, #fdba74, rgba(167, 139, 250, .15) 45%, rgba(167, 139, 250, .15)) border-box;
  animation: spin 9s linear infinite;
  box-shadow: 0 50px 120px -60px rgba(167, 139, 250, .7);
}
.event-feature .inner { display: grid; grid-template-columns: 1.25fr 1fr; border-radius: 29px; overflow: hidden; background: radial-gradient(80% 120% at 0% 0%, rgba(124, 58, 237, .16), transparent 60%), var(--bg-2); }
.event-feature .info { padding: clamp(28px, 4vw, 48px); }
.event-feature .visual { position: relative; min-height: 340px; overflow: hidden; }
.event-feature .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-feature .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-2) 0%, rgba(15, 15, 20, .25) 35%, rgba(15, 15, 20, .05) 100%), linear-gradient(0deg, rgba(15, 15, 20, .7), transparent 50%); }
.event-status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--c1); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.event-status .live { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); animation: ping 2s infinite; }
.is-past .event-status { color: var(--muted); }
.is-past .event-status .live { background: var(--muted); animation: none; }
.event-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 24px; }
.datetile { flex: none; width: 84px; border-radius: 18px; overflow: hidden; text-align: center; border: 1px solid rgba(167, 139, 250, .35); background: rgba(10, 10, 11, .6); box-shadow: 0 14px 40px -18px rgba(167, 139, 250, .8); }
.datetile .m { display: block; padding: 6px 0; background: var(--grad); color: var(--btn-ink); font-family: var(--font); font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.datetile .d { display: block; padding: 10px 0 2px; color: var(--ink); font-family: var(--font); font-size: 2.2rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.datetile .w { display: block; padding-bottom: 10px; color: var(--muted); font-size: .72rem; }
.event-head h3 { margin-bottom: 8px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.event-head .tagline { margin: 0; font-size: 1rem; }
.meta { display: grid; gap: 12px; margin: 0 0 26px; }
.meta-row { display: flex; gap: 14px; align-items: flex-start; font-size: .95rem; }
.meta-row .icon { width: 18px; height: 18px; margin-top: 4px; background: var(--grad); }
.meta-row a { color: var(--ink); border-bottom: 1px solid rgba(167, 139, 250, .45); transition: border-color .2s; }
.meta-row a:hover { border-color: var(--c2); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; margin-bottom: 28px; }
.countdown div { padding: 14px 6px 10px; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); }
.countdown b { display: block; color: var(--ink); font-family: var(--font); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 6px; color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.is-past .countdown, .is-live .countdown, .is-past .rsvp-only { display: none; }
.past-note { display: none; margin-bottom: 24px; font-size: .95rem; }
.is-past .past-note { display: block; }
.event-more { margin-top: 34px; }

/* ---------- 12. Home: how we work ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps-line { position: absolute; left: 16.66%; right: 16.66%; top: 39px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.steps-line i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s; }
.steps.in .steps-line i { transform: scaleX(1); }
.step { position: relative; padding: 0 10px; text-align: center; }
.step .orb { position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 26px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(167, 139, 250, .35); box-shadow: 0 0 0 8px var(--bg), 0 0 40px -6px rgba(167, 139, 250, .6); }
.step .orb .icon { width: 32px; height: 32px; background: var(--grad); }
.step .orb b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: var(--btn-ink); font-family: var(--font); font-size: .78rem; font-weight: 800; }
.step h3 { margin-bottom: 12px; font-size: 1.5rem; }
.step p { max-width: 34ch; margin: 0 auto; font-size: .96rem; }

/* ---------- 13. Home: founder ---------- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 7vw, 90px); align-items: center; }
.about-grid h2 { margin-bottom: 24px; }
.about-grid p { margin-bottom: 18px; font-size: 1rem; line-height: 1.8; }
.about-media { position: relative; isolation: isolate; padding: 2px; border-radius: 36px; }
.about-media::before, .about-media::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--spin-angle), #6ee7ff, #a78bfa, #f472b6, #fdba74, #6ee7ff);
  animation: spin 18s linear infinite;
}
.about-media::before { inset: 0; z-index: -1; }
.about-media::after { inset: -10px; z-index: -2; filter: blur(38px); opacity: .3; }
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 34px; }
.about-media figcaption { position: absolute; left: 24px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; color: var(--ink); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.about-media figcaption b { font-family: var(--font); font-size: 1.15rem; }
.about-media figcaption span { color: #d9ccff; font-size: .82rem; font-weight: 600; }
.about-media .shade { position: absolute; inset: 2px; border-radius: 34px; background: linear-gradient(180deg, transparent 62%, rgba(6, 7, 11, .7)); pointer-events: none; }
.quote { margin: 4px 0 26px; padding-left: 22px; border-left: 3px solid; border-image: var(--grad-v) 1; color: var(--ink); font-family: var(--font); font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.quote cite { display: block; margin-top: 10px; color: var(--muted); font-family: var(--font-text); font-size: .82rem; font-style: normal; font-weight: 500; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 28px; padding-top: 12px; }
.fact { padding: 17px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.fact .n { width: fit-content; font-family: var(--font); font-size: 2.2rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.1; }
.fact .l { margin-top: 7px; color: var(--muted); font-size: .76rem; line-height: 1.5; }

/* ---------- 14. Home: newsletter signup (Substack embed) ---------- */
.signup {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(26px, 4vw, 60px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px); border-radius: 32px; border-color: transparent;
  background: radial-gradient(90% 140% at 0% 0%, rgba(110, 231, 255, .08), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(244, 114, 182, .09), transparent 60%), var(--surface);
  box-shadow: 0 50px 110px -60px rgba(167, 139, 250, .7);
}
.signup::after { opacity: 1; }
.signup h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); max-width: 18ch; }
.signup-copy > p:not(.eyebrow) { max-width: 48ch; margin: 16px 0 0; font-size: 1rem; line-height: 1.75; }
.signup-perks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.signup-perks li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .86rem; }
.signup-perks .icon { width: 16px; height: 16px; background: var(--grad); }
.signup-note, .signup-alt { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.signup-note a, .signup-alt a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.signup-note a:hover, .signup-alt a:hover { color: var(--accent-text); }
/* Substack embed (Robin's code, 320 px tall): the iframe itself is rounded and has no border of its own, the frame draws one gradient hairline, so no light corners show */
.signup-frame { position: relative; overflow: hidden; max-width: 480px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(#0c0c12, #0c0c12) padding-box, linear-gradient(135deg, rgba(201, 166, 255, .55), rgba(76, 201, 240, .35)) border-box; box-shadow: 0 20px 50px -30px rgba(167, 139, 250, .8); }
.signup-frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 320px; border: 0; border-radius: 17px; background: transparent; transition: height .4s var(--ease); }
/* After someone submits, Substack shows its reply in the frame: give it more room */
.signup-frame.expanded iframe { height: 380px; }
.signup-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: .86rem; transition: opacity .3s; }
.signup-loading i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, .25); border-top-color: var(--c2); animation: spin-ring .9s linear infinite; }
@keyframes spin-ring { to { transform: rotate(360deg); } }
.signup-frame.ready .signup-loading { opacity: 0; pointer-events: none; }
.signup-alt { margin-top: 12px; }
.signup-fallback { display: grid; gap: 14px; }
.signup-fallback .btn { width: 100%; }

/* ---------- 15. Home: contact ---------- */
.home-contact-layout {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: stretch;
  padding: clamp(30px, 4.5vw, 60px); border-radius: 38px;
  background: radial-gradient(800px 450px at 0% 0%, rgba(110, 231, 255, .08), transparent 60%), radial-gradient(700px 480px at 100% 100%, rgba(244, 114, 182, .08), transparent 60%), var(--surface);
  box-shadow: 0 50px 120px -65px rgba(167, 139, 250, .6);
}
.home-contact-layout::before { content: ""; position: absolute; inset: 40px; z-index: -1; border-radius: inherit; background: var(--grad); filter: blur(70px); opacity: .1; pointer-events: none; }
.home-contact h2 { margin-bottom: 26px; font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 1.03; letter-spacing: -.048em; }
.home-contact-heading { display: flex; flex-direction: column; min-width: 0; }
.home-contact-invitation { max-width: 380px; font-size: 1.02rem; }
.home-contact-photo { position: relative; flex: 1 1 auto; min-height: 520px; margin: 22px 0 0; padding: 2px; border-radius: 30px; background: var(--grad); box-shadow: 0 30px 70px -40px var(--c2); }
.home-contact-photo img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; object-position: 50% 12%; border-radius: 28px; }
.home-contact-side { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.side-title { margin-bottom: 18px; color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.next-steps { display: grid; gap: 12px; margin-bottom: 30px; counter-reset: s; }
.next-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.next-steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--grad); color: var(--btn-ink); font-size: .78rem; font-weight: 750; }
.next-steps b { display: block; margin-bottom: 2px; color: var(--ink); font-size: .98rem; }
.next-steps p { margin: 0; font-size: .9rem; line-height: 1.6; }
.home-contact-side .btn { align-self: flex-start; }
.c-list { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
.c-list a { display: flex; align-items: center; gap: 16px; width: fit-content; max-width: calc(100% + 14px); margin-left: -14px; padding: 10px 14px; border-radius: 16px; transition: background .25s; }
.c-list .icon { width: 21px; height: 21px; background: var(--grad); }
.c-text { display: flex; flex-direction: column; min-width: 0; }
.c-label { color: var(--muted); font-size: .68rem; font-weight: 650; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.c-value { color: var(--ink); font-size: .98rem; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; transition: color .25s; }
.c-list a:hover { background: var(--hover); }
.c-list a:hover .c-value { color: var(--accent-text); }

/* ---------- 16. Footer ---------- */
.site-foot { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, 6vw, 80px); padding: 82px 0 30px; border-top: 1px solid var(--line); }
.site-foot::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -210px;
  width: min(960px, 100%); height: 260px; transform: translateX(-50%);
  background: var(--grad); filter: blur(85px); opacity: .32; border-radius: 50%; pointer-events: none;
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .brand img { height: 34px; }
.foot-brand .brand-word { font-size: 1.5rem; }
.foot-brand p { max-width: 34ch; margin: 18px 0 0; color: var(--muted); font-size: .9rem; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: .92rem; }
.foot-title { margin-bottom: 8px; color: var(--muted); font-family: var(--font-text); font-size: .7rem; font-weight: 650; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; }
.foot-col a { width: fit-content; overflow-wrap: anywhere; transition: color .2s; }
.foot-col a:hover, .foot-bottom a:hover { color: var(--ink); }
.wordmark {
  margin-top: clamp(50px, 7vw, 80px); text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--font); font-size: clamp(56px, 15.5vw, 210px); font-weight: 800; line-height: .8; letter-spacing: -.06em;
  background: linear-gradient(180deg, rgba(167, 139, 250, .26), rgba(244, 114, 182, .05) 60%, transparent 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

/* ---------- 17. Hover, responsive, reduced motion ---------- */
@keyframes spin { to { --spin-angle: 360deg; } }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-position: 100% 50%; transform: translateY(-2px); }
  .btn:hover::before { opacity: .75; transform: scale(1.04); }
  .btn:hover .icon { transform: translateX(3px); }
  .btn.ghost:hover::before { opacity: .38; }
  .panel:hover::after { opacity: 1; }
  .svc:hover { transform: translateY(-5px); box-shadow: 0 25px 65px -40px rgba(167, 139, 250, .6); }
  .svc:hover .svc-media img { filter: url("#brand-photo-grade") brightness(1.08); }
  .vm-card:hover .media img { transform: scale(1.05); }
  .hero-logos img:hover { opacity: 1; }
  .text-link:hover .icon { transform: translateX(3px); }
}

@media (max-width: 1100px) {
  .hero h1 { font-size: 4.6rem; max-width: 650px; }
  .hero-logos .label { text-align: center; }
  .hero-logos .row { justify-content: center; gap: 26px 44px; }
  .hero-logos img { height: 34px; }
  .hero-logos .logo-giz { height: 50px; }
  .svc-body { padding: 24px; }
  .svc h3 { font-size: 1.6rem; }
  .about-grid { gap: 44px; }
  .facts { gap: 8px; }
  .fact .n { font-size: 1.9rem; }
  .menu > a:not(.btn), .navlink { padding: 9px 10px; }
}

@media (max-width: 980px) {
  .nav { height: 62px; padding: 0 7px 0 17px; }
  .burger { display: flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    max-height: calc(100svh - 106px); overflow: auto; overscroll-behavior: contain;
    border-radius: 26px; background: var(--surface-solid); border: 1px solid var(--line-2);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  }
  .menu.open { display: flex; }
  .menu > a:not(.btn), .navlink { padding: 13px 16px; font-size: 1rem; border-radius: 16px; }
  .navitem { flex-direction: column; align-items: stretch; }
  .navlink .caret { display: none; }
  .dropdown { position: static; min-width: 0; padding: 0 0 6px 10px; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; }
  .dropdown::before { display: none; }
  .navitem:hover .dropdown, .navitem:focus-within .dropdown { transform: none; }
  .dd-d { display: none; }
  .nav-cta { margin: 10px 0 2px; }
  .hero-main { min-height: 600px; }
  .hero h1 { font-size: 4rem; }
  .hero .sub { max-width: 500px; }
  .hero-caption { bottom: 220px; }
  .svc-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; gap: 24px; }
  .svc h3 { font-size: 1.9rem; }
  .event-feature .inner { grid-template-columns: 1fr; }
  .event-feature .visual { min-height: 220px; order: -1; }
  .event-feature .visual::after { background: linear-gradient(0deg, var(--bg-2) 0%, rgba(15, 15, 20, .2) 60%); }
  .about-grid { grid-template-columns: .8fr 1.2fr; gap: 36px; }
  .home-contact-layout { gap: 32px; padding: 34px; }
  .home-contact h2 { font-size: 3.1rem; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .signup { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .steps-line { display: none; }
  .vm { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 24px; }
  .hero { padding-top: 100px; }
  .hero-main { min-height: 0; padding: 40px 0 290px; }
  .hero h1 { font-size: clamp(2.7rem, 9vw, 4rem); margin-bottom: 22px; }
  .hero .sub { font-size: 1rem; }
  .hero-bg {
    inset: auto 0 132px; height: 360px; background-position: 82% 40%;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 30%, #000 62%, transparent);
    mask-image: linear-gradient(0deg, transparent, #000 30%, #000 62%, transparent);
  }
  .hero-caption { display: none; }
  .hero-logos { padding: 26px 0 32px; }
  .hero-logos .row { gap: 22px 30px; }
  .hero-logos img { height: 28px; max-width: 150px; }
  .hero-logos .logo-giz { height: 42px; }
  .transform, .about-grid, .home-contact-layout { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: 36px; }
  .section-intro { font-size: .97rem; }
  .t-col { padding: 22px; }
  .about-media { max-width: 460px; width: 100%; margin-inline: auto; }
  .home-contact-layout { padding: 30px; gap: 36px; border-radius: 30px; }
  .home-contact h2 { font-size: clamp(3rem, 9.5vw, 4.4rem); }
  .home-contact-photo { flex: none; min-height: 0; aspect-ratio: 4 / 5; width: 100%; max-width: 440px; }
  .home-contact-invitation { max-width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .vm-card .body { padding: 4px 24px 28px; }
}

@media (max-width: 560px) {
  .brand img { height: 25px; }
  .brand-word { font-size: 1.12rem; }
  .lang-switch { padding-left: 4px; }
  .lang-switch .icon { display: none; }
  .lang-switch button { min-width: 32px; padding: 6px 7px; }
  .event-head { flex-direction: column; gap: 16px; }
  .countdown { gap: 8px; }
}

@media (max-width: 480px) {
  .wrap { padding-inline: 20px; }
  .nav { width: calc(100% - 20px); padding-left: 14px; gap: 8px; }
  .hero-main { padding-top: 28px; padding-bottom: 280px; }
  .hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.4rem); }
  .ctas { flex-direction: column; align-items: stretch; max-width: 360px; }
  .pill { font-size: .76rem; }
  .hero-logos .label { font-size: .62rem; }
  .hero-logos img { height: 24px; max-width: 120px; }
  .hero-logos .logo-giz { height: 36px; }
  h2 { font-size: 2.2rem; }
  .t-title { font-size: 1.6rem; }
  .t-list li { gap: 12px; }
  .t-list .icon { width: 20px; height: 20px; }
  .svc-body { padding: 24px; }
  .facts { gap: 8px; }
  .fact { padding: 14px 10px; }
  .fact .n { font-size: 1.7rem; }
  .fact .l { font-size: .7rem; }
  .home-contact .wrap { padding-inline: 12px; }
  .home-contact-layout { padding: 26px 20px; }
  .home-contact h2 { font-size: 3rem; }
  .home-contact-side .btn { align-self: stretch; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* =====================================================================
   18. Inner pages (solutions, events, about, newsletter, note, contact, legal)
   ===================================================================== */
.wrap-narrow { width: min(860px, 100%); margin-inline: auto; padding-inline: 40px; }

/* Page hero: starfield + glow (AIwareness), optional masked photo (rebrand) */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: 168px 0 72px; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(650px 520px at 82% 180px, rgba(167, 139, 250, .16), transparent 75%), radial-gradient(600px 450px at 6% 220px, rgba(110, 231, 255, .07), transparent 75%);
}
.page-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.page-hero .ph-bg {
  position: absolute; z-index: -2; inset: 70px 0 0 50%;
  background-position: 50% 40%; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4) 25%, #000 62%), linear-gradient(0deg, transparent, #000 30%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4) 25%, #000 62%), linear-gradient(0deg, transparent, #000 30%, #000 75%, transparent);
  mask-composite: intersect;
  filter: url("#brand-photo-grade") brightness(.82);
  opacity: .85;
}
.page-hero.note-hero .ph-bg {
  inset: 0; background-position: 50% 50%; filter: saturate(1.05); opacity: .78;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.page-hero.note-hero .ph-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 52%, rgba(10, 10, 11, .78), rgba(10, 10, 11, .5) 65%, rgba(10, 10, 11, .3)), linear-gradient(180deg, rgba(10, 10, 11, .55), rgba(10, 10, 11, .2) 30%, rgba(10, 10, 11, .35));
}
.page-hero h1 { max-width: 780px; margin-bottom: 24px; font-size: clamp(3rem, 5.2vw, 4.7rem); line-height: 1.05; letter-spacing: -.05em; }
.page-hero h1 .o { display: inline; }
.page-hero .lead { max-width: 580px; margin: 0; font-size: 1.1rem; line-height: 1.8; }
.page-hero .ctas { margin-top: 34px; }
.page-hero.center h1, .page-hero.center .lead { margin-inline: auto; }

/* Overview cells (rebrand method grid) */
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mcell { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 28px; }
.mcell-photo { width: 100%; margin: 0 0 24px; overflow: hidden; border-radius: 18px; }
.mcell-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.mcell .n { padding-inline: 16px; margin-bottom: 8px; color: var(--accent-text); font-size: .7rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; }
.mcell h3 { margin-bottom: 14px; padding-inline: 16px; font-size: clamp(1.45rem, 2.3vw, 1.8rem); }
.mcell p { margin-bottom: 24px; padding-inline: 16px; font-size: .95rem; line-height: 1.75; }
.mcell .text-link { margin: auto 16px 0; }

/* Offer sections (rebrand solutions page) */
.sol { position: relative; padding: 96px 0; scroll-margin-top: 90px; }
.sol::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: max(24px, calc((100% - 1160px) / 2)); right: max(24px, calc((100% - 1160px) / 2));
  background: var(--grad); opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.sol-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-bottom: 56px; }
.sol-top.flip .sol-media { order: 2; }
.sol-media { position: relative; padding: 2px; border-radius: 30px; background: var(--grad); box-shadow: 0 24px 65px -42px rgba(167, 139, 250, .65); }
.sol-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.sol-media .badge {
  position: absolute; right: -14px; bottom: 26px; max-width: 250px; padding: 14px 18px; border-radius: 16px;
  background: rgba(14, 14, 20, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.sol-top.flip .sol-media .badge { right: auto; left: -14px; }
.sol-media .badge small { display: block; margin-bottom: 4px; color: var(--accent-text); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sol-media .badge span { display: block; color: var(--ink); font-size: .86rem; line-height: 1.45; }
.sol h2 { margin-bottom: 20px; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.sol-intro { margin-bottom: 24px; font-size: 1.06rem; line-height: 1.8; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tag { padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: .78rem; font-weight: 550; }
.sol-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.sol-cols > div { min-width: 0; }
.block-title { margin-bottom: 22px; color: var(--ink); font-family: var(--font); font-size: 1.3rem; font-weight: 650; letter-spacing: -.025em; }
.checks { display: flex; flex-direction: column; gap: 15px; }
.checks li { display: flex; align-items: flex-start; gap: 13px; font-size: .98rem; }
.checks .icon { width: 20px; height: 20px; margin-top: 4px; background: var(--grad); }
.flow { display: flex; flex-direction: column; gap: 24px; counter-reset: step; }
.flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 5px 18px; counter-increment: step; }
.flow li::before {
  content: counter(step, decimal-leading-zero); grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--grad); color: var(--btn-ink); font-size: .78rem; font-weight: 750;
}
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 44px; bottom: -16px; left: 17px; width: 1px; background: var(--grad-v); opacity: .45; }
.flow b { grid-column: 2; color: var(--ink); font-size: .98rem; font-weight: 600; }
.flow li > span { grid-column: 2; font-size: .94rem; line-height: 1.75; }
.result-box { position: relative; margin-top: 28px; padding: 24px 26px; border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, rgba(110, 231, 255, .065), transparent 75%), var(--surface); }
.result-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); pointer-events: none; -webkit-mask: var(--frame-mask); -webkit-mask-composite: xor; mask: var(--frame-mask); mask-composite: exclude; }
.result-box b { display: block; margin-bottom: 10px; color: var(--accent-text); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.result-box p { margin: 0; color: var(--ink); font-size: .97rem; line-height: 1.75; }
.sol-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Three focus areas inside the organisations offer */
.sub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.subcard { display: flex; flex-direction: column; padding: 28px; scroll-margin-top: 110px; }
.subcard .ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 15px; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .25); }
.subcard .ico .icon { background: var(--grad); }
.subcard h3 { margin-bottom: 12px; font-size: 1.4rem; line-height: 1.2; }
.subcard p { font-size: .94rem; line-height: 1.75; }
.subcard .tags { margin: 4px 0 22px; }
.subcard .out { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; }
.subcard .out b { color: var(--ink); }

/* Tiles (event format) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.tile .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .25); }
.tile .ico .icon { background: var(--grad); }
.tile .n { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tile h3 { font-size: 1.35rem; }
.tile p { margin: 0; font-size: .95rem; }

/* Photo strip */
.photo-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-top: 40px; }
.photo-strip figure { overflow: hidden; border-radius: 20px; border: 1px solid var(--line); }
.photo-strip img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Past events timeline */
.timeline { position: relative; display: grid; gap: 18px; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 30px; bottom: 30px; width: 2px; background: var(--grad-v); opacity: .6; }
.tl-item { padding: 26px 28px; }
.tl-item::before { content: ""; position: absolute; left: -35px; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 0 22px rgba(167, 139, 250, .5); }
.tl-date { margin-bottom: 8px; color: var(--accent-text); font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.tl-item h3 { margin-bottom: 8px; font-size: 1.35rem; }
.tl-item p { margin: 0; font-size: .95rem; }
.tl-item .where { margin-top: 10px; color: var(--muted); font-size: .86rem; }
.tl-photo { margin: 0 0 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.tl-photo img { display: block; width: 100%; height: auto; }

/* Team */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1000px; margin: 0 auto; }
.member { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; }
.member-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.avatar { flex: none; width: 92px; height: 92px; padding: 3px; border-radius: 50%; background: conic-gradient(from 140deg, #6ee7ff, #a78bfa, #f472b6, #fdba74, #6ee7ff); box-shadow: 0 0 34px -8px rgba(167, 139, 250, .7); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg); }
.member h3 { font-size: 1.4rem; }
.member .role { margin: 4px 0 0; color: var(--accent-text); font-size: .9rem; font-weight: 600; }
.member > p { font-size: .96rem; line-height: 1.75; }
.member .ctas { margin-top: auto; gap: 10px; }

/* CTA band */
.cta-band {
  position: relative; isolation: isolate; padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 60px); border-radius: 36px;
  background: radial-gradient(ellipse at 0% 0%, rgba(110, 231, 255, .09), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(244, 114, 182, .1), transparent 60%), var(--surface);
  box-shadow: 0 40px 90px -60px rgba(167, 139, 250, .7);
}
.cta-band::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); pointer-events: none; -webkit-mask: var(--frame-mask); -webkit-mask-composite: xor; mask: var(--frame-mask); mask-composite: exclude; }
.cta-band h2 { max-width: 850px; margin: 0 auto 22px; }
.cta-band p { max-width: 600px; margin: 0 auto 30px; font-size: 1.04rem; }
.cta-sec::before { display: none; }

/* Newsletter list */
.post-card { display: block; overflow: hidden; }
.post-card.has-thumb { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; }
.post-thumb { position: relative; min-height: 220px; border-right: 1px solid var(--line); background: #0b0b11; overflow: hidden; }
.post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.5vw, 40px); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); font-size: .84rem; }
.post-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.post-meta .tag-txt { color: var(--accent-text); font-weight: 650; }
.post-body h3 { margin-bottom: 12px; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.post-body p { max-width: 68ch; margin-bottom: 22px; font-size: .98rem; }
.coming { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding: 22px 26px; border-radius: 22px; border: 1px dashed var(--line-2); color: var(--muted); font-size: .95rem; }

/* Article */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 95; height: 3px; }
.progress i { display: block; width: 100%; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(167, 139, 250, .8); }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; font-weight: 550; transition: color .2s; }
.back:hover { color: var(--ink); }
.back .icon { width: 16px; height: 16px; transform: scaleX(-1); }
.byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--muted); font-size: .9rem; }
.page-hero .lead + .byline { margin-top: 28px; }
.byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--c2); }
.byline b { display: block; color: var(--ink); font-weight: 650; }
.lang-hint { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--muted); font-size: .82rem; }
.lang-hint a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(181, 160, 252, .45); text-underline-offset: 3px; }
.prose { color: var(--text); font-size: 1.06rem; line-height: 1.85; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose h2 { margin-top: 2.1em; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; }
.prose h3 { margin-top: 1.7em; color: var(--accent-text); font-size: 1.15rem; letter-spacing: -.01em; }
.prose h2 + p, .prose h3 + p { margin-top: .7em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(181, 160, 252, .45); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--ink); text-decoration-color: currentColor; }
.prose ul { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.prose ol { display: grid; gap: 14px; counter-reset: step; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: step; }
.prose ol li::before { content: counter(step); position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(167, 139, 250, .45); color: var(--accent-text); font-size: .8rem; font-weight: 700; line-height: 1; }
.prose .dropcap::first-letter { float: left; margin: .06em .12em 0 0; font-family: var(--font); font-size: 4.2em; font-weight: 800; line-height: .85; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prose .note { display: grid; gap: 6px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(120deg, rgba(124, 58, 237, .12), rgba(110, 231, 255, .05)); border: 1px solid rgba(167, 139, 250, .28); font-size: .98rem; }
.prose .note .flag { justify-self: start; margin-bottom: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.prose .pull { margin: 1.8em 0; padding: 6px 0 6px 24px; border-left: 3px solid; border-image: var(--grad-v) 1; color: var(--ink); font-family: var(--font); font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.prose > .pull:first-child { margin-top: 0; }
.prose .pull-by { display: block; margin-top: 12px; color: var(--muted); font-size: .95rem; font-weight: 500; letter-spacing: 0; }
.article-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 44px; }
.article-foot .btn { max-width: 100%; white-space: normal; text-align: center; }
.hide-when-past.is-past { display: none; }

/* Legal */
.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 110px; display: grid; gap: 2px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: .86rem; }
.toc b { margin-bottom: 8px; color: var(--muted); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.toc a { padding: 6px 10px; border-radius: 10px; color: var(--muted); transition: color .2s, background .2s; }
.toc a:hover, .toc a.on { color: var(--ink); background: var(--hover); }
.legal-card { padding: clamp(24px, 4vw, 48px); border-radius: 28px; }
.legal-card .prose { font-size: 1rem; }
.legal-card .prose > h2:first-child { margin-top: 0; }
.legal-card h2 { scroll-margin-top: 110px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact-grid .next-steps { margin-top: 34px; }
.mail-line { font-size: .95rem; }
.mail-line a { color: var(--accent-text); font-weight: 650; }
.form-card { padding: 30px; box-shadow: 0 35px 90px -55px rgba(167, 139, 250, .55); }
.form-card::after { opacity: 1; }
.contact-form-photo { height: 250px; margin: -16px -16px 26px; overflow: hidden; border-radius: 20px; }
.contact-form-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { color: var(--text); font-size: .84rem; font-weight: 600; }
.field label .opt { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(10, 10, 11, .6); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #6e6f7a; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 4px rgba(167, 139, 250, .25); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form .btn { width: 100%; }
.form-note { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.form-note a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.form-success { padding: 26px 6px 6px; text-align: center; }
.form-success .fs-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: rgba(167, 139, 250, .14); border: 1px solid rgba(167, 139, 250, .4); }
.form-success .fs-icon .icon { width: 28px; height: 28px; background: var(--grad); }
.form-success h3 { margin-bottom: 10px; font-size: 1.6rem; }
.form-success p { max-width: 44ch; margin: 0 auto 12px; font-size: .95rem; }
.form-success a { color: var(--accent-text); text-decoration: underline; }
/* Contact form: spam trap kept out of sight, and the message shown when sending fails */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border-radius: 14px; background: rgba(255, 120, 120, .07); border: 1px solid rgba(255, 140, 140, .28); }
.form-error p { margin: 0; font-size: .92rem; line-height: 1.55; }
.form-error .form-note a { color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .mcell:hover .mcell-photo img { transform: scale(1.035); }
  a.panel:hover { transform: translateY(-4px); box-shadow: 0 25px 65px -40px rgba(167, 139, 250, .6); }
  .post-card:hover .post-thumb img { transform: scale(1.04); }
}
@media (max-width: 1020px) {
  .sub-grid, .tiles { grid-template-columns: 1fr 1fr; }
  .sub-grid > :last-child, .tiles > :last-child { grid-column: 1 / -1; }
  .legal { grid-template-columns: 1fr; }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .method-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .sol-top, .sol-cols, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .sol-top.flip .sol-media { order: 0; }
  .sol-media { max-width: 560px; }
  .sol-media .badge, .sol-top.flip .sol-media .badge { right: 12px; left: auto; }
  .team { grid-template-columns: 1fr; }
  .page-hero .ph-bg { inset: auto 0 0 0; height: 300px; opacity: .55; -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%, transparent); mask-image: linear-gradient(0deg, transparent, #000 40%, transparent); }
}
@media (max-width: 760px) {
  .wrap-narrow { padding-inline: 24px; }
  .page-hero { padding: 132px 0 52px; }
  .page-hero h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); }
  .page-hero .lead { font-size: 1.02rem; }
  .sol { padding: 64px 0; }
  .sub-grid, .tiles { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip figure:first-child { grid-column: 1 / -1; }
  .form .row2 { grid-template-columns: 1fr; }
  .member { padding: 26px 22px; }
  .member-top { flex-direction: column; align-items: flex-start; }
  .prose { font-size: 1rem; }
  .cta-band { border-radius: 28px; }
  .post-card.has-thumb { grid-template-columns: 1fr; }
  .post-thumb { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .wrap-narrow { padding-inline: 20px; }
  .form-card { padding: 22px; }
  .contact-form-photo { margin: -10px -10px 22px; height: 210px; }
  .timeline { padding-left: 26px; }
  .tl-item::before { left: -27px; width: 12px; height: 12px; }
  .tl-item { padding: 22px; }
}

/* Small helpers for inner pages */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.field select {
  width: 100%; padding: 13px 40px 13px 15px; border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(10, 10, 11, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23a78bfa' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 3.5l3 3 3-3'/%3E%3C/svg%3E") right 15px center / 12px no-repeat;
  color: var(--ink); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.field select:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 4px rgba(167, 139, 250, .25); }
.field select option { background: var(--surface-solid); color: var(--ink); }
.prose div > * + *, .prose section > * + * { margin-top: 1.1em; }
.prose .note > * + * { margin-top: 0; }
.prose section { scroll-margin-top: 110px; }
.prose > section:first-child h2 { margin-top: 0; }
.prose section + section { margin-top: 2.2em; }
.prose section h2 { margin-top: 0; }

/* Long German compounds must never run off small screens */
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Keep a word in one piece in a heading (no automatic hyphenation inside it) */
.nobr { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }

/* =====================================================================
   19. Classic colour variant (body.theme-classic): the original
   AIwareness purple > teal gradient instead of the four-colour rebrand.
   Same layout, type and photos; only the colours change.
   ===================================================================== */
.theme-classic {
  --c1: #4cc9f0;
  --c2: #a855f7;
  --c3: #c9a6ff;
  --c4: #4cc9f0;
  --accent-text: #c9a6ff;
  --focus: #c9a6ff;
  --grad: linear-gradient(120deg, #c9a6ff 0%, #4cc9f0 100%);
  --grad-v: linear-gradient(180deg, #c9a6ff, #4cc9f0);
}
.theme-classic ::selection { background: rgba(124, 58, 237, .55); color: #fff; }
/* Logo 2026-10-21: the wordmark "AI" uses the same light violet to teal as the eye lids and the buttons; the eye has a soft glow. */
.brand img { filter: drop-shadow(0 0 5px rgba(201, 166, 255, .45)) drop-shadow(0 0 10px rgba(76, 201, 240, .22)); }
.theme-classic .brand-word .ai, .theme-classic .links-name .o { background: linear-gradient(100deg, #c9a6ff 0%, #9fb4fb 55%, #5fd6f5 100%); -webkit-background-clip: text; background-clip: text; }
.theme-classic .ambient span:nth-child(3) { background: radial-gradient(circle, rgba(168, 85, 247, .22), transparent 65%); }
.theme-classic .hero::before { background: radial-gradient(ellipse at 72% 45%, rgba(124, 58, 237, .26), transparent 50%), radial-gradient(ellipse at 96% 64%, rgba(76, 201, 240, .12), transparent 36%), radial-gradient(ellipse at 18% 40%, rgba(76, 201, 240, .07), transparent 45%); }
.theme-classic .about-media::before, .theme-classic .about-media::after { background: conic-gradient(from var(--spin-angle), #7c3aed, #4cc9f0, #c9a6ff, #7c3aed); }
.theme-classic .event-feature {
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
              conic-gradient(from var(--spin-angle), rgba(201, 166, 255, .15), #a855f7, #4cc9f0, rgba(201, 166, 255, .15) 40%, rgba(201, 166, 255, .15)) border-box;
}
.theme-classic .avatar { background: conic-gradient(from 140deg, #7c3aed, #4cc9f0, #c9a6ff, #7c3aed); }
.theme-classic .signup,
.theme-classic .home-contact-layout,
.theme-classic .cta-band { background: radial-gradient(90% 140% at 0% 0%, rgba(124, 58, 237, .2), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(76, 201, 240, .1), transparent 60%), var(--surface); }
.theme-classic .wordmark { background: linear-gradient(180deg, rgba(201, 166, 255, .24), rgba(76, 201, 240, .03) 80%); -webkit-background-clip: text; background-clip: text; }
.theme-classic .site-foot::before { opacity: .26; }
.theme-classic .pill .live, .theme-classic .event-status .live { background: #4cc9f0; }
.theme-classic .event-status { color: #4cc9f0; }
.theme-classic .dd-ico, .theme-classic .subcard .ico, .theme-classic .tile .ico { background: rgba(124, 58, 237, .16); border-color: rgba(201, 166, 255, .25); }

/* Hero: small line above the title starts flush with the title (no leading dash) */
.eyebrow.flush::before { display: none; }

/* About, Meet Robin: tall photo, keep the top (hair and face) in view */
#founder .about-media img { object-position: 50% 3%; }

/* Badge at the top corner when the bottom of the photo carries the story */
.sol-media .badge.top { top: 26px; bottom: auto; }

/* =====================================================================
   20. Links page (link-in-bio): one column, made for phones
   ===================================================================== */
.links-hero { position: relative; isolation: isolate; overflow: hidden; }
.links-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(520px 420px at 50% 120px, rgba(124, 58, 237, .22), transparent 75%), radial-gradient(500px 400px at 50% 90%, rgba(76, 201, 240, .08), transparent 75%); }
.links-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.links-wrap { max-width: 560px; margin: 0 auto; padding: 136px 16px 72px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.links-mark { width: 150px; height: auto; filter: drop-shadow(0 0 8px rgba(201, 166, 255, .5)) drop-shadow(0 0 22px rgba(76, 201, 240, .25)); }
.links-name { margin: 14px 0 6px; font-size: 2.3rem; line-height: 1.1; letter-spacing: -.015em; }
.links-tag { margin-bottom: 32px; color: var(--muted); font-size: 1rem; }
.links-list { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.links-list a {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 20px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2);
  color: var(--ink); font-weight: 650; font-size: 1.02rem; text-align: left;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.links-list a:hover, .links-list a:focus-visible { transform: translateY(-2px); border-color: transparent; box-shadow: 0 14px 34px -18px rgba(168, 85, 247, .7); }
.links-list a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); pointer-events: none; opacity: 0; transition: opacity .2s; -webkit-mask: var(--frame-mask); -webkit-mask-composite: xor; mask: var(--frame-mask); mask-composite: exclude; }
.links-list a:hover::after, .links-list a:focus-visible::after { opacity: 1; }
.links-list .icon { width: 22px; height: 22px; background: var(--grad); }
.links-list .l-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.links-list small { color: var(--muted); font-weight: 500; font-size: .84rem; }
.links-list .l-arrow { width: 16px; height: 16px; background: var(--muted); }
.links-list .is-featured a { background: var(--grad); border-color: transparent; color: var(--btn-ink); box-shadow: 0 18px 44px -20px rgba(168, 85, 247, .8); }
.links-list .is-featured .icon, .links-list .is-featured .l-arrow { background: var(--btn-ink); }
.links-list .is-featured small { color: rgba(11, 10, 20, .72); }
@media (max-width: 560px) { .links-wrap { padding-top: 112px; } .links-name { font-size: 2rem; } }

/* =====================================================================
   21. Resources page: jump links and resource cards
   ===================================================================== */
.res-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.res-jump a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--ink); font-size: .88rem; font-weight: 600; transition: transform .2s var(--ease), border-color .2s;
}
.res-jump a:hover, .res-jump a:focus-visible { transform: translateY(-2px); border-color: rgba(201, 166, 255, .6); }
.res-jump .icon { width: 17px; height: 17px; background: var(--grad); }
.res-sec { scroll-margin-top: 90px; }
.res-sec .sec-head { margin-bottom: 32px; }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.res-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-card { display: flex; flex-direction: column; padding: 26px; }
.res-type { align-self: flex-start; margin-bottom: 16px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(201, 166, 255, .3); background: rgba(124, 58, 237, .12); color: var(--accent-text); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.res-card h3 { margin-bottom: 6px; font-size: 1.3rem; line-height: 1.25; }
.res-meta { margin-bottom: 14px; color: var(--muted); font-size: .86rem; }
.res-desc { margin-bottom: 20px; font-size: .94rem; line-height: 1.7; }
.res-card .text-link { margin-top: auto; }
.res-own { margin-top: 44px; padding: 24px 26px; border-radius: 22px; border: 1px dashed var(--line-2); }
.res-own .eyebrow { margin-bottom: 14px; }
.res-own-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
@media (max-width: 1020px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .res-grid, .res-grid-2 { grid-template-columns: 1fr; } }
/* Menu has eight items: tighten spacing a little between tablet and small desktop */
@media (min-width: 981px) and (max-width: 1180px) { .menu { font-size: .84rem; } .menu > a:not(.btn), .navlink { padding: 9px 8px; } .lang-switch .icon { display: none; } }

/* Resources: preview images, text covers and the highlighted Start here cards */
.res-card { overflow: hidden; }
.res-thumb { margin: -26px -26px 20px; aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: 1px solid var(--line); background: #0b0b11; }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.res-thumb-own { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .38), transparent 65%), #0b0b11; }
.res-thumb-own img { width: 42%; height: auto; object-fit: contain; filter: drop-shadow(0 0 24px rgba(168, 85, 247, .5)); }
.res-cover { display: grid; place-items: center; background: radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, .4), transparent 60%), radial-gradient(100% 100% at 100% 100%, rgba(76, 201, 240, .22), transparent 60%), #12101c; }
.res-cover .icon { width: 56px; height: 56px; background: var(--grad); filter: drop-shadow(0 0 18px rgba(168, 85, 247, .45)); }
.res-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: auto; }
.res-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.res-feature { border-color: transparent; box-shadow: 0 30px 70px -45px rgba(168, 85, 247, .7); }
.res-feature::after { opacity: 1; }
.res-start .sec-head { margin-bottom: 28px; }
@media (hover: hover) and (pointer: fine) { .res-card:hover .res-thumb img { transform: scale(1.04); } }
@media (max-width: 1180px) { .res-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .res-feature-grid { grid-template-columns: 1fr; } }

/* Resources: links in cards as clear pill buttons (outlined; filled in the Start here cards) */
.res-card .text-link {
  align-self: flex-start; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: rgba(124, 58, 237, .16); border: 1px solid rgba(201, 166, 255, .5);
  color: var(--ink); font-size: .86rem; font-weight: 650; line-height: 1.2;
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.res-card .text-link .icon { width: 15px; height: 15px; background: currentColor; }
.res-card .text-link:hover, .res-card .text-link:focus-visible { color: var(--btn-ink); background: var(--grad); border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(168, 85, 247, .8); }
.res-feature .res-links .text-link:first-child { color: var(--btn-ink); background: var(--grad); border-color: transparent; box-shadow: 0 12px 28px -16px rgba(168, 85, 247, .8); }
.res-links { gap: 10px 12px; }
.res-own .text-link { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(201, 166, 255, .45); background: rgba(124, 58, 237, .12); color: var(--ink); }
.res-own .text-link:hover { color: var(--btn-ink); background: var(--grad); border-color: transparent; }
.res-own .text-link .icon { background: currentColor; }

/* Offers: two cards side by side (Coaching for Individuals) */
.sub-grid.sub-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-grid.sub-grid-2 > :last-child { grid-column: auto; }
@media (max-width: 760px) { .sub-grid.sub-grid-2 { grid-template-columns: 1fr; } }

/* Home hero without logo row (logos moved to backup on 2026-10-18):
   the photo runs down to the bottom of the hero, the caption sits on it.
   To restore the logo row, delete this block. */
.hero-bg { bottom: 30px; }
.hero-caption { bottom: 64px; }
@media (max-width: 980px) { .hero-caption { bottom: 64px; } }
@media (max-width: 760px) { .hero-bg { bottom: 0; } .hero-main { padding-bottom: 300px; } }
@media (max-width: 480px) { .hero-main { padding-bottom: 290px; } }

/* EN / DE switch: plain buttons, so no ?lang= appears in links */
.lang-switch button { border: 0; background: none; font-family: inherit; line-height: 1.2; cursor: pointer; }

/* Offers overview with four offers, and links from the offers page to the service pages */
.method-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.method-grid.four .mcell h3 { font-size: clamp(1.3rem, 1.7vw, 1.5rem); -webkit-hyphens: manual; hyphens: manual; }
.sol-more { margin-top: 26px; }
.subcard p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 166, 255, .5); }
.subcard p a:hover { color: var(--accent-text); }
@media (max-width: 1100px) { .method-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .method-grid.four { grid-template-columns: 1fr; } }

/* Result highlights: a tinted box instead of a side line (home offer cards, Outcome lines on the offer pages) */
.result { padding: 14px 16px; border-radius: 16px; background: rgba(167, 139, 250, .08); border: 1px solid rgba(167, 139, 250, .28); }
.result::before { display: none; }
.result b { margin-bottom: 4px; color: var(--accent-text); }
.subcard .out { margin-top: auto; padding: 14px 16px; border: 1px solid rgba(167, 139, 250, .28); border-radius: 16px; background: rgba(167, 139, 250, .08); color: var(--ink); }
.subcard .out b { color: var(--accent-text); }

/* FAQ (home and service pages): open questions in a calm list */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq-item { border: 1px solid var(--line-2); border-radius: 18px; background: rgba(255, 255, 255, .025); transition: border-color .2s ease, background .2s ease; }
.faq-item[open] { border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .06); }
.faq-item summary { position: relative; display: block; padding: 20px 56px 20px 24px; color: var(--ink); font-family: var(--font); font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(45deg); transition: transform .25s ease; }
.faq-item[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 18px; }
.faq-item p { margin: 0; padding: 0 24px 22px; font-size: .97rem; line-height: 1.75; }
.faq-item p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 166, 255, .5); }
.faq-item p a:hover { color: var(--accent-text); }
@media (max-width: 560px) { .faq-item summary { padding: 18px 48px 18px 18px; font-size: 1rem; } .faq-item summary::after { right: 18px; } .faq-item p { padding: 0 18px 18px; } }