:root{
  --bg:#090909;
  --bg-soft:#0f0f10;
  --bg-soft-2:#141414;
  --panel:rgba(255,255,255,0.035);
  --panel-strong:rgba(255,255,255,0.055);
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);

  --text:#f2ece3;
  --muted:rgba(242,236,227,0.72);
  --soft:rgba(242,236,227,0.50);

  --accent:#c9b28f;
  --accent-soft:rgba(201,178,143,0.16);

  --shadow:0 28px 80px rgba(0,0,0,0.36);
  --shadow-strong:0 40px 110px rgba(0,0,0,0.48);

  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --max:1280px;
  --nav-h:78px;

  --progress:0%;
  --hero-parallax:0px;
  --hero-visibility:0;
  --hero-scroll-progress:0;
  --hero-focus:0;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.25,.8,.25,1);

  --section-space:108px;
  --section-space-mobile:78px;
  --content-max:68ch;
  --reading-max:60ch;

  --transition-glow:rgba(201,178,143,.18);
  --transition-glow-strong:rgba(201,178,143,.30);
  --transition-film:rgba(255,255,255,.06);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
}

body{
  margin:0;
  color:var(--text);
  font-family:"Inter",sans-serif;
  background:
    radial-gradient(circle at top, rgba(201,178,143,0.08), transparent 28%),
    linear-gradient(180deg, #070707 0%, #0b0b0b 32%, #0d0d0d 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.012), rgba(255,255,255,0.012)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.010) 0px,
      rgba(255,255,255,0.010) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity:.12;
  mix-blend-mode:soft-light;
  z-index:0;
}

::selection{
  background:rgba(201,178,143,0.24);
  color:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}

img,
video,
svg{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

button{
  appearance:none;
  -webkit-appearance:none;
}

.wrap{
  width:min(
    var(--max),
    calc(100% - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
  );
  margin:0 auto;
  position:relative;
  z-index:1;
}

.js-ready .reveal{
  will-change:transform, opacity, filter;
}

/* ---------- FOCUS ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(201,178,143,0.14);
  border-color:rgba(201,178,143,0.42);
}

.desktop-nav a:focus-visible,
.desktop-nav button:focus-visible,
.lang-switch a:focus-visible,
.contact-link:focus-visible,
.tool-button:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(201,178,143,0.14),
    0 10px 24px rgba(0,0,0,0.18);
}

/* ---------- TRANSITION / PROGRESS ---------- */

@keyframes cinematicTransitionPulse{
  0%{
    opacity:.34;
    transform:translateZ(0) scale(.94);
  }
  45%{
    opacity:1;
    transform:translateZ(0) scale(1.03);
  }
  100%{
    opacity:.92;
    transform:translateZ(0) scale(1.10);
  }
}

@keyframes cinematicTransitionSweep{
  0%{
    opacity:0;
    transform:translate3d(-30%, 0, 0) skewX(-10deg);
  }
  18%{
    opacity:.22;
  }
  48%{
    opacity:.96;
  }
  100%{
    opacity:.18;
    transform:translate3d(34%, 0, 0) skewX(-10deg);
  }
}

@keyframes cinematicTransitionDrift{
  0%{
    transform:translateZ(0) scale(1.025);
    filter:saturate(1.02) contrast(1.01);
  }
  100%{
    transform:translateZ(0) scale(1);
    filter:saturate(1.08) contrast(1.04);
  }
}

.page-transition{
  position:fixed;
  inset:0;
  z-index:10005;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  touch-action:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0) scale(1.018);
  will-change:opacity, transform, filter;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.03), transparent 22%),
    radial-gradient(circle at 50% 46%, rgba(201,178,143,.13), transparent 40%),
    linear-gradient(180deg, rgba(5,5,5,.84) 0%, rgba(7,7,7,.94) 46%, rgba(9,9,9,.985) 100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:saturate(.92);
  transition:
    opacity .42s var(--ease),
    visibility .42s var(--ease),
    transform .55s var(--ease),
    filter .55s var(--ease),
    background .42s var(--ease);
}

.page-transition::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transform:translateZ(0) scale(1.04);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,178,143,.10), transparent 34%),
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.045), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 38%);
  transition:
    opacity .52s var(--ease),
    transform .62s var(--ease);
}

.page-transition::after{
  content:"";
  position:absolute;
  inset:-14% -34%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-18%, 0, 0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,.08) 50%,
      transparent 58%,
      transparent 100%
    );
  mix-blend-mode:screen;
  transition:
    opacity .42s var(--ease),
    transform .78s var(--ease);
}

/* standard active + minimal + cinematic + cinematic-mobile */
.page-transition.active,
html[data-page-transition="active"] .page-transition,
html[data-page-transition="minimal"] .page-transition,
html[data-page-transition="cinematic"] .page-transition,
html[data-page-transition="cinematic-mobile"] .page-transition{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.page-transition.active,
html[data-page-transition="active"] .page-transition,
html[data-page-transition="minimal"] .page-transition{
  transform:translateZ(0) scale(1);
  filter:saturate(1);
}

.page-transition.active::before,
html[data-page-transition="active"] .page-transition::before,
html[data-page-transition="minimal"] .page-transition::before{
  opacity:1;
  transform:translateZ(0) scale(1);
}

.page-transition.active::after,
html[data-page-transition="active"] .page-transition::after,
html[data-page-transition="minimal"] .page-transition::after{
  opacity:.78;
  transform:translate3d(18%, 0, 0);
}

/* minimal */
html[data-page-transition="minimal"] .page-transition{
  background:
    radial-gradient(circle at 50% 36%, rgba(201,178,143,.07), transparent 34%),
    linear-gradient(180deg, rgba(6,6,6,.90), rgba(9,9,9,.985));
  transform:translateZ(0);
  filter:none;
}

html[data-page-transition="minimal"] .page-transition::after{
  opacity:.24;
  transform:translateZ(0);
}

/* cinematic — desktop / large premium */
html[data-page-transition="cinematic"] .page-transition{
  background:
    radial-gradient(circle at 50% 9%, rgba(255,255,255,.055), transparent 11%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.028), transparent 16%),
    radial-gradient(circle at 50% 30%, rgba(201,178,143,.28), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(201,178,143,.18), transparent 32%),
    radial-gradient(circle at 50% 68%, rgba(0,0,0,.20), transparent 46%),
    linear-gradient(180deg, rgba(2,2,2,.10) 0%, rgba(4,4,4,.24) 16%, rgba(6,6,6,.54) 42%, rgba(8,8,8,.86) 74%, rgba(9,9,9,.992) 100%);
  transform:translateZ(0) scale(1);
  filter:saturate(1.08) contrast(1.04);
  animation:cinematicTransitionDrift .92s cubic-bezier(.22,1,.36,1) both;
}

html[data-page-transition="cinematic"] .page-transition::before{
  opacity:1;
  transform:translateZ(0) scale(1.03);
  background:
    radial-gradient(circle at 50% 42%, rgba(201,178,143,.24), transparent 22%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 12%),
    radial-gradient(circle at 50% 58%, rgba(201,178,143,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 34%);
  animation:cinematicTransitionPulse .92s cubic-bezier(.22,1,.36,1) both;
}

html[data-page-transition="cinematic"] .page-transition::after{
  opacity:1;
  transform:translate3d(28%, 0, 0);
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.16) 50%,
      transparent 62%,
      transparent 100%
    );
  animation:cinematicTransitionSweep .96s cubic-bezier(.22,1,.36,1) both;
}

