:root {
  --ink: #111113;
  --paper: #f3f0e9;
  --paper-2: #e8e3da;
  --muted: #676761;
  --line: rgba(17, 17, 19, .16);
  --red: #e44732;
  --blue: #cce9e5;
  --shell: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.shell { width: min(var(--shell), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: 12px; z-index: 30; padding: 9px 13px; background: var(--red); color: #fff; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.site-header { position: relative; z-index: 4; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.header-row { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; font-size: 22px; font-weight: 850; letter-spacing: -.09em; }.wordmark .mark { color: var(--red); }.wordmark .word { color: var(--ink); }.wordmark-dot { margin-left: 5px; color: var(--red); font-size: 10px; letter-spacing: 0; }
nav { display: flex; align-items: center; gap: clamp(15px, 2.6vw, 32px); }nav a { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }nav a:hover, .text-link:hover, .card-links a:hover, .closing-links a:hover { color: var(--red); }.header-cta { padding: 10px 15px; border: 1px solid var(--ink); border-radius: 999px; }.header-cta:hover { background: var(--ink); color: var(--paper); }
.hero { min-height: 710px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr); align-items: center; gap: clamp(45px, 8vw, 120px); padding-block: 92px 104px; }.eyebrow { margin: 0 0 22px; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .18em; line-height: 1.35; }.eyebrow-dot { display: inline-block; width: 8px; height: 8px; margin: 0 9px 1px 0; border-radius: 50%; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }h1 { max-width: 780px; margin-bottom: 31px; font-size: clamp(57px, 8.7vw, 116px); font-weight: 780; letter-spacing: -.1em; line-height: .87; }h1 em, h2 em { color: var(--red); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.08em; }.hero-lead { max-width: 620px; margin-bottom: 34px; color: #454642; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.48; letter-spacing: -.025em; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .18s ease, background .18s ease, color .18s ease; }.button:hover { transform: translateY(-2px); }.button-dark { background: var(--ink); color: var(--paper); }.button-dark:hover { background: var(--red); color: #fff; }.button-light { background: var(--paper); color: var(--ink); }.button-light:hover { background: #fff; }.text-link { color: var(--ink); font-size: 12px; font-weight: 800; text-decoration: none; }.hero-index { display: grid; grid-template-columns: auto 1fr auto 1fr; max-width: 470px; gap: 12px; margin-top: 72px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .15em; }.hero-index span:nth-child(1), .hero-index span:nth-child(3) { color: var(--red); font-size: 17px; letter-spacing: -.04em; }
.hero-console { position: relative; aspect-ratio: 1; width: 100%; max-width: 510px; justify-self: end; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--ink); box-shadow: 21px 25px 0 rgba(17,17,19,.08); }.hero-console::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(243,240,233,.25); border-radius: 50%; }.hero-console::after { content: ""; position: absolute; width: 42%; height: 42%; border-radius: 50%; background: rgba(228,71,50,.24); filter: blur(42px); }.console-top { position: absolute; z-index: 3; inset: 8% 11% auto; display: flex; justify-content: space-between; color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .14em; }.console-orbit { position: absolute; border: 1px solid rgba(204,233,229,.5); border-radius: 50%; }.orbit-a { inset: 24% 6%; transform: rotate(-25deg); }.orbit-b { inset: 7% 24%; transform: rotate(63deg); border-color: rgba(228,71,50,.65); }.console-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: .77; letter-spacing: -.1em; }.core-p { color: var(--red); font-size: clamp(52px, 8vw, 96px); font-weight: 900; }.core-n { color: var(--paper); font-size: clamp(40px, 6vw, 72px); font-weight: 500; }.console-core small { margin-top: 23px; color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .18em; }.console-axis { position: absolute; z-index: 3; color: var(--paper); font-size: 9px; font-weight: 850; letter-spacing: .18em; }.axis-top { top: 20%; left: 50%; transform: translateX(-50%); color: var(--blue); }.axis-right { right: 12%; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--red); }.axis-bottom { bottom: 20%; left: 50%; transform: translateX(-50%); color: var(--blue); }.axis-left { left: 11%; top: 50%; transform: translateY(-50%) rotate(-90deg); color: var(--red); }.console-card { position: absolute; z-index: 3; padding: 6px 8px; border: 1px solid rgba(243,240,233,.25); color: var(--paper); font-size: 8px; letter-spacing: .12em; }.console-card b { display: block; margin-top: 2px; color: var(--blue); font-size: 9px; }.card-a { top: 31%; left: 15%; }.card-b { top: 31%; right: 15%; }.card-c { bottom: 31%; left: 15%; }.card-d { right: 15%; bottom: 31%; }
.profile-band { background: var(--blue); border-block: 1px solid var(--line); }.profile-layout { display: grid; grid-template-columns: .35fr 1.15fr .7fr; gap: 38px; align-items: start; padding-block: 72px 77px; }.section-label { margin: 0; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .16em; }.profile-main h2 { max-width: 760px; margin-bottom: 20px; font-size: clamp(33px, 4.8vw, 60px); letter-spacing: -.09em; line-height: .96; }.profile-main p { max-width: 680px; margin: 0; color: #4a5c5b; font-size: 15px; }.profile-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-self: end; }.profile-facts div { padding-top: 11px; border-top: 1px solid rgba(17,17,19,.25); }.profile-facts strong { display: block; color: var(--red); font-size: 30px; letter-spacing: -.08em; line-height: 1; }.profile-facts span { display: block; margin-top: 7px; color: #4a5c5b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.project-section { padding-block: 125px 138px; }.section-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 60px; align-items: end; margin-bottom: 72px; }.section-heading h2 { margin: 0; font-size: clamp(48px, 6vw, 80px); letter-spacing: -.1em; line-height: .88; }.section-intro-copy { max-width: 330px; justify-self: end; margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }.project-card { min-height: 645px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); box-shadow: 9px 10px 0 rgba(17,17,19,.045); transition: transform .2s ease, box-shadow .2s ease; }.project-card:hover { transform: translateY(-6px); box-shadow: 14px 16px 0 rgba(17,17,19,.09); }.card-visual { position: relative; height: 190px; flex: 0 0 190px; overflow: hidden; }.visual-code, .visual-note { position: absolute; z-index: 2; font-size: 9px; font-weight: 900; letter-spacing: .15em; }.visual-code { top: 19px; left: 23px; }.visual-note { right: 23px; bottom: 18px; }.card-header { display: flex; justify-content: space-between; gap: 12px; padding: 23px 27px 0; font-size: 10px; font-weight: 900; letter-spacing: .13em; }.status { white-space: nowrap; }.status-live, .music-card .card-header { color: #ffb7a6; }.status-store { color: #2d7777; }.status-test { color: #7455ca; }.status-build { color: #007b87; }.status-book { color: #7e3f45; }.status-series { color: #d27536; }.card-content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 27px 27px 29px; }.card-kicker { margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.card-content h3 { margin-bottom: 14px; font-size: clamp(31px, 4vw, 50px); letter-spacing: -.09em; line-height: .9; }.card-lead { max-width: 510px; margin-bottom: 11px; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }.card-detail { max-width: 540px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }.tag-row span { padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 850; }.card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }.card-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 850; text-decoration: none; }.card-links a span { font-size: 14px; line-height: .8; }
.music-card { background: #15131b; color: #f7f1e9; border-color: #15131b; }.music-card .card-kicker { color: #ffb7a6; }.music-card .card-detail { color: #c7c0c0; }.music-card .tag-row { color: #ffb7a6; }.music-card .card-links { color: #f7f1e9; }.music-visual { background: radial-gradient(circle at 73% 35%, #e44732 0 4%, transparent 5%), radial-gradient(circle at 73% 35%, rgba(228,71,50,.28) 0 17%, transparent 18%), linear-gradient(135deg,#17131d,#4a1721 55%,#111); }.music-visual .visual-code,.music-visual .visual-note { color: #ffb7a6; }.record { position: absolute; width: 122px; height: 122px; top: 34px; right: 18%; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; box-shadow: inset 0 0 0 21px rgba(228,71,50,.12), inset 0 0 0 22px rgba(255,255,255,.18); }.record::after { content: ""; position: absolute; inset: 47%; border-radius: 50%; background: #ffb7a6; }.music-wave { position: absolute; left: 24px; right: 24px; height: 48px; border-bottom: 2px solid #ffb7a6; transform: skewY(-7deg); }.wave-1 { bottom: 40px; border-top: 2px solid rgba(255,183,166,.5); }.wave-2 { bottom: 51px; opacity: .45; transform: skewY(8deg); }
.carlo-card { background: #eaf4f2; border-color: #b9d8d2; }.carlo-card .card-header, .carlo-card .card-kicker { color: #2d7777; }.carlo-card .tag-row { color: #2d7777; }.carlo-visual { color: #113d47; background: linear-gradient(135deg,#d8f0ec,#b7d8d2); }.map-grid { position: absolute; inset: 36px 27px 30px; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(17,61,71,.27) 35px 37px), repeating-linear-gradient(0deg, transparent 0 24px, rgba(17,61,71,.12) 25px 26px); transform: rotate(-8deg); }.map-pin { position: absolute; top: 60px; left: 47%; display: grid; place-items: center; width: 47px; height: 47px; border: 8px solid #f08b42; border-radius: 50% 50% 50% 0; color: #113d47; font-size: 10px; transform: rotate(-45deg); }.carlo-visual .visual-note { color: #2d7777; }
.mindfox-card { background: #f5f1ff; border-color: #d5c7ff; }.mindfox-card .card-header, .mindfox-card .card-kicker { color: #7455ca; }.mindfox-card .tag-row { color: #7455ca; }.mindfox-visual { color: #f8f3ff; background: radial-gradient(circle at 22% 25%, rgba(246,238,95,.5), transparent 16%), linear-gradient(135deg,#21153e,#6e3bc1 58%,#c34ce7); }.mindfox-visual .visual-code,.mindfox-visual .visual-note { color: #f6ee5f; }.fox-eyes { position: absolute; top: 65px; left: 50%; display: flex; gap: 42px; transform: translateX(-50%); }.fox-eyes i { width: 30px; height: 20px; border: 3px solid #f6ee5f; border-radius: 50%; box-shadow: 0 0 16px #f6ee5f; }.fox-eyes i::after { content: ""; display: block; width: 6px; height: 6px; margin: 4px auto; border-radius: 50%; background: #f6ee5f; }.quiz-dots { position: absolute; right: 26px; top: 37px; display: grid; grid-template-columns: repeat(2, 7px); gap: 7px; }.quiz-dots i { width: 7px; height: 7px; border-radius: 50%; background: #f6ee5f; }
.flipvoice-card { background: #effcff; border-color: #a9dfe7; }.flipvoice-card .card-header, .flipvoice-card .card-kicker { color: #007b87; }.flipvoice-card .tag-row { color: #007b87; }.flipvoice-visual { color: #d9ffff; background: linear-gradient(135deg,#071e2b,#087f8e 55%,#e95b8b); }.flipvoice-visual .visual-code,.flipvoice-visual .visual-note { color: #d9ffff; }.voice-bars { position: absolute; left: 30px; right: 30px; top: 73px; display: flex; align-items: center; justify-content: space-between; height: 45px; }.voice-bars i { width: 4px; height: 17px; border-radius: 4px; background: #d9ffff; box-shadow: 0 0 10px rgba(217,255,255,.8); }.voice-bars i:nth-child(2n) { height: 38px; }.voice-bars i:nth-child(3n) { height: 11px; }.voice-bars i:nth-child(5n) { height: 48px; }.flip-symbol { position: absolute; top: 40px; right: 25px; color: #ffb0c8; font-size: 48px; line-height: 1; }
.resonanz-card { background: #f5f1ea; border-color: #c9c0b3; }.resonanz-card .card-header, .resonanz-card .card-kicker { color: #7e3f45; }.resonanz-card .tag-row { color: #7e3f45; }.resonanz-visual { color: #f6eede; background: radial-gradient(circle at 68% 42%, #f6eede 0 1.5%, transparent 2%), radial-gradient(circle at 68% 42%, rgba(255,164,117,.35), transparent 18%), linear-gradient(145deg,#0e162a,#342445 60%,#7e3f45); }.resonanz-visual .visual-code,.resonanz-visual .visual-note { color: #ffc1a2; }.planet { position: absolute; top: 48px; left: 46%; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 31%,#f7d8b8,#9b5160 63%,#3a223d); box-shadow: 0 0 35px rgba(255,177,130,.32); }.orbit-line { position: absolute; top: 67px; left: 28%; width: 52%; height: 57px; border: 1px solid rgba(255,193,162,.7); border-radius: 50%; transform: rotate(-18deg); }.signal-star { position: absolute; top: 29px; right: 24%; color: #ffc1a2; font-size: 21px; }
.emil-card { background: #fff7d9; border-color: #f0d477; }.emil-card .card-header, .emil-card .card-kicker { color: #d27536; }.emil-card .tag-row { color: #d27536; }.emil-visual { color: #2f6a75; background: linear-gradient(180deg,#92d8df 0 64%,#f6d36e 64% 100%); }.emil-visual .visual-code,.emil-visual .visual-note { color: #2f6a75; }.sun { position: absolute; top: 45px; right: 16%; width: 63px; height: 63px; border-radius: 50%; background: #f39a45; box-shadow: 0 0 0 10px rgba(243,154,69,.2),0 0 0 20px rgba(243,154,69,.1); }.route-line { position: absolute; left: 19%; right: 31%; bottom: 42px; height: 58px; border: 3px dashed #fff7d9; border-bottom: 0; border-radius: 50% 50% 0 0; transform: rotate(-8deg); }.cloud { position: absolute; width: 58px; height: 18px; border-radius: 20px; background: rgba(255,255,255,.76); }.cloud::before,.cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.cloud::before { left: 10px; width: 26px; height: 26px; }.cloud::after { right: 9px; width: 21px; height: 21px; }.cloud-one { top: 43px; left: 18%; }.cloud-two { top: 83px; left: 34%; transform: scale(.7); }
.method-band { background: var(--paper-2); border-block: 1px solid var(--line); }.method-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; padding-block: 103px 112px; }.method-layout h2 { margin: 27px 0 0; font-size: clamp(43px, 5.5vw, 72px); letter-spacing: -.1em; line-height: .9; }.method-list { border-top: 1px solid var(--line); }.method-list > div { display: grid; grid-template-columns: 65px 1fr; gap: 20px; padding: 23px 0 25px; border-bottom: 1px solid var(--line); }.method-list > div > span { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .14em; }.method-list h3 { margin-bottom: 6px; font-size: 20px; letter-spacing: -.04em; }.method-list p { max-width: 480px; margin: 0; color: var(--muted); font-size: 14px; }
.closing-band { background: var(--ink); color: var(--paper); }.closing-inner { padding-block: 104px 113px; }.closing-inner .eyebrow { color: var(--blue); }.closing-inner h2 { max-width: 820px; margin-bottom: 22px; font-size: clamp(54px, 8vw, 104px); letter-spacing: -.1em; line-height: .87; }.closing-inner > p:not(.eyebrow) { max-width: 510px; margin-bottom: 29px; color: #b7b5af; font-size: 16px; }.closing-links { display: flex; flex-wrap: wrap; gap: 15px 28px; margin-top: 35px; }.closing-links a { color: #a8aaa6; font-size: 12px; font-weight: 750; text-decoration: none; }.site-footer { background: #080909; color: #939590; }.footer-row { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }.footer-mark { color: var(--paper); font-weight: 900; letter-spacing: -.04em; text-transform: none; }.footer-mark span { margin-left: 5px; color: var(--red); font-size: 8px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0,1fr) minmax(280px,.75fr); gap: 35px; }.profile-layout { grid-template-columns: .35fr 1fr; }.profile-facts { grid-column: 2; }.section-heading { grid-template-columns: 1fr .7fr; }.method-layout { gap: 40px; } }
@media (max-width: 700px) { .shell { width: min(var(--shell), calc(100% - 40px)); }.header-row { min-height: 72px; }nav { gap: 11px; }nav a:not(.header-cta) { display: none; }.header-cta { padding: 8px 12px; font-size: 10px; }.hero { display: flex; flex-direction: column; align-items: stretch; gap: 56px; padding-block: 66px 74px; }h1 { font-size: clamp(55px, 16vw, 82px); }.hero-console { width: min(100%, 380px); align-self: center; }.hero-index { margin-top: 55px; }.profile-layout, .section-heading, .method-layout { display: block; }.profile-main h2 { margin-top: 28px; font-size: 42px; }.profile-facts { margin-top: 34px; }.section-heading h2 { margin-top: 28px; font-size: 56px; }.section-intro-copy { margin-top: 24px; }.project-section { padding-block: 86px 92px; }.project-grid { display: block; }.project-card { min-height: 0; margin-bottom: 19px; }.card-visual { height: 160px; flex-basis: 160px; }.card-content { min-height: 420px; }.method-layout h2 { margin-top: 28px; margin-bottom: 46px; font-size: 52px; }.closing-inner { padding-block: 79px 88px; }.closing-inner h2 { font-size: 62px; }.footer-row { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 22px; } }
@media (max-width: 420px) { .card-header { display: block; }.status { display: block; margin-top: 7px; }.card-content h3 { font-size: 40px; }.card-links a { font-size: 10px; }.method-list > div { grid-template-columns: 42px 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }