/* Mobbros Creative Studio — site styles
   Ported from the "Mobbros Website" design (Claude Design export). */

/* ── Fonts (self-hosted, latin + latin-ext) ───────────────────────── */
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/source-serif-4-var-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/source-serif-4-var-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/dm-sans-var-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/dm-sans-var-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/chakra-petch-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/chakra-petch-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/chakra-petch-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/chakra-petch-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/chakra-petch-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/chakra-petch-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:600; font-display:swap; src:url(../fonts/chakra-petch-600i-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:600; font-display:swap; src:url(../fonts/chakra-petch-600i-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:700; font-display:swap; src:url(../fonts/chakra-petch-700i-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:700; font-display:swap; src:url(../fonts/chakra-petch-700i-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  --ink:#151B27; --ink2:#3C4A63; --bg:#EEF0F4; --card:#FFFFFF;
  --muted:#5F6775; --muted2:#4F5766; --label:#8A93A3; --grey:#A6AEBC;
  --soft:#F0F3F8; --line:#EEF1F6; --acc:#A9BEEA; --acc-hover:#8FA9E0; --acc2:#7E92B8;
  --gx:clamp(18px,5vw,88px);
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --race:'Chakra Petch',sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
  --sh-1:0 1px 2px rgba(21,27,39,0.05);
  --sh-card:0 1px 2px rgba(21,27,39,0.05), 0 10px 30px rgba(21,27,39,0.07);
  --sh-lift:0 2px 4px rgba(21,27,39,0.06), 0 22px 50px rgba(21,27,39,0.12);
}

/* ── Base ─────────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); }
body { -webkit-font-smoothing:antialiased; font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); overflow-x:clip; }
:lang(de) p, :lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) li { hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
a { color:var(--ink2); text-decoration:none; }
a:hover { color:var(--ink); }
::selection { background:var(--acc); color:var(--ink); }
input, textarea, button { font-family:inherit; }
img { max-width:100%; }
:focus-visible { outline:2px solid #4C6294; outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; }
.skip:focus { top:12px; color:#fff; }

@keyframes v5up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes v5rev { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes v6travel { 0% { left:0%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes v6dash { to { background-position:-40px 0; } }
@keyframes v6stroke { to { stroke-dashoffset:0; } }
@keyframes v6page { from { opacity:0; transform:translateY(18px); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes v6float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
@keyframes v6grad { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes v6b1 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(8vw,6vh) scale(1.15); } }
@keyframes v6b2 { 0%,100% { transform:translate(0,0) scale(1.1); } 50% { transform:translate(-9vw,-5vh) scale(0.9); } }
@keyframes v6b3 { 0%,100% { transform:translate(0,0) scale(0.95); } 50% { transform:translate(5vw,-8vh) scale(1.2); } }
@keyframes v6streak { from { transform:translateX(0); } to { transform:translateX(360%); } }
@keyframes v6shake { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-3px,1px); } 40% { transform:translate(3px,-1px); } 60% { transform:translate(-2px,1px); } 80% { transform:translate(2px,0); } }
@keyframes v5marq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes v5pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.9); opacity:0; } }
@keyframes v5draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* ── Shell ────────────────────────────────────────────────────────── */
.root { position:relative; isolation:isolate; min-height:100vh; overflow-x:clip; padding-bottom:clamp(30px,5vw,72px); background:var(--bg); transition:background-color .7s ease, color .7s ease; }
.bg-glow, .bg-blobs { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; transition:opacity .9s ease; }
.bg-glow { opacity:0; }
.turbo-mode .bg-glow { opacity:1; }
.bg-blobs { opacity:.22; }
.bg-glow i, .bg-blobs i { position:absolute; border-radius:50%; }
.bg-glow i { filter:blur(40px); }
.bg-blobs i { filter:blur(30px); }

.progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:80; }
.progress i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#A9BEEA,#7E92B8); will-change:width; }

.page { animation:v6page .65s var(--ease) both; }
.inner { padding:clamp(20px,4vw,60px) var(--gx) 0; }

/* ── Header / nav ─────────────────────────────────────────────────── */
.hdr { position:sticky; top:0; z-index:60; display:flex; justify-content:center; padding:clamp(14px,2vw,24px) clamp(12px,3vw,28px); }
.pill { display:flex; align-items:center; gap:clamp(6px,1vw,12px); background:rgba(255,255,255,0.86); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border-radius:999px; padding:7px 7px 7px 15px; box-shadow:0 1px 2px rgba(21,27,39,0.06), 0 12px 34px rgba(21,27,39,0.10); max-width:100%; }
.logo { display:flex; align-items:center; padding-right:5px; transition:opacity .2s ease; }
.logo:hover { opacity:.6; }
.logo img { display:block; height:26px; width:auto; }
@media (max-width:940px) { .logo img { height:22px; } }
.nav { display:flex; align-items:center; gap:2px; }
.nav a, .lang { padding:9px 13px; border-radius:999px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#6B7382; white-space:nowrap; transition:color .25s ease, background .25s ease; }
.nav a:hover, .nav a[aria-current="page"], .lang:hover { color:var(--ink); background:var(--soft); }
.lang { padding:8px 11px; border:1px solid #E3E8F1; }
.menu-btn { display:none; cursor:pointer; border:0; background:var(--soft); width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; font-size:17px; color:var(--ink); }
.btn.cta { font-size:13.5px; gap:9px; padding:7px 7px 7px 17px; white-space:nowrap; }
.btn.cta .ico { width:24px; height:24px; font-size:12px; }
.mmenu { position:absolute; top:calc(100% - 6px); left:12px; right:12px; background:#fff; border-radius:22px; padding:10px; display:none; flex-direction:column; gap:2px; box-shadow:0 18px 50px rgba(21,27,39,0.16); }
.mmenu.open { display:flex; animation:v5up .3s ease both; }
.mmenu a { padding:14px 16px; border-radius:14px; font-size:16px; font-weight:500; color:var(--ink); }
.mmenu a[aria-current="page"] { background:var(--soft); }
@media (max-width:940px) { .nav { display:none; } .menu-btn { display:inline-flex; } }
@media (max-width:419px) { .btn.cta .t { display:none; } .btn.cta { padding:7px; } .lang { padding:8px 9px; } }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { cursor:pointer; border:0; display:inline-flex; align-items:center; gap:10px; border-radius:999px; font-size:15px; font-weight:700; line-height:1.25; padding:9px 9px 9px 21px; transition:translate .35s var(--ease), transform .25s ease, background .25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn .ico { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:50%; font-size:13px; }
.btn-sm { font-size:14.5px; padding:8px 8px 8px 19px; }
.btn-sm .ico { width:27px; height:27px; font-size:12px; }
.btn-xs { font-size:14px; padding:7px 7px 7px 17px; }
.btn-xs .ico { width:26px; height:26px; font-size:12px; }
.btn-dark, .btn-dark:hover { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#2B3446; }
.btn-dark .ico { background:var(--acc); color:var(--ink); }
.btn-light, .btn-light:hover { background:#fff; color:var(--ink); }
.btn-light .ico { background:#EEF1F7; }
.btn-light.alt .ico { background:var(--acc); }
.btn-acc, .btn-acc:hover { background:var(--acc); color:var(--ink); }
.btn-acc:hover { background:var(--acc-hover); }
.btn-acc .ico { background:#fff; }
.btn-plain { padding:9px 20px; font-size:14.5px; }
.btn-shadow { box-shadow:0 1px 2px rgba(21,27,39,0.07), 0 8px 22px rgba(21,27,39,0.10); }

/* ── Type helpers ─────────────────────────────────────────────────── */
.serif { font-family:var(--serif); font-weight:600; }
.eyebrow { margin:0 0 12px; font-weight:400; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.h2 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.6vw,60px); line-height:1.04; letter-spacing:-.025em; }
.lede { margin:0; font-size:clamp(15px,1.25vw,17.5px); line-height:1.65; color:var(--muted); }
.txt { margin:0; font-size:15.5px; line-height:1.6; color:var(--muted); }
.center { text-align:center; }

/* Hand-drawn underline / strike */
.u { position:relative; display:inline-block; white-space:nowrap; }
.nw { white-space:nowrap; }
.u svg { position:absolute; left:-3%; bottom:-.16em; width:106%; height:.3em; overflow:visible; pointer-events:none; }
.u path, .strike path { fill:none; stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.strike { position:relative; display:inline-block; }
.strike svg { position:absolute; left:-2%; top:38%; width:104%; height:.32em; overflow:visible; pointer-events:none; }
.strike path { stroke-width:4; }
.u-load { animation:v6stroke .9s cubic-bezier(.6,0,.3,1) var(--ud,.5s) forwards; }
html:not(.js) .u path, html:not(.js) .strike path { stroke-dashoffset:0; }

/* Scroll reveal */
.js [data-r] { opacity:0; }
.js [data-r].in { opacity:1; animation:v5rev .7s var(--ease) var(--rd,0s) backwards; }
.in [data-draw] { animation:v6stroke .95s cubic-bezier(.6,0,.3,1) calc(var(--rd,0s) + .45s + var(--di,0s)) forwards; }

/* Card basics */
.card { background:var(--card); min-width:0; box-shadow:var(--sh-1); }
.lift { transition:transform .35s ease, box-shadow .35s ease; }
.lift:hover { transform:translateY(-6px); box-shadow:var(--sh-lift); }

.span2 { grid-column:span 2; min-width:0; }
@media (max-width:719px) { .span2 { grid-column:span 1; } }

/* ── Home: hero ───────────────────────────────────────────────────── */
.hero { padding:clamp(22px,4.5vw,72px) var(--gx) clamp(22px,3vw,44px); }
.badge { display:inline-flex; align-items:center; gap:10px; background:var(--card); border-radius:999px; padding:7px 15px 7px 11px; margin-bottom:clamp(18px,3vw,34px); box-shadow:0 1px 2px rgba(21,27,39,0.06); animation:v5up .6s ease both; }
.badge .t { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pulse { position:relative; display:inline-flex; width:8px; height:8px; flex:none; }
.pulse i { position:absolute; inset:0; border-radius:50%; background:#4E8259; }
.pulse i:first-child { background:#6F9E7A; animation:v5pulse 2.2s ease-out infinite; }
.h-hero { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(34px,6.2vw,84px); line-height:1.02; letter-spacing:-.025em; max-width:20ch; animation:v5up .7s ease both .05s; }
.h-hero .grey { color:var(--grey); }
.rot-wrap { font-size:clamp(34px,6.2vw,84px); line-height:1.02; min-height:1.1em; margin-top:.04em; animation:v5up .7s ease both .12s; }
.rot { display:inline-block; position:relative; font-family:var(--serif); font-weight:600; font-style:italic; letter-spacing:-.025em; color:#4C6294; animation:v5up .55s var(--ease) both; }
.rot svg { position:absolute; left:-2%; bottom:-.1em; width:100%; height:.26em; overflow:visible; pointer-events:none; }
.rot path { fill:none; stroke:var(--acc); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:v6stroke .9s cubic-bezier(.6,0,.3,1) .35s forwards; }
.hero-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(18px,3.5vw,56px); align-items:end; margin-top:clamp(24px,4vw,52px); }
.hero-grid p { max-width:42ch; animation:v5up .7s ease both .2s; }
.hero-btns { display:flex; gap:10px; flex-wrap:wrap; animation:v5up .7s ease both .28s; }

.scroll-hint { display:flex; justify-content:center; padding:clamp(10px,2vw,24px) 0 0; }
.scroll-hint span { display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); animation:v6float 2.4s ease-in-out infinite; text-align:center; }
.scroll-hint b { font-size:14px; font-weight:400; }

.marquee { overflow:hidden; padding:clamp(6px,1vw,14px) 0 clamp(20px,3vw,40px); }
.marquee > div { display:flex; width:max-content; animation:v5marq 38s linear infinite; font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,34px); letter-spacing:-.015em; white-space:nowrap; color:var(--muted); }
.marquee span { padding:0 16px; }
.marquee .sep { color:var(--acc); }

/* Punchlines */
.punch { padding:clamp(30px,6vw,110px) var(--gx) clamp(20px,4vw,70px); }
.punch > div { display:flex; flex-direction:column; gap:clamp(14px,2.4vw,34px); }
.punch p { margin:0; text-wrap:balance; font-family:var(--serif); font-weight:600; font-size:clamp(30px,5.4vw,76px); line-height:1.02; letter-spacing:-.025em; max-width:18ch; }
.punch .p1 { color:var(--grey); }
.punch .p2 { color:var(--acc2); max-width:20ch; align-self:center; text-align:center; }
.punch .p3 { font-style:italic; align-self:flex-end; text-align:right; }

/* Section spacing */
.sec { padding:0 var(--gx) clamp(40px,6vw,96px); }
.sec-m { padding:0 var(--gx) clamp(34px,5vw,80px); }
.sec-mo { padding:0 var(--gx) clamp(28px,4vw,64px); }

/* Today → Tomorrow */
/* Scroll choreography shared by the staged sections ([data-seq] gets .go, see site.js) */
@keyframes fxup { from { opacity:0; translate:0 12px; } }
@keyframes fxpop { from { opacity:0; transform:scale(0) rotate(-120deg); } }
@keyframes fxring { from { transform:scale(1); opacity:.7; } to { transform:scale(1.35,1.9); opacity:0; } }
@keyframes ttnudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(5px); } }
@keyframes ttstrike { from { background-size:0% 2px; color:var(--ink2); } }
@keyframes ttslide { from { opacity:0; translate:28px 0; } }
@keyframes ttpanel { from { opacity:0; transform:scale(.94); } }
@keyframes ttchip { 0% { opacity:0; transform:scale(.4); } 60% { opacity:1; transform:scale(1.12); } 100% { transform:none; } }
@keyframes ttline { from { clip-path:inset(0 100% 0 0); } }
@keyframes ttlinev { from { clip-path:inset(0 0 100% 0); } }
@keyframes ttdashv { to { background-position:0 -40px; } }
@keyframes ttshine { 0% { background-position:150% 0; } 45%,100% { background-position:-50% 0; } }
@keyframes ttping { 0%,34%,100% { box-shadow:0 0 0 0 rgba(169,190,234,0); } 12% { box-shadow:0 0 0 7px rgba(169,190,234,0.55); } }
@keyframes tttravelv { 0% { top:0%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:100%; opacity:0; } }

.tt { container-type:inline-size; border-radius:28px; padding:clamp(22px,3.6vw,56px); box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 20px 56px rgba(21,27,39,0.09); }
.tt .eyebrow { margin-bottom:clamp(22px,3vw,40px); }
.tt .eyebrow .arr { display:inline-block; color:var(--acc2); animation:ttnudge 1.8s ease-in-out infinite; }
.tt-row { display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); align-items:center; }
.tt-col { flex:1 1 220px; min-width:0; }
.tt-col h3 { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.tt-col.today h3::before { content:""; width:8px; height:8px; border-radius:50%; background:#C7CDD8; }
.tt-col.tomorrow h3 { color:var(--acc2); }
.tt-col .pulse i { background:var(--acc2); }
.tt-col .pulse i:first-child { background:var(--acc); }
.tt-col ul { list-style:none; margin:0; padding:0; }
.tt-col li { position:relative; padding:11px 0 11px 32px; border-top:1px solid var(--line); font-size:clamp(15px,1.3vw,18px); line-height:1.4; }
.tt-col li::before { position:absolute; left:0; top:calc(11px + (1.4em - 20px) / 2); display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:700; line-height:1; }
.tt-col.today li { color:var(--label); }
.tt-col.today li::before { content:"✕"; background:#FBE4DE; color:#C9533B; }
.tt-col.today li span { background:linear-gradient(#E0674F,#E0674F) 0 56% / 100% 2px no-repeat; }
.tt-col.tomorrow { position:relative; isolation:isolate; }
.tt-col.tomorrow::before { content:""; position:absolute; inset:-18px -16px -6px; z-index:-1; border-radius:20px; background:linear-gradient(125deg,#EAF0FF 0%,#F3EDFF 50%,#E6F5EE 100%); background-size:200% 200%; box-shadow:inset 0 0 0 1px rgba(169,190,234,0.4); animation:v6grad 12s ease-in-out infinite; }
.tt-col.tomorrow::after { content:""; position:absolute; inset:-18px -16px -6px; z-index:-1; border-radius:20px; pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.75) 50%,transparent 60%) no-repeat; background-size:250% 100%; background-position:150% 0; animation:ttshine 6s ease-in-out 2.5s infinite; }
.tt-col.tomorrow li { color:var(--ink); font-weight:500; border-top-color:rgba(169,190,234,0.4); transition:transform .3s var(--ease); }
.tt-col.tomorrow li:hover { transform:translateX(5px); }
.tt-col.tomorrow li::before { content:"✓"; background:var(--ink); color:#fff; font-size:11px; }
.tt-track { position:relative; flex:.6 1 120px; height:44px; min-width:120px; display:flex; align-items:center; justify-content:center; }
.tt-track .dash { position:absolute; left:0; right:12px; top:50%; height:2px; margin-top:-1px; background-image:linear-gradient(90deg,#A9BEEA 50%,transparent 50%); background-size:20px 2px; animation:v6dash 1.2s linear infinite; }
.tt-track::after { content:""; position:absolute; right:2px; top:50%; width:9px; height:9px; margin-top:-5.5px; border:solid var(--acc2); border-width:2px 2px 0 0; transform:rotate(45deg); }
.tt-track .dot { position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 6px rgba(169,190,234,0.45); animation:v6travel 3.2s cubic-bezier(.45,0,.55,1) infinite; }
.tt-track .dot::before { content:""; position:absolute; right:7px; top:6px; width:36px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(21,27,39,0.5)); }
.tt-track .chip { position:relative; z-index:1; background:var(--ink); border-radius:999px; padding:9px 16px; display:flex; align-items:center; box-shadow:0 8px 22px rgba(21,27,39,0.22); }
.tt-track .chip::before, .tt-track .chip::after { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--acc); opacity:0; animation:fxring 2.6s ease-out infinite; }
.tt-track .chip::after { animation-delay:1.3s; }
.tt-track .chip img { display:block; height:13px; width:auto; filter:brightness(0) invert(1); }

/* Heute: each pain point appears, then gets crossed out. Morgen: the answers slide in. */
.seq .tt-col:not(.go) li, .seq .tt-col.tomorrow:not(.go) h3, .seq .tt-col.tomorrow:not(.go)::before, .seq .tt-col.tomorrow:not(.go)::after, .seq .tt-track:not(.go) { opacity:0; }
.tt-col.today.go li { animation:fxup .45s var(--ease) calc(var(--i) * .22s) backwards; }
.tt-col.today.go li span { animation:ttstrike .5s cubic-bezier(.6,0,.3,1) calc(var(--i) * .22s + .3s) backwards; }
.tt-col.today.go li::before { animation:fxpop .4s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .22s + .45s) backwards; }
.tt-track.go .dash { animation:ttline .6s var(--ease) backwards, v6dash 1.2s linear infinite; }
.tt-track.go .chip { animation:ttchip .6s var(--ease) .15s backwards; }
.tt-track.go::after { animation:fxup .3s ease .45s backwards; }
.tt-col.tomorrow.go::before { animation:ttpanel .6s var(--ease) backwards, v6grad 12s ease-in-out infinite; }
.tt-col.tomorrow.go h3 { animation:fxup .45s var(--ease) .1s backwards; }
.tt-col.tomorrow.go li { animation:ttslide .55s var(--ease) calc(var(--i) * .16s + .2s) backwards; }
.tt-col.tomorrow.go li::before { animation:fxpop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .16s + .45s) backwards, ttping 4s ease-out calc(var(--i) * .5s + 1.6s) infinite; }

/* Narrow card: stack the columns and run the track downwards */
@container (max-width:640px) {
  .tt-row { flex-direction:column; align-items:stretch; gap:14px; }
  .tt-col, .tt-track { flex:none; }
  .tt-track { height:88px; min-width:0; margin:4px 0 10px; }
  .tt-track .dash { left:50%; right:auto; top:0; bottom:12px; width:2px; height:auto; margin:0 0 0 -1px; background-image:linear-gradient(180deg,#A9BEEA 50%,transparent 50%); background-size:2px 20px; animation-name:ttdashv; }
  .tt-track.go .dash { animation-name:ttlinev, ttdashv; }
  .tt-track::after { right:auto; top:auto; left:50%; bottom:2px; margin:0 0 0 -5.5px; transform:rotate(135deg); }
  .tt-track .dot { top:0; left:50%; animation-name:tttravelv; }
  .tt-track .dot::before { right:auto; top:auto; left:6px; bottom:7px; width:2px; height:36px; background:linear-gradient(180deg,transparent,rgba(21,27,39,0.5)); }
  .tt-col.tomorrow::before, .tt-col.tomorrow::after { inset:-16px -12px -4px; }
}

/* Is this you */
.you-head { margin-bottom:clamp(20px,3vw,40px); }
.you-head .h2 { max-width:18ch; }
.grid-you { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(12px,1.6vw,20px); }
.you-card { border-radius:22px; padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; gap:10px; box-shadow:var(--sh-card); }
.you-card .tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.you-card h3 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.2vw,27px); line-height:1.12; letter-spacing:-.015em; }
.you-card p { color:var(--muted2); }

/* How it works */
.how-head { margin-bottom:clamp(20px,3vw,40px); }
.how-head .eyebrow { color:#6B5BA8; }
.how-head .h2 { margin:0 auto 14px; max-width:20ch; text-wrap:balance; }
.how-head .lede { margin:0 auto; max-width:48ch; color:var(--muted2); }
.kinds { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(22px,3vw,40px); }
.kinds span { display:inline-block; padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink); box-shadow:0 1px 2px rgba(21,27,39,0.06); animation:v6float 3.2s ease-in-out infinite; }
.grid-how { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:clamp(12px,1.6vw,20px); }
.how-card { position:relative; background:rgba(255,255,255,0.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:24px; padding:clamp(22px,2.8vw,34px); min-width:0; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 12px 34px rgba(21,27,39,0.08); }
.how-card .n { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; font-family:var(--serif); font-weight:600; font-size:21px; margin-bottom:18px; }
.how-card h3 { margin:0 0 8px; font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.3vw,28px); line-height:1.12; letter-spacing:-.015em; }
.how-card p { color:var(--muted2); }
.how-cta { display:flex; justify-content:center; margin-top:clamp(22px,3vw,40px); }

/* Screens / project tiles */
.grid-mosaic { display:grid; grid-template-columns:1fr; gap:clamp(10px,1.4vw,18px); }
@media (min-width:720px) { .grid-mosaic { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .grid-mosaic { grid-template-columns:repeat(4,1fr); } }
.tile { position:relative; display:block; min-width:0; border-radius:18px; overflow:hidden; background:#DDE2EA; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 10px 28px rgba(21,27,39,0.08); transition:transform .45s var(--ease), box-shadow .45s ease; }
.tile:hover { transform:translateY(-7px) scale(1.012); box-shadow:0 2px 4px rgba(21,27,39,0.07), 0 22px 50px rgba(21,27,39,0.14); }
.tile.w2 { grid-column:span 2; }
@media (max-width:719px) { .tile.w2 { grid-column:span 1; } }
.tile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.shot { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--sbg,#C7D4FF); }
.shot-bar { display:flex; gap:5px; padding:11px 13px; }
.shot-bar i { width:7px; height:7px; border-radius:50%; background:rgba(21,27,39,0.16); }
.shot-body { flex:1; margin:0 12px; border-radius:12px 12px 0 0; background:rgba(255,255,255,0.62); padding:clamp(14px,1.8vw,22px); display:flex; flex-direction:column; gap:7px; }
.shot-lines { display:flex; flex-direction:column; gap:7px; margin-bottom:auto; }
.shot-lines i { display:block; height:7px; border-radius:4px; background:rgba(21,27,39,0.07); }
.shot-lines i:nth-child(1) { width:42%; }
.shot-lines i:nth-child(2) { width:68%; }
.shot-lines i:nth-child(3) { width:55%; }
.shot-blocks { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; height:46%; }
.shot-blocks i { border-radius:8px; background:rgba(21,27,39,0.06); }
.shot-kind { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.shot-title { font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.3vw,30px); line-height:1.05; letter-spacing:-.02em; color:var(--ink); }

/* Home mosaic: even rows, hover chip + shine, traffic lights on hover */
.grid-mosaic { grid-auto-rows:clamp(230px,27vw,380px); grid-auto-flow:dense; }
.shot-body { min-height:0; }
.shot-bar i { transition:background .3s ease; }
.tile:hover .shot-bar i:nth-child(1) { background:#FF6159; }
.tile:hover .shot-bar i:nth-child(2) { background:#FFBD2E; transition-delay:.05s; }
.tile:hover .shot-bar i:nth-child(3) { background:#28C840; transition-delay:.1s; }
.tile::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,0.5) 50%,transparent 65%); transform:translateX(-120%); }
.tile:hover::after { transform:translateX(120%); transition:transform .9s var(--ease); }
.tile > img { transition:transform .8s var(--ease); }
.tile:hover > img { transform:scale(1.04); }
.tile-go { position:absolute; z-index:2; right:clamp(24px,2.6vw,34px); bottom:clamp(14px,1.8vw,22px); width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ink); color:#fff; font-size:14px; opacity:0; transform:scale(.5) rotate(-45deg); transition:opacity .3s ease, transform .45s var(--ease); }
.tile:hover .tile-go, .tile:focus-visible .tile-go { opacity:1; transform:none; }
@media (hover:none) { .tile-go { opacity:1; transform:none; } }
.tile.in .shot-kind, .tile.in .shot-title { animation:fxup .5s var(--ease) calc(var(--rd,0s) + .3s) backwards; }

/* Mini-UIs (placeholders until screenshots exist) */
@keyframes mtype { from { clip-path:inset(0 100% 0 0); } }
@keyframes mblink { 50% { opacity:0; } }
@keyframes mpop { from { opacity:0; scale:.8; } }
@keyframes mlift { 0%,22%,100% { translate:0 0; box-shadow:0 1px 2px rgba(21,27,39,0.06); } 7%,15% { translate:0 -6px; box-shadow:0 10px 18px rgba(21,27,39,0.12); } }
@keyframes mcart { 0%,6%,100% { transform:scale(1); } 12% { transform:scale(1.5); } }
@keyframes msel { 0%,16% { translate:0 0; } 20%,36% { translate:0 100%; } 40%,56% { translate:0 200%; } 60%,76% { translate:0 300%; } 80%,96% { translate:0 400%; } 100% { translate:0 0; } }
@keyframes mfeed { to { transform:translateY(-50%); } }
@keyframes mfan { from { transform:none; } }
@keyframes mping { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 45%,transparent); } 100% { box-shadow:0 0 0 10px transparent; } }

.mock { --a:var(--sac,#5B74C9); --soft:color-mix(in srgb,var(--a) 22%,#fff); position:relative; flex:1; min-height:0; margin-bottom:clamp(8px,1.2vw,14px); }
.mock i, .mock b { display:block; }
.m-shop .card, .m-split .side, .m-split .chart { border-radius:8px; background-color:rgba(255,255,255,0.85); box-shadow:0 1px 2px rgba(21,27,39,0.06); }

/* code editor */
.m-code { counter-reset:ln; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.m-code p { position:relative; flex:none; display:flex; align-items:center; gap:6px; height:14px; margin:0; padding-left:calc(24px + var(--in) * 12px); border-radius:4px; }
.m-code p::before { counter-increment:ln; content:counter(ln); position:absolute; left:0; width:14px; text-align:right; font-family:var(--mono); font-size:9px; line-height:14px; color:rgba(21,27,39,0.32); }
.m-code p:nth-child(5) { background:color-mix(in srgb,var(--a) 12%,transparent); }
.m-code p i { height:7px; border-radius:4px; background:rgba(21,27,39,0.12); }
.m-code p i.k { background:var(--a); opacity:.8; }
.m-code p i.s { background:#E07A4F; opacity:.55; }
.m-code .caret { width:2px; height:12px; background:var(--ink); animation:mblink 1s steps(1) infinite; }
.tile.in .m-code p { animation:mtype .45s steps(6) calc(var(--rd,0s) + .35s + var(--i) * .12s) backwards; }

/* shop */
.m-shop { display:flex; flex-direction:column; gap:clamp(8px,1vw,12px); }
.m-shop .nav { display:flex; align-items:center; gap:8px; }
.m-shop .nav i { width:9%; height:6px; border-radius:3px; background:rgba(21,27,39,0.12); }
.m-shop .nav .logo { width:14%; height:10px; margin-right:auto; background:var(--a); opacity:.8; }
.m-shop .cart { position:relative; width:14px; height:14px; border-radius:4px; background:var(--ink); }
.m-shop .cart::after { content:""; position:absolute; top:-4px; right:-4px; width:8px; height:8px; border-radius:50%; background:var(--a); border:2px solid #fff; animation:mcart 2s ease-in-out .3s infinite; }
.m-shop .grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,.9vw,12px); }
.m-shop .card { display:flex; flex-direction:column; gap:5px; min-height:0; padding:6px; animation:mlift 8s ease-in-out calc(var(--i) * 2s) infinite; }
.m-shop .card .img { flex:1; min-height:0; border-radius:5px; background:var(--soft); }
.m-shop .card .l1, .m-shop .card .l2 { height:5px; border-radius:3px; background:rgba(21,27,39,0.12); }
.m-shop .card .l1 { width:80%; }
.m-shop .card .l2 { width:50%; }
.m-shop .card .buy { width:40%; height:8px; border-radius:4px; background:var(--a); opacity:.85; }
.tile.in .m-shop .card { animation:mpop .5s cubic-bezier(.3,1.4,.5,1) calc(var(--rd,0s) + .35s + var(--i) * .1s) backwards, mlift 8s ease-in-out calc(var(--i) * 2s) infinite; }

/* list + chart */
.m-split { display:grid; grid-template-columns:34% 1fr; gap:clamp(8px,1vw,12px); }
.m-split .side { position:relative; display:flex; flex-direction:column; padding:6px; }
.m-split .side p { position:relative; z-index:1; flex:1; display:flex; align-items:center; gap:7px; margin:0; padding:0 6px; }
.m-split .side .av { flex:none; width:12px; height:12px; border-radius:50%; background:var(--soft); }
.m-split .side .ln { flex:1; max-width:70%; height:5px; border-radius:3px; background:rgba(21,27,39,0.12); }
.m-split .side .sel { position:absolute; top:6px; left:4px; right:4px; height:calc((100% - 12px) / 5); border-radius:6px; background:color-mix(in srgb,var(--a) 16%,#fff); animation:msel 7.5s var(--ease) infinite; }
.m-split .chart { position:relative; background-image:linear-gradient(rgba(21,27,39,0.05) 1px,transparent 1px); background-size:100% 25%; }
.m-split svg { position:absolute; top:12px; left:12px; width:calc(100% - 24px); height:calc(100% - 24px); overflow:visible; }
.m-split .area { fill:color-mix(in srgb,var(--a) 16%,transparent); }
.m-split .line { fill:none; stroke:var(--a); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.m-split .pt { position:absolute; right:12px; top:calc(12px + (100% - 24px) * .16); width:10px; height:10px; margin:-5px -5px 0 0; border-radius:50%; background:var(--a); border:2px solid #fff; animation:mping 1.8s ease-out infinite; }
.tile.in .m-split svg { animation:mtype 1.1s var(--ease) calc(var(--rd,0s) + .4s) backwards; }
.tile.in .m-split .pt { animation:mpop .4s cubic-bezier(.3,1.6,.5,1) calc(var(--rd,0s) + 1.35s) backwards, mping 1.8s ease-out calc(var(--rd,0s) + 1.75s) infinite; }

/* phone app */
.m-phone { display:flex; justify-content:center; }
.m-phone .ph { position:relative; height:100%; aspect-ratio:9/17; overflow:hidden; padding:16px 6px 0; border:3px solid rgba(21,27,39,0.85); border-radius:18px; background:#fff; box-shadow:0 10px 24px rgba(21,27,39,0.12); }
.m-phone .ph::before { content:""; position:absolute; z-index:1; top:4px; left:35%; width:30%; height:6px; border-radius:4px; background:rgba(21,27,39,0.85); }
.m-phone .feed { animation:mfeed 10s linear infinite; }
.m-phone .post { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; padding:5px; border-radius:7px; background:rgba(21,27,39,0.04); }
.m-phone .post .im { aspect-ratio:16/10; border-radius:5px; background:var(--soft); }
.m-phone .post:nth-child(3n+2) .im { background:color-mix(in srgb,var(--a) 50%,#fff); }
.m-phone .post i:not(.im) { height:4px; border-radius:2px; background:rgba(21,27,39,0.12); }
.m-phone .post i:last-child { width:60%; }
.tile.in .m-phone .ph { animation:mpop .6s cubic-bezier(.3,1.4,.5,1) calc(var(--rd,0s) + .35s) backwards; }

/* catalogue pages */
.m-cat .pg { position:absolute; top:10%; bottom:6%; left:50%; aspect-ratio:3/4; display:flex; flex-direction:column; gap:5px; padding:clamp(6px,1vw,12px); border-radius:6px; background:#fff; box-shadow:0 6px 16px rgba(21,27,39,0.12); translate:-50% 0; transform-origin:50% 100%; transform:rotate(var(--r)) translateX(var(--x)) scale(var(--s,1)); transition:transform .5s var(--ease); }
.m-cat .pg:nth-child(1) { --r:-9deg; --x:-26%; --s:.9; }
.m-cat .pg:nth-child(2) { --r:0deg; --x:0%; z-index:1; }
.m-cat .pg:nth-child(3) { --r:9deg; --x:26%; --s:.9; }
.tile:hover .m-cat .pg:nth-child(1) { --r:-14deg; --x:-36%; }
.tile:hover .m-cat .pg:nth-child(2) { transform:translateY(-6px); }
.tile:hover .m-cat .pg:nth-child(3) { --r:14deg; --x:36%; }
.m-cat .pg .im { flex:1; min-height:0; border-radius:4px; background:var(--soft); }
.m-cat .pg:nth-child(2) .im { background:color-mix(in srgb,var(--a) 45%,#fff); }
.m-cat .pg i:not(.im) { height:5px; border-radius:3px; background:rgba(21,27,39,0.12); }
.m-cat .pg i:nth-child(3) { width:70%; }
.m-cat .pg i:nth-child(4) { width:45%; }
.tile.in .m-cat .pg { animation:mfan .8s var(--ease) calc(var(--rd,0s) + .45s) backwards; }

/* Capabilities */
.caps { padding:0 var(--gx) clamp(20px,3vw,48px); }
.caps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(20px,4vw,64px); align-items:start; }
.caps-side { position:sticky; top:96px; min-width:0; }
.caps-side .h2 { margin:0 0 16px; font-size:clamp(26px,3.6vw,48px); line-height:1.06; letter-spacing:-.02em; max-width:16ch; }
.caps-side .txt { margin:0 0 20px; line-height:1.65; max-width:36ch; }
.caps-list { display:flex; flex-direction:column; gap:clamp(10px,1.4vw,16px); }
.cap { border-radius:20px; padding:clamp(18px,2.2vw,28px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:clamp(12px,2vw,28px); align-items:start; transition:transform .35s ease, box-shadow .35s ease; }
.cap:hover { transform:translateX(6px); box-shadow:0 2px 4px rgba(21,27,39,0.06), 0 16px 40px rgba(21,27,39,0.10); }
.cap .num, .svc .num { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); margin-bottom:8px; }
.cap h3 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.1vw,27px); line-height:1.14; letter-spacing:-.015em; }
.cap .bar { height:2px; margin-top:10px; background:var(--acc); transform-origin:left; animation:v5draw .6s var(--ease) both; }
.js .cap .bar { animation:none; transform:scaleX(0); }
.js .cap.in .bar { animation:v5draw .6s var(--ease) calc(var(--rd,0s) + .25s) forwards; }
.cap p { line-height:1.65; }

/* Featured AI */
.feat { padding:clamp(24px,4vw,64px) var(--gx); }
.feat-card { background:var(--ink); border-radius:28px; padding:clamp(22px,3.4vw,52px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(20px,3.5vw,56px); align-items:center; box-shadow:0 20px 60px rgba(21,27,39,0.18); }
.feat-card .eyebrow { margin-bottom:14px; color:var(--acc); }
.feat-card h2 { margin:0 0 14px; font-family:var(--serif); font-weight:600; font-size:clamp(25px,3.4vw,44px); line-height:1.08; letter-spacing:-.02em; color:#fff; max-width:20ch; }
.feat-card p.lede { margin:0 0 24px; font-size:clamp(15px,1.2vw,17px); color:#AEB6C4; max-width:42ch; }
.feat-card .btn-acc:hover { background:#fff; }
.feat-card .btn-acc .ico { background:var(--ink); color:#fff; }

/* AI chat mock */
.chat { position:relative; aspect-ratio:4/3; min-width:0; border-radius:20px; overflow:hidden; background:#222A3A; display:flex; flex-direction:column; padding:clamp(14px,2vw,22px); gap:12px; font-size:clamp(13px,1.1vw,15px); line-height:1.5; }
.chat-top { display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8A93A3; }
.chat-top span { display:flex; align-items:center; gap:8px; }
.chat-top .pulse i { background:#4E8259; }
.chat-msgs { flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.msg { max-width:86%; padding:11px 14px; border-radius:16px; }
.msg.me { align-self:flex-end; background:var(--acc); color:var(--ink); border-bottom-right-radius:5px; }
.msg.ai { align-self:flex-start; background:#2E3748; color:#E6E9F0; border-bottom-left-radius:5px; }
.msg.ai small { display:block; width:fit-content; margin-top:8px; padding:3px 9px; border-radius:999px; background:rgba(169,190,234,0.14); color:var(--acc); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.chat-input { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(255,255,255,0.1); border-radius:999px; padding:8px 8px 8px 16px; color:#6E7686; }
.chat-input b { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--acc); color:var(--ink); font-weight:400; }

/* Long game */
.grid-long { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(12px,1.6vw,20px); }
.long-head { padding:clamp(8px,1vw,14px) 0; }
.long-head .h2 { font-size:clamp(28px,4.4vw,58px); max-width:18ch; }
.ver { border-radius:22px; padding:clamp(20px,2.4vw,30px); }
.ver .v { font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(34px,4vw,52px); line-height:1; color:var(--acc); margin-bottom:14px; }
.ver h3 { margin:0 0 8px; font-family:var(--serif); font-weight:600; font-size:clamp(19px,2vw,24px); line-height:1.15; }
.ver p { font-size:15px; }

/* ── Turbo ────────────────────────────────────────────────────────── */
.turbo { --tInk:#151B27; --tAcc:#6F9E7A; --tSub:#7E92B8; --tMuted:#5F6775; --tLine:#E5E9F1; --tPanel:rgba(255,255,255,0.6); --tLine2:#E3E9F1; --tKey:#8A93A3; --tTrack:#E5E9F1; --tHub:#FFFFFF; --tNeedle:#6F9E7A; --tRing:#EEF1F6; --tOn:0;
  position:relative; overflow:hidden; color:var(--tInk); background:linear-gradient(135deg,#EDF1EE 0%,#EEF0F4 55%,#F1EFF3 100%); border-radius:28px; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 24px 70px rgba(21,27,39,0.14); transition:color .6s ease; }
.turbo.on { --tInk:#FFFFFF; --tAcc:#FF7A45; --tSub:#A9BEEA; --tMuted:#AEB6C4; --tLine:rgba(255,255,255,0.1); --tPanel:rgba(255,255,255,0.02); --tLine2:rgba(255,255,255,0.06); --tKey:#6E7686; --tTrack:rgba(255,255,255,0.07); --tHub:#1A2030; --tNeedle:#FF7A45; --tRing:#1A2030; --tOn:1; }
.turbo.shake { animation:v6shake .12s linear .25s 10; }
.t-night { position:absolute; inset:0; pointer-events:none; background-color:#0B0E15; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px); opacity:var(--tOn); transition:opacity .8s ease; }
.t-check { position:relative; height:10px; background:repeating-conic-gradient(#FFFFFF 0 25%, #0B0E15 0 50%) 0 0/10px 10px; opacity:var(--tOn); transition:opacity .8s ease; }
.t-streaks { display:none; position:absolute; inset:14px 0 0 0; pointer-events:none; overflow:hidden; }
.turbo.on .t-streaks { display:block; }
.t-streaks i { position:absolute; left:-40%; height:2px; width:40%; border-radius:2px; }
.t-body { position:relative; padding:clamp(18px,2.6vw,38px) clamp(18px,3vw,44px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(18px,3vw,40px); align-items:center; }
.t-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-family:var(--race); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--tAcc); transition:color .6s ease; }
.t-eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--tAcc); animation:v5pulse 1.8s ease-out infinite; flex:none; }
.t-head { margin:0 0 6px; font-family:var(--race); font-weight:700; font-style:italic; font-size:clamp(38px,5.4vw,72px); line-height:.9; letter-spacing:-.01em; text-transform:uppercase; }
.t-head i { font-style:inherit; color:var(--tAcc); }
.t-tag { margin:0 0 10px; font-family:var(--race); font-weight:600; font-style:italic; font-size:clamp(14px,1.4vw,18px); letter-spacing:.08em; text-transform:uppercase; color:var(--tSub); transition:color .6s ease; }
.t-copy { margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--tMuted); max-width:46ch; transition:color .6s ease; }
.tele { border:1px solid var(--tLine); border-radius:14px; overflow:hidden; background:var(--tPanel); max-width:460px; transition:background .6s ease, border-color .6s ease; margin:0; }
.tele div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 12px; border-top:1px solid var(--tLine2); font-family:var(--race); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.tele div:first-child { border-top-color:transparent; }
.tele dt { color:var(--tKey); }
.tele dd { margin:0; font-weight:700; color:#3C4A63; transition:color .35s ease, text-shadow .35s ease; }
.turbo.on .tele dd { color:var(--on-c); text-shadow:0 0 10px rgba(255,154,107,0.5); transition-delay:var(--d); }
.t-side { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 22px; min-width:0; }
.gauge { position:relative; width:clamp(190px,20vw,250px); aspect-ratio:1/1; flex:none; }
.gauge svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.g-night { opacity:var(--tOn); transition:opacity .8s ease; }
.g-track { fill:none; stroke-width:10; stroke-linecap:round; stroke:var(--tTrack); transition:stroke .6s ease; }
.g-fill { fill:none; stroke-width:10; stroke-linecap:round; stroke:#A9C9B2; stroke-dasharray:1; stroke-dashoffset:.719; transition:stroke-dashoffset 2.2s cubic-bezier(.3,1.25,.5,1); }
.turbo.on .g-fill { stroke:url(#v6g); stroke-dashoffset:.04; filter:drop-shadow(0 0 6px rgba(255,122,69,0.55)); }
.tk-M { stroke:#3C4A63; } .turbo.on .tk-M { stroke:#E6E9F0; }
.tk-m { stroke:#C7CDD8; } .turbo.on .tk-m { stroke:#4A5264; }
.tk-r { stroke:#FF3B2F; }
.tl { fill:#5F6775; } .turbo.on .tl { fill:#AEB6C4; }
.tl-r { fill:#FF6A55; }
.g-needle { transform-origin:150px 150px; transform:rotate(-59.06deg); transition:transform 2.2s cubic-bezier(.3,1.25,.5,1); }
.turbo.on .g-needle { transform:rotate(124.88deg); }
.g-needle path:first-child, .g-dot { fill:var(--tNeedle); transition:fill .6s ease; }
.g-hub { fill:var(--tHub); stroke:var(--tNeedle); stroke-width:2.5; transition:fill .6s ease, stroke .6s ease; }
.g-read { position:absolute; left:0; right:0; bottom:17%; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; }
.g-speed { font-family:var(--race); font-weight:700; font-style:italic; font-size:clamp(26px,2.8vw,34px); line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--tInk); transition:color .6s ease; }
.g-gear { display:flex; align-items:center; gap:8px; font-family:var(--race); font-size:11px; letter-spacing:.2em; color:#8A93A3; }
.g-gear b { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; border-radius:5px; border:1px solid var(--tNeedle); color:var(--tNeedle); font-weight:700; font-size:13px; letter-spacing:0; }
.t-btn { position:relative; cursor:pointer; border:0; width:clamp(104px,10vw,124px); height:clamp(104px,10vw,124px); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#fff; background:radial-gradient(circle at 38% 30%, #FF8E6B, #E8321F 58%, #9E1B10); box-shadow:0 0 0 7px var(--tRing), 0 0 0 9px rgba(21,27,39,0.08), 0 16px 44px rgba(232,50,31,0.45), inset 0 -8px 16px rgba(0,0,0,0.3); transition:transform .15s ease, box-shadow .3s ease; }
.t-btn:hover { transform:scale(1.04); }
.t-btn:active { transform:scale(.92); }
.t-btn .s { font-family:var(--race); font-size:10px; font-weight:600; letter-spacing:.24em; }
.t-btn .b { font-family:var(--race); font-weight:700; font-style:italic; font-size:clamp(20px,2vw,24px); line-height:1; letter-spacing:.04em; }
.t-btn .x { font-family:var(--race); font-size:9.5px; font-weight:500; letter-spacing:.24em; opacity:.8; }
.t-status { text-align:center; flex-basis:100%; }
.t-status p { margin:0; }
.t-status .a { margin:0 0 2px; font-family:var(--race); font-weight:700; font-style:italic; font-size:clamp(15px,1.4vw,18px); letter-spacing:.06em; text-transform:uppercase; }
.t-status .b { font-size:14px; color:var(--tMuted); transition:color .6s ease; }
.t-actions { display:none; gap:10px; flex-wrap:wrap; justify-content:center; flex-basis:100%; }
.turbo.on .t-actions { display:flex; animation:v5up .5s ease both; }
.t-go, .t-go:hover { background:#FF7A45; color:#0B0E15; font-family:var(--race); font-size:14px; letter-spacing:.1em; text-transform:uppercase; }
.t-go .ico { background:#0B0E15; color:#fff; }
.t-stop { cursor:pointer; display:inline-flex; align-items:center; gap:9px; background:transparent; border:1px solid rgba(255,255,255,0.3); padding:12px 18px; border-radius:999px; font-family:var(--race); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; transition:background .25s ease, border-color .25s ease; }
.t-stop:hover { background:rgba(255,255,255,0.1); border-color:#fff; }
.t-stop::before { content:""; width:10px; height:10px; border-radius:2px; background:#FF3B2F; }

/* Price */
@keyframes pxword { from { opacity:0; transform:translateY(.45em) rotate(4deg); filter:blur(6px); } }
@keyframes pxnope { 0%,100% { translate:0 0; } 20% { translate:-5px 0; } 40% { translate:5px 0; } 60% { translate:-3px 0; } 80% { translate:2px 0; } }
@keyframes pxfade { to { color:rgba(107,115,130,0.5); } }
@keyframes pxstamp { 0% { opacity:0; transform:scale(1.9) rotate(-6deg); filter:blur(8px); } 55% { opacity:1; transform:scale(.95) rotate(1deg); filter:blur(0); } 78% { transform:scale(1.03) rotate(-.4deg); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes pxspark { 0% { opacity:0; transform:scale(0) rotate(0); } 40% { opacity:1; transform:scale(1) rotate(90deg); } 100% { opacity:0; transform:scale(.5) rotate(200deg); } }
@keyframes pxswing { 0%,100% { rotate:-4deg; } 50% { rotate:4deg; } }
@keyframes pxjolt { 0%,100% { transform:none; } 20% { transform:rotate(-14deg); } 45% { transform:rotate(9deg); } 70% { transform:rotate(-4deg); } }
@keyframes pxfall { 0% { opacity:1; transform:none; } 25% { opacity:1; transform:translateY(-12px) rotate(-12deg); } 100% { opacity:0; transform:translateY(260px) rotate(var(--r,70deg)); } }
@keyframes pxcollapse { to { max-width:0; } }
@keyframes pxchip { from { opacity:0; scale:.6; translate:0 8px; } }
@keyframes pxbump { 0%,100% { transform:none; } 45% { transform:scale(1.3); } }

.price { color:var(--ink); position:relative; overflow:hidden; padding:clamp(24px,4vw,64px) 0; text-align:center; }
.price .eyebrow { margin-bottom:16px; color:#8A4B35; }
.price .q { margin:0 auto 10px; text-wrap:balance; font-family:var(--serif); font-weight:600; font-size:clamp(28px,5vw,68px); line-height:1.02; letter-spacing:-.025em; max-width:18ch; color:#6B7382; }
.price .q .w { display:inline-block; }
.price .a { position:relative; width:fit-content; margin:0 auto 20px; font-family:var(--serif); font-weight:600; font-style:italic; font-size:clamp(34px,6.4vw,90px); line-height:1; letter-spacing:-.03em; transform-origin:50% 60%; }
.price .a::before, .price .a::after { content:"✦"; position:absolute; font-style:normal; line-height:1; opacity:0; pointer-events:none; }
.price .a::after { right:-.42em; top:-.12em; font-size:.34em; color:#FF7A45; }
.price .a::before { left:-.34em; bottom:.1em; font-size:.22em; color:var(--acc2); }
.price p.lede { margin:0 auto 24px; font-size:clamp(15px,1.3vw,18px); color:#2B3446; max-width:48ch; }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 26px; padding:0; list-style:none; }
.chips li { display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 8px; border-radius:999px; background:rgba(255,255,255,0.75); box-shadow:0 1px 2px rgba(21,27,39,0.05); font-size:14px; font-weight:500; transition:transform .3s var(--ease), background .3s ease; }
.chips li::before { content:"✓"; display:inline-flex; align-items:center; justify-content:center; flex:none; width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.chips li:hover { transform:translateY(-3px); background:#fff; }

/* Hanging price tag (wide screens, right of the centred text): the stamp knocks three of the four € off */
.ptag { --L:clamp(34px,5vw,70px); display:none; position:absolute; top:0; left:calc(50% + 350px); width:clamp(150px,13vw,180px); padding-top:var(--L); transform-origin:50% 0; animation:pxswing 6s ease-in-out infinite; filter:drop-shadow(0 18px 26px rgba(21,27,39,0.13)); pointer-events:none; }
@media (min-width:1200px) { .ptag { display:block; } }
.ptag::after { content:""; position:absolute; left:50%; top:0; width:2px; height:calc(var(--L) + 23px); margin-left:-1px; border-radius:2px; background:linear-gradient(rgba(21,27,39,0),rgba(21,27,39,0.4) 45%); }
.ptag-body { position:relative; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 1px rgba(21,27,39,0.06); transform-origin:50% 23px; }
.ptag-body::after { content:""; position:absolute; left:24%; right:24%; bottom:16px; height:18px; opacity:.22; background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 7px,var(--ink) 7px 10px,transparent 10px 12px); }
.ptag .hole { position:absolute; left:50%; top:16px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:rgba(21,27,39,0.08); box-shadow:inset 0 1px 3px rgba(21,27,39,0.3); }
.ptag .eur { display:flex; font-family:var(--serif); font-weight:600; font-size:clamp(40px,4.2vw,58px); letter-spacing:-.02em; color:var(--ink); }
.ptag .eur i { display:inline-block; max-width:.8em; font-style:normal; }
.ptag .eur i:nth-child(2) { --r:-80deg; }
.ptag .eur i:nth-child(3) { --r:95deg; }
html:not(.js) .ptag .eur i:nth-child(n+2) { display:none; }

/* Sequence: eyebrow → quote rises word by word → strike + head shake → "Tut es nicht." stamps in → the rest */
.seq .price .eyebrow:not(.go), .seq .price .q:not(.go) .w, .seq .price .a:not(.go), .seq .price .lede:not(.go), .seq .price .chips:not(.go) li, .seq .price .btn:not(.go) { opacity:0; }
.seq .price .q [data-draw], .seq .price .a [data-draw] { animation:none; }
.price .eyebrow.go, .price .lede.go, .price .btn.go { animation:fxup .5s var(--ease) backwards; }
.price .q.go .w { animation:pxword .6s var(--ease) calc(var(--i) * .05s) backwards; }
.seq .price .q.go [data-draw] { animation:v6stroke .55s cubic-bezier(.6,0,.3,1) .7s forwards; }
.price .q.go .strike { animation:pxnope .45s ease 1.15s, pxfade .4s ease 1.15s forwards; }
.price .a.go { animation:pxstamp .55s cubic-bezier(.2,.9,.3,1) backwards; }
.seq .price .a.go [data-draw] { animation:v6stroke .8s cubic-bezier(.6,0,.3,1) .45s forwards; }
.price .a.go::after { animation:pxspark .8s ease-out .3s; }
.price .a.go::before { animation:pxspark .7s ease-out .42s; }
.price .chips.go li { animation:pxchip .5s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * .1s) backwards; }
.price .a.go ~ .ptag .ptag-body { animation:pxjolt .9s ease-out .22s; }
.price .a.go ~ .ptag .eur i:nth-child(n+2) { animation:pxfall .85s cubic-bezier(.5,0,.75,.3) calc(.3s + var(--d)) forwards, pxcollapse .4s var(--ease) calc(1.1s + var(--d)) forwards; }
.price .a.go ~ .ptag .eur i:nth-child(4) { --d:0s; }
.price .a.go ~ .ptag .eur i:nth-child(3) { --d:.12s; }
.price .a.go ~ .ptag .eur i:nth-child(2) { --d:.24s; }
.price .a.go ~ .ptag .eur i:first-child { animation:pxbump .5s ease 1.55s; }

/* Flensburg */
.fl { position:relative; overflow:hidden; background:var(--ink); border-radius:32px; padding:clamp(30px,6vw,100px) clamp(22px,4vw,64px); color:#fff; box-shadow:0 24px 70px rgba(21,27,39,0.2); }
.fl-word { position:absolute; left:0; right:0; bottom:-.18em; font-family:var(--serif); font-weight:700; font-size:clamp(80px,19vw,300px); line-height:1; letter-spacing:-.04em; color:rgba(169,190,234,0.08); white-space:nowrap; pointer-events:none; text-align:center; }
.fl-grid { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(20px,4vw,60px); align-items:end; }
.fl .eyebrow { margin-bottom:16px; color:var(--acc); }
.fl h2 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(32px,6vw,86px); line-height:.98; letter-spacing:-.03em; }
.fl h2 em { color:var(--acc); }
.fl-grid > p { margin:0; font-size:clamp(15px,1.3vw,18px); line-height:1.65; color:#AEB6C4; max-width:38ch; }

/* Home CTA */
.home-cta-wrap { padding:0 var(--gx); }
.home-cta { border-radius:28px; padding:clamp(28px,5vw,80px); text-align:center; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 20px 56px rgba(21,27,39,0.09); }
.home-cta .h2 { margin:0 auto 14px; max-width:17ch; font-size:clamp(28px,4.8vw,60px); text-wrap:balance; }
.home-cta .lede { margin:0 auto 26px; max-width:44ch; font-size:clamp(15px,1.2vw,17px); }

/* ── Inner pages ──────────────────────────────────────────────────── */
.phead { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(20px,4vw,60px); align-items:start; margin-bottom:clamp(26px,4vw,52px); }
.phead h1 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(32px,5.6vw,74px); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; animation:v5up .55s ease both; }
.phead p { max-width:38ch; animation:v5up .55s ease both .08s; }

.grid-svc { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr)); gap:clamp(12px,1.6vw,20px); }
.svc { border-radius:22px; padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; }
.svc .num { margin-bottom:16px; }
.svc h2 { margin:0 0 10px; font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.3vw,29px); line-height:1.12; letter-spacing:-.015em; }
.svc .txt { margin-bottom:20px; }
.dots { margin:0; padding:0; list-style:none; }
.svc .dots { margin-top:auto; }
.dots li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink2); transition:padding-left .25s ease; }
.dots li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--dot,var(--acc)); flex:none; }
.svc .dots li:hover { padding-left:6px; }

.grid-work { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(12px,1.8vw,24px); }
.work { display:flex; flex-direction:column; gap:14px; min-width:0; margin:0; scroll-margin-top:110px; }
.work .tile { aspect-ratio:4/3; }
.work .tile:hover { transform:translateY(-7px); }
.work .kind { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); margin-bottom:6px; }
.work h2 { margin:0 0 6px; font-family:var(--serif); font-weight:600; font-size:clamp(19px,2vw,24px); line-height:1.15; letter-spacing:-.015em; }
.work p { font-size:15px; }
.more { margin-top:clamp(24px,3.5vw,48px); border-radius:22px; padding:clamp(22px,3.2vw,44px); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.more p { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,32px); line-height:1.12; letter-spacing:-.015em; max-width:24ch; }

.how-block { margin-bottom:clamp(40px,6vw,90px); }
.yes { margin:0 0 clamp(18px,2.6vw,32px); font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.8vw,50px); line-height:1.05; letter-spacing:-.02em; }
.steps { display:flex; flex-direction:column; gap:clamp(10px,1.4vw,16px); }
.step { border-radius:22px; padding:clamp(20px,2.6vw,34px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:clamp(14px,2.5vw,40px); align-items:start; transition:transform .35s ease, box-shadow .35s ease; }
.step:hover { transform:translateY(-4px); box-shadow:0 2px 4px rgba(21,27,39,0.06), 0 18px 44px rgba(21,27,39,0.10); }
.step .meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.step .meta b { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--acc); font-family:var(--mono); font-weight:400; font-size:12px; color:var(--ink); }
.step .meta span { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.step h3 { margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(23px,2.7vw,34px); line-height:1.1; letter-spacing:-.015em; }
.step p { margin:0; font-size:clamp(15px,1.2vw,17px); line-height:1.65; color:var(--muted); }
.grid-pr { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr)); gap:clamp(12px,1.6vw,20px); margin-top:clamp(16px,2vw,24px); }
.pr { border-radius:18px; padding:clamp(18px,2.2vw,28px); }
.pr .tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); margin-bottom:9px; }
.pr p { margin:0; font-size:16px; line-height:1.55; color:var(--ink2); }

.price-wrap { margin-bottom:clamp(20px,3vw,40px); }
.grid-models { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr)); gap:clamp(12px,1.6vw,20px); }
.model { display:flex; flex-direction:column; border-radius:24px; padding:clamp(22px,2.8vw,36px); min-width:0; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 12px 34px rgba(21,27,39,0.08); transition:transform .35s ease, box-shadow .35s ease; }
.model:hover { transform:translateY(-8px); box-shadow:0 3px 6px rgba(21,27,39,0.07), 0 26px 60px rgba(21,27,39,0.15); }
.model .tag { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-bottom:16px; }
.model h2 { margin:0 0 10px; font-family:var(--serif); font-weight:600; font-size:clamp(23px,2.7vw,33px); line-height:1.1; letter-spacing:-.015em; }
.model > p { margin:0 0 20px; font-size:15.5px; line-height:1.6; opacity:.85; }
.model .dots { margin-bottom:20px; }
.model .dots li { color:inherit; border-top-color:var(--rule); }
.model .fit { margin-top:auto; font-size:14.5px; line-height:1.5; opacity:.72; }
.m1 { background:#fff; color:var(--ink); --rule:#EEF1F6; --dot:var(--acc); }
.m2 { background:var(--acc); color:var(--ink); --rule:rgba(21,27,39,0.14); --dot:#fff; }
.m3 { background:var(--ink); color:#EEF1F6; --rule:rgba(238,241,246,0.16); --dot:var(--acc); }

/* Contact */
.grid-contact { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr)); gap:clamp(14px,2vw,24px); align-items:start; }
.form-card { border-radius:24px; box-shadow:0 1px 2px rgba(21,27,39,0.05), 0 12px 34px rgba(21,27,39,0.08); }
form.form-card { padding:clamp(22px,3vw,40px); display:flex; flex-direction:column; gap:20px; }
.sent { padding:clamp(24px,3.4vw,48px); animation:v5up .4s ease both; }
.sent h2 { margin:0 0 10px; font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,38px); line-height:1.1; }
.sent p:not(.eyebrow) { margin:0 0 22px; font-size:16.5px; line-height:1.6; color:var(--muted); }
.sent button { cursor:pointer; border:0; background:var(--soft); padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:700; color:var(--ink); }
.sent button:hover { background:#E3E8F1; }
[hidden] { display:none !important; }
.row2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field > span, .fieldset legend { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.field input, .field textarea { background:#F5F7FB; border:1px solid #E5E9F1; border-radius:12px; padding:13px 15px; font-size:15.5px; color:var(--ink); outline:none; transition:border-color .2s ease, background .2s ease; width:100%; }
.field textarea { resize:vertical; line-height:1.55; }
.field input:focus, .field textarea:focus { border-color:var(--acc); background:#fff; }
.fieldset { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.fieldset legend { padding:0; margin-bottom:10px; }
.needs { display:flex; flex-wrap:wrap; gap:8px; }
.needs button { cursor:pointer; border:1px solid #E5E9F1; background:#F5F7FB; color:var(--ink); padding:9px 15px; border-radius:999px; font-size:14px; font-weight:500; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.needs button:hover { border-color:var(--acc); transform:translateY(-1px); }
.needs button[aria-pressed="true"] { background:var(--acc); border-color:var(--acc); }
.tswitch { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; border:1px solid #E5E9F1; background:#F5F7FB; border-radius:16px; padding:14px 16px; transition:background .3s ease, border-color .3s ease; width:100%; }
.tswitch .l { display:flex; flex-direction:column; gap:3px; }
.tswitch .l b { font-size:15.5px; color:var(--ink); }
.tswitch .l span { font-size:13.5px; color:var(--muted); }
.tswitch .k { position:relative; flex:none; width:46px; height:26px; border-radius:999px; background:#CDD3DE; transition:background .3s ease; }
.tswitch .k::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:left .3s var(--ease); }
.tswitch[aria-checked="true"] { border-color:#FF9A6B; background:#FFF1E9; }
.tswitch[aria-checked="true"] .k { background:#FF9A6B; }
.tswitch[aria-checked="true"] .k::after { left:23px; }
.consent { margin:0; font-size:13px; line-height:1.55; color:var(--label); }
.consent a { text-decoration:underline; text-underline-offset:2px; color:var(--muted); }
.form-err { margin:0; font-size:14px; color:#B3261E; }
.submit { align-self:flex-start; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.side a { background:#fff; border-radius:16px; padding:18px 20px; display:flex; justify-content:space-between; gap:12px; align-items:center; box-shadow:var(--sh-1); transition:translate .35s var(--ease), transform .25s ease; }
.side a:hover { transform:translateY(-2px); }
.side a span:first-child { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.side p { margin:0; padding:4px 4px 0; font-size:14px; line-height:1.6; color:var(--label); }

/* Inner-page punch */
.ipunch { padding:clamp(40px,6vw,96px) var(--gx) 0; }
.ipunch > div { background:var(--ink); color:#fff; border-radius:30px; padding:clamp(28px,5vw,72px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:0 22px 60px rgba(21,27,39,0.2); }
.ipunch .txtw { min-width:0; flex:1 1 320px; }
.ipunch .eyebrow { margin-bottom:14px; color:var(--acc); }
.ipunch h2 { margin:0; max-width:20ch; font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.6vw,60px); line-height:1.04; letter-spacing:-.025em; text-wrap:balance; }

/* Legal pages */
.legal { max-width:760px; border-radius:24px; padding:clamp(22px,3.4vw,48px); box-shadow:var(--sh-card); }
.legal h2 { margin:28px 0 10px; font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.2vw,26px); line-height:1.2; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { font-size:16px; line-height:1.65; color:var(--ink2); }
.legal p { margin:0 0 12px; }
.legal ul { margin:0 0 12px; padding-left:20px; }
.legal li { margin-bottom:4px; }
.legal a { text-decoration:underline; text-underline-offset:2px; }
mark.todo { background:#FFF0B8; color:var(--ink); padding:1px 5px; border-radius:5px; }

/* ── Footer ───────────────────────────────────────────────────────── */
.ftr { margin:clamp(32px,5vw,76px) var(--gx) 0; padding-top:clamp(22px,3vw,40px); border-top:1px solid #D6DBE4; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr)); gap:clamp(18px,2.5vw,36px); align-items:start; }
.ftr .brand { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ftr .brand img { display:block; height:28px; width:auto; align-self:flex-start; }
.ftr .brand span, .ftr .meta { font-size:14.5px; color:var(--muted); }
.ftr .brand span { line-height:1.6; }
.ftr .brand span { max-width:30ch; }
.ftr nav, .ftr .meta { display:flex; flex-direction:column; gap:7px; }
.ftr nav a { font-size:14.5px; color:var(--muted); transition:color .2s ease, padding-left .2s ease; }
.ftr nav a:hover { color:var(--ink); padding-left:4px; }
.ftr .meta a:first-child { color:var(--ink); }
.ftr .meta a { color:var(--muted); }
.ftr .meta a:hover { color:var(--ink); }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  .marquee > div { animation:none; }
}