/* cinematic-mobile — lighter global layer under custom JS veil */
html[data-page-transition="cinematic-mobile"] .page-transition{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.028), transparent 16%),
    radial-gradient(circle at 50% 34%, rgba(201,178,143,.14), transparent 24%),
    radial-gradient(circle at 50% 54%, rgba(201,178,143,.08), transparent 34%),
    linear-gradient(180deg, rgba(5,5,5,.28) 0%, rgba(7,7,7,.58) 44%, rgba(9,9,9,.90) 100%);
  transform:translateZ(0);
  filter:saturate(1.02) contrast(1.01);
  animation:none !important;
}

html[data-page-transition="cinematic-mobile"] .page-transition::before{
  opacity:.82;
  transform:translateZ(0) scale(1.01);
  background:
    radial-gradient(circle at 50% 42%, rgba(201,178,143,.14), transparent 24%),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.045), transparent 12%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 30%);
  animation:none !important;
}

html[data-page-transition="cinematic-mobile"] .page-transition::after{
  opacity:.46;
  transform:translate3d(12%, 0, 0);
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,.08) 50%,
      transparent 60%,
      transparent 100%
    );
  animation:none !important;
}

/* cinematic shell backup */
body.cinematic-transition-active{
  overflow:hidden;
  cursor:progress;
}

body.cinematic-transition-active .site-header,
body.cinematic-transition-active main,
body.cinematic-transition-active .floating-tools,
body.cinematic-transition-active .site-footer{
  will-change:opacity, transform, filter;
}

body.cinematic-transition-active .progress-bar{
  opacity:.10;
  transform:scaleX(.985);
}

body.cinematic-transition-active .floating-tools{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

body.reduced-motion .page-transition{
  transform:none;
  filter:none;
  animation:none !important;
}

body.reduced-motion .page-transition::before,
body.reduced-motion .page-transition::after{
  transform:none;
  animation:none !important;
}

.progress-bar{
  position:fixed;
  top:0;
  left:0;
  width:var(--progress);
  height:3px;
  z-index:220;
  background:
    linear-gradient(
      90deg,
      rgba(201,178,143,0.92),
      rgba(242,236,227,0.97)
    );
  box-shadow:
    0 0 18px rgba(201,178,143,calc(.20 + (var(--hero-focus, 0) * .20))),
    0 0 34px rgba(242,236,227,calc(.06 + (var(--hero-visibility, 0) * .10)));
  transition:
    width .12s ease-out,
    box-shadow .25s var(--ease-soft),
    opacity .25s ease,
    transform .25s ease;
}

body.cinematic-mode .progress-bar{
  box-shadow:
    0 0 22px rgba(201,178,143,calc(.26 + (var(--hero-focus, 0) * .24))),
    0 0 42px rgba(242,236,227,calc(.08 + (var(--hero-visibility, 0) * .14)));
}

/* ---------- HEADER ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:180;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:rgba(
    9,
    9,
    9,
    calc(.66 + (var(--hero-visibility, 0) * .10) + (var(--hero-focus, 0) * .06))
  );
  border-bottom:1px solid rgba(
    255,
    255,
    255,
    calc(.05 + (var(--hero-focus, 0) * .05))
  );
  box-shadow:0 10px 30px rgba(
    0,
    0,
    0,
    calc(.10 + (var(--hero-visibility, 0) * .10))
  );
  transition:
    background .35s var(--ease-soft),
    border-color .35s var(--ease-soft),
    opacity .35s var(--ease-soft),
    transform .35s var(--ease-soft),
    box-shadow .35s var(--ease-soft);
}

.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,calc(.008 + (var(--hero-focus, 0) * .025))) 0%,
      transparent 72%
    );
  opacity:calc(.30 + (var(--hero-visibility, 0) * .50));
  transition:opacity .35s var(--ease-soft);
}

body.hero-passive .site-header{
  background:rgba(9,9,9,.82);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 14px 38px rgba(0,0,0,.22);
}

body.cinematic-mode .site-header{
  background:rgba(
    8,
    8,
    8,
    calc(.72 + (var(--hero-visibility, 0) * .10) + (var(--hero-focus, 0) * .08))
  );
  border-bottom-color:rgba(
    255,
    255,
    255,
    calc(.06 + (var(--hero-focus, 0) * .06))
  );
  box-shadow:0 14px 42px rgba(0,0,0,.26);
}

body.cinematic-mode.hero-passive .site-header{
  background:rgba(8,8,8,.88);
}

@supports not ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
  .site-header{
    background:rgba(9,9,9,.90);
  }

  body.cinematic-mode .site-header{
    background:rgba(8,8,8,.92);
  }
}

.header-inner{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex-shrink:0;
}

.brand-name{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:1.7rem;
  line-height:1;
  letter-spacing:.02em;
}

.brand-sub{
  font-size:.74rem;
  line-height:1.2;
  color:var(--soft);
  text-transform:uppercase;
  letter-spacing:.18em;
  white-space:nowrap;
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.desktop-nav a,
.desktop-nav button{
  color:var(--muted);
  font-size:.93rem;
  letter-spacing:.01em;
  transition:
    opacity .25s ease,
    color .25s ease,
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}

.desktop-nav a:hover,
.desktop-nav button:hover{
  color:var(--text);
  transform:translateY(-1px);
}

/* compact header */
.desktop-nav-compact{
  gap:18px;
  flex-wrap:nowrap;
  margin-left:auto;
}

.desktop-nav-compact .nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,0.025);
  color:var(--muted);
  white-space:nowrap;
}

