:root {
  --ink: #07111f;
  --ink-2: #0b1728;
  --panel: #101f34;
  --paper: #f4f7fb;
  --white: #fff;
  --muted: #9daabe;
  --muted-dark: #566277;
  --cyan: #1cf7e7;
  --cyan-2: #2bb9ff;
  --purple: #8b2da0;
  --red: #e41e38;
  --line: rgba(255,255,255,.12);
  --shadow: 0 28px 80px rgba(0,0,0,.24);
  --radius: 24px;
  --container: 1180px;
  --surface: #fff;
  --soft: #e9eef5;
  --border: #dfe5ee;
  --body-text: #182337;
  --deep-card: #0f1d30;
  --deep-card-2: #0a1626;
}

/* Nastroje Krakena są warstwą akcentów, niezależną od trzech palet wizytówek. */
html[data-mood="calm"] { --paper: #f0fffc; --surface: #fbfffe; --soft: #ddf8f4; --border: #bce9e3; --ink: #073b3a; --ink-2: #0b4b49; --panel: #0d5552; --body-text: #123f3d; --muted-dark: #486e6b; --cyan: #39e7d6; --cyan-2: #45b9ff; --purple: #1b8f87; --deep-card: #0a4543; --deep-card-2: #062f2e; }
html[data-mood="energy"] { --paper: #fff4e6; --surface: #fffbf6; --soft: #ffe3c2; --border: #f4caa0; --ink: #4a2108; --ink-2: #5b2a0b; --panel: #6a3210; --body-text: #452713; --muted-dark: #795c44; --cyan: #ff9850; --cyan-2: #ffd35e; --purple: #d65a16; --deep-card: #51270d; --deep-card-2: #341907; }
html[data-mood="joy"] { --paper: #fff8c9; --surface: #fffdf2; --soft: #ffeba0; --border: #edd675; --ink: #403300; --ink-2: #514100; --panel: #665200; --body-text: #3d340e; --muted-dark: #706329; --cyan: #ffd35e; --cyan-2: #ff9850; --purple: #b77b00; --deep-card: #524000; --deep-card-2: #332800; }
html[data-mood="focus"] { --paper: #edf7ff; --surface: #fbfdff; --soft: #d8ecff; --border: #b9d9f3; --ink: #092e4a; --ink-2: #0d3c5e; --panel: #114b72; --body-text: #17384f; --muted-dark: #4f6f85; --cyan: #45b9ff; --cyan-2: #806dff; --purple: #2563b9; --deep-card: #0d3d5f; --deep-card-2: #07283f; }
html[data-mood="creative"] { --paper: #fbf0ff; --surface: #fffaff; --soft: #f1d9fa; --border: #ddb9e9; --ink: #3c1147; --ink-2: #50165e; --panel: #641c75; --body-text: #43204b; --muted-dark: #76577d; --cyan: #d65cff; --cyan-2: #ff5c9d; --purple: #8b2da0; --deep-card: #50185e; --deep-card-2: #310d3a; }
html[data-mood="nature"] { --paper: #effbf2; --surface: #fbfffc; --soft: #d9f3df; --border: #b9dfc4; --ink: #103b24; --ink-2: #154d2f; --panel: #1d613d; --body-text: #1d422d; --muted-dark: #547361; --cyan: #69df89; --cyan-2: #39e7d6; --purple: #258654; --deep-card: #174e31; --deep-card-2: #0d321e; }
html[data-mood="night"] { --paper: #f1f0ff; --surface: #fbfaff; --soft: #dfdcff; --border: #c8c2f3; --ink: #17113b; --ink-2: #21194f; --panel: #2e2463; --body-text: #29234b; --muted-dark: #625d7e; --cyan: #806dff; --cyan-2: #45b9ff; --purple: #6851c5; --deep-card: #241c55; --deep-card-2: #130e32; }
html[data-mood="bold"] { --paper: #fff0f6; --surface: #fffafd; --soft: #ffd9e8; --border: #f0b8cf; --ink: #48152e; --ink-2: #5c1b3b; --panel: #74234b; --body-text: #4a2638; --muted-dark: #7b5969; --cyan: #ff5c9d; --cyan-2: #ff9850; --purple: #c12267; --deep-card: #5d1b3d; --deep-card-2: #3b1026; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--body-text); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; transition: color .55s ease, background-color .55s ease; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 999; background: var(--cyan); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 12px; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; padding: 16px 0; color: #fff; transition: background .25s, padding .25s, border-color .25s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { padding: 9px 0; background: color-mix(in srgb, var(--ink) 90%, transparent); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.08); }
.nav-wrap, .legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { border-radius: 13px; }
.brand span { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 1.05rem; letter-spacing: .02em; }
.brand small { margin-top: 7px; color: #8fa0b6; font-size: .61rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: .9rem; font-weight: 650; }
.main-nav a { color: #c7d1df; text-decoration: none; transition: color .2s; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--cyan); }
.main-nav .nav-cta { padding: 10px 17px; border: 1px solid rgba(28,247,231,.45); border-radius: 999px; color: #fff; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: #fff; }

.kraken-trigger { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 12px; min-height: 74px; padding: 8px 15px 8px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--ink) 92%, transparent); box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(15px); cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s, background-color .55s ease; }
.kraken-trigger:hover, .kraken-trigger:focus-visible { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 22px 50px rgba(0,0,0,.34), 0 0 0 4px color-mix(in srgb, var(--cyan) 15%, transparent); outline: none; }
.kraken-trigger.has-mood { border-color: var(--cyan); }
.kraken-trigger-art { position: relative; display: grid; width: 58px; height: 58px; place-items: center; }
.kraken-trigger-art img { position: relative; z-index: 2; width: 52px; height: auto; filter: brightness(1.18) saturate(1.12) drop-shadow(0 7px 9px rgba(0,0,0,.38)) drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 24%, transparent)); transition: transform .25s, filter .25s; }
.kraken-trigger:hover .kraken-trigger-art img, .kraken-trigger:focus-visible .kraken-trigger-art img { transform: scale(1.08) rotate(-2deg); filter: brightness(1.3) saturate(1.18) drop-shadow(0 9px 11px rgba(0,0,0,.4)) drop-shadow(0 0 13px color-mix(in srgb, var(--cyan) 48%, transparent)); }
.kraken-trigger-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; }
.kraken-trigger-label strong { font-size: .84rem; letter-spacing: .04em; }
.kraken-trigger-label small { margin-top: 5px; color: #9caabd; font-size: .66rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }

.kraken-stage { position: fixed; inset: 0; z-index: 82; display: grid; place-items: center; padding: 24px; background: rgba(4,9,17,.63); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.kraken-stage[hidden] { display: none; }
.kraken-stage.is-visible { opacity: 1; }
.kraken-stage.is-pinned { pointer-events: auto; }
.kraken-stage-card { position: relative; overflow: hidden; width: min(730px, 100%); padding: 36px 46px 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; color: #fff; background: radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--active-arm-color, var(--cyan)) 10%, transparent), transparent 42%), linear-gradient(145deg, #10213a, #091522); box-shadow: 0 35px 100px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04); text-align: center; transform: translateY(12px) scale(.98); transition: transform .28s ease, background .35s ease; }
.kraken-stage-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.055) 44%, transparent 62%); transform: translateX(-110%); }
.kraken-stage.is-visible .kraken-stage-card::before { animation: kraken-card-sheen .9s .15s ease-out both; }
.kraken-stage.is-visible .kraken-stage-card { pointer-events: auto; }
.kraken-stage.is-visible .kraken-stage-card { transform: none; }
.kraken-stage-card .eyebrow { justify-content: center; margin-bottom: 12px; }
.kraken-stage-card h2 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .98; letter-spacing: -.06em; }
.kraken-stage-intro { max-width: 530px; margin: 16px auto 0; color: #aebbd0; font-size: .92rem; }
.kraken-stage-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: transparent; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.kraken-stage-close:hover, .kraken-stage-close:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }
.kraken-large { position: relative; width: min(470px, 82vw); height: min(310px, 54vw); margin: 25px auto 10px; --active-arm-color: var(--cyan); }
.kraken-octopus-visual { position: absolute; inset: 0; z-index: 2; }
.kraken-stage.is-visible .kraken-octopus-visual { animation: kraken-reveal .48s cubic-bezier(.2,.8,.2,1) both, kraken-float 4.2s .48s ease-in-out infinite; }
.kraken-octopus-visual > img, .kraken-octopus-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.kraken-octopus-visual::before, .kraken-octopus-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--active-arm-color); -webkit-mask: url("assets/kraken-octopus.svg") center / contain no-repeat; mask: url("assets/kraken-octopus.svg") center / contain no-repeat; opacity: 0; transition: opacity .35s ease, background-color .35s ease; }
.kraken-octopus-visual::before { z-index: 0; filter: blur(18px); transform: scale(1.035); }
.kraken-octopus-visual::after { z-index: 2; mix-blend-mode: color; }
.kraken-large[data-active-arm] .kraken-octopus-visual::before { opacity: .62; animation: kraken-whole-aura 1.8s ease-in-out infinite; }
.kraken-large[data-active-arm] .kraken-octopus-visual::after { opacity: .88; animation: kraken-whole-color 1.8s ease-in-out infinite; }
.kraken-octopus-visual > img { z-index: 1; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,.42)) drop-shadow(0 0 15px color-mix(in srgb, var(--active-arm-color) 16%, transparent)); pointer-events: none; transition: filter .3s; }
.kraken-octopus-overlay { z-index: 3; overflow: visible; pointer-events: none; }
.kraken-tentacle-eraser { fill: #0a1626; stroke: #0a1626; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke fill; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.kraken-large.is-previewing[data-active-arm="0"] .kraken-tentacle-eraser[data-erase-arm="0"],
.kraken-large.is-previewing[data-active-arm="1"] .kraken-tentacle-eraser[data-erase-arm="1"],
.kraken-large.is-previewing[data-active-arm="2"] .kraken-tentacle-eraser[data-erase-arm="2"],
.kraken-large.is-previewing[data-active-arm="3"] .kraken-tentacle-eraser[data-erase-arm="3"],
.kraken-large.is-previewing[data-active-arm="4"] .kraken-tentacle-eraser[data-erase-arm="4"],
.kraken-large.is-previewing[data-active-arm="5"] .kraken-tentacle-eraser[data-erase-arm="5"],
.kraken-large.is-previewing[data-active-arm="6"] .kraken-tentacle-eraser[data-erase-arm="6"],
.kraken-large.is-previewing[data-active-arm="7"] .kraken-tentacle-eraser[data-erase-arm="7"] { opacity: 1; }
.kraken-tentacle-path { --sway-start: 0deg; --sway-end: 2deg; fill: rgba(255,255,255,.001); pointer-events: fill; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: fill .2s, opacity .2s, filter .2s; }
.kraken-tentacle-path[data-arm-index="0"] { --sway-start: .35deg; --sway-end: -4deg; transform-origin: 82% 92%; }
.kraken-tentacle-path[data-arm-index="1"] { --sway-start: -.35deg; --sway-end: 4deg; transform-origin: 18% 92%; }
.kraken-tentacle-path[data-arm-index="2"] { --sway-start: -.3deg; --sway-end: 2.8deg; transform-origin: 10% 72%; }
.kraken-tentacle-path[data-arm-index="3"] { --sway-start: -.2deg; --sway-end: 3.2deg; transform-origin: 8% 48%; }
.kraken-tentacle-path[data-arm-index="4"] { --sway-start: .2deg; --sway-end: -3.2deg; transform-origin: 92% 48%; }
.kraken-tentacle-path[data-arm-index="5"] { --sway-start: .3deg; --sway-end: -2.8deg; transform-origin: 90% 72%; }
.kraken-tentacle-path[data-arm-index="6"] { --sway-start: .15deg; --sway-end: -1.8deg; transform-origin: 58% 38%; }
.kraken-tentacle-path[data-arm-index="7"] { --sway-start: -.15deg; --sway-end: 1.8deg; transform-origin: 42% 38%; }
.kraken-stage.is-visible .kraken-tentacle-path:not(.is-selected):not(.is-hot):not(:hover):not(:focus-visible) { animation: kraken-tentacle-intro 1.05s calc(.28s + var(--arm-order, 0) * .055s) ease-out both; }
.kraken-tentacle-path.is-selected { fill: var(--arm-color); opacity: .2; mix-blend-mode: screen; }
.kraken-large.is-previewing .kraken-tentacle-path.is-selected:not(.is-hot):not(:hover):not(:focus-visible) { fill: rgba(255,255,255,.001); opacity: 1; mix-blend-mode: normal; }
.kraken-tentacle-path:hover, .kraken-tentacle-path:focus-visible, .kraken-tentacle-path.is-hot { fill: var(--arm-color); stroke: #020306; stroke-width: 6.2; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke fill; opacity: .96; filter: saturate(1.3) brightness(1.15) drop-shadow(0 0 7px var(--arm-color)) drop-shadow(0 0 17px var(--arm-color)); mix-blend-mode: normal; animation: kraken-tentacle-glow 1.25s ease-in-out infinite, kraken-tentacle-move 1.65s cubic-bezier(.45,.05,.55,.95) infinite; outline: none; }
.kraken-tentacle-path[clip-path]:hover, .kraken-tentacle-path[clip-path]:focus-visible, .kraken-tentacle-path[clip-path].is-hot { filter: saturate(1.32) brightness(1.2); animation-name: kraken-tentacle-glow-clean, kraken-tentacle-move; }
.kraken-tentacle-path:focus-visible { stroke: #020306; stroke-width: 7; vector-effect: non-scaling-stroke; }
.kraken-stage-hint { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 31px; margin: 5px auto 16px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #96a5b8; background: rgba(255,255,255,.035); font-size: .75rem; transition: border-color .2s, color .2s, background .2s; }
.kraken-large[data-active-arm] + .kraken-stage-hint { border-color: color-mix(in srgb, var(--cyan) 28%, transparent); color: #c0cbd9; background: color-mix(in srgb, var(--cyan) 5%, rgba(255,255,255,.035)); }
.kraken-stage-open { padding: 0; border: 0; color: var(--cyan); background: transparent; font-size: .78rem; font-weight: 850; cursor: pointer; }
.kraken-stage-open:hover, .kraken-stage-open:focus-visible { color: #fff; outline: none; }
@keyframes kraken-card-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes kraken-reveal { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes kraken-float { 0%, 100% { transform: translateY(2px) rotate(-.5deg); } 50% { transform: translateY(-7px) rotate(.7deg); } }
@keyframes kraken-tentacle-intro { 0%, 100% { fill: rgba(255,255,255,.001); opacity: 1; } 42% { fill: var(--arm-color); opacity: .58; filter: brightness(1.15); } }
@keyframes kraken-tentacle-glow { 0%, 100% { opacity: .76; filter: saturate(1.2) brightness(1.08) drop-shadow(0 0 5px var(--arm-color)); } 50% { opacity: 1; filter: saturate(1.5) brightness(1.32) drop-shadow(0 0 10px var(--arm-color)) drop-shadow(0 0 23px var(--arm-color)); } }
@keyframes kraken-tentacle-glow-clean { 0%, 100% { opacity: .82; filter: saturate(1.22) brightness(1.1); } 50% { opacity: 1; filter: saturate(1.52) brightness(1.32); } }
@keyframes kraken-tentacle-move { 0%, 100% { transform: rotate(var(--sway-start)) translateY(0); } 50% { transform: rotate(var(--sway-end)) translateY(-2px); } }
@keyframes kraken-whole-aura { 0%, 100% { opacity: .42; filter: blur(15px); } 50% { opacity: .78; filter: blur(23px); } }
@keyframes kraken-whole-color { 0%, 100% { opacity: .72; } 50% { opacity: .94; } }

.mood-panel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(4,9,17,.72); backdrop-filter: blur(8px); }
.mood-panel[hidden] { display: none; }
.mood-dialog { position: relative; width: min(570px, 100%); padding: 37px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; color: #fff; background: linear-gradient(145deg, #10213a, #091522); box-shadow: 0 35px 100px rgba(0,0,0,.42); animation: mood-dialog-in .25s ease both; }
.mood-dialog .eyebrow { margin-bottom: 12px; }
.mood-dialog h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -.055em; }
.mood-intro { margin: 17px 0 25px; color: #aebbd0; font-size: .92rem; }
.mood-close { position: absolute; top: 14px; right: 17px; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: transparent; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.mood-close:hover, .mood-close:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }
.mood-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mood-option { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; color: #fff; background: rgba(255,255,255,.045); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.mood-option:hover, .mood-option:focus-visible { border-color: var(--mood-color); background: color-mix(in srgb, var(--mood-color) 14%, transparent); transform: translateY(-2px); outline: none; }
.mood-swatch { flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; background: var(--mood-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mood-color) 15%, transparent), 0 0 16px color-mix(in srgb, var(--mood-color) 55%, transparent); }
.mood-option span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.mood-option strong { font-size: .87rem; }
.mood-option small { margin-top: 5px; color: #8291a7; font-size: .66rem; }
.mood-reset { margin-top: 22px; padding: 0; border: 0; color: var(--cyan); background: transparent; font-size: .77rem; font-weight: 800; cursor: pointer; }
.mood-reset:hover, .mood-reset:focus-visible { color: #fff; outline: none; }
.mood-feedback { min-height: 1.4em; margin: 10px 0 0; color: #8392a8; font-size: .74rem; }
@keyframes mood-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 158px 0 0; min-height: 920px; }
.hero, .projects, .portrait-card, .site-footer { transition: background-color .55s ease; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { width: 540px; height: 540px; right: -170px; top: 80px; background: radial-gradient(circle, rgba(118,19,132,.28), transparent 68%); }
.hero-glow-two { width: 480px; height: 480px; left: -250px; bottom: 70px; background: radial-gradient(circle, rgba(28,247,231,.14), transparent 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 78px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--cyan); font-size: .76rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 2px; background: currentColor; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(3.4rem, 6.25vw, 6.4rem); line-height: .98; letter-spacing: -.065em; }
.hero h1 em { display: block; color: var(--cyan); font-style: normal; }
.lead { max-width: 690px; margin: 28px 0 32px; color: #b8c3d1; font-size: 1.1rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 23px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-weight: 800; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--cyan); box-shadow: 0 12px 35px rgba(28,247,231,.13); }
.button-primary:hover { background: #5affef; }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.03); }
.button-ghost:hover { border-color: rgba(255,255,255,.5); }
.button-light { color: var(--ink); background: #fff; }
.trust-list { display: flex; flex-wrap: wrap; gap: 0; margin: 42px 0 0; padding: 0; list-style: none; color: #8392a7; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.trust-list li { display: flex; align-items: center; }
.trust-list li:not(:last-child)::after { content: "•"; margin: 0 14px; color: var(--purple); }

.hero-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.visual-card { position: relative; z-index: 2; width: min(100%, 450px); padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); box-shadow: var(--shadow); backdrop-filter: blur(18px); transform: rotate(2deg); }
.visual-card::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(28,247,231,.13); border-radius: 21px; pointer-events: none; }
.visual-card > img { width: 76%; margin: 18px auto 10px; filter: drop-shadow(0 24px 28px rgba(0,0,0,.25)); }
.status { display: inline-flex; align-items: center; gap: 8px; color: #cbd5e2; font-size: .7rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #4dff99; box-shadow: 0 0 0 6px rgba(77,255,153,.1); }
.visual-caption { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px 3px 4px; border-top: 1px solid rgba(255,255,255,.1); }
.visual-caption strong { font-size: 1.35rem; line-height: 1.05; }
.visual-caption span { max-width: 130px; color: #8e9cb0; font-size: .74rem; text-align: right; }
.orbit { position: absolute; border: 1px solid rgba(28,247,231,.16); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; }
.orbit-two { width: 390px; height: 390px; border-color: rgba(139,45,160,.25); }
.floating-tag { position: absolute; z-index: 3; padding: 9px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: #132238; color: #d7e1ec; box-shadow: 0 10px 30px rgba(0,0,0,.22); font: 800 .67rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.tag-data { left: 0; top: 26%; color: var(--cyan); }
.tag-ai { right: -10px; top: 20%; color: #d68ee1; }
.tag-code { right: 7%; bottom: 16%; color: var(--cyan-2); }
.proof-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 88px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-row div { padding: 28px 24px; border-right: 1px solid var(--line); }
.proof-row div:first-child { padding-left: 0; }
.proof-row div:last-child { border: 0; }
.proof-row strong { display: block; color: var(--cyan); font-size: 2rem; line-height: 1; }
.proof-row span { display: block; margin-top: 8px; color: #8190a5; font-size: .76rem; }

.section { padding: 112px 0; }
.section-heading { display: grid; grid-template-columns: 1fr 360px; align-items: end; gap: 40px; margin-bottom: 48px; }
.section-heading h2, .process-intro h2, .about-copy h2, .sport h2, .contact h2 { margin: 0; color: var(--ink); font-size: clamp(2.4rem, 4.5vw, 4.25rem); line-height: 1.03; letter-spacing: -.055em; }
.section-heading > p { margin: 0; color: var(--muted-dark); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card { position: relative; overflow: hidden; min-height: 420px; padding: 31px 27px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .24s, box-shadow .24s, border-color .55s, background-color .55s; }
.service-card:hover { transform: translateY(-6px); border-color: rgba(118,19,132,.25); box-shadow: 0 24px 60px rgba(28,39,58,.1); }
.service-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -90px; bottom: -80px; border-radius: 50%; background: rgba(28,247,231,.11); }
.card-number { position: absolute; right: 22px; top: 20px; color: #cfd6df; font: 800 .74rem ui-monospace, monospace; }
.service-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 58px; border-radius: 14px; background: var(--ink); color: var(--cyan); font: 700 1.45rem ui-monospace, monospace; }
.service-card h3 { margin: 0 0 14px; color: var(--ink); font-size: 1.35rem; }
.service-card p { margin: 0 0 21px; color: var(--muted-dark); font-size: .92rem; }
.service-card ul { margin: 0; padding: 0; list-style: none; color: #3c475a; font-size: .82rem; }
.service-card li { padding: 8px 0; border-top: 1px solid #edf0f4; }
.service-card li::before { content: "+"; margin-right: 9px; color: var(--purple); font-weight: 900; }

.process-section { background: var(--soft); transition: background-color .55s ease; }
.process-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; align-items: start; }
.process-intro { position: sticky; top: 130px; }
.process-intro p:last-child { max-width: 460px; margin: 26px 0 0; color: var(--muted-dark); }
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: 31px 0; border-top: 1px solid #cbd4df; }
.process-list li:last-child { border-bottom: 1px solid #cbd4df; }
.process-list > li > span { color: var(--purple); font: 900 1rem ui-monospace, monospace; }
.process-list h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.5rem; }
.process-list p { margin: 0; color: var(--muted-dark); }

.projects { background: var(--ink); color: #fff; }
.projects .section-heading h2 { color: #fff; }
.projects .section-heading > p { color: #8f9caf; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-card { display: flex; min-height: 430px; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius); background: linear-gradient(145deg, var(--deep-card), var(--deep-card-2)); }
.project-featured { grid-row: span 2; min-height: 878px; }
.project-top { display: flex; align-items: center; justify-content: space-between; padding: 23px 25px; color: #66768c; font: 800 .72rem ui-monospace, monospace; }
.project-status { padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; font: 800 .63rem/1.1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.status-tests { color: var(--cyan); }.status-pilot { color: #ffce6a; }.status-build { color: #78b9ff; }.status-concept { color: #ce89d9; }
.project-visual { min-height: 330px; display: grid; place-items: center; margin: 0 24px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(28,247,231,.22), transparent 50%), #0a1422; }
.mock-window { width: 78%; padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: #f3f7fa; box-shadow: 0 25px 55px rgba(0,0,0,.36); transform: perspective(800px) rotateX(6deg) rotateY(-8deg); }
.mock-window > span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #b9c2cf; }
.mock-body { display: grid; grid-template-columns: 25% 1fr; grid-template-rows: repeat(3, 36px); gap: 8px; margin-top: 11px; }
.mock-body i { grid-row: 1 / 4; border-radius: 7px; background: #11243b; }
.mock-body b { border-radius: 7px; background: linear-gradient(90deg, #dce5ed, #f6f8fa); }
.project-content { margin-top: auto; padding: 30px; }
.project-kicker { margin: 0 0 7px; color: var(--cyan); font: 800 .66rem ui-monospace, monospace; letter-spacing: .12em; }
.project-content h3 { margin: 0 0 14px; font-size: 2.1rem; letter-spacing: -.04em; }
.project-content > p:not(.project-kicker) { margin: 0 0 23px; color: #a3afc0; }
.project-content > a { display: inline-flex; gap: 10px; margin-top: 24px; color: #fff; font-size: .83rem; font-weight: 800; text-decoration: none; }
.project-content > a:hover { color: var(--cyan); }
.project-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.project-metrics li { color: #7f8da2; font-size: .7rem; }
.project-metrics strong { display: block; color: #fff; font-size: 1.15rem; }
.projects .project-grid { grid-template-columns: minmax(0, 760px); }
.projects .project-featured { grid-row: auto; min-height: 560px; }
.tech-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-list span, .skill-cloud span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #8796aa; font: 700 .66rem ui-monospace, monospace; }
.product-visual-codeqr { background: radial-gradient(circle at 50% 42%, rgba(28,247,231,.24), transparent 48%), linear-gradient(145deg, #0c2230, #0a1422); }
.project-note { margin-top: -10px !important; padding: 13px 15px; border-left: 2px solid var(--purple); background: rgba(139,45,160,.12); color: #c0cada !important; font-size: .84rem !important; }
.project-content .project-note + .tech-list { margin-top: 22px; }

.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.about-visual { position: relative; min-height: 570px; }
.portrait-card { position: absolute; inset: 0 60px 50px 0; display: grid; place-items: center; overflow: hidden; border-radius: 34px; background: var(--ink); box-shadow: 0 35px 80px rgba(26,39,57,.2); }
.portrait-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(28,247,231,.2), transparent 45%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: auto, 35px 35px, 35px 35px; }
.portrait-card img { position: relative; width: 68%; filter: drop-shadow(0 20px 28px rgba(0,0,0,.35)); }
.portrait-card > span { position: absolute; left: 26px; bottom: 22px; color: var(--cyan); font: 800 .7rem ui-monospace, monospace; letter-spacing: .16em; }
.quote-card { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 23px 27px; border-radius: 16px; background: var(--purple); color: #fff; box-shadow: 0 18px 40px rgba(89,14,91,.25); font-size: .92rem; font-weight: 750; transform: rotate(-2deg); }
.about-copy .role { margin: 12px 0 28px; color: var(--purple); font: 850 .77rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.about-copy > p:not(.eyebrow):not(.role) { color: var(--muted-dark); font-size: 1.02rem; }
.skill-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.skill-cloud span { border-color: var(--border); color: var(--body-text); background: var(--surface); transition: color .55s, border-color .55s, background-color .55s; }

.sport { padding-top: 40px; }
.sport-card { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; min-height: 500px; overflow: hidden; padding: 58px 70px; border-radius: 32px; color: #fff; background: linear-gradient(125deg, #571063, #7d178a 58%, #14233a); box-shadow: 0 30px 80px rgba(70,24,79,.2); }
.sport-card h2 { color: #fff; }
.sport-card p:not(.eyebrow) { max-width: 650px; margin: 25px 0 30px; color: #e3cce7; }
.sport-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button-outline-light { border: 1px solid rgba(255,255,255,.45); color: #fff; background: transparent; }
.button-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.sport-card img { justify-self: end; filter: drop-shadow(0 28px 32px rgba(0,0,0,.28)); transform: rotate(3deg) scale(1.12); }
.contact { padding-bottom: 80px; }
.contact-panel { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; padding: 58px 64px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); transition: border-color .55s, background-color .55s; }
.contact-panel h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.contact-panel p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: var(--muted-dark); }
.contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.phone-link { color: var(--ink); font-size: 1.4rem; font-weight: 850; text-align: center; text-decoration: none; }
.copy-button { border: 0; background: transparent; color: var(--purple); font-size: .78rem; font-weight: 800; cursor: pointer; }

.site-footer { padding: 48px 0 25px; background: var(--ink); color: #c1ccda; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; }
.footer-grid > div:not(.brand) { display: flex; flex-direction: column; font-size: .78rem; }
.footer-grid > div:not(.brand) span { margin-top: 7px; color: #76869a; }
.footer-links { flex-direction: row !important; gap: 20px; }
.footer-links a, .footer-bottom a { color: #a8b5c6; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: #68788e; font-size: .72rem; }
.toast { position: fixed; z-index: 99; left: 50%; bottom: -80px; transform: translateX(-50%); padding: 11px 17px; border-radius: 9px; background: var(--cyan); color: var(--ink); font-weight: 800; box-shadow: var(--shadow); transition: bottom .25s; }
.toast.is-visible { bottom: 24px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.legal-page { background: #f6f8fb; }
.legal-header { padding: 15px 0; border-bottom: 1px solid #dde3eb; background: #fff; }
.legal-header .container > a:last-child { color: var(--purple); font-size: .82rem; font-weight: 800; text-decoration: none; }
.legal-content { max-width: 830px; padding-top: 85px; padding-bottom: 100px; }
.legal-content h1 { margin: 0; color: var(--ink); font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; letter-spacing: -.06em; }
.legal-lead { margin: 20px 0 38px; color: var(--muted-dark); }
.legal-content h2 { margin: 44px 0 10px; color: var(--ink); font-size: 1.35rem; }
.legal-content p, .legal-content li { color: #465267; }
.legal-content a { color: #6a1c78; }
.legal-notice { padding: 20px 22px; border-left: 4px solid #f3b743; border-radius: 8px; background: #fff7df; }
.legal-notice p { margin-bottom: 0; }
.legal-footnote { margin-top: 50px; padding-top: 22px; border-top: 1px solid #dbe1e9; font-size: .82rem; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: var(--ink); color: #fff; text-align: center; }
.error-page main { max-width: 650px; }
.error-page img { margin: 0 auto 24px; }
.error-page h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -.06em; }
.error-page main > p:not(.eyebrow) { margin: 24px 0 32px; color: #9aabc0; }

.sport-page { background: #f4f7fb; }
.sport-page .site-header { background: rgba(7,17,31,.82); backdrop-filter: blur(14px); }
.sport-page .site-header.is-scrolled { background: rgba(7,17,31,.96); }
.sport-hero { position: relative; overflow: hidden; padding: 166px 0 105px; color: #fff; background: linear-gradient(125deg, #07111f 0%, #101f34 58%, #571063 100%); }
.sport-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.sport-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.sport-hero-glow-one { width: 620px; height: 620px; top: -240px; right: -150px; background: radial-gradient(circle, rgba(139,45,160,.35), transparent 68%); }
.sport-hero-glow-two { width: 480px; height: 480px; bottom: -280px; left: -180px; background: radial-gradient(circle, rgba(28,247,231,.16), transparent 70%); }
.sport-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 75px; }
.sport-hero h1 { max-width: 690px; margin: 0; color: #fff; font-size: clamp(3.4rem, 6.5vw, 6.5rem); line-height: .97; letter-spacing: -.07em; }
.sport-hero h1 em { display: block; color: var(--cyan); font-style: normal; }
.sport-hero .lead { max-width: 650px; }
.sport-mark { position: relative; display: grid; place-items: center; width: min(100%, 480px); min-height: 540px; margin-inline: auto; padding: 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); box-shadow: 0 30px 90px rgba(0,0,0,.3); transform: rotate(2deg); }
.sport-mark::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(28,247,231,.16); border-radius: 24px; pointer-events: none; }
.sport-mark img { position: relative; z-index: 1; width: min(86%, 360px); filter: drop-shadow(0 25px 28px rgba(0,0,0,.3)); }
.sport-mark-label { position: absolute; top: 30px; left: 35px; z-index: 2; color: var(--cyan); font: 800 .68rem ui-monospace, monospace; letter-spacing: .16em; }
.sport-mark-caption { position: absolute; right: 34px; bottom: 30px; left: 34px; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); }
.sport-mark-caption strong { font-size: 1.25rem; line-height: 1; }
.sport-mark-caption span { color: #98a8bb; font-size: .72rem; text-align: right; }
.sport-section { padding: 110px 0; }
.sport-section-heading { display: grid; grid-template-columns: 1fr 370px; align-items: end; gap: 50px; margin-bottom: 48px; }
.sport-section-heading h2, .sport-detail-card h2, .sport-contact h2 { margin: 0; color: var(--ink); font-size: clamp(2.45rem, 4.7vw, 4.4rem); line-height: 1.02; letter-spacing: -.06em; }
.sport-section-heading > p { margin: 0; color: var(--muted-dark); }
.sport-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sport-value { min-height: 255px; padding: 28px; border: 1px solid #dfe5ee; border-radius: var(--radius); background: #fff; }
.sport-value-number { display: block; margin-bottom: 65px; color: var(--purple); font: 800 .74rem ui-monospace, monospace; }
.sport-value h3 { margin: 0 0 10px; color: var(--ink); font-size: 1.45rem; }
.sport-value p { margin: 0; color: var(--muted-dark); }
.sport-detail { padding: 0 0 110px; }
.sport-detail-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.sport-detail-card { padding: 54px 58px; border-radius: 28px; color: #fff; background: linear-gradient(125deg, #571063, #7d178a 58%, #14233a); box-shadow: 0 28px 70px rgba(70,24,79,.18); }
.sport-detail-card h2 { color: #fff; }
.sport-detail-card p:not(.eyebrow) { max-width: 600px; margin: 24px 0 27px; color: #e3cce7; }
.text-link { display: inline-flex; gap: 10px; color: #fff; font-size: .84rem; font-weight: 800; text-decoration: none; }
.text-link:hover { color: var(--cyan); }
.sport-detail-note { display: flex; flex-direction: column; justify-content: center; padding: 42px; border: 1px solid #dbe2ea; border-radius: 28px; background: #fff; }
.sport-detail-note strong { color: var(--purple); font: 800 .7rem ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.sport-detail-note p { margin: 18px 0 28px; color: var(--muted-dark); }
.sport-detail-note a { color: var(--ink); font-size: .85rem; font-weight: 800; text-decoration: none; }
.sport-detail-note a:hover { color: var(--purple); }
.sport-contact { padding: 0 0 90px; }
.sport-contact-panel { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; padding: 58px 64px; border-radius: 28px; background: var(--soft); transition: background-color .55s; }
.sport-contact-panel > div > p:not(.eyebrow) { max-width: 570px; margin: 24px 0 0; color: var(--muted-dark); }
.sport-contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 15px; }
.sport-email { color: var(--ink); font-size: 1.05rem; font-weight: 800; text-align: center; text-decoration: none; }
.sport-email:hover { color: var(--purple); }

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 135px; }
  .hero-copy { max-width: 820px; }
  .hero-visual { min-height: 500px; }
  .visual-card { width: 430px; }
  .proof-row { margin-top: 50px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { gap: 55px; }
  .about-grid { gap: 55px; }
  .sport-card { padding: 50px; }
  .contact-panel { grid-template-columns: 1fr; gap: 35px; }
  .sport-hero-grid { gap: 45px; }
  .sport-section-heading { gap: 32px; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .site-header { padding: 9px 0; background: rgba(7,17,31,.92); backdrop-filter: blur(14px); }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; inset: 65px 14px auto; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #0d1b2e; box-shadow: var(--shadow); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px; }
  .main-nav .nav-cta { margin-top: 6px; text-align: center; }
  .kraken-trigger { right: 14px; bottom: 14px; min-height: 62px; padding: 5px; }
  .kraken-trigger-label { display: none; }
  .kraken-trigger-art { width: 52px; height: 52px; }
  .kraken-trigger-art img { width: 47px; height: auto; }
  .kraken-stage { padding: 14px; }
  .kraken-stage-card { padding: 31px 18px 23px; border-radius: 22px; }
  .kraken-stage-intro { font-size: .82rem; }
  .kraken-large { width: min(350px, 87vw); height: min(230px, 57vw); margin-top: 16px; }
  .mood-panel { padding: 14px; }
  .mood-dialog { padding: 31px 20px 23px; border-radius: 21px; }
  .mood-options { gap: 7px; }
  .mood-option { min-height: 60px; padding: 9px; gap: 9px; }
  .mood-option strong { font-size: .8rem; }
  .mood-option small { font-size: .58rem; }
  .hero { min-height: auto; padding-top: 116px; }
  .hero h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .lead { font-size: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-visual { min-height: 420px; }
  .visual-card { width: 88%; padding: 23px; }
  .visual-card > img { width: 65%; }
  .orbit-one { width: 390px; height: 390px; }
  .orbit-two { width: 300px; height: 300px; }
  .floating-tag { font-size: .55rem; }
  .tag-data { left: 1%; }.tag-ai { right: 0; }
  .proof-row { grid-template-columns: 1fr 1fr; }
  .proof-row div { padding: 23px 14px; border-bottom: 1px solid var(--line); }
  .proof-row div:first-child { padding-left: 14px; }
  .proof-row div:nth-child(2) { border-right: 0; }
  .proof-row div:nth-child(3), .proof-row div:nth-child(4) { border-bottom: 0; }
  .section { padding: 82px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .service-grid, .project-grid, .about-grid, .sport-card { grid-template-columns: 1fr; }
  .service-card { min-height: 380px; }
  .process-grid { grid-template-columns: 1fr; gap: 42px; }
  .process-intro { position: static; }
  .project-featured { grid-row: auto; min-height: auto; }
  .project-visual { min-height: 250px; }
  .project-content { padding: 25px; }
  .about-visual { min-height: 480px; }
  .portrait-card { inset: 0 25px 45px 0; }
  .sport { padding-top: 20px; }
  .sport-card { padding: 38px 27px; }
  .sport-card img { justify-self: center; width: 240px; order: -1; }
  .contact-panel { padding: 36px 25px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; }
  .legal-header .brand small { display: none; }
  .legal-content { padding-top: 60px; }
  .sport-hero { padding-top: 125px; }
  .sport-hero-grid, .sport-section-heading, .sport-detail-grid, .sport-contact-panel { grid-template-columns: 1fr; }
  .sport-hero-copy { max-width: 700px; }
  .sport-mark { min-height: 420px; transform: rotate(1deg); }
  .sport-section { padding: 82px 0; }
  .sport-values { grid-template-columns: 1fr; }
  .sport-value { min-height: auto; }
  .sport-value-number { margin-bottom: 35px; }
  .sport-detail-card, .sport-contact-panel { padding: 38px 27px; }
}

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