.desktop-nav-compact .nav-button:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,0.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:2px;
}

.lang-switch a{
  color:var(--muted);
  transition:color .25s ease, opacity .25s ease;
  white-space:nowrap;
}

.lang-switch a:hover{
  color:var(--text);
}

.lang-switch a.active{
  color:var(--text);
}

.lang-switch span{
  color:var(--soft);
  font-size:.88rem;
}

.nav-button{
  color:var(--muted);
}

/* desktop hamburger */
.desktop-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  min-width:54px;
  min-height:54px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,0.025);
  flex-direction:column;
  gap:6px;
  transition:
    transform .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease);
}

.desktop-menu-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,0.05);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.desktop-menu-toggle span{
  display:block;
  width:20px;
  height:1.5px;
  border-radius:999px;
  background:var(--text);
  opacity:.92;
  transition:transform .25s ease, opacity .25s ease;
}

/* ---------- TYPO / LAYOUT ---------- */

.section{
  position:relative;
  padding:var(--section-space) 0;
  z-index:1;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  margin-bottom:34px;
}

.section-kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.70rem;
  margin-bottom:12px;
}

h1,h2,h3{
  margin:0;
}

h2{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.5rem, 4.9vw, 4.05rem);
  line-height:.94;
  font-weight:600;
  letter-spacing:-0.015em;
}

.section-note{
  max-width:58ch;
  color:var(--muted);
  line-height:1.9;
  font-size:1rem;
}

/* ---------- GRID ---------- */

.grid{
  display:grid;
  gap:24px;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* ---------- CARDS ---------- */

.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.024));
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
}

.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.12);
  box-shadow:var(--shadow-strong);
}

/* clickable project cards */
.project-link-card{
  display:flex;
  flex-direction:column;
  cursor:pointer;
  isolation:isolate;
}

.project-link-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 36%,
    rgba(255,255,255,.06) 50%,
    transparent 64%,
    transparent 100%
  );
  transform:translateX(-115%);
  transition:transform 1.15s var(--ease);
  pointer-events:none;
  z-index:2;
}

.project-link-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(201,178,143,.11), transparent 36%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.035), transparent 30%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
  z-index:1;
}

.project-link-card:hover::before{
  transform:translateX(115%);
}

.project-link-card:hover::after{
  opacity:1;
}

.project-link-card .project-body,
.project-link-card .project-media{
  position:relative;
  z-index:3;
}

.card-link-row{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-top:4px;
}

.card-entry{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:.96rem;
  line-height:1;
}

.card-entry::after{
  content:"→";
  transition:transform .3s var(--ease);
}

.project-link-card:hover .card-entry::after{
  transform:translateX(5px);
}

.content-panel{
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.027)),
    radial-gradient(circle at top right, rgba(201,178,143,0.12), transparent 36%);
  box-shadow:var(--shadow);
  padding:34px 30px;
  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
}

.content-panel:hover{
  border-color:rgba(255,255,255,0.12);
  box-shadow:var(--shadow-strong);
}

.content-panel h3{
  font-family:"Cormorant Garamond",serif;
  font-size:2.08rem;
  line-height:.96;
  margin:0 0 16px;
  letter-spacing:-0.01em;
}

.content-panel p{
  margin:0;
  color:var(--muted);
  line-height:1.95;
  max-width:var(--reading-max);
}

/* ---------- BUTTONS ---------- */

.btn{
  min-height:52px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:.96rem;
  line-height:1;
  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease),
    opacity .28s var(--ease),
    box-shadow .28s var(--ease),
    color .28s var(--ease);
  will-change:transform;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  text-align:center;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg, transparent 16%, rgba(255,255,255,.15), transparent 84%);
  transform:translateX(-120%);
  transition:transform .95s var(--ease);
  pointer-events:none;
}

.btn:hover::before{
  transform:translateX(120%);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.26);
}

.btn-primary{
  background:var(--text);
  color:#0a0a0a;
  border-color:transparent;
}

.btn-secondary{
  background:rgba(255,255,255,0.03);
  color:var(--text);
}

.btn-secondary:hover{
  background:rgba(255,255,255,0.08);
  border-color:var(--line-strong);
}

.btn-tertiary{
  background:transparent;
  color:var(--muted);
}

.btn-tertiary:hover{
  color:var(--text);
  border-color:var(--line-strong);
}

.cta-row{
  margin-top:34px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.cta-row.compact{
  margin-top:18px;
}

/* ---------- CHIPS ---------- */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  border:1px solid var(--line);
  color:var(--soft);
  background:rgba(255,255,255,0.02);
  border-radius:999px;
  padding:7px 11px;
  font-size:.74rem;
  letter-spacing:.02em;
}

/* ---------- TOUCH / TAP POLISH ---------- */

.btn,
.contact-link,
.tool-button,
.desktop-menu-toggle,
.desktop-nav-compact .nav-button{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

body.mobile-menu-open .floating-tools,
html[data-mobile-menu="open"] .floating-tools{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

@media (hover:none) and (pointer:coarse){
  .btn:active,
  .contact-link:active,
  .tool-button:active,
  .desktop-menu-toggle:active,
  .desktop-nav-compact .nav-button:active{
    transform:scale(.985);
  }
}

/* ---------- REVEAL ---------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s cubic-bezier(.22,1,.36,1);
  filter:blur(7px);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ---------- FOOTER ---------- */

.site-footer{
  position:relative;
  z-index:1;
  padding:38px 0 calc(68px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,0.06);
  transition:opacity .35s var(--ease-soft);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  color:var(--soft);
  font-size:.93rem;
  line-height:1.7;
}

/* ---------- FLOATING TOOLS ---------- */

.floating-tools{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right, 0px));
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:150;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.tool-button{
  min-width:48px;
  min-height:48px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,12,12,.78);
  color:var(--text);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    opacity .25s ease,
    box-shadow .25s ease;
}

.tool-button:hover{
  transform:translateY(-2px);
  background:rgba(18,18,18,.92);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 28px rgba(0,0,0,.24);
}

#scrollTopButton{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

/* ---------- CONTACT ---------- */

.contact-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  transition:
    transform .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease),
    box-shadow .28s var(--ease);
}

.contact-link:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.contact-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  opacity:.9;
}

.contact-icon svg{
  width:20px;
  height:20px;
}

/* ---------- ACCESSIBILITY ---------- */

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1100px){
  .grid-3{
    grid-template-columns:1fr;
  }

  .section-head{
    gap:24px;
  }

  .desktop-nav-compact{
    gap:12px;
  }
}

@media (max-width:900px){
  .grid-2{
    grid-template-columns:1fr;
  }

  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .section-note{
    max-width:100%;
  }
}

@media (max-width:760px){
  :root{
    --nav-h:72px;
    --section-space:var(--section-space-mobile);
  }

  .wrap{
    width:min(
      var(--max),
      calc(100% - 22px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    );
  }

  .desktop-nav.desktop-nav-compact{
    display:flex;
    align-items:center;
    gap:0;
    margin-left:auto;
  }

  .desktop-nav.desktop-nav-compact > :not(.desktop-menu-toggle){
    display:none !important;
  }

  .desktop-menu-toggle{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
  }

  .brand-name{
    font-size:1.45rem;
  }

  .brand-sub{
    white-space:normal;
  }

  .content-panel{
    padding:24px 20px;
  }

  .floating-tools{
    right:calc(10px + env(safe-area-inset-right, 0px));
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    gap:8px;
  }

  .tool-button{
    min-height:46px;
    padding:0 14px;
  }

  .contact-links{
    flex-direction:column;
  }

  .contact-link{
    width:100%;
    justify-content:flex-start;
  }

  .page-transition{
    background:
      radial-gradient(circle at 50% 26%, rgba(201,178,143,.10), transparent 38%),
      linear-gradient(180deg, rgba(6,6,6,.88), rgba(9,9,9,.985));
  }

  .page-transition::after{
    inset:-10% -26%;
  }

  html[data-page-transition="cinematic"] .page-transition{
    background:
      radial-gradient(circle at 50% 12%, rgba(255,255,255,.04), transparent 12%),
      radial-gradient(circle at 50% 24%, rgba(201,178,143,.22), transparent 22%),
      radial-gradient(circle at 50% 46%, rgba(201,178,143,.12), transparent 34%),
      linear-gradient(180deg, rgba(4,4,4,.18) 0%, rgba(7,7,7,.52) 42%, rgba(9,9,9,.988) 100%);
    filter:saturate(1.05);
  }

  html[data-page-transition="cinematic"] .page-transition::before{
    opacity:1;
    transform:translateZ(0) scale(1.02);
  }

  html[data-page-transition="cinematic"] .page-transition::after{
    opacity:.78;
    transform:translate3d(18%, 0, 0);
  }

  html[data-page-transition="cinematic-mobile"] .page-transition{
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.024), transparent 14%),
      radial-gradient(circle at 50% 32%, rgba(201,178,143,.14), transparent 20%),
      radial-gradient(circle at 50% 48%, rgba(201,178,143,.08), transparent 28%),
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(7,7,7,.52), rgba(9,9,9,.88));
    filter:saturate(1.03);
  }

  html[data-page-transition="cinematic-mobile"] .page-transition::before{
    opacity:.78;
    transform:translateZ(0) scale(1.01);
  }

  html[data-page-transition="cinematic-mobile"] .page-transition::after{
    opacity:.42;
    transform:translate3d(10%, 0, 0);
  }
}

@media (max-width:640px){
  .wrap{
    width:min(
      var(--max),
      calc(100% - 18px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    );
  }

  .content-panel{
    padding:22px 18px;
  }

  .btn{
    width:100%;
  }

  .cta-row{
    flex-direction:column;
    align-items:stretch;
  }

  .footer-inner{
    flex-direction:column;
  }

  .floating-tools{
    right:calc(8px + env(safe-area-inset-right, 0px));
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .tool-button{
    min-width:44px;
    min-height:44px;
    font-size:.94rem;
  }

  .page-transition{
    transition:
      opacity .32s var(--ease),
      visibility .32s var(--ease),
      transform .40s var(--ease),
      filter .40s var(--ease),
      background .32s var(--ease);
  }

  .page-transition::before{
    transition:
      opacity .38s var(--ease),
      transform .45s var(--ease);
  }

  .page-transition::after{
    transition:
      opacity .30s var(--ease),
      transform .52s var(--ease);
  }

  html[data-page-transition="cinematic"] .page-transition{
    filter:saturate(1.03);
  }

  html[data-page-transition="cinematic-mobile"] .page-transition{
    filter:saturate(1.02);
  }
}

/* =========================================================
   MOBILE ONLY — REMOVE BLUE TAP / FOCUS RECTANGLE
   Desktop untouched
   ========================================================= */

@media (hover:none) and (pointer:coarse), (max-width:760px){
  a,
  button,
  [role="button"],
  .btn,
  .tool-button,
  .mobile-menu-link,
  .mobile-menu-button,
  .mobile-cinematic-fab,
  .mobile-nav-toggle,
  .desktop-menu-toggle,
  .nav-button,
  .chapter-link-card,
  .project-link-card,
  .cinematic-entry-card,
  .track-link{
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  a:focus,
  button:focus,
  [role="button"]:focus,
  .btn:focus,
  .tool-button:focus,
  .mobile-menu-link:focus,
  .mobile-menu-button:focus,
  .mobile-cinematic-fab:focus,
  .mobile-nav-toggle:focus,
  .desktop-menu-toggle:focus,
  .nav-button:focus,
  .chapter-link-card:focus,
  .project-link-card:focus,
  .cinematic-entry-card:focus,
  .track-link:focus{
    outline: none !important;
    box-shadow: none !important;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  .btn:focus-visible,
  .tool-button:focus-visible,
  .mobile-menu-link:focus-visible,
  .mobile-menu-button:focus-visible,
  .mobile-cinematic-fab:focus-visible,
  .mobile-nav-toggle:focus-visible,
  .desktop-menu-toggle:focus-visible,
  .nav-button:focus-visible,
  .chapter-link-card:focus-visible,
  .project-link-card:focus-visible,
  .cinematic-entry-card:focus-visible,
  .track-link:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  .chapter-link-card,
  .project-link-card,
  .cinematic-entry-card,
  .track-link,
  .mobile-menu-link,
  .mobile-menu-button,
  .btn,
  .tool-button,
  .mobile-cinematic-fab{
    user-select: none;
    -webkit-user-select: none;
  }
}

/* =========================================================
   MOBILE HEADER ONLY — REMOVE BLUE TAP / FOCUS RECTANGLE
   Tylko pasek górny, desktop bez zmian
   ========================================================= */

@media (hover:none) and (pointer:coarse), (max-width:760px){
  .site-header,
  .site-header a,
  .site-header button,
  .site-header .brand,
  .site-header .brand-name,
  .site-header .brand-sub,
  .site-header .nav-button,
  .site-header .lang-switch a,
  .site-header .mobile-nav-toggle,
  .site-header .desktop-menu-toggle,
  .site-header #cinematicToggle,
  .site-header #mobileNavToggle{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none !important;
  }

  .site-header a:focus,
  .site-header button:focus,
  .site-header .brand:focus,
  .site-header .nav-button:focus,
  .site-header .lang-switch a:focus,
  .site-header .mobile-nav-toggle:focus,
  .site-header .desktop-menu-toggle:focus,
  .site-header #cinematicToggle:focus,
  .site-header #mobileNavToggle:focus{
    outline: none !important;
    box-shadow: none !important;
  }

  .site-header a:focus-visible,
  .site-header button:focus-visible,
  .site-header .brand:focus-visible,
  .site-header .nav-button:focus-visible,
  .site-header .lang-switch a:focus-visible,
  .site-header .mobile-nav-toggle:focus-visible,
  .site-header .desktop-menu-toggle:focus-visible,
  .site-header #cinematicToggle:focus-visible,
  .site-header #mobileNavToggle:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  .site-header *{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}