/* ==========================================================================
   Miłosz Wiśniewski - shared site styles
   Apple.com-inspired system: monochrome, huge whitespace, real photography.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --surface:#f5f5f7;
  --surface-2:#e8e8ed;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --ink-faint:#86868b;
  --line:#d2d2d7;
  --line-dark:rgba(255,255,255,0.16);
  --black:#000000;
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --sans:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.47059;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }
img{ max-width:100%; display:block; }
section{ position:relative; }
b, strong{ font-weight:600; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2rem); }
.wrap-narrow{ max-width:790px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2rem); }

/* ---------- skip link (accessibility) ---------- */

.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:200;
  background:var(--ink); color:#fff; font-weight:600; font-size:0.9rem;
  padding:0.8rem 1.2rem; border-radius:10px;
  transition:top 0.2s ease;
}
.skip-link:focus{ top:1rem; }

/* ---------- nav (flat, blurred, minimal) ---------- */

header.nav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 clamp(1.25rem, 4vw, 2rem);
  height:52px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}

header.nav::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:var(--scroll-progress, 0%);
  height:2px;
  background:var(--accent);
  transition:width 0.08s linear;
}

.logo{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-weight:600;
  font-size:0.86rem;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); flex-shrink:0; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
  font-weight:400;
  font-size:0.78rem;
}

.nav-links a{ color:var(--ink-soft); transition:color 0.15s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }

.nav-item{ position:relative; }

.nav-dd{
  position:absolute;
  top:calc(100% + 1px);
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  min-width:190px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0.5rem;
  box-shadow:0 20px 40px -14px rgba(0,0,0,0.18);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.15s ease, transform 0.15s ease;
}

.nav-item:hover .nav-dd,
.nav-item:focus-within .nav-dd{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-dd a{
  display:block;
  padding:0.55rem 0.75rem;
  border-radius:7px;
  font-size:0.82rem;
  color:var(--ink-soft);
}

.nav-dd a:hover{ background:var(--surface); color:var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:1rem; }

.nav-toggle{
  display:none;
  width:32px;
  height:32px;
  border-radius:8px;
  border:none;
  background:transparent;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink);
}

.nav-toggle svg{ width:19px; height:19px; }

.nav-mobile{
  display:none;
  flex-direction:column;
  gap:0;
  width:100%;
  position:fixed;
  top:52px; left:0; right:0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
  padding:0.4rem clamp(1.25rem, 4vw, 2rem) 1rem;
  z-index:29;
}

.nav-mobile a{
  display:block;
  padding:0.75rem 0.1rem;
  font-weight:400;
  font-size:1rem;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}

.nav-mobile .sub{ padding-left:1rem; font-size:0.9rem; color:var(--ink-soft); }

body.nav-open .nav-mobile{ display:flex; }
body.nav-open{ overflow:hidden; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn{ display:none; }
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:var(--accent);
  color:#fff;
  font-weight:400;
  font-size:0.95rem;
  padding:0.6rem 1.15rem;
  border-radius:980px;
  border:1px solid var(--accent);
  transition:background 0.2s ease, border-color 0.2s ease;
  white-space:nowrap;
  cursor:pointer;
}

.btn:hover, .btn:focus-visible{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.btn.ghost, .btn.outline{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.btn.ghost:hover, .btn.outline:hover{ border-color:var(--ink); }

.btn.dark{ background:var(--ink); border-color:var(--ink); }
.btn.dark:hover{ background:#000; border-color:#000; }

.btn svg{ display:none; }

/* text link with chevron - the other Apple CTA pattern */

.link-more{
  display:inline-flex; align-items:center; gap:0.3rem;
  color:var(--accent); font-size:1.02rem; font-weight:400;
}
.link-more:hover{ text-decoration:underline; }
.link-more svg{ width:14px; height:14px; transition:transform 0.15s ease; }
.link-more:hover svg{ transform:translateX(2px); }
.feature-card .link-more{ margin-top:0.8rem; font-size:0.9rem; }

/* ---------- hero ---------- */

.hero{ padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); text-align:center; }
.hero.left{ text-align:left; }
.hero-compact{ padding-bottom:1rem; }
.hero-media-flush{ padding-bottom:0; }

.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; text-align:left; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } .hero-visual{ order:-1; } }

h1.h-hero{
  margin:0 auto;
  font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.06;
  letter-spacing:-0.03em;
  color:var(--ink);
  max-width:16ch;
}
.hero.left h1.h-hero{ margin:0; }

h1.h-hero .accent{ color:var(--ink-soft); }

p.lede{ margin:1.1rem auto 1.9rem; font-size:1.25rem; line-height:1.4; color:var(--ink-soft); max-width:38ch; font-weight:400; }
.hero.left p.lede{ margin:1.1rem 0 1.9rem; }

.hero-cta{ display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; }
.hero.left .hero-cta{ justify-content:flex-start; }
.hero-cta .note{ font-size:0.88rem; color:var(--ink-faint); }

.hero-visual{ position:relative; }

.shot-card{ border-radius:20px; overflow:hidden; background:var(--surface); }
.shot-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

.shot-tag{
  display:flex; align-items:center; gap:0.45rem;
  margin-top:0.7rem; font-size:0.8rem; font-weight:500; color:var(--ink-faint);
}
.shot-tag .swatch{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.shot-tag.centered{ justify-content:center; }

/* full-bleed hero media below headline */

.hero-media{ margin-top:clamp(2.5rem, 6vw, 4rem); border-radius:24px; overflow:hidden; }
.hero-media img{ width:100%; height:auto; object-fit:cover; display:block; }
@media (max-width:640px){ .hero-media{ border-radius:16px; } }

/* ---------- browser mockups and layered hero ---------- */

.device-stage{
  position:relative;
  margin:clamp(3.5rem, 7vw, 5.5rem) auto 1rem;
  min-height:clamp(380px, 56vw, 650px);
  max-width:1040px;
  isolation:isolate;
}

.browser-frame{
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 35px 100px -42px rgba(0,0,0,0.48), 0 12px 32px -20px rgba(0,0,0,0.3);
}

.browser-main{
  position:absolute;
  width:min(78%, 810px);
  left:50%;
  top:0;
  transform:translateX(-50%) rotateX(1deg);
  z-index:1;
}

.browser-bar{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0 4rem;
  background:#f4f4f6;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.browser-dots{
  position:absolute;
  left:15px;
  display:flex;
  gap:6px;
}

.browser-dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c8c8cc;
}

.browser-url{
  min-width:42%;
  max-width:78%;
  padding:0.28rem 0.8rem;
  border-radius:7px;
  background:#fff;
  color:var(--ink-faint);
  font-size:0.68rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.browser-screen{
  position:relative;
  aspect-ratio:1.47/1;
  overflow:hidden;
  background:var(--surface);
}

.browser-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.browser-frame:hover .browser-screen img{ transform:scale(1.025); }

.floating-photo{
  position:absolute;
  z-index:2;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  padding:7px;
  box-shadow:0 28px 70px -30px rgba(0,0,0,0.5);
  text-align:left;
  transition:transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.floating-photo img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.floating-photo span{
  position:absolute;
  left:16px;
  bottom:15px;
  padding:0.35rem 0.6rem;
  border-radius:999px;
  background:rgba(0,0,0,0.68);
  color:#fff;
  font-size:0.7rem;
  backdrop-filter:blur(8px);
}
.floating-photo-left{ width:25%; aspect-ratio:0.82; left:0; bottom:0; transform:rotate(-4deg); }
.floating-photo-right{ width:30%; aspect-ratio:1.2; right:0; bottom:4%; transform:rotate(4deg); }
.device-stage:hover .floating-photo-left{ transform:rotate(-2deg) translateY(-8px); }
.device-stage:hover .floating-photo-right{ transform:rotate(2deg) translateY(-10px); }

@media (max-width:760px){
  .device-stage{ min-height:420px; margin-top:3rem; }
  .browser-main{ width:94%; }
  .floating-photo-left{ width:38%; left:2%; bottom:0; }
  .floating-photo-right{ width:43%; right:1%; bottom:6%; }
}

.case-hero-pair{
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap:clamp(1.2rem, 3vw, 2.3rem);
  align-items:center;
  margin-top:clamp(2.8rem, 6vw, 4.5rem);
  text-align:left;
}

.case-photo{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  aspect-ratio:0.92;
  background:var(--surface);
}

.case-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,.61,.36,1); }
.case-photo:hover img{ transform:scale(1.035); }
.case-photo figcaption{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:0.4rem 0.65rem;
  border-radius:999px;
  background:rgba(0,0,0,0.64);
  color:#fff;
  font-size:0.72rem;
  backdrop-filter:blur(8px);
}
.case-browser{ transform:rotate(1.5deg); transition:transform 0.8s cubic-bezier(.22,.61,.36,1); }
.case-browser:hover{ transform:rotate(0deg) translateY(-6px); }
.case-browser .browser-screen{ aspect-ratio:1.35/1; }

@media (max-width:780px){
  .case-hero-pair{ grid-template-columns:1fr; }
  .case-photo{ aspect-ratio:16/10; }
  .case-browser{ transform:none; }
}

/* ---------- eyebrow / section head ---------- */

.eyebrow{
  display:block;
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  margin:0 0 0.9rem;
}

.section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.section-head.left{ margin:0 0 2.6rem; text-align:left; max-width:640px; }

.section-head h2{
  font-weight:600;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  color:var(--ink);
  letter-spacing:-0.02em;
  margin:0 0 0.7rem;
  line-height:1.1;
}

.section-head p{ margin:0; font-size:1.15rem; color:var(--ink-soft); line-height:1.45; }

/* ---------- breadcrumb ---------- */

.crumb{
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-wrap:wrap;
  font-size:0.8rem;
  color:var(--ink-faint);
  margin:0 0 1.6rem;
}

.hero:not(.left) .crumb{ justify-content:center; }

.crumb a{ color:var(--ink-faint); }
.crumb a:hover{ color:var(--ink); }
.crumb .current{ color:var(--ink); }

/* ---------- feature blocks (no icon squares - plain, editorial) ---------- */

.card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line); }
@media (max-width: 800px){
  .card-grid{ grid-template-columns:1fr; }
  .card-grid:not(.cols-4) > .feature-card{ border-right:none; }
}

.card-grid.cols-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width: 1000px){ .card-grid.cols-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid.cols-4{ grid-template-columns:1fr; } }

.card-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width: 700px){ .card-grid.cols-2{ grid-template-columns:1fr; } }

.feature-card{
  padding:2.4rem 2rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.card-grid > .feature-card:nth-child(3n){ border-right:none; }
.card-grid.cols-4 > .feature-card:nth-child(3n){ border-right:1px solid var(--line); }
.card-grid.cols-4 > .feature-card:nth-child(4n){ border-right:none; }
.card-grid.cols-2 > .feature-card:nth-child(3n){ border-right:1px solid var(--line); }
.card-grid.cols-2 > .feature-card:nth-child(2n){ border-right:none; }

@media (max-width: 1000px){
  .card-grid.cols-4 > .feature-card{ border-right:1px solid var(--line); }
  .card-grid.cols-4 > .feature-card:nth-child(2n){ border-right:none; }
}

@media (max-width: 700px){
  .card-grid.cols-2 > .feature-card{ border-right:none; }
}

@media (max-width: 560px){
  .card-grid.cols-4 > .feature-card{ border-right:none; }
}

.feature-card .ico{ display:none; }

.feature-card h3{ margin:0 0 0.6rem; font-size:1.2rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.feature-card p{ margin:0; font-size:0.98rem; color:var(--ink-soft); line-height:1.55; }

.tint-a, .tint-b, .tint-c, .tint-d{ display:none; }

/* ---------- stat / spec numbers (Apple spec-sheet style) ---------- */

.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; }
@media (max-width: 700px){ .stats{ grid-template-columns:1fr; } }

.stat{
  padding:2rem 1.4rem;
  text-align:center;
  border-left:1px solid var(--line);
}
.stats > .stat:first-child{ border-left:none; }
@media (max-width: 700px){
  .stat{ border-left:none; border-top:1px solid var(--line); }
  .stats > .stat:first-child{ border-top:none; }
}

.stat .num{ font-weight:600; font-size:clamp(2.4rem, 5vw, 3.6rem); color:var(--ink); letter-spacing:-0.02em; line-height:1; }
.stat .cap{ font-size:0.92rem; color:var(--ink-soft); margin-top:0.6rem; }

.stat.on-dark{ }
.stat.on-dark .num{ color:#fff; }
.stat.on-dark .cap{ color:#a1a1a6; }

/* ---------- quote block ---------- */

.quote{
  text-align:center;
  padding:0;
}

.quote p{
  font-size:clamp(1.5rem, 3.4vw, 2.4rem); font-weight:600; margin:0 0 1.2rem; line-height:1.25;
  letter-spacing:-0.02em; color:var(--ink);
}
.quote cite{ font-style:normal; font-size:0.85rem; color:var(--ink-faint); }

/* ---------- gallery (full-bleed, no colorful overlays) ---------- */

.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:220px; grid-auto-flow:dense; gap:0.5rem; }

.gallery-item{ position:relative; border-radius:14px; overflow:hidden; background:var(--surface); }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.gallery-item:hover img{ transform:scale(1.04); }

.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1rem 0.8rem;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color:#fff; font-size:0.82rem; font-weight:500;
}

/* Curated case-study galleries: one strong establishing frame, then proof. */
.curated-gallery{
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:clamp(170px, 19vw, 260px);
  gap:0.72rem;
}
.curated-gallery .gallery-item{
  grid-column:span 4;
  grid-row:auto;
  border-radius:20px;
  opacity:0;
  transform:translateY(28px) scale(0.965);
  transition:opacity 0.55s ease, transform 0.9s cubic-bezier(.22,1,.36,1), box-shadow 0.65s ease;
}
.curated-gallery .gallery-item:first-child{ grid-column:span 8; grid-row:span 2; }
.curated-gallery .gallery-item:nth-child(2),
.curated-gallery .gallery-item:nth-child(3){ grid-column:span 4; }
.curated-gallery.in-view .gallery-item{ opacity:1; transform:none; }
.curated-gallery.in-view .gallery-item:nth-child(1){ transition-delay:0.05s; }
.curated-gallery.in-view .gallery-item:nth-child(2){ transition-delay:0.16s; }
.curated-gallery.in-view .gallery-item:nth-child(3){ transition-delay:0.27s; }
.curated-gallery.in-view .gallery-item:nth-child(4){ transition-delay:0.38s; }
.curated-gallery.in-view .gallery-item:nth-child(5){ transition-delay:0.49s; }
.curated-gallery.in-view .gallery-item:nth-child(6){ transition-delay:0.6s; }
.curated-gallery .gallery-item:hover{ box-shadow:0 34px 76px -48px rgba(0,0,0,0.62); }
.curated-gallery .gallery-item img{ filter:saturate(0.96) contrast(1.035); transition:transform 1.15s cubic-bezier(.22,.61,.36,1), filter 0.5s ease; }
.curated-gallery .gallery-item:hover img{ transform:scale(1.045); filter:saturate(1.04) contrast(1.035); }
.curated-gallery .cap{ padding:2.2rem 1rem 0.9rem; }

@media (max-width: 800px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:190px; } }
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .gallery-item{ aspect-ratio:4/3; }
  .gallery-item.tall{ grid-row:auto; }
}

/* ---------- filter tabs (minimal underline, not pills) ---------- */

.filter-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.8rem; margin:0 0 2.4rem; border-bottom:1px solid var(--line); }
.filter-tab{
  font-family:var(--sans); font-weight:400; font-size:0.92rem; color:var(--ink-soft);
  background:none; border:none; border-bottom:2px solid transparent; padding:0 0 0.9rem;
  cursor:pointer; transition:color 0.15s ease, border-color 0.15s ease;
}
.filter-tab:hover{ color:var(--ink); }
.filter-tab.is-active{ color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- project cards (realizacje / case studies index) ---------- */

.proj-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
@media (max-width: 900px){ .proj-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px){ .proj-grid{ grid-template-columns:1fr; } }

.proj-card{
  position:relative;
  display:block;
  color:var(--ink);
}

.proj-card .shot{ aspect-ratio:4/3; overflow:hidden; background:var(--surface); border-radius:16px; }
.proj-card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.proj-card:hover .shot img{ transform:scale(1.04); }

.proj-card .body{ padding:1.1rem 0.1rem 0; }
.proj-card .tag{ font-size:0.76rem; font-weight:600; color:var(--ink-faint); }
.proj-card h3{ margin:0.3rem 0 0.35rem; font-size:1.15rem; font-weight:600; letter-spacing:-0.01em; }
.proj-card .go{ display:inline-flex; align-items:center; gap:0.3rem; font-size:0.9rem; color:var(--accent); }

.simple-project-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
}
.simple-project-link h3{ margin:0; }
.simple-project-link:hover h3{ color:var(--accent); }
.card-grid.cols-2 > .simple-project-link:nth-child(odd){ padding-right:1.3rem; border-right:1px solid var(--line); }
.card-grid.cols-2 > .simple-project-link:nth-child(even){ padding-left:1.3rem; }

@media (max-width:700px){
  .card-grid.cols-2 > .simple-project-link:nth-child(odd),
  .card-grid.cols-2 > .simple-project-link:nth-child(even){ padding-right:0; padding-left:0; border-right:none; }
}

.portfolio-grid .shot{
  position:relative;
  aspect-ratio:1.35/1;
  padding-top:28px;
  border:1px solid rgba(0,0,0,0.11);
  background:#f4f4f6;
  box-shadow:0 24px 54px -34px rgba(0,0,0,0.45);
}
.portfolio-grid .shot::before{
  content:"•••";
  position:absolute;
  top:3px;
  left:10px;
  z-index:2;
  color:#b9b9be;
  font-size:0.9rem;
  letter-spacing:0.12em;
}
.portfolio-grid .shot img{ border-top:1px solid rgba(0,0,0,0.08); object-position:top center; }
.portfolio-grid .proj-card:hover .shot{ box-shadow:0 34px 76px -34px rgba(0,0,0,0.5); }

.case-showcase-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 4vw, 3rem);
}

.case-showcase{ display:block; min-width:0; color:var(--ink); }
.case-showcase:nth-child(even){ margin-top:clamp(2rem, 6vw, 5rem); }
.browser-card{ border-radius:18px; transition:transform 0.7s cubic-bezier(.22,.61,.36,1), box-shadow 0.7s ease; }
.browser-card .browser-screen{ aspect-ratio:1.35/1; }
.case-showcase:hover .browser-card{
  transform:translateY(-8px);
  box-shadow:0 45px 110px -42px var(--case-accent);
}
.case-showcase .body{ padding:1.3rem 0.15rem 0; }
.case-showcase .tag{ color:var(--case-accent); font-size:0.76rem; font-weight:600; }
.case-showcase h3{ margin:0.35rem 0 0.55rem; font-size:clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing:-0.02em; }
.case-showcase p{ margin:0 0 0.85rem; color:var(--ink-soft); max-width:50ch; }
.case-showcase .go{ color:var(--case-accent); font-size:0.92rem; }
.case-showcase .go::after{ content:"  →"; }
.section-link{ margin:3rem 0 0; text-align:center; }

@media (max-width:760px){
  .case-showcase-grid{ grid-template-columns:1fr; }
  .case-showcase:nth-child(even){ margin-top:0; }
}

/* ---------- spec card (case study meta) ---------- */

.spec-card{ border-top:1px solid var(--line); }
.spec-row{ display:flex; flex-wrap:wrap; gap:0.3rem 1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.spec-row .k{ flex:0 0 auto; width:9rem; font-weight:600; font-size:0.86rem; color:var(--ink); }
.spec-row .v{ flex:1 1 220px; font-size:0.96rem; color:var(--ink-soft); }

/* ---------- dark panel (full-bleed black section, Apple's contrast beat) ---------- */

.panel-dark{
  background:var(--black);
  color:#d2d2d7;
  border-radius:28px;
  padding:clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  text-align:center;
}

.panel-dark h2{ color:#fff; font-weight:600; font-size:clamp(1.9rem, 3.6vw, 2.8rem); margin:0 0 0.8rem; letter-spacing:-0.02em; }
.panel-dark > p{ max-width:44ch; margin:0 auto 2.2rem; color:#a1a1a6; font-size:1.1rem; }

.chip-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:0; text-align:left; border-top:1px solid var(--line-dark); }
@media (max-width: 700px){ .chip-list{ grid-template-columns:1fr; } }

.chip-list li{
  padding:1.3rem 0.2rem; font-size:0.96rem; line-height:1.55; color:#c7c7cc;
  border-bottom:1px solid var(--line-dark);
}
.chip-list li:nth-child(odd){ border-right:1px solid var(--line-dark); padding-right:1.5rem; }
@media (max-width: 700px){ .chip-list li:nth-child(odd){ border-right:none; padding-right:0.2rem; } }

.chip-list li .em{ display:none; }
.chip-list li b{ color:#fff; }

/* ---------- ticker ---------- */

.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0.9rem 0; background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.ticker-track{ display:flex; width:max-content; gap:2.4rem; animation:ticker 32s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track{ animation-play-state:paused; }

.ticker-track span{
  display:flex; align-items:center; gap:2.4rem;
  font-size:0.8rem; font-weight:500;
  color:var(--ink-soft); white-space:nowrap;
}

.ticker-track span::after{ content:"-"; color:var(--ink-faint); margin-left:2.4rem; }

@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ---------- animated counters ---------- */

.counter{ font-variant-numeric:tabular-nums; }

/* ---------- bar chart ---------- */

.barchart{ display:flex; flex-direction:column; gap:1.3rem; }

.barchart-row .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.5rem; font-size:0.92rem; }
.barchart-row .top .lbl{ font-weight:600; color:var(--ink); }
.barchart-row .top .val{ font-weight:600; color:var(--ink); }
.barchart-row .track{ height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.barchart-row .fill{
  height:100%; width:0%;
  background:var(--ink);
  transition:width 1.1s cubic-bezier(0.22,1,0.36,1);
}
.barchart-row.in-view .fill{ width:var(--pct, 0%); }

/* ---------- comparison table ---------- */

.cmp-table{ width:100%; border-collapse:collapse; font-size:0.94rem; }
.cmp-table th, .cmp-table td{ padding:1rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
.cmp-table thead th{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); font-weight:600; }
.cmp-table tbody tr:hover{ background:var(--surface); }
.cmp-table td.hl, .cmp-table th.hl{ color:var(--ink); font-weight:600; }
.cmp-table-wrap{ overflow-x:auto; }
@media (max-width:600px){ .cmp-table{ font-size:0.84rem; } .cmp-table th, .cmp-table td{ padding:0.75rem 0.6rem; } }

/* ---------- process / flow diagram (numbered list, not circular nodes) ---------- */

.flow-diagram{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1.6rem; margin-top:0; border-top:1px solid var(--line); }
.flow-diagram.cols-4{ grid-template-columns:repeat(4, 1fr); }

@media (max-width: 860px){
  .flow-diagram, .flow-diagram.cols-4{ grid-template-columns:1fr; }
}

.flow-step{ padding:1.8rem 1.2rem 0 0; border-right:1px solid var(--line); }
.flow-diagram > .flow-step:last-child{ border-right:none; }
@media (max-width: 860px){ .flow-step{ border-right:none; border-bottom:1px solid var(--line); padding:1.6rem 0; } .flow-diagram > .flow-step:last-child{ border-bottom:none; } }

.flow-step .node{ display:none; }

.flow-step .num{
  display:inline-block; font-size:0.85rem; font-weight:600; color:var(--ink-faint); margin-bottom:0.8rem;
}

.flow-step .label{ font-size:0.94rem; color:var(--ink-soft); line-height:1.5; }
.flow-step .label b{ display:block; color:var(--ink); font-size:1.02rem; font-weight:600; margin-bottom:0.35rem; }

/* ---------- structured case-study blocks ---------- */

.trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line); }
@media (max-width:800px){ .trio{ grid-template-columns:1fr; } }

.trio-card{ padding:1.8rem 1.6rem; border-right:1px solid var(--line); }
.trio > .trio-card:last-child{ border-right:none; }
@media (max-width:800px){ .trio-card{ border-right:none; border-bottom:1px solid var(--line); } .trio > .trio-card:last-child{ border-bottom:none; } }

.trio-card .k{ font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:0.7rem; display:block; color:var(--ink-faint); }
.trio-card h4{ margin:0 0 0.55rem; font-size:1.08rem; font-weight:600; letter-spacing:-0.01em; }
.trio-card p{ margin:0; font-size:0.94rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- portrait ---------- */

.portrait{ border-radius:20px; overflow:hidden; }
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.portrait .cap{ margin-top:0.9rem; }
.portrait .cap b{ display:block; font-size:1rem; font-weight:600; color:var(--ink); }
.portrait .cap span{ font-size:0.88rem; color:var(--ink-soft); }

/* ---------- footer (dense, small text, Apple-style) ---------- */

footer.site{
  border-top:1px solid var(--line);
  padding:2rem clamp(1.25rem, 4vw, 2rem) 1.6rem;
  background:var(--surface);
}

footer.site .foot-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom:1.6rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line);
}

footer.site .foot-brand{ max-width:32ch; }
footer.site .foot-brand .logo{ margin-bottom:0.7rem; }
footer.site .foot-brand p{ font-size:0.82rem; color:var(--ink-soft); margin:0; }

footer.site .foot-cols{ display:flex; gap:3rem; flex-wrap:wrap; }
footer.site .foot-col h4{ margin:0 0 0.7rem; font-size:0.74rem; font-weight:600; color:var(--ink-faint); }
footer.site .foot-col a{ display:block; color:var(--ink-soft); font-size:0.84rem; margin-bottom:0.55rem; }
footer.site .foot-col a:hover{ color:var(--ink); }

footer.site .foot-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.78rem; color:var(--ink-faint); }
footer.site .foot-bottom a{ color:var(--ink-faint); }
footer.site .foot-bottom a:hover{ color:var(--ink); }

/* ---------- entrance (subtle Apple-style fade-up, not bouncy) ---------- */

.rise{ opacity:0; transform:translateY(8px); animation:riseIn 0.6s ease forwards; }
.rise.d1{ animation-delay:0.03s; }
.rise.d2{ animation-delay:0.09s; }
.rise.d3{ animation-delay:0.15s; }
.rise.d4{ animation-delay:0.21s; }

@keyframes riseIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; animation:none; } }

.fade-up{ opacity:0; transform:translateY(22px) scale(0.992); filter:blur(5px); transition:opacity 0.85s ease, transform 0.85s cubic-bezier(.22,.61,.36,1), filter 0.85s ease; }
.fade-up.in-view{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){ .fade-up{ opacity:1; transform:none; filter:none; transition:none; } }

/* Staggered children for grid-like fade-up containers (Apple-style sequential reveal) -
   the container itself stays visible; each direct child fades/rises in with its own delay. */
.card-grid.fade-up, .gallery-grid.fade-up, .flow-diagram.fade-up,
.stats.fade-up, .trio.fade-up, .proj-grid.fade-up, .case-showcase-grid.fade-up{
  opacity:1; transform:none; filter:none; transition:none;
}
.card-grid.fade-up > *, .gallery-grid.fade-up > *, .flow-diagram.fade-up > *,
.stats.fade-up > *, .trio.fade-up > *, .proj-grid.fade-up > *, .case-showcase-grid.fade-up > *{
  opacity:0; transform:translateY(24px) scale(0.985); filter:blur(5px);
  transition:opacity 0.75s cubic-bezier(.22,.61,.36,1), transform 0.75s cubic-bezier(.22,.61,.36,1), filter 0.75s ease;
}
.card-grid.fade-up.in-view > *, .gallery-grid.fade-up.in-view > *, .flow-diagram.fade-up.in-view > *,
.stats.fade-up.in-view > *, .trio.fade-up.in-view > *, .proj-grid.fade-up.in-view > *, .case-showcase-grid.fade-up.in-view > *{
  opacity:1; transform:none; filter:none;
}
.card-grid.fade-up > *:nth-child(2), .gallery-grid.fade-up > *:nth-child(2), .flow-diagram.fade-up > *:nth-child(2), .stats.fade-up > *:nth-child(2), .trio.fade-up > *:nth-child(2), .proj-grid.fade-up > *:nth-child(2), .case-showcase-grid.fade-up > *:nth-child(2){ transition-delay:0.07s; }
.card-grid.fade-up > *:nth-child(3), .gallery-grid.fade-up > *:nth-child(3), .flow-diagram.fade-up > *:nth-child(3), .stats.fade-up > *:nth-child(3), .trio.fade-up > *:nth-child(3), .proj-grid.fade-up > *:nth-child(3), .case-showcase-grid.fade-up > *:nth-child(3){ transition-delay:0.14s; }
.card-grid.fade-up > *:nth-child(4), .gallery-grid.fade-up > *:nth-child(4), .flow-diagram.fade-up > *:nth-child(4), .stats.fade-up > *:nth-child(4), .trio.fade-up > *:nth-child(4), .proj-grid.fade-up > *:nth-child(4), .case-showcase-grid.fade-up > *:nth-child(4){ transition-delay:0.21s; }
.card-grid.fade-up > *:nth-child(5), .gallery-grid.fade-up > *:nth-child(5), .flow-diagram.fade-up > *:nth-child(5), .stats.fade-up > *:nth-child(5), .trio.fade-up > *:nth-child(5), .proj-grid.fade-up > *:nth-child(5){ transition-delay:0.28s; }
.card-grid.fade-up > *:nth-child(6), .gallery-grid.fade-up > *:nth-child(6), .flow-diagram.fade-up > *:nth-child(6), .stats.fade-up > *:nth-child(6), .trio.fade-up > *:nth-child(6), .proj-grid.fade-up > *:nth-child(6){ transition-delay:0.35s; }
.card-grid.fade-up > *:nth-child(n+7), .gallery-grid.fade-up > *:nth-child(n+7), .flow-diagram.fade-up > *:nth-child(n+7), .stats.fade-up > *:nth-child(n+7), .trio.fade-up > *:nth-child(n+7), .proj-grid.fade-up > *:nth-child(n+7){ transition-delay:0.42s; }

@media (prefers-reduced-motion: reduce){
  .card-grid.fade-up > *, .gallery-grid.fade-up > *, .flow-diagram.fade-up > *,
  .stats.fade-up > *, .trio.fade-up > *, .proj-grid.fade-up > *, .case-showcase-grid.fade-up > *{
    opacity:1; transform:none; filter:none; transition:none;
  }
  header.nav::after{ transition:none; }
  .floating-photo, .browser-card, .browser-screen img{ transition:none; }
}

/* ---------- generic section spacing ---------- */

.sect{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.sect-tight{ padding:clamp(1rem, 4vw, 2rem) 0 clamp(3rem, 7vw, 5.5rem); }
.error-page{ min-height:100vh; display:grid; place-items:center; padding:3rem 0; text-align:center; }
.error-page .lede{ max-width:42ch; }

/* ---------- cinematic photography ---------- */

.cinema-stage{
  position:relative;
  min-height:clamp(500px, 68vw, 740px);
  margin:clamp(3rem, 7vw, 5.5rem) auto 0;
  isolation:isolate;
}

.cinema-frame{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 34px 90px -42px rgba(0,0,0,0.5);
}

.cinema-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(0, var(--scene-shift, 0px), 0) scale(1.04);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.cinema-wide{
  z-index:1;
  left:9%;
  top:0;
  width:82%;
  aspect-ratio:16/10;
  border-radius:30px;
}

.cinema-portrait{
  z-index:3;
  left:0;
  bottom:0;
  width:27%;
  aspect-ratio:0.76;
  border:7px solid #fff;
  border-radius:24px;
  animation:cinemaFloatA 8s ease-in-out infinite;
}

.cinema-landscape{
  z-index:2;
  right:0;
  bottom:6%;
  width:34%;
  aspect-ratio:1.34;
  border:7px solid #fff;
  border-radius:24px;
  animation:cinemaFloatB 9s ease-in-out infinite;
}

.cinema-caption{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:3%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.72rem;
  padding:0;
  transform:translateX(-50%);
}

.cinema-caption span{
  display:flex;
  align-items:center;
  gap:0.72rem;
  padding:0;
  color:var(--ink-faint);
  font-size:0.73rem;
  font-weight:500;
  white-space:nowrap;
}

.cinema-caption span + span::before{
  content:"";
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--line);
}

@keyframes cinemaFloatA{
  0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
  50%{ transform:translate3d(0,-10px,0) rotate(-0.5deg); }
}

@keyframes cinemaFloatB{
  0%,100%{ transform:translate3d(0,0,0) rotate(2deg); }
  50%{ transform:translate3d(0,-12px,0) rotate(0.5deg); }
}

/* ---------- full-screen scroll story ---------- */

.scroll-story{
  height:300vh;
  margin:clamp(2rem, 5vw, 4rem) 0 0;
  background:#000;
}

.story-sticky{
  position:sticky;
  top:52px;
  height:calc(100vh - 52px);
  overflow:hidden;
  background:#000;
}

.story-media,
.story-shade{
  position:absolute;
  inset:0;
}

.story-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 0.75s ease, transform 1.8s cubic-bezier(.22,.61,.36,1);
}

.story-image.is-active{
  opacity:1;
  transform:scale(1);
}

.story-shade{
  z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 42%, rgba(0,0,0,0.05) 72%), linear-gradient(0deg, rgba(0,0,0,0.45), transparent 45%);
}

.story-content{
  position:relative;
  z-index:2;
  height:100%;
}

.story-step{
  position:absolute;
  left:clamp(1.25rem, 4vw, 2rem);
  bottom:clamp(3rem, 10vh, 7rem);
  max-width:570px;
  color:#fff;
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  pointer-events:none;
  transition:opacity 0.65s ease, transform 0.8s cubic-bezier(.22,.61,.36,1), filter 0.65s ease;
}

.story-step.is-active{
  opacity:1;
  transform:none;
  filter:none;
}

.story-step > span{
  display:block;
  margin-bottom:0.9rem;
  color:rgba(255,255,255,0.64);
  font-size:0.78rem;
  font-weight:600;
}

.story-step h2{
  margin:0 0 0.85rem;
  max-width:13ch;
  color:#fff;
  font-size:clamp(2.3rem, 5vw, 4.7rem);
  line-height:1.02;
  letter-spacing:-0.04em;
}

.story-step p{
  margin:0;
  max-width:39ch;
  color:rgba(255,255,255,0.78);
  font-size:clamp(1rem, 1.7vw, 1.25rem);
}

/* ---------- assembling business system ---------- */

.assembly-board{
  position:relative;
  min-height:640px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:32px;
  background:radial-gradient(circle at 50% 48%, #fff 0 14%, transparent 15%), radial-gradient(circle at 50% 50%, rgba(0,113,227,0.08), transparent 37%), var(--surface);
}
.assembly-board::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-18%;
  background:radial-gradient(circle at 50% 45%, rgba(0,113,227,0.12), transparent 34%);
  transform:translate3d(0,var(--stage-shift,0),0);
  pointer-events:none;
}

.assembly-core{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  display:flex;
  width:150px;
  height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,0.09);
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  box-shadow:0 28px 70px -36px rgba(0,0,0,0.45);
  transform:translate(-50%,-50%) scale(0.72);
  opacity:0;
  transition:opacity 0.7s ease 0.12s, transform 1s cubic-bezier(.22,1,.36,1) 0.12s;
}
.assembly-core::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.92) 50%, transparent 60%);
  transform:translateX(-115%) rotate(8deg);
  pointer-events:none;
}
.assembly-board.in-view .assembly-core::after{ animation:coreSheen 1s cubic-bezier(.22,1,.36,1) 1.15s both; }

.assembly-board.in-view .assembly-core{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.assembly-core strong{ font-size:1.35rem; letter-spacing:-0.03em; }
.assembly-core small{ margin-top:0.25rem; color:var(--ink-faint); }

.assembly-core-ring{
  position:absolute;
  inset:-14px;
  border:1px solid rgba(0,113,227,0.24);
  border-radius:50%;
  opacity:0;
  transform:scale(0.7);
  transition:opacity 0.6s ease 0.9s, transform 1.2s cubic-bezier(.22,1,.36,1) 0.9s;
}

.assembly-board.in-view .assembly-core-ring{ opacity:1; transform:scale(1); }

.system-piece{
  position:absolute;
  z-index:3;
  left:var(--piece-x);
  top:var(--piece-y);
  display:flex;
  width:218px;
  min-height:106px;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.15rem;
  border:1px solid rgba(0,0,0,0.09);
  border-radius:18px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 24px 58px -38px rgba(0,0,0,0.42);
  opacity:0;
  transform:translate(-50%,-50%) translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-r)) scale(0.82);
  backdrop-filter:blur(12px);
  transition:opacity 0.55s ease var(--delay), transform 1.05s cubic-bezier(.22,1,.36,1) var(--delay);
}

.assembly-board.in-view .system-piece{
  opacity:1;
  transform:translate(-50%,-50%) rotate(0) scale(1);
}

.system-piece > span{ color:var(--accent); font-size:0.7rem; font-weight:600; }
.system-piece b{ margin:0.18rem 0; font-size:1.08rem; }
.system-piece small{ color:var(--ink-soft); line-height:1.35; }

.piece-offer{ --piece-x:18%; --piece-y:22%; --scatter-x:180px; --scatter-y:170px; --scatter-r:-12deg; --delay:0.18s; }
.piece-brand{ --piece-x:82%; --piece-y:22%; --scatter-x:-170px; --scatter-y:190px; --scatter-r:11deg; --delay:0.28s; }
.piece-direct{ --piece-x:86%; --piece-y:53%; --scatter-x:-230px; --scatter-y:-10px; --scatter-r:-8deg; --delay:0.38s; }
.piece-ops{ --piece-x:72%; --piece-y:82%; --scatter-x:-150px; --scatter-y:-190px; --scatter-r:9deg; --delay:0.48s; }
.piece-data{ --piece-x:27%; --piece-y:82%; --scatter-x:160px; --scatter-y:-190px; --scatter-r:-10deg; --delay:0.58s; }

.system-line{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:var(--line-w);
  height:1px;
  background:linear-gradient(90deg, rgba(0,113,227,0.7), rgba(0,113,227,0.1));
  transform:rotate(var(--line-r)) scaleX(0);
  transform-origin:left center;
  transition:transform 0.85s cubic-bezier(.22,1,.36,1) var(--line-delay);
}

.assembly-board.in-view .system-line{ transform:rotate(var(--line-r)) scaleX(1); }
.line-offer{ --line-w:37%; --line-r:-145deg; --line-delay:0.72s; }
.line-brand{ --line-w:37%; --line-r:-35deg; --line-delay:0.78s; }
.line-direct{ --line-w:34%; --line-r:4deg; --line-delay:0.84s; }
.line-ops{ --line-w:37%; --line-r:52deg; --line-delay:0.9s; }
.line-data{ --line-w:36%; --line-r:128deg; --line-delay:0.96s; }

/* ---------- fiscal automation ---------- */

.fiscal-grid{
  display:grid;
  grid-template-columns:minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}

.fiscal-copy h2{
  margin:0 0 1rem;
  max-width:15ch;
  font-size:clamp(2rem, 4vw, 3.35rem);
  line-height:1.04;
  letter-spacing:-0.035em;
}

.fiscal-copy > p:not(.eyebrow){ margin:0 0 1rem; color:var(--ink-soft); font-size:1.03rem; }

.fiscal-machine{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-radius:30px;
  background:#09090b;
  color:#fff;
  box-shadow:0 46px 100px -55px rgba(0,0,0,0.78);
}

.fiscal-machine::before{
  content:"";
  position:absolute;
  inset:-30% 30% 45% -20%;
  background:radial-gradient(circle, rgba(0,113,227,0.32), transparent 66%);
  transform:translate3d(0,var(--stage-shift,0),0);
  will-change:transform;
}

.fiscal-choice{
  position:absolute;
  z-index:3;
  left:6%;
  top:10%;
  width:42%;
  padding:1.1rem;
  border:1px solid rgba(255,255,255,0.13);
  border-radius:18px;
  background:rgba(255,255,255,0.08);
  opacity:0;
  transform:translateX(-36px);
  backdrop-filter:blur(18px);
  transition:opacity 0.55s ease 0.18s, transform 0.85s cubic-bezier(.22,1,.36,1) 0.18s;
}

.fiscal-machine.in-view .fiscal-choice{ opacity:1; transform:none; }
.fiscal-choice small{ color:rgba(255,255,255,0.56); }
.fiscal-choice > div{ display:flex; gap:0.45rem; margin:0.7rem 0; }
.fiscal-choice > div span{ padding:0.42rem 0.62rem; border:1px solid rgba(255,255,255,0.13); border-radius:999px; color:rgba(255,255,255,0.62); font-size:0.76rem; }
.fiscal-choice > div .is-selected{ background:#fff; color:#111; }
.fiscal-choice p{ margin:0; font-variant-numeric:tabular-nums; font-size:0.85rem; }

.fiscal-rail{
  position:absolute;
  z-index:2;
  left:34%;
  top:37%;
  width:0;
  height:2px;
  overflow:visible;
  background:linear-gradient(90deg, #0071e3, #6cb6ff);
  transition:width 0.9s cubic-bezier(.22,1,.36,1) 0.65s;
}

.fiscal-machine.in-view .fiscal-rail{ width:32%; }
.fiscal-rail i{ position:absolute; right:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#8dc7ff; box-shadow:0 0 0 0 rgba(85,169,255,0.55); animation:railPulse 1.8s ease-out infinite 1.45s; }

@keyframes railPulse{ 0%{ box-shadow:0 0 0 0 rgba(85,169,255,0.55); } 100%{ box-shadow:0 0 0 18px rgba(85,169,255,0); } }

.fiscal-receipt{
  position:absolute;
  z-index:3;
  right:7%;
  top:9%;
  width:40%;
  min-height:260px;
  padding:1.25rem;
  border-radius:20px;
  background:#fff;
  color:#111;
  opacity:0;
  transform:translateY(48px) rotate(4deg) scale(0.82);
  transition:opacity 0.5s ease 0.78s, transform 1.05s cubic-bezier(.22,1,.36,1) 0.78s;
}

.fiscal-machine.in-view .fiscal-receipt{ opacity:1; transform:none; }
.receipt-head{ display:flex; align-items:center; gap:0.75rem; }
.receipt-head > span{ display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#111; color:#fff; font-size:0.75rem; font-weight:700; }
.receipt-head b{ font-size:0.88rem; }
.receipt-lines{ display:flex; flex-direction:column; gap:0.65rem; margin:1.5rem 0; }
.receipt-lines i{ display:block; width:100%; height:5px; border-radius:99px; background:#dedee2; transform:scaleX(0); transform-origin:left; transition:transform 0.55s ease; }
.receipt-lines i:nth-child(2){ width:74%; }
.receipt-lines i:nth-child(3){ width:88%; }
.receipt-lines i:nth-child(4){ width:55%; }
.fiscal-machine.in-view .receipt-lines i{ transform:scaleX(1); }
.fiscal-machine.in-view .receipt-lines i:nth-child(1){ transition-delay:1.35s; }
.fiscal-machine.in-view .receipt-lines i:nth-child(2){ transition-delay:1.48s; }
.fiscal-machine.in-view .receipt-lines i:nth-child(3){ transition-delay:1.61s; }
.fiscal-machine.in-view .receipt-lines i:nth-child(4){ transition-delay:1.74s; }
.receipt-total{ display:flex; justify-content:space-between; gap:0.8rem; padding-top:0.8rem; border-top:1px solid #dedee2; font-size:0.75rem; }
.receipt-total span{ color:#258040; font-weight:600; }
.receipt-ksef{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  margin-top:0.85rem;
  padding:0.36rem 0.55rem;
  border-radius:999px;
  background:#eaf8ee;
  color:#258040;
  font-size:0.64rem;
  font-weight:700;
  opacity:0;
  transform:translateY(8px) scale(0.92);
  transition:opacity 0.4s ease 2.45s, transform 0.65s cubic-bezier(.22,1,.36,1) 2.45s;
}
.receipt-ksef b{ font-weight:500; }
.fiscal-machine.in-view .receipt-ksef{ opacity:1; transform:none; }

.fiscal-events{
  position:absolute;
  z-index:4;
  left:7%;
  right:7%;
  bottom:8%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.65rem;
}

.fiscal-events span{
  display:flex;
  align-items:center;
  gap:0.55rem;
  padding:0.72rem 0.85rem;
  border:1px solid rgba(255,255,255,0.11);
  border-radius:13px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.76);
  font-size:0.75rem;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.45s ease, transform 0.65s cubic-bezier(.22,1,.36,1);
}

.fiscal-events i{ width:7px; height:7px; border-radius:50%; background:#48cf72; box-shadow:0 0 0 4px rgba(72,207,114,0.12); }
.fiscal-machine.in-view .fiscal-events span{ opacity:1; transform:none; }
.fiscal-machine.in-view .fiscal-events span:nth-child(1){ transition-delay:1.7s; }
.fiscal-machine.in-view .fiscal-events span:nth-child(2){ transition-delay:1.88s; }
.fiscal-machine.in-view .fiscal-events span:nth-child(3){ transition-delay:2.06s; }
.fiscal-machine.in-view .fiscal-events span:nth-child(4){ transition-delay:2.24s; }

/* ---------- channels and dynamic pricing ---------- */

.rate-grid{
  display:grid;
  grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.rate-copy h2{
  margin:0 0 1rem;
  max-width:15ch;
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.04;
  letter-spacing:-0.035em;
}
.rate-copy > p:not(.eyebrow){ margin:0 0 1rem; color:var(--ink-soft); font-size:1.03rem; }
.rate-machine{
  position:relative;
  display:grid;
  gap:0.85rem;
  overflow:hidden;
  padding:clamp(1rem,3vw,1.7rem);
  border-radius:30px;
  background:#0b0c10;
  color:#fff;
  box-shadow:0 46px 100px -55px rgba(0,0,0,0.78);
  isolation:isolate;
}
.rate-machine::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-28% -12% 42% 24%;
  background:radial-gradient(circle,rgba(96,89,255,0.34),transparent 66%);
  transform:translate3d(0,var(--stage-shift,0),0);
  pointer-events:none;
}
.rate-machine > *{ position:relative; z-index:1; }
.rate-stage-label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:rgba(255,255,255,0.5);
  font-size:0.65rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.rate-stage-label span{
  display:grid;
  width:1.55rem;
  height:1.55rem;
  place-items:center;
  border:1px solid rgba(157,152,255,0.35);
  border-radius:50%;
  color:#b8b4ff;
  font-size:0.58rem;
}
.rate-stage-out{ justify-self:center; margin-top:-0.15rem; }
.rate-signals{ display:flex; flex-wrap:wrap; gap:0.45rem; }
.rate-signals span{
  padding:0.42rem 0.6rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.65);
  font-size:0.68rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease, transform 0.6s cubic-bezier(.22,1,.36,1);
}
.rate-machine.in-view .rate-signals span{ opacity:1; transform:none; }
.rate-machine.in-view .rate-signals span:nth-child(1){ transition-delay:0.08s; }
.rate-machine.in-view .rate-signals span:nth-child(2){ transition-delay:0.15s; }
.rate-machine.in-view .rate-signals span:nth-child(3){ transition-delay:0.22s; }
.rate-machine.in-view .rate-signals span:nth-child(4){ transition-delay:0.29s; }
.rate-machine.in-view .rate-signals span:nth-child(5){ transition-delay:0.36s; }
.rate-calendar{
  padding:1rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  background:rgba(255,255,255,0.09);
  backdrop-filter:blur(18px);
  opacity:0;
  transform:translateY(24px) scale(0.96);
  transition:opacity 0.5s ease 0.42s, transform 0.85s cubic-bezier(.22,1,.36,1) 0.42s;
}
.rate-machine.in-view .rate-calendar{ opacity:1; transform:none; }
.rate-calendar-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.8rem; }
.rate-calendar-head small{ color:rgba(255,255,255,0.56); }
.rate-calendar-head small b{ margin-right:0.25rem; color:#b8b4ff; font-size:0.6rem; }
.rate-calendar-head span{ color:#9d98ff; font-size:0.66rem; font-weight:600; }
.rate-days{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.55rem; }
.rate-days > span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:0.32rem;
  padding:0.7rem;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:13px;
  background:rgba(0,0,0,0.16);
}
.rate-days small{ color:rgba(255,255,255,0.46); font-size:0.62rem; }
.rate-days b{ min-height:2.2em; color:rgba(255,255,255,0.82); font-size:0.72rem; line-height:1.1; }
.rate-days i{ position:relative; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,0.1); }
.rate-days i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--rate-fill);
  border-radius:inherit;
  background:linear-gradient(90deg,#6760ff,#a9a5ff);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.8s cubic-bezier(.22,1,.36,1) 0.9s;
}
.rate-machine.in-view .rate-days i::after{ transform:scaleX(1); }
.rate-days .is-strong{ border-color:rgba(157,152,255,0.32); background:rgba(103,96,255,0.12); }
.rate-curve{ display:block; width:100%; height:76px; margin-top:0.5rem; overflow:visible; }
.rate-curve path{
  fill:none;
  stroke:#9d98ff;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.15s cubic-bezier(.22,1,.36,1) 1.02s;
}
.rate-curve circle{
  fill:#d9d7ff;
  opacity:0;
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 6px rgba(157,152,255,0.9));
  transition:opacity 0.3s ease 2.1s, transform 0.55s cubic-bezier(.22,1,.36,1) 2.1s;
}
.rate-machine.in-view .rate-curve path{ stroke-dashoffset:0; }
.rate-machine.in-view .rate-curve circle{ opacity:1; transform:scale(1); }
.rate-rail{
  justify-self:center;
  width:2px;
  height:46px;
  background:linear-gradient(180deg,#9d98ff,rgba(157,152,255,0.12));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 0.65s cubic-bezier(.22,1,.36,1) 1.82s;
}
.rate-machine.in-view .rate-rail{ transform:scaleY(1); }
.rate-rail i{ position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%; background:#d9d7ff; opacity:0; }
.rate-machine.in-view .rate-rail i{ animation:rateDrop 0.95s cubic-bezier(.22,1,.36,1) 1.92s both; }
.rate-rail small{ position:absolute; left:14px; top:50%; width:max-content; color:rgba(255,255,255,0.4); font-size:0.6rem; transform:translateY(-50%); }
.rate-channels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.55rem; }
.rate-channels > span{
  display:flex;
  min-width:0;
  min-height:58px;
  flex-direction:column;
  justify-content:center;
  padding:0.7rem 0.8rem;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:13px;
  background:rgba(255,255,255,0.055);
  opacity:0;
  transform:translateY(15px) scale(0.97);
  transition:opacity 0.4s ease, transform 0.65s cubic-bezier(.22,1,.36,1);
}
.rate-channels b{ color:rgba(255,255,255,0.86); font-size:0.78rem; }
.rate-channels small{ margin-top:0.14rem; color:rgba(255,255,255,0.42); font-size:0.62rem; }
.rate-channel-more{ grid-column:1 / -1; }
.rate-machine.in-view .rate-channels > span{ opacity:1; transform:none; }
.rate-machine.in-view .rate-channels > span:nth-child(1){ transition-delay:2.35s; }
.rate-machine.in-view .rate-channels > span:nth-child(2){ transition-delay:2.47s; }
.rate-machine.in-view .rate-channels > span:nth-child(3){ transition-delay:2.59s; }
.rate-machine.in-view .rate-channels > span:nth-child(4){ transition-delay:2.71s; }
.rate-machine.in-view .rate-channels > span:nth-child(5){ transition-delay:2.83s; }

@keyframes rateDrop{
  0%{ transform:translateY(0); opacity:0; }
  18%{ opacity:1; }
  82%{ opacity:1; }
  100%{ transform:translateY(40px); opacity:0; }
}

/* ---------- photographic case presentation ---------- */

.case-photo-card{
  position:relative;
  aspect-ratio:1.35/1;
  overflow:hidden;
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 30px 70px -44px rgba(0,0,0,0.5);
  transition:transform 0.75s cubic-bezier(.22,.61,.36,1), box-shadow 0.75s ease;
}

.case-photo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.14), transparent 55%);
  pointer-events:none;
}

.case-photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.case-showcase:hover .case-photo-card{
  transform:translateY(-8px);
  box-shadow:0 46px 110px -52px var(--case-accent);
}

.case-showcase:hover .case-photo-card img{ transform:scale(1.045); }

.case-hero-cinema{
  position:relative;
  min-height:clamp(520px, 68vw, 720px);
  margin-top:clamp(2.8rem, 6vw, 4.5rem);
  isolation:isolate;
}

.case-hero-cinema::after{
  content:"";
  position:absolute;
  z-index:8;
  inset:-2px;
  border-radius:30px;
  background:var(--bg);
  pointer-events:none;
  transform-origin:right center;
  animation:caseImageWipe 1.15s cubic-bezier(.76,0,.24,1) 0.5s both;
}

@keyframes caseImageWipe{
  0%{ transform:scaleX(1); }
  100%{ transform:scaleX(0); }
}

.case-hero-cinema figure{ margin:0; overflow:hidden; background:var(--surface); }
.case-hero-cinema img{ width:100%; height:100%; object-fit:cover; }

.case-hero-primary{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  width:88%;
  height:86%;
  border-radius:30px;
  box-shadow:0 38px 100px -52px rgba(0,0,0,0.55);
}

.case-hero-primary img{
  transform:translate3d(0, var(--scene-shift, 0px), 0) scale(1.06);
}

.case-hero-secondary{
  position:absolute;
  z-index:3;
  right:0;
  bottom:0;
  width:31%;
  aspect-ratio:0.78;
  border:7px solid #fff;
  border-radius:24px;
  box-shadow:0 34px 80px -38px rgba(0,0,0,0.58);
  transform:rotate(2deg);
  transition:transform 0.9s cubic-bezier(.22,.61,.36,1);
}

.case-hero-cinema:hover .case-hero-secondary{ transform:rotate(0) translateY(-8px); }

.case-hero-label{
  position:absolute;
  z-index:4;
  left:3%;
  bottom:7%;
  max-width:340px;
  margin:0;
  padding:1rem 1.1rem;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:16px;
  background:rgba(18,18,20,0.72);
  color:#fff;
  font-size:0.85rem;
  backdrop-filter:blur(16px);
}

.case-hero-label span{ display:block; margin-bottom:0.2rem; color:rgba(255,255,255,0.58); font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }

.contact-photo-strip{
  display:grid;
  grid-template-columns:1.2fr 0.8fr 1fr;
  gap:clamp(0.7rem, 2vw, 1.4rem);
  align-items:center;
  min-height:390px;
}

.contact-photo-strip figure{
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 26px 70px -42px rgba(0,0,0,0.5);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}

.contact-photo-strip figure:nth-child(1){ aspect-ratio:1.15; transform:translateX(30px) rotate(-4deg); }
.contact-photo-strip figure:nth-child(2){ aspect-ratio:0.72; transform:translateY(28px) scale(0.88); }
.contact-photo-strip figure:nth-child(3){ aspect-ratio:0.9; transform:translateX(-30px) rotate(4deg); }
.contact-photo-strip.in-view figure:nth-child(1),
.contact-photo-strip.in-view figure:nth-child(2),
.contact-photo-strip.in-view figure:nth-child(3){ transform:none; }
.contact-photo-strip img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.contact-photo-strip figure:hover img{ transform:scale(1.05); }

.contact-direct{
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  margin-top:1.5rem;
  padding:0.7rem 0.75rem 0.7rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,0.72);
  box-shadow:0 12px 32px rgba(29,29,31,0.06);
  color:var(--ink-soft);
  font-size:0.9rem;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.contact-direct a{
  display:inline-flex;
  align-items:center;
  min-height:2.6rem;
  padding:0 1rem;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:0.96rem;
  font-weight:600;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.contact-direct a:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(29,29,31,0.14); }
.contact-availability{
  max-width:610px;
  margin:1rem auto 0;
  color:var(--ink-soft);
  font-size:0.98rem;
  line-height:1.55;
  text-align:center;
}
.contact-availability strong{ color:var(--ink); font-weight:600; }
.contact-form-wrap{ max-width:560px; }

/* O mnie: fixed proportions on desktop and mobile. */
.about-intro p{
  margin:0;
  color:var(--ink);
  font-size:1.3rem;
  font-weight:500;
  line-height:1.55;
  letter-spacing:-0.01em;
}
.about-intro p + p{ margin-top:1.2rem; }
.about-profile{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:1.8rem;
  align-items:center;
}
.about-profile-photo{ position:relative; }
.about-profile-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:16px;
}
.about-profile-photo .handwritten{
  position:absolute;
  right:-0.4rem;
  bottom:-0.6rem;
  padding:0 0.3rem;
  background:var(--bg);
  white-space:nowrap;
}
.about-profile-copy h3{
  margin:0 0 0.5rem;
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.about-profile-copy p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.98rem;
  line-height:1.55;
}
.about-profile-copy p + p{ margin-top:0.8rem; }
.about-profile-copy strong{ color:var(--ink); }
.about-proof-media{ height:clamp(230px,42vw,340px); }
.about-proof-media img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 620px){
  .about-intro p{ font-size:1.12rem; }
  .about-profile{ grid-template-columns:110px minmax(0,1fr); gap:1rem; align-items:start; }
  .about-profile-photo .handwritten{ right:-0.2rem; font-size:1.1rem; }
}

@media (max-width: 430px){
  .about-profile{ grid-template-columns:1fr; text-align:center; }
  .about-profile-photo{ width:150px; margin:0 auto 0.5rem; }
}

@media (max-width: 460px){
  .contact-direct{ align-items:flex-start; flex-direction:column; border-radius:22px; padding:0.9rem; }
  .contact-direct a{ width:100%; justify-content:center; }
}

/* Draw the process line when it enters the viewport. */
.flow-diagram{ position:relative; border-top:none; }
.flow-diagram::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:1px;
  background:var(--ink);
  transition:width 1.25s cubic-bezier(.22,1,.36,1) 0.12s;
}
.flow-diagram.in-view::before{ width:100%; }

/* ---------- moving photography ribbons ---------- */

.photo-ribbon-section{ overflow:hidden; }
.photo-ribbon{
  width:100%;
  overflow:hidden;
  padding:1rem 0 2rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.photo-ribbon-compact{ margin-top:2.5rem; padding-bottom:0; }
.photo-ribbon-track{
  display:flex;
  width:max-content;
  align-items:center;
  gap:clamp(0.8rem, 2vw, 1.5rem);
  padding:0 5vw;
  animation:ribbonMove 28s ease-in-out infinite alternate;
  will-change:transform;
}
.photo-ribbon-reverse{ animation-direction:alternate-reverse; animation-duration:32s; }
.photo-ribbon:hover .photo-ribbon-track{ animation-play-state:paused; }
.photo-ribbon figure{
  position:relative;
  width:clamp(270px, 30vw, 440px);
  aspect-ratio:1.28;
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 28px 70px -46px rgba(0,0,0,0.55);
  transform:translateY(var(--ribbon-lift, 0px));
}
.photo-ribbon figure:nth-child(2n){ --ribbon-lift:18px; }
.photo-ribbon figure:nth-child(3n){ --ribbon-lift:-10px; }
.photo-ribbon figure.is-tall{ width:clamp(210px, 23vw, 330px); aspect-ratio:0.78; }
.photo-ribbon img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,.61,.36,1); }
.photo-ribbon figure:hover img{ transform:scale(1.055); }
.photo-ribbon figcaption{
  position:absolute;
  left:0.8rem;
  bottom:0.8rem;
  padding:0.36rem 0.58rem;
  border-radius:999px;
  background:rgba(0,0,0,0.62);
  color:#fff;
  font-size:0.68rem;
  backdrop-filter:blur(10px);
}
@keyframes ribbonMove{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-420px,0,0); } }

/* ---------- LoveLaski build machine ---------- */

.ll-build-machine{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(280px, 0.75fr);
  min-height:560px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.09);
  border-radius:30px;
  background:#f4f4f1;
}
.ll-blueprint{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border-right:1px solid rgba(0,0,0,0.09);
  background-color:#e9eee7;
  background-image:linear-gradient(rgba(60,87,60,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(60,87,60,0.08) 1px, transparent 1px);
  background-size:30px 30px;
}
.ll-blueprint::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-20%;
  background:radial-gradient(circle at 50% 48%, rgba(255,255,255,0.7), transparent 35%);
  transform:translate3d(0,var(--stage-shift,0),0);
  pointer-events:none;
}
.plot-boundary{
  position:absolute;
  inset:9% 8%;
  border:2px solid #6d8067;
  border-radius:46% 38% 42% 34%;
  clip-path:inset(0 100% 100% 0);
  transition:clip-path 1.35s cubic-bezier(.22,1,.36,1) 0.15s;
}
.ll-build-machine.in-view .plot-boundary{ clip-path:inset(0); }
.plan-cabin,
.plan-spa{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(38,57,38,0.25);
  background:rgba(255,255,255,0.88);
  color:#2d392d;
  box-shadow:0 18px 40px -30px rgba(0,0,0,0.45);
  opacity:0;
  transform:scale(0.45) rotate(var(--plan-r, 8deg));
  transition:opacity 0.45s ease var(--plan-delay), transform 0.85s cubic-bezier(.22,1,.36,1) var(--plan-delay);
}
.ll-build-machine.in-view .plan-cabin,
.ll-build-machine.in-view .plan-spa{ opacity:1; transform:scale(1) rotate(0); }
.plan-cabin{ width:19%; height:18%; border-radius:12px; }
.plan-cabin b, .plan-spa b{ font-size:0.84rem; }
.plan-cabin small, .plan-spa small{ color:#6d8067; font-size:0.64rem; }
.cabin-a{ left:17%; top:19%; --plan-delay:0.55s; --plan-r:-10deg; }
.cabin-b{ right:19%; top:16%; --plan-delay:0.7s; --plan-r:10deg; }
.cabin-c{ left:21%; bottom:18%; --plan-delay:0.85s; --plan-r:8deg; }
.cabin-d{ right:15%; bottom:21%; --plan-delay:1s; --plan-r:-8deg; }
.plan-spa{ left:42%; top:41%; width:20%; height:18%; border-radius:50%; --plan-delay:1.15s; }
.plan-entry{ position:absolute; left:8%; bottom:4%; color:#6d8067; font-size:0.7rem; opacity:0; transition:opacity 0.5s ease 1.2s; }
.ll-build-machine.in-view .plan-entry{ opacity:1; }
.plan-network{
  position:absolute;
  z-index:1;
  inset:7% 6%;
  width:88%;
  height:86%;
  overflow:visible;
  pointer-events:none;
}
.plan-route{
  fill:none;
  stroke:#d16b45;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(209,107,69,0.2));
  transition:stroke-dashoffset 0.95s cubic-bezier(.22,1,.36,1);
}
.route-entry{ stroke:#6d8067; stroke-dasharray:0.06 0.04; transition-delay:1.18s; }
.route-a{ transition-delay:1.3s; }
.route-b{ transition-delay:1.44s; }
.route-c{ transition-delay:1.58s; }
.route-d{ transition-delay:1.72s; }
.ll-build-machine.in-view .plan-route{ stroke-dashoffset:0; }
.plan-node{
  fill:#d16b45;
  opacity:0;
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  vector-effect:non-scaling-stroke;
  transition:opacity 0.3s ease var(--node-delay,2.2s), transform 0.55s cubic-bezier(.22,1,.36,1) var(--node-delay,2.2s);
}
.plan-node.node-a{ --node-delay:2.2s; }
.plan-node.node-b{ --node-delay:2.34s; }
.plan-node.node-c{ --node-delay:2.48s; }
.plan-node.node-d{ --node-delay:2.62s; }
.plan-node.node-core{ --node-delay:2.76s; fill:#fff; stroke:#d16b45; stroke-width:2; }
.ll-build-machine.in-view .plan-node{ opacity:1; transform:scale(1); }
.ll-build-console{ display:flex; flex-direction:column; justify-content:center; padding:clamp(1.3rem, 3vw, 2.3rem); background:#171918; color:#fff; }
.ll-build-console > div{ display:grid; grid-template-columns:32px 1fr; gap:0.8rem; padding:0.9rem 0; border-bottom:1px solid rgba(255,255,255,0.11); opacity:0; transform:translateX(22px); transition:opacity 0.45s ease, transform 0.65s cubic-bezier(.22,1,.36,1); }
.ll-build-console > div:last-child{ border-bottom:none; }
.ll-build-console span{ color:#89a582; font-size:0.7rem; font-weight:600; }
.ll-build-console p{ margin:0; color:rgba(255,255,255,0.66); font-size:0.78rem; line-height:1.35; }
.ll-build-console b{ display:block; margin-bottom:0.12rem; color:#fff; font-size:0.9rem; }
.ll-build-machine.in-view .ll-build-console > div{ opacity:1; transform:none; }
.ll-build-machine.in-view .ll-build-console > div:nth-child(1){ transition-delay:0.45s; }
.ll-build-machine.in-view .ll-build-console > div:nth-child(2){ transition-delay:0.62s; }
.ll-build-machine.in-view .ll-build-console > div:nth-child(3){ transition-delay:0.79s; }
.ll-build-machine.in-view .ll-build-console > div:nth-child(4){ transition-delay:0.96s; }
.ll-build-machine.in-view .ll-build-console > div:nth-child(5){ transition-delay:1.13s; }

.capability-deck{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.8rem; }
.capability-deck > div{
  min-height:155px;
  padding:1.15rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  opacity:0;
  transform:translateY(24px) rotate(var(--deck-r, 0deg)) scale(0.94);
  transition:opacity 0.55s ease, transform 0.8s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
}
.capability-deck > div:nth-child(2n){ --deck-r:2deg; }
.capability-deck > div:nth-child(3n){ --deck-r:-2deg; }
.capability-deck.in-view > div{ opacity:1; transform:none; }
.capability-deck.in-view > div:nth-child(1){ transition-delay:0.05s; }
.capability-deck.in-view > div:nth-child(2){ transition-delay:0.12s; }
.capability-deck.in-view > div:nth-child(3){ transition-delay:0.19s; }
.capability-deck.in-view > div:nth-child(4){ transition-delay:0.26s; }
.capability-deck.in-view > div:nth-child(5){ transition-delay:0.33s; }
.capability-deck.in-view > div:nth-child(6){ transition-delay:0.4s; }
.capability-deck.in-view > div:nth-child(7){ transition-delay:0.47s; }
.capability-deck.in-view > div:nth-child(8){ transition-delay:0.54s; }
.capability-deck > div:hover{ box-shadow:0 24px 50px -36px rgba(0,0,0,0.48); }
.capability-deck span{ color:var(--accent); font-size:0.7rem; font-weight:600; }
.capability-deck b{ display:block; margin:0.45rem 0 0.3rem; font-size:0.98rem; }
.capability-deck small{ color:var(--ink-soft); line-height:1.4; }

/* ---------- animated case process ---------- */

.live-process{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:clamp(1.5rem, 4vw, 3.1rem);
  background:#09090b;
  color:#fff;
  box-shadow:0 40px 90px -58px rgba(0,0,0,0.75);
}
.live-process::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle 280px at var(--pointer-x, 25%) var(--pointer-y, 20%), rgba(255,255,255,0.12), transparent 72%);
  pointer-events:none;
  transition:background-position 0.15s linear;
}
.live-process > *{ position:relative; z-index:1; }
.live-process-head{ max-width:720px; }
.live-process-head .eyebrow{ color:rgba(255,255,255,0.5); }
.live-process-head h2{ margin:0 0 0.65rem; color:#fff; font-size:clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing:-0.03em; }
.live-process-head > p:last-child{ margin:0; max-width:58ch; color:rgba(255,255,255,0.62); }
.live-process-track{ display:flex; align-items:center; margin:2.6rem 0 1.7rem; }
.live-node{
  position:relative;
  z-index:2;
  flex:1;
  min-width:0;
  min-height:116px;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  background:rgba(255,255,255,0.07);
  opacity:0;
  transform:translateY(28px) scale(0.88);
  transition:opacity 0.45s ease, transform 0.8s cubic-bezier(.22,1,.36,1), background 0.3s ease;
}
.live-node:hover{ background:rgba(255,255,255,0.11); }
.live-node span{ color:var(--process-accent); font-size:0.7rem; font-weight:600; }
.live-node b{ display:block; margin:0.45rem 0 0.2rem; color:#fff; }
.live-node small{ display:block; color:rgba(255,255,255,0.54); line-height:1.35; }
.live-process-track > i{
  flex:0 0 clamp(18px, 4vw, 54px);
  height:2px;
  background:linear-gradient(90deg, var(--process-accent), rgba(255,255,255,0.18));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.6s cubic-bezier(.22,1,.36,1);
}
.live-process.in-view .live-node{ opacity:1; transform:none; }
.live-process.in-view .live-node:nth-of-type(1){ transition-delay:0.16s; }
.live-process.in-view .live-node:nth-of-type(2){ transition-delay:0.48s; }
.live-process.in-view .live-node:nth-of-type(3){ transition-delay:0.8s; }
.live-process.in-view .live-node:nth-of-type(4){ transition-delay:1.12s; }
.live-process.in-view .live-process-track > i:nth-of-type(1){ transform:scaleX(1); transition-delay:0.38s; }
.live-process.in-view .live-process-track > i:nth-of-type(2){ transform:scaleX(1); transition-delay:0.7s; }
.live-process.in-view .live-process-track > i:nth-of-type(3){ transform:scaleX(1); transition-delay:1.02s; }
.live-process-status{ display:flex; align-items:center; gap:0.55rem; margin:0; color:rgba(255,255,255,0.56); font-size:0.76rem; opacity:0; transform:translateY(10px); transition:opacity 0.45s ease 1.45s, transform 0.6s ease 1.45s; }
.live-process.in-view .live-process-status{ opacity:1; transform:none; }
.live-process-status i{ width:7px; height:7px; border-radius:50%; background:#49d475; box-shadow:0 0 0 5px rgba(73,212,117,0.12); }

/* ---------- SeaSide health offer ---------- */

.health-system{ display:grid; grid-template-columns:minmax(0, 0.78fr) minmax(0, 1.22fr); gap:clamp(2rem, 6vw, 5rem); align-items:center; }
.health-copy h2{ margin:0 0 1rem; max-width:16ch; font-size:clamp(2rem, 4vw, 3.3rem); line-height:1.04; letter-spacing:-0.035em; }
.health-copy > p:last-child{ margin:0; color:var(--ink-soft); font-size:1.02rem; }
.health-stage{ position:relative; min-height:560px; overflow:hidden; border-radius:30px; background:#e9f1f5; }
.health-stage::before{ content:""; position:absolute; inset:-8%; background:radial-gradient(circle at 50% 48%, rgba(43,125,167,0.22), transparent 37%); transform:translate3d(0,var(--stage-shift,0),0); pointer-events:none; }
.health-stage figure{ position:absolute; z-index:1; left:24%; top:15%; width:52%; aspect-ratio:0.92; margin:0; overflow:hidden; border:7px solid #fff; border-radius:28px; box-shadow:0 34px 74px -44px rgba(0,0,0,0.55); opacity:0; transform:scale(0.78); transition:opacity 0.6s ease 0.12s, transform 1s cubic-bezier(.22,1,.36,1) 0.12s; }
.health-system.in-view .health-stage figure{ opacity:1; transform:scale(1); }
.health-stage figure img{ width:100%; height:100%; object-fit:cover; }
.health-core{ position:absolute; z-index:4; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; padding:0.65rem 0.85rem; border-radius:13px; background:rgba(5,38,55,0.78); color:#fff; backdrop-filter:blur(14px); transform:translate(-50%,-50%) scale(0.6); opacity:0; transition:opacity 0.5s ease 0.7s, transform 0.8s cubic-bezier(.22,1,.36,1) 0.7s; }
.health-system.in-view .health-core{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.health-core b{ font-size:0.82rem; }.health-core small{ color:rgba(255,255,255,0.62); font-size:0.63rem; }
.health-card{ position:absolute; z-index:3; display:flex; width:34%; min-height:92px; flex-direction:column; justify-content:center; padding:0.85rem; border:1px solid rgba(0,0,0,0.09); border-radius:16px; background:rgba(255,255,255,0.9); box-shadow:0 22px 50px -34px rgba(0,0,0,0.5); opacity:0; transform:translate(var(--health-x),var(--health-y)) rotate(var(--health-r)) scale(0.75); transition:opacity 0.5s ease var(--health-delay), transform 0.9s cubic-bezier(.22,1,.36,1) var(--health-delay); }
.health-system.in-view .health-card{ opacity:1; transform:none; }
.health-card b{ font-size:0.88rem; }.health-card small{ color:var(--ink-soft); font-size:0.7rem; line-height:1.3; }
.health-stay{ left:5%; top:8%; --health-x:120px; --health-y:150px; --health-r:-8deg; --health-delay:0.45s; }
.health-turnus{ right:4%; top:10%; --health-x:-120px; --health-y:160px; --health-r:8deg; --health-delay:0.58s; }
.health-sale{ left:5%; bottom:8%; --health-x:130px; --health-y:-140px; --health-r:7deg; --health-delay:0.71s; }
.health-ops{ right:4%; bottom:8%; --health-x:-130px; --health-y:-140px; --health-r:-7deg; --health-delay:0.84s; }

/* ---------- responsive motion system ---------- */

@media (max-width:900px){
  .capability-deck{ grid-template-columns:repeat(2, 1fr); }
  .health-system{ grid-template-columns:1fr; }
  .health-copy h2{ max-width:20ch; }
}

@media (max-width:760px){
  .photo-ribbon{ padding-top:0.5rem; }
  .photo-ribbon-track{ gap:0.75rem; padding:0 1rem; animation-duration:36s; }
  .photo-ribbon figure{ width:74vw; max-width:330px; border-radius:17px; --ribbon-lift:0px !important; }
  .photo-ribbon figure.is-tall{ width:58vw; max-width:260px; }
  @keyframes ribbonMove{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-250px,0,0); } }

  .ll-build-machine{ grid-template-columns:1fr; min-height:0; border-radius:23px; }
  .ll-blueprint{ min-height:420px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.09); }
  .ll-build-console{ padding:1.25rem; }

  .live-process{ border-radius:23px; padding:1.3rem; }
  .live-process-track{ flex-direction:column; align-items:stretch; margin:2rem 0 1.4rem; }
  .live-node{ min-height:94px; width:100%; }
  .live-process-track > i{ align-self:center; flex:0 0 32px; width:2px; height:32px; background:linear-gradient(180deg, var(--process-accent), rgba(255,255,255,0.18)); transform:scaleY(0); transform-origin:top; }
  .live-process.in-view .live-process-track > i:nth-of-type(1), .live-process.in-view .live-process-track > i:nth-of-type(2), .live-process.in-view .live-process-track > i:nth-of-type(3){ transform:scaleY(1); }

  .health-stage{ min-height:510px; border-radius:23px; }
  .health-stage figure{ left:22%; width:56%; }
  .health-card{ width:42%; min-height:86px; }
  .health-stay{ left:3%; }.health-turnus{ right:3%; }.health-sale{ left:3%; }.health-ops{ right:3%; }
}

@media (max-width:500px){
  .capability-deck{ grid-template-columns:1fr; }
  .capability-deck > div{ min-height:120px; }
  .ll-blueprint{ min-height:360px; }
  .plan-cabin{ width:22%; }
  .health-stage{ min-height:620px; }
  .health-stage figure{ left:10%; top:7%; width:80%; aspect-ratio:1.2; }
  .health-core{ top:27%; }
  .health-card{ position:absolute; left:5%; right:5%; width:auto; min-height:76px; }
  .health-stay{ top:49%; bottom:auto; }
  .health-turnus{ top:61%; bottom:auto; }
  .health-sale{ top:73%; bottom:auto; }
  .health-ops{ top:85%; bottom:auto; }
}

@media (prefers-reduced-motion:reduce){
  .photo-ribbon-track{ animation:none; transform:none; }
  .plot-boundary{ clip-path:inset(0); transition:none; }
  .plan-cabin, .plan-spa, .ll-build-console > div, .capability-deck > div, .live-node, .live-process-status, .health-stage figure, .health-core, .health-card{ opacity:1; transform:none; transition:none; }
  .health-core{ transform:translate(-50%,-50%); }
  .plan-route{ stroke-dashoffset:0; transition:none; }
  .plan-node{ opacity:1; transform:none; transition:none; }
  .live-process-track > i{ transform:none; transition:none; }
}

@media (max-width:900px){
  .fiscal-grid{ grid-template-columns:1fr; }
  .fiscal-copy h2{ max-width:19ch; }
  .rate-grid{ grid-template-columns:1fr; }
  .rate-copy h2{ max-width:19ch; }
}

@media (max-width:760px){
  .cinema-stage{ min-height:470px; }
  .cinema-wide{ left:2%; width:96%; border-radius:21px; }
  .cinema-portrait{ left:1%; width:39%; border-width:5px; border-radius:18px; }
  .cinema-landscape{ right:1%; bottom:8%; width:50%; border-width:5px; border-radius:18px; }
  .cinema-caption{ bottom:1%; max-width:78%; overflow:hidden; }
  .cinema-caption{ gap:0.45rem; max-width:92%; }
  .cinema-caption span{ gap:0.45rem; font-size:0.62rem; }

  .scroll-story{ height:255vh; }
  .story-sticky{ height:calc(100svh - 52px); }
  .story-shade{ background:linear-gradient(0deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.2) 70%); }
  .story-step{ bottom:3.4rem; right:1.25rem; }

  .assembly-board{ min-height:720px; border-radius:24px; }
  .assembly-core{ width:126px; height:126px; }
  .system-piece{ width:43%; min-height:104px; padding:0.85rem; }
  .piece-offer{ --piece-x:25%; --piece-y:18%; }
  .piece-brand{ --piece-x:75%; --piece-y:18%; }
  .piece-direct{ --piece-x:76%; --piece-y:51%; }
  .piece-ops{ --piece-x:72%; --piece-y:83%; }
  .piece-data{ --piece-x:27%; --piece-y:83%; }
  .system-line{ opacity:0.65; }

  .fiscal-machine{ min-height:600px; border-radius:24px; }
  .fiscal-choice{ left:6%; right:6%; width:auto; }
  .fiscal-rail{ left:50%; top:34%; width:2px; height:0; transition-property:height; }
  .fiscal-machine.in-view .fiscal-rail{ width:2px; height:12%; }
  .fiscal-rail i{ right:-3px; top:auto; bottom:-4px; }
  .fiscal-receipt{ top:40%; left:9%; right:auto; width:55%; min-height:220px; }
  .fiscal-events{ left:auto; right:5%; bottom:7%; width:40%; grid-template-columns:1fr; }

  .case-hero-cinema{ min-height:560px; }
  .case-hero-primary{ width:100%; height:78%; border-radius:22px; }
  .case-hero-secondary{ width:43%; right:2%; border-width:5px; border-radius:18px; }
  .case-hero-label{ left:3%; bottom:4%; max-width:58%; }

  .contact-photo-strip{ min-height:300px; grid-template-columns:1.1fr 0.9fr; }
  .contact-photo-strip figure:nth-child(1){ grid-row:span 2; }
  .contact-photo-strip figure:nth-child(2), .contact-photo-strip figure:nth-child(3){ aspect-ratio:1.2; }
}

@media (prefers-reduced-motion:reduce){
  .cinema-portrait, .cinema-landscape, .fiscal-rail i{ animation:none; }
  .cinema-frame img, .case-hero-primary img{ transform:scale(1.04); }
  .scroll-story{ height:auto; }
  .story-sticky{ position:relative; top:auto; height:auto; min-height:720px; }
  .story-image{ opacity:0; transform:none; transition:none; }
  .story-image:first-child{ opacity:1; }
  .story-content{ display:flex; min-height:720px; flex-direction:column; justify-content:flex-end; gap:1rem; padding-bottom:2rem; }
  .story-step{ position:relative; left:auto; bottom:auto; opacity:1; transform:none; filter:none; }
  .assembly-core, .system-piece, .assembly-core-ring, .fiscal-choice, .fiscal-receipt, .fiscal-events span{ opacity:1; transition:none; }
  .assembly-core{ transform:translate(-50%,-50%) scale(1); }
  .system-piece{ transform:translate(-50%,-50%); }
  .system-line{ transform:rotate(var(--line-r)) scaleX(1); transition:none; }
  .fiscal-choice, .fiscal-receipt, .fiscal-events span{ transform:none; }
  .fiscal-rail{ width:32%; transition:none; }
  .receipt-lines i{ transform:scaleX(1); transition:none; }
  .flow-diagram::before{ width:100%; transition:none; }
  .contact-photo-strip figure:nth-child(1), .contact-photo-strip figure:nth-child(2), .contact-photo-strip figure:nth-child(3){ transform:none; }
}

/* ---------- handwritten accent (playful callouts, Apple-style) ---------- */

.handwritten{
  font-family:'Caveat', cursive;
  font-weight:600;
  color:var(--accent);
  font-size:1.5rem;
  line-height:1.1;
  display:inline-block;
}
.handwritten.tilt{ transform:rotate(-4deg); }
.handwritten svg{ width:34px; height:34px; }

.note-pop{ position:relative; display:inline-flex; align-items:flex-end; gap:0.4rem; }

/* ---------- scroll parallax (hero media depth) ---------- */

.hero-media{ will-change:transform; }
.hero-media img{ will-change:transform; transform:scale(1.08); }

/* ---------- avatar / portrait-mono removed (real photography only) ---------- */

/* ---------- responsive ---------- */

@media (max-width: 640px){
  .wrap{ padding:0 1.1rem; }
  header.nav{ padding:0 1.1rem; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  footer.site .foot-top{ flex-direction:column; }
  footer.site .foot-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 800px){
  .curated-gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:210px; }
  .curated-gallery .gallery-item,
  .curated-gallery .gallery-item:nth-child(2),
  .curated-gallery .gallery-item:nth-child(3){ grid-column:auto; grid-row:auto; }
  .curated-gallery .gallery-item:first-child{ grid-column:span 2; grid-row:span 2; }
}

@media (max-width: 560px){
  .hero{ padding-top:3rem; }
  h1.h-hero{ max-width:100%; font-size:clamp(2.25rem, 11vw, 3.15rem); line-height:1.02; }
  p.lede{ max-width:100%; font-size:1.08rem; line-height:1.45; }
  .section-head{ margin-bottom:2.2rem; }
  .section-head h2{ font-size:clamp(1.85rem, 9vw, 2.35rem); line-height:1.05; }
  .section-head p{ font-size:1.02rem; }
  .story-step{ left:1.1rem; right:1.1rem; bottom:2.4rem; }
  .story-step h2{ max-width:100%; font-size:clamp(2.15rem, 11vw, 3rem); }
  .live-process-head h2{ font-size:clamp(1.75rem, 9vw, 2.2rem); }
  .health-copy h2{ max-width:100%; font-size:clamp(1.9rem, 9vw, 2.35rem); }
  .case-hero-label{ max-width:70%; }
  .curated-gallery{ grid-template-columns:1fr; grid-auto-rows:auto; gap:0.75rem; }
  .curated-gallery .gallery-item,
  .curated-gallery .gallery-item:first-child,
  .curated-gallery .gallery-item:nth-child(2),
  .curated-gallery .gallery-item:nth-child(3){ grid-column:auto; grid-row:auto; aspect-ratio:4/3; border-radius:16px; }
  .curated-gallery .gallery-item:first-child{ aspect-ratio:1/1; }
}

/* ---------- stable mobile diagrams ---------- */

@media (max-width: 820px){
  .assembly-board{
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
    gap:0.72rem;
    padding:1rem;
    border-radius:22px;
    background:radial-gradient(circle at 50% 92%, rgba(0,113,227,0.1), transparent 28%), var(--surface);
  }
  .assembly-core{
    position:relative;
    left:auto;
    top:auto;
    order:6;
    justify-self:center;
    width:126px;
    height:126px;
    margin:0.4rem 0 0.2rem;
    transform:scale(0.75);
  }
  .assembly-board.in-view .assembly-core{ transform:scale(1); }
  .system-piece{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    min-height:88px;
    padding:0.82rem 0.95rem;
    transform:translateY(18px) scale(0.97);
  }
  .assembly-board.in-view .system-piece{ transform:none; }
  .piece-offer, .piece-direct, .piece-data{ transform:translateX(-28px) scale(0.98); }
  .piece-brand, .piece-ops{ transform:translateX(28px) scale(0.98); }
  .system-piece::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    bottom:-0.78rem;
    width:1px;
    height:0.82rem;
    background:linear-gradient(#8cc7ff, rgba(0,113,227,0.16));
  }
  .system-line{ display:none; }

  .fiscal-machine{
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
    gap:0;
    padding:1rem;
    border-radius:22px;
    isolation:isolate;
  }
  .fiscal-machine::before{ inset:-10% -35% 62% -35%; }
  .fiscal-choice,
  .fiscal-rail,
  .fiscal-receipt,
  .fiscal-events{
    position:relative;
    inset:auto;
    width:auto;
  }
  .fiscal-choice{
    padding:1rem;
    border-radius:16px;
  }
  .fiscal-choice > div{ flex-wrap:wrap; }
  .fiscal-rail{
    justify-self:center;
    width:2px;
    height:0;
    margin:0;
    background:linear-gradient(180deg, #0071e3, #6cb6ff);
    transition:height 0.65s cubic-bezier(.22,1,.36,1) 0.62s;
  }
  .fiscal-machine.in-view .fiscal-rail{ width:2px; height:42px; }
  .fiscal-rail i{ top:-4px; right:-3px; bottom:auto; animation:none; }
  .fiscal-machine.in-view .fiscal-rail i{ animation:fiscalDrop 1.1s cubic-bezier(.22,1,.36,1) 0.75s both; }
  .fiscal-receipt{
    min-height:0;
    padding:1.05rem;
    border-radius:17px;
    transform:translateY(24px) rotate(1.5deg) scale(0.94);
    box-shadow:0 26px 60px -35px rgba(0,0,0,0.8);
  }
  .receipt-lines{ margin:1.15rem 0; }
  .fiscal-events{
    display:grid;
    grid-template-columns:1fr;
    gap:0.5rem;
    margin-top:0.9rem;
  }
  .fiscal-events span{ min-height:44px; padding:0.68rem 0.75rem; }

  .rate-machine{ padding:1rem; border-radius:22px; }
  .rate-calendar{ padding:0.85rem; border-radius:17px; }
  .rate-channels > span{ min-height:56px; }

  .flow-diagram,
  .flow-diagram.cols-4{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    padding-left:0;
  }
  .flow-diagram::before{
    left:24px;
    top:20px;
    width:2px;
    height:0;
    background:linear-gradient(180deg, var(--accent), rgba(0,113,227,0.14));
    transition:height 1.15s cubic-bezier(.22,1,.36,1) 0.12s;
  }
  .flow-diagram.in-view::before{ width:2px; height:calc(100% - 40px); }
  .flow-step{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    gap:0.85rem;
    align-items:start;
    min-height:96px;
    padding:0.8rem 0;
    border:0;
  }
  .flow-step .num{
    display:grid;
    width:50px;
    height:50px;
    place-items:center;
    border:1px solid rgba(0,113,227,0.2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 14px 30px -24px rgba(0,0,0,0.5);
    font-size:0.72rem;
  }
  .flow-step .label{ padding-top:0.3rem; }

  .live-process{ border-radius:22px; padding:1.1rem; }
  .live-process-track{ display:flex; flex-direction:column; align-items:stretch; margin:1.7rem 0 1.2rem; }
  .live-node{ width:100%; min-height:88px; padding:0.9rem; transform:translateY(18px) scale(0.96); }
  .live-process-track > i{
    align-self:center;
    flex:0 0 28px;
    width:2px;
    height:28px;
    background:linear-gradient(180deg, var(--process-accent), rgba(255,255,255,0.18));
    transform:scaleY(0);
    transform-origin:top;
  }
  .live-process.in-view .live-process-track > i:nth-of-type(1),
  .live-process.in-view .live-process-track > i:nth-of-type(2),
  .live-process.in-view .live-process-track > i:nth-of-type(3){ transform:scaleY(1); }

  .ll-build-machine{ display:block; min-height:0; border-radius:22px; }
  .ll-blueprint{ min-height:390px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.09); background-size:24px 24px; }
  .plot-boundary{ inset:7% 6%; border-radius:30px; }
  .plan-cabin{ width:26%; height:20%; }
  .plan-cabin b, .plan-spa b{ font-size:0.78rem; }
  .plan-cabin small, .plan-spa small{ font-size:0.58rem; }
  .cabin-a{ left:10%; top:14%; }
  .cabin-b{ right:10%; top:14%; }
  .cabin-c{ left:10%; bottom:14%; }
  .cabin-d{ right:10%; bottom:14%; }
  .plan-spa{ left:38%; top:40%; width:24%; height:21%; }
  .plan-entry{ left:7%; bottom:2.5%; }
  .plan-network{ inset:7% 6%; width:88%; height:86%; }
  .ll-build-console{ padding:0.85rem 1rem 1rem; }
  .ll-build-console > div{ grid-template-columns:26px 1fr; gap:0.55rem; padding:0.72rem 0; }
  .ll-build-console p{ font-size:0.75rem; }

  .health-stage{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    min-height:0;
    gap:0.7rem;
    padding:0.8rem;
    border-radius:22px;
  }
  .health-stage figure{
    position:relative;
    left:auto;
    top:auto;
    grid-column:1 / -1;
    width:100%;
    aspect-ratio:1.35;
    border-width:5px;
    border-radius:18px;
  }
  .health-core{
    position:relative;
    left:auto;
    top:auto;
    grid-column:1 / -1;
    justify-self:center;
    margin-top:-3.8rem;
    transform:scale(0.72);
  }
  .health-system.in-view .health-core{ transform:scale(1); }
  .health-card,
  .health-stay,
  .health-turnus,
  .health-sale,
  .health-ops{
    position:relative;
    inset:auto;
    width:auto;
    min-height:86px;
    transform:translateY(20px) scale(0.96);
  }
}

@keyframes fiscalDrop{
  0%{ transform:translateY(0); opacity:0; }
  18%{ opacity:1; }
  78%{ opacity:1; }
  100%{ transform:translateY(42px); opacity:0; }
}

@keyframes coreSheen{
  from{ transform:translateX(-115%) rotate(8deg); }
  to{ transform:translateX(115%) rotate(8deg); }
}

@media (max-width: 370px){
  .plan-cabin{ width:28%; }
  .fiscal-machine{ padding:0.8rem; }
  .fiscal-choice, .fiscal-receipt{ padding:0.9rem; }
  .receipt-head b{ font-size:0.8rem; }
}

@media (max-width: 520px){
  .health-stage{ grid-template-columns:1fr; }
  .health-card{ min-height:76px; }
  .ll-blueprint{ min-height:350px; }
  .rate-days{ grid-template-columns:1fr; }
  .rate-days b{ min-height:0; }
  .rate-calendar-head{ align-items:flex-start; flex-direction:column; gap:0.25rem; }
  .rate-channels{ grid-template-columns:1fr; }
  .rate-channel-more{ grid-column:auto; }
  .rate-rail small{ display:none; }
}

@media (max-width: 370px){
  .ll-blueprint{ min-height:330px; }
}

@media (prefers-reduced-motion: reduce){
  .case-hero-cinema::after{ display:none; }
  .curated-gallery .gallery-item{ opacity:1; transform:none; transition:none; }
  .receipt-ksef{ opacity:1; transform:none; transition:none; }
  .fiscal-rail i{ animation:none; }
  .assembly-board::before, .fiscal-machine::before, .ll-blueprint::after, .health-stage::before{ transform:none; }
  .assembly-core::after{ display:none; }
  .rate-machine::before{ transform:none; }
  .rate-signals span, .rate-calendar, .rate-channels > span, .rate-curve circle{ opacity:1; transform:none; transition:none; }
  .rate-curve path{ stroke-dashoffset:0; transition:none; }
  .rate-days i::after{ transform:scaleX(1); transition:none; }
  .rate-rail{ transform:none; transition:none; }
  .rate-rail i{ animation:none; }
}

a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- 2026 motion polish: calm, scroll-led and consistent ---------- */

@view-transition{ navigation:auto; }

::view-transition-old(root){
  animation:pageOut 0.32s cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(root){
  animation:pageIn 0.62s cubic-bezier(.22,1,.36,1) both;
}

@keyframes pageOut{
  to{ opacity:0; transform:scale(0.992); filter:blur(3px); }
}

@keyframes pageIn{
  from{ opacity:0; transform:translateY(12px) scale(0.994); filter:blur(5px); }
}

/* Copy groups reveal line by line across every page. */
.motion-ready .copy-reveal > *{
  opacity:0;
  transform:translateY(24px);
  filter:blur(6px);
  transition:opacity 0.72s ease, transform 0.92s cubic-bezier(.22,1,.36,1), filter 0.72s ease;
}

.motion-ready .copy-reveal.in-view > *{
  opacity:1;
  transform:none;
  filter:none;
}

.motion-ready .copy-reveal > *:nth-child(2){ transition-delay:0.08s; }
.motion-ready .copy-reveal > *:nth-child(3){ transition-delay:0.16s; }
.motion-ready .copy-reveal > *:nth-child(4){ transition-delay:0.24s; }
.motion-ready .copy-reveal > *:nth-child(n+5){ transition-delay:0.3s; }

/* A photograph is uncovered rather than simply faded in. */
.motion-ready .media-wipe{
  position:relative;
  isolation:isolate;
}

.motion-ready .media-wipe::before{
  content:"";
  position:absolute;
  z-index:12;
  inset:-1px;
  border-radius:inherit;
  background:var(--surface);
  pointer-events:none;
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform 1.08s cubic-bezier(.76,0,.24,1);
}

.motion-ready .media-wipe.is-revealed::before{ transform:scaleX(0); }

/* The opening photo composition spreads apart as the page moves. */
.motion-ready .hero-cinema .cinema-wide{
  opacity:calc(0.74 + var(--scene-progress, 1) * 0.26);
  transform:scale(calc(0.91 + var(--scene-progress, 1) * 0.09));
  transform-origin:center center;
  transition:none;
}

.motion-ready .hero-cinema .cinema-portrait{
  animation:none;
  transform:translate3d(
    calc((1 - var(--scene-progress, 1)) * 76px),
    calc((1 - var(--scene-progress, 1)) * 86px),
    0
  ) rotate(calc(-7deg + var(--scene-progress, 1) * 5deg));
  transition:none;
}

.motion-ready .hero-cinema .cinema-landscape{
  animation:none;
  transform:translate3d(
    calc((1 - var(--scene-progress, 1)) * -82px),
    calc((1 - var(--scene-progress, 1)) * 72px),
    0
  ) rotate(calc(7deg - var(--scene-progress, 1) * 5deg));
  transition:none;
}

.motion-ready .hero-cinema .cinema-caption{
  opacity:calc(0.35 + var(--scene-progress, 1) * 0.65);
  transform:translateX(-50%) translateY(calc((1 - var(--scene-progress, 1)) * 34px));
}

.motion-ready .case-hero-cinema .case-hero-primary{
  opacity:calc(0.78 + var(--scene-progress, 1) * 0.22);
  transform:scale(calc(0.94 + var(--scene-progress, 1) * 0.06));
  transform-origin:center center;
}

.motion-ready .case-hero-cinema .case-hero-secondary{
  transform:translate3d(
    calc((1 - var(--scene-progress, 1)) * -62px),
    calc((1 - var(--scene-progress, 1)) * 80px),
    0
  ) rotate(calc(8deg - var(--scene-progress, 1) * 6deg));
  transition:none;
}

.motion-ready .case-hero-cinema .case-hero-label{
  opacity:calc(0.25 + var(--scene-progress, 1) * 0.75);
  transform:translateY(calc((1 - var(--scene-progress, 1)) * 30px));
}

/* A full-screen statement between the story and the details. */
.control-scroll{
  height:340vh;
  background:var(--surface);
}

.control-sticky{
  position:sticky;
  top:52px;
  display:grid;
  height:calc(100vh - 52px);
  grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);
  align-items:center;
  overflow:hidden;
}

.control-copy{
  position:relative;
  z-index:4;
  width:100%;
  padding-left:max(clamp(1.25rem,4vw,2rem), calc((100vw - 1120px) / 2 + 2rem));
  padding-right:clamp(1.4rem,4vw,3.5rem);
}

.control-copy .eyebrow{ margin-bottom:1.4rem; }
.control-steps{ position:relative; min-height:360px; }

.control-step{
  position:absolute;
  inset:0;
  max-width:510px;
  opacity:0;
  transform:translateY(28px);
  filter:blur(7px);
  pointer-events:none;
  transition:opacity 0.62s ease, transform 0.86s cubic-bezier(.22,1,.36,1), filter 0.62s ease;
}

.control-step.is-active{
  opacity:1;
  transform:none;
  filter:none;
}

.control-step > span{
  display:block;
  margin-bottom:0.8rem;
  color:var(--accent);
  font-size:0.74rem;
  font-weight:600;
}

.control-step h2{
  max-width:11ch;
  margin:0 0 1rem;
  font-size:clamp(2.5rem,4.8vw,4.9rem);
  font-weight:600;
  line-height:1.01;
  letter-spacing:-0.045em;
}

.control-step p{
  max-width:43ch;
  margin:0;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.35vw,1.18rem);
}

.control-stage{
  position:relative;
  height:100%;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
}

.control-stage::before{
  content:"";
  position:absolute;
  inset:10% 4% 8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,113,227,0.14), rgba(0,113,227,0.03) 45%, transparent 68%);
  transform:scale(calc(0.78 + var(--control-progress,0) * 0.28));
}

.control-photo{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(48%,440px);
  aspect-ratio:0.77;
  margin:0;
  overflow:hidden;
  border:7px solid #fff;
  border-radius:32px;
  background:#fff;
  box-shadow:0 42px 110px -50px rgba(0,0,0,0.62);
  transform:translate(-50%,-50%) scale(calc(0.9 + var(--control-progress,0) * 0.1));
}

.control-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(calc(1.08 - var(--control-progress,0) * 0.08));
}

.control-photo figcaption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:0.75rem 0.85rem;
  border:1px solid rgba(255,255,255,0.24);
  border-radius:15px;
  background:rgba(18,18,20,0.68);
  color:#fff;
  backdrop-filter:blur(18px);
}

.control-photo figcaption b{ display:block; font-size:0.84rem; }
.control-photo figcaption span{ color:rgba(255,255,255,0.62); font-size:0.67rem; }

.control-card{
  position:absolute;
  z-index:3;
  display:flex;
  min-width:180px;
  min-height:108px;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.1rem;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:20px;
  background:rgba(255,255,255,0.84);
  box-shadow:0 28px 70px -42px rgba(0,0,0,0.48);
  opacity:0.28;
  filter:saturate(0.6);
  backdrop-filter:blur(22px);
  transition:opacity 0.55s ease, transform 0.78s cubic-bezier(.22,1,.36,1), filter 0.55s ease, box-shadow 0.55s ease;
}

.control-card span{ color:var(--ink-faint); font-size:0.67rem; }
.control-card b{ margin:0.18rem 0; font-size:0.98rem; letter-spacing:-0.02em; }
.control-card small{ color:var(--ink-soft); font-size:0.68rem; }

.control-card.is-past{ opacity:0.62; filter:none; }
.control-card.is-active{
  opacity:1;
  filter:none;
  box-shadow:0 34px 90px -45px rgba(0,113,227,0.55);
}

.control-booking{ left:4%; top:16%; transform:translate(44px,46px) rotate(-4deg) scale(0.9); }
.control-price{ right:4%; top:18%; transform:translate(-48px,48px) rotate(4deg) scale(0.9); }
.control-guest{ left:2%; bottom:16%; transform:translate(46px,-42px) rotate(4deg) scale(0.9); }
.control-margin{ right:2%; bottom:14%; transform:translate(-48px,-42px) rotate(-4deg) scale(0.9); }
.control-booking.is-active,.control-price.is-active,.control-guest.is-active,.control-margin.is-active{ transform:none; }

.control-progress{
  position:absolute;
  z-index:5;
  right:1.5rem;
  top:50%;
  width:3px;
  height:34%;
  overflow:hidden;
  border-radius:99px;
  background:rgba(0,0,0,0.1);
  transform:translateY(-50%);
}

.control-progress i{
  display:block;
  width:100%;
  height:calc(var(--control-progress,0) * 100%);
  border-radius:inherit;
  background:var(--accent);
}

.impact-scroll{
  height:190vh;
  background:#000;
  color:#fff;
}

.impact-sticky{
  position:sticky;
  top:52px;
  display:flex;
  height:calc(100vh - 52px);
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(2rem, 5vw, 4rem);
  padding-bottom:clamp(2rem, 5vw, 4rem);
}

.impact-sticky .eyebrow{
  margin-bottom:1.2rem;
  color:rgba(255,255,255,0.42);
}

.impact-sticky h2{
  max-width:18ch;
  margin:0;
  font-size:clamp(2.8rem, 6.3vw, 5.7rem);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-0.045em;
}

.impact-sticky h2 span{
  display:block;
  margin-bottom:0.24em;
  color:rgba(255,255,255,0.2);
  transform:translateY(14px);
  transition:color 0.8s ease, transform 1s cubic-bezier(.22,1,.36,1), text-shadow 0.8s ease;
}

.impact-sticky h2 span.is-lit{
  color:#f5f5f7;
  text-shadow:0 0 48px rgba(255,255,255,0.09);
  transform:none;
}

/* A small progress rail makes the pinned story easy to follow. */
.story-meter{
  position:absolute;
  z-index:5;
  right:clamp(1.1rem, 3vw, 2.5rem);
  top:50%;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  transform:translateY(-50%);
}

.story-meter i{
  width:3px;
  height:38px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,0.24);
  transition:height 0.55s cubic-bezier(.22,1,.36,1), background 0.35s ease;
}

.story-meter i.is-active{ height:72px; background:#fff; }
.story-meter i.is-past{ background:rgba(255,255,255,0.62); }

.story-image.is-active{
  transform:scale(calc(1.045 - var(--step-progress, 0) * 0.045));
}

/* Each case-study process highlights the step currently passing the viewport. */
.live-node.is-past{
  border-color:color-mix(in srgb, var(--process-accent) 45%, transparent);
  background:rgba(255,255,255,0.085);
}

.live-node.is-current{
  border-color:var(--process-accent);
  background:rgba(255,255,255,0.13);
  box-shadow:0 22px 58px -34px var(--process-accent), inset 0 0 0 1px color-mix(in srgb, var(--process-accent) 30%, transparent);
  transform:translateY(-5px);
}

.live-node.is-current span{ color:#fff; }

@media (max-width:760px){
  .control-scroll{ height:360svh; }
  .control-sticky{
    height:calc(100svh - 52px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(270px,43%) minmax(0,57%);
    align-items:stretch;
  }
  .control-copy{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.2rem 1.1rem 0.6rem;
  }
  .control-copy .eyebrow{ margin-bottom:0.65rem; }
  .control-steps{ min-height:210px; }
  .control-step h2{ max-width:12ch; margin-bottom:0.65rem; font-size:clamp(2rem,10vw,3rem); }
  .control-step p{ max-width:38ch; font-size:0.94rem; line-height:1.38; }
  .control-step > span{ margin-bottom:0.35rem; }
  .control-stage{ min-height:0; }
  .control-stage::before{ inset:-8% 0 -20%; }
  .control-photo{ width:min(42%,220px); border-width:5px; border-radius:22px; }
  .control-photo figcaption{ left:7px; right:7px; bottom:7px; padding:0.48rem 0.56rem; border-radius:11px; }
  .control-photo figcaption span{ display:none; }
  .control-card{ min-width:0; width:34%; min-height:74px; padding:0.65rem; border-radius:15px; }
  .control-card span{ font-size:0.58rem; }
  .control-card b{ font-size:0.76rem; }
  .control-card small{ font-size:0.57rem; }
  .control-booking{ left:3%; top:7%; transform:translate(20px,20px) rotate(-3deg) scale(0.9); }
  .control-price{ right:4%; top:10%; transform:translate(-20px,20px) rotate(3deg) scale(0.9); }
  .control-guest{ left:2%; bottom:8%; transform:translate(22px,-18px) rotate(3deg) scale(0.9); }
  .control-margin{ right:3%; bottom:7%; transform:translate(-22px,-18px) rotate(-3deg) scale(0.9); }
  .control-progress{ right:0.6rem; top:48%; height:40%; }

  .impact-scroll{ height:165svh; }
  .impact-sticky{ height:calc(100svh - 52px); }
  .impact-sticky h2{ max-width:100%; font-size:clamp(2.15rem, 10vw, 3.35rem); }
  .impact-sticky h2 span{ margin-bottom:0.42em; }

  .motion-ready .hero-cinema .cinema-portrait{
    transform:translate3d(calc((1 - var(--scene-progress, 1)) * 28px), calc((1 - var(--scene-progress, 1)) * 46px), 0) rotate(calc(-6deg + var(--scene-progress, 1) * 4deg));
  }
  .motion-ready .hero-cinema .cinema-landscape{
    transform:translate3d(calc((1 - var(--scene-progress, 1)) * -30px), calc((1 - var(--scene-progress, 1)) * 42px), 0) rotate(calc(6deg - var(--scene-progress, 1) * 4deg));
  }
  .motion-ready .case-hero-cinema .case-hero-secondary{
    transform:translate3d(calc((1 - var(--scene-progress, 1)) * -28px), calc((1 - var(--scene-progress, 1)) * 48px), 0) rotate(calc(7deg - var(--scene-progress, 1) * 5deg));
  }
  .story-meter{ right:0.75rem; }
  .story-meter i{ height:25px; }
  .story-meter i.is-active{ height:46px; }
  .live-node.is-current{ transform:translateX(4px); }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  .motion-ready .copy-reveal > *{ opacity:1; transform:none; filter:none; transition:none; }
  .motion-ready .media-wipe::before{ display:none; }
  .motion-ready .hero-cinema .cinema-wide,
  .motion-ready .hero-cinema .cinema-portrait,
  .motion-ready .hero-cinema .cinema-landscape,
  .motion-ready .hero-cinema .cinema-caption,
  .motion-ready .case-hero-cinema .case-hero-primary,
  .motion-ready .case-hero-cinema .case-hero-secondary,
  .motion-ready .case-hero-cinema .case-hero-label{
    opacity:1;
    transform:none;
    transition:none;
  }
  .motion-ready .hero-cinema .cinema-caption{ transform:translateX(-50%); }
  .impact-scroll{ height:auto; }
  .impact-sticky{ position:relative; top:auto; height:auto; min-height:70vh; }
  .impact-sticky h2 span{ color:#f5f5f7; transform:none; transition:none; }
  .story-meter{ display:none; }
  .story-image.is-active{ transform:none; }
  .live-node.is-current{ transform:none; box-shadow:none; }
  .control-scroll{ height:auto; }
  .control-sticky{ position:relative; top:auto; min-height:760px; }
  .control-step{ opacity:0; transform:none; filter:none; transition:none; }
  .control-step:first-child{ opacity:1; }
  .control-card{ opacity:1; transform:none; filter:none; transition:none; }
  .control-progress{ display:none; }
}

/* ---------- language switch ---------- */

.lang-switch{
  display:flex;
  align-items:center;
  gap:0.34rem;
  color:var(--ink-faint);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.04em;
  white-space:nowrap;
}

.lang-switch i{ color:var(--line); font-style:normal; font-weight:400; }
.lang-switch a{ color:var(--ink-soft); text-decoration-thickness:1px; text-underline-offset:3px; }
.lang-switch a:hover,.lang-switch a:focus-visible{ color:var(--ink); text-decoration:underline; }
.lang-switch .is-current{ color:var(--ink); border-bottom:1px solid currentColor; }

/* ---------- technical capabilities ---------- */

.tech-hero{
  min-height:auto;
  overflow:hidden;
  padding-bottom:clamp(4rem,9vw,8rem);
}

.tech-hero .h-hero{ max-width:12ch; }
.tech-hero .lede{ max-width:780px; }

.tech-orbit{
  position:relative;
  height:min(700px,72vw);
  min-height:590px;
  margin-top:clamp(3.5rem,8vw,7rem);
  isolation:isolate;
}

.tech-orbit::before{
  content:"";
  position:absolute;
  inset:5% 13% 2%;
  z-index:-2;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 48%,rgba(0,113,227,0.15),rgba(0,113,227,0.035) 44%,transparent 69%),
    radial-gradient(circle at 38% 58%,rgba(100,181,246,0.1),transparent 32%);
  animation:techAmbient 14s ease-in-out infinite alternate;
}

.tech-flow-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:visible;
}

.tech-flow-track,.tech-flow-pulse{ fill:none; vector-effect:non-scaling-stroke; }
.tech-flow-track{ stroke:rgba(29,29,31,0.11); stroke-width:1.15; }
.tech-flow-pulse{
  stroke:#0071e3;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:12 88;
  stroke-dashoffset:100;
  opacity:0;
  filter:drop-shadow(0 0 5px rgba(0,113,227,0.48));
  animation:techSignal 12s cubic-bezier(.45,0,.35,1) infinite;
  animation-delay:var(--flow-delay);
}

.tech-orbit-photo{
  position:absolute;
  left:50%;
  top:50%;
  width:min(31%,350px);
  aspect-ratio:0.78;
  margin:0;
  overflow:hidden;
  border:7px solid #fff;
  border-radius:32px;
  background:#fff;
  box-shadow:0 45px 110px -48px rgba(0,0,0,0.58);
  transform:translate(-50%,-50%) rotate(-2deg);
  animation:techCoreSignal 12s cubic-bezier(.22,1,.36,1) infinite;
}

.tech-orbit-photo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.tech-orbit-photo figcaption{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  padding:0.72rem 0.8rem;
  border:1px solid rgba(255,255,255,0.24);
  border-radius:15px;
  background:rgba(12,12,14,0.7);
  color:#fff;
  backdrop-filter:blur(18px);
}
.tech-orbit-photo figcaption b,.tech-orbit-photo figcaption span{ display:block; }
.tech-orbit-photo figcaption b{ font-size:0.82rem; }
.tech-orbit-photo figcaption span{ color:rgba(255,255,255,0.62); font-size:0.67rem; }

.tech-orbit-node{
  position:absolute;
  z-index:2;
  display:flex;
  width:188px;
  min-height:100px;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.08rem;
  border:1px solid rgba(0,0,0,0.085);
  border-radius:20px;
  background:rgba(255,255,255,0.82);
  box-shadow:0 28px 65px -42px rgba(0,0,0,0.5);
  backdrop-filter:blur(22px);
  transform:translateY(0) scale(1);
  animation:techNodeSignal 12s cubic-bezier(.22,1,.36,1) infinite;
  animation-delay:var(--node-delay);
}

.tech-orbit-node::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#34c759;
  box-shadow:0 0 0 5px rgba(52,199,89,0.12);
}

.tech-orbit-node span{ color:var(--accent); font-size:0.62rem; font-weight:600; }
.tech-orbit-node b{ margin:0.18rem 0 0.08rem; font-size:1rem; letter-spacing:-0.02em; }
.tech-orbit-node small{ color:var(--ink-faint); font-size:0.69rem; }
.node-booking{ left:5%; top:14%; }
.node-price{ right:7%; top:12%; }
.node-access{ left:1%; top:52%; }
.node-building{ right:2%; top:50%; }
.node-backoffice{ left:18%; bottom:1%; }
.node-result{ right:18%; bottom:0; }

.tech-orbit-status{
  position:absolute;
  z-index:3;
  left:50%;
  top:10%;
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--ink-faint);
  font-size:0.68rem;
  transform:translateX(-50%);
}
.tech-orbit-status i{ width:7px; height:7px; border-radius:50%; background:#34c759; box-shadow:0 0 0 0 rgba(52,199,89,0.42); animation:statusPulse 2s ease-out infinite; }

.tech-sequence{ height:420vh; background:#000; color:#fff; }
.tech-sequence-sticky{ position:sticky; top:52px; height:calc(100vh - 52px); overflow:hidden; }
.tech-sequence-grid{ display:grid; height:100%; grid-template-columns:minmax(0,0.92fr) minmax(470px,1.08fr); align-items:center; gap:clamp(2rem,6vw,6rem); }
.tech-sequence-copy{ position:relative; min-height:440px; }
.tech-sequence-copy > .eyebrow{ position:absolute; top:0; left:0; color:rgba(255,255,255,0.42); }
.tech-sequence-step{
  position:absolute;
  inset:5.6rem 0 auto;
  max-width:560px;
  opacity:0;
  filter:blur(8px);
  transform:translateY(30px);
  transition:opacity 0.48s ease,filter 0.58s ease,transform 0.75s cubic-bezier(.22,1,.36,1);
}
.tech-sequence-step.is-active{ opacity:1; filter:none; transform:none; }
.tech-sequence-step > span{ color:rgba(255,255,255,0.4); font-size:0.68rem; font-weight:600; }
.tech-sequence-step h2{ max-width:10ch; margin:0.9rem 0 1.1rem; color:#fff; font-size:clamp(2.8rem,5.1vw,5.2rem); line-height:0.98; letter-spacing:-0.05em; }
.tech-sequence-step p{ max-width:42ch; margin:0; color:rgba(255,255,255,0.58); font-size:clamp(1rem,1.5vw,1.2rem); }

.tech-sequence-stage{ position:relative; height:min(720px,78vh); }
.tech-sequence-stage::before{ content:""; position:absolute; inset:2% -20%; border-radius:50%; background:radial-gradient(circle,rgba(0,113,227,0.24),rgba(0,113,227,0.035) 48%,transparent 70%); transform:scale(calc(0.85 + var(--tech-progress,0) * 0.2)); }
.sequence-spine{ position:absolute; left:50%; top:4%; bottom:4%; width:2px; overflow:hidden; background:rgba(255,255,255,0.12); transform:translateX(-50%); }
.sequence-spine i{ display:block; width:100%; height:calc(var(--tech-progress,0) * 100%); background:linear-gradient(#2997ff,#34c759); box-shadow:0 0 22px rgba(41,151,255,0.75); }
.sequence-event{
  position:absolute;
  display:flex;
  width:min(42%,220px);
  min-height:104px;
  flex-direction:column;
  justify-content:center;
  padding:0.95rem 1rem;
  border:1px solid rgba(255,255,255,0.13);
  border-radius:19px;
  background:rgba(24,24,27,0.78);
  opacity:0.22;
  transform:scale(0.94);
  backdrop-filter:blur(22px);
  transition:opacity 0.5s ease,transform 0.65s cubic-bezier(.22,1,.36,1),border-color 0.5s ease,box-shadow 0.5s ease;
}
.sequence-event::before{ content:""; position:absolute; top:50%; width:calc(20% + 14px); height:1px; background:rgba(255,255,255,0.16); }
.sequence-event:nth-of-type(even)::before{ right:100%; }
.sequence-event:nth-of-type(odd)::before{ left:100%; }
.sequence-event::after{ content:""; position:absolute; top:calc(50% - 4px); width:8px; height:8px; border:1px solid rgba(255,255,255,0.22); border-radius:50%; background:#111113; transition:background 0.35s ease,box-shadow 0.35s ease,transform 0.5s cubic-bezier(.22,1,.36,1); }
.sequence-event:nth-of-type(even)::after{ right:calc(120% + 10px); }.sequence-event:nth-of-type(odd)::after{ left:calc(120% + 10px); }
.sequence-event.is-active,.sequence-event.is-past{ transform:none; }
.sequence-event.is-active{ opacity:1; border-color:rgba(41,151,255,0.66); box-shadow:0 26px 74px -42px rgba(41,151,255,0.85); }
.sequence-event.is-active::before,.sequence-event.is-past::before{ background:linear-gradient(90deg,rgba(41,151,255,0.3),#2997ff); }
.sequence-event.is-active::after{ background:#2997ff; box-shadow:0 0 0 7px rgba(41,151,255,0.13),0 0 20px rgba(41,151,255,0.7); transform:scale(1.18); }
.sequence-event.is-past::after{ background:#34c759; }
.sequence-event.is-past{ opacity:0.62; }
.sequence-event span{ color:rgba(255,255,255,0.44); font-size:0.63rem; }
.sequence-event b{ margin:0.15rem 0; font-size:0.93rem; }
.sequence-event small{ color:rgba(255,255,255,0.5); font-size:0.64rem; }
.event-reservation{ left:0; top:2%; }
.event-payment{ right:0; top:18%; }
.event-room{ left:0; top:35%; }
.event-code{ right:0; top:51%; }
.event-clean{ left:0; top:68%; }
.event-report{ right:0; top:84%; }
.sequence-pulse{ position:absolute; left:50%; top:calc(4% + var(--tech-progress,0) * 89%); width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#2997ff; box-shadow:0 0 0 8px rgba(41,151,255,0.16),0 0 28px rgba(41,151,255,0.85); transform:translate(-50%,-50%); }

.tech-map{ background:linear-gradient(#f5f5f7 0,#fff 16rem); }
.tech-map .section-head{ max-width:820px; }
.tech-bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tech-cap{
  position:relative;
  min-height:510px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:30px;
  background:#f5f5f7;
  box-shadow:0 28px 80px -64px rgba(0,0,0,0.5);
  isolation:isolate;
}
.tech-cap::before{ content:""; position:absolute; z-index:-1; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(0,113,227,0.12),transparent 68%); opacity:0.7; }
.tech-cap-wide{ grid-column:1/-1; min-height:560px; }
.tech-cap-copy{ position:relative; z-index:3; max-width:660px; padding:clamp(1.6rem,4vw,3rem); }
.tech-cap-copy > span{ color:var(--accent); font-size:0.68rem; font-weight:600; }
.tech-cap-copy h3{ max-width:16ch; margin:0.65rem 0 0.8rem; font-size:clamp(1.8rem,3.4vw,3.2rem); line-height:1.02; letter-spacing:-0.04em; }
.tech-cap:not(.tech-cap-wide) .tech-cap-copy h3{ font-size:clamp(1.65rem,2.4vw,2.35rem); }
.tech-cap-copy p{ max-width:60ch; margin:0; color:var(--ink-soft); font-size:1rem; }

.mini-calendar{ position:absolute; right:4%; bottom:-6%; width:52%; height:82%; padding:1.3rem; border:1px solid rgba(0,0,0,0.08); border-radius:27px 27px 0 0; background:rgba(255,255,255,0.84); box-shadow:0 35px 90px -50px rgba(0,0,0,0.45); transform:rotate(2deg); backdrop-filter:blur(18px); }
.mini-calendar-top{ display:flex; align-items:center; gap:0.55rem; padding-bottom:0.9rem; border-bottom:1px solid var(--line); font-size:0.7rem; }
.mini-calendar-top i{ width:8px; height:8px; border-radius:50%; background:#34c759; }
.mini-calendar-top b{ margin-left:auto; color:var(--ink-soft); font-weight:500; }
.mini-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:1rem; }
.mini-calendar-grid i{ aspect-ratio:1; border-radius:8px; background:#eeeef2; }
.mini-calendar-grid i.busy{ background:linear-gradient(135deg,#1d1d1f,#4d4d50); }
.mini-booking{ position:absolute; right:1rem; bottom:1.2rem; left:1rem; padding:1rem; border:1px solid rgba(0,113,227,0.18); border-radius:16px; background:#fff; box-shadow:0 22px 55px -35px rgba(0,113,227,0.55); }
.mini-booking span,.mini-booking b,.mini-booking small{ display:block; }
.mini-booking span{ color:var(--accent); font-size:0.62rem; }
.mini-booking b{ margin:0.2rem 0; }
.mini-booking small{ color:var(--ink-faint); font-size:0.64rem; }

.mini-price{ position:absolute; right:8%; bottom:7%; left:8%; display:flex; height:38%; align-items:flex-end; gap:8px; padding:1rem; border-radius:22px; background:#fff; box-shadow:0 26px 65px -46px rgba(0,0,0,0.48); }
.mini-price > i{ flex:1; height:var(--h); border-radius:8px 8px 3px 3px; background:linear-gradient(#2997ff,#0071e3); transform-origin:bottom; }
.mini-price span{ position:absolute; top:0.8rem; left:1rem; color:var(--ink-faint); font-size:0.65rem; }
.mini-price b{ position:absolute; top:0.75rem; right:1rem; color:#34a853; }

.mini-lock{ position:absolute; right:10%; bottom:7%; left:10%; display:flex; height:43%; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.06); border-radius:26px; background:#fff; box-shadow:0 28px 70px -48px rgba(0,0,0,0.48); }
.lock-ring{ position:absolute; top:-34px; width:72px; height:72px; border:8px solid #fff; border-radius:50%; background:#1d1d1f; box-shadow:0 16px 34px -20px rgba(0,0,0,0.65); }
.lock-ring i{ position:absolute; inset:21px; border:2px solid #34c759; border-radius:50%; }
.mini-lock b{ margin-top:0.8rem; font-size:1.45rem; letter-spacing:0.2em; }
.mini-lock span{ color:#34a853; font-size:0.7rem; }
.mini-lock small{ margin-top:0.35rem; color:var(--ink-faint); }

.mini-building{ position:absolute; right:4%; bottom:-2%; width:54%; height:86%; border:1px solid rgba(0,0,0,0.08); border-radius:34px 34px 0 0; background:rgba(255,255,255,0.83); box-shadow:0 35px 90px -55px rgba(0,0,0,0.46); transform:rotate(-1deg); backdrop-filter:blur(18px); }
.building-room{ position:absolute; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; border:1px solid var(--line); border-radius:18px; background:#f5f5f7; }
.building-room span{ color:var(--ink-faint); font-size:0.62rem; }.building-room b{ font-size:1rem; }.building-room i{ position:absolute; top:12px; right:12px; width:7px; height:7px; border-radius:50%; background:#34c759; }
.room-one{ left:5%; top:5%; width:43%; height:42%; }.room-two{ right:5%; top:5%; width:42%; height:30%; }.room-three{ left:5%; bottom:5%; width:43%; height:42%; }.room-four{ right:5%; bottom:5%; width:42%; height:55%; }
.building-scene{ position:absolute; z-index:2; left:50%; top:50%; display:flex; width:116px; height:116px; flex-direction:column; align-items:center; justify-content:center; border:7px solid #fff; border-radius:50%; background:#1d1d1f; color:#fff; box-shadow:0 22px 50px -25px rgba(0,0,0,0.7); transform:translate(-50%,-50%); }
.building-scene i{ position:absolute; inset:-12px; border:1px solid rgba(0,113,227,0.45); border-radius:50%; }.building-scene span{ color:rgba(255,255,255,0.5); font-size:0.57rem; }.building-scene b{ font-size:0.83rem; }

.mini-messages{ position:absolute; right:7%; bottom:8%; left:7%; display:flex; flex-direction:column; gap:0.62rem; }
.mini-messages i{ display:block; padding:0.8rem 0.95rem; border:1px solid rgba(0,0,0,0.07); border-radius:15px; background:#fff; box-shadow:0 16px 38px -30px rgba(0,0,0,0.45); font-style:normal; }
.mini-messages span{ font-size:0.74rem; }

.mini-tasks{ position:absolute; right:7%; bottom:7%; left:7%; display:grid; gap:0.55rem; }
.mini-tasks > span{ position:relative; display:grid; grid-template-columns:16px 1fr; align-items:center; padding:0.72rem 0.8rem; border:1px solid rgba(0,0,0,0.07); border-radius:14px; background:#fff; }
.mini-tasks i{ grid-row:1/3; width:10px; height:10px; border:2px solid #34c759; border-radius:50%; }.mini-tasks b{ font-size:0.73rem; }.mini-tasks small{ color:var(--ink-faint); font-size:0.62rem; }

.mini-doc{ position:absolute; right:23%; bottom:5%; left:23%; display:flex; height:42%; flex-direction:column; padding:1rem; border-radius:11px 11px 3px 3px; background:#fff; box-shadow:0 28px 60px -38px rgba(0,0,0,0.52); transform:rotate(2deg); }
.mini-doc span{ color:#34a853; font-size:0.62rem; }.mini-doc b{ margin:0.35rem 0 0.65rem; font-size:1.5rem; }.mini-doc i{ width:100%; height:5px; margin:0.18rem 0; border-radius:9px; background:#e8e8ed; }.mini-doc i:nth-of-type(2){ width:74%; }.mini-doc i:nth-of-type(3){ width:88%; }.mini-doc small{ margin-top:auto; color:var(--ink-faint); font-size:0.62rem; }

.mini-data{ position:absolute; right:5%; bottom:9%; width:53%; padding:1.2rem; border:1px solid rgba(0,0,0,0.07); border-radius:24px; background:#fff; box-shadow:0 30px 75px -50px rgba(0,0,0,0.5); }
.mini-data div{ display:grid; grid-template-columns:1fr auto; gap:0.7rem; margin:0.9rem 0; }.mini-data span{ color:var(--ink-soft); font-size:0.7rem; }.mini-data b{ font-size:0.78rem; }.mini-data i{ grid-column:1/-1; width:100%; height:6px; overflow:hidden; border-radius:99px; background:#e8e8ed; }.mini-data i::after{ content:""; display:block; width:var(--w); height:100%; border-radius:inherit; background:linear-gradient(90deg,#0071e3,#64b5f6); transform-origin:left; }

.motion-ready .tech-cap .mini-calendar{ opacity:0; transform:translateY(46px) rotate(2deg); }
.motion-ready .tech-cap.in-view .mini-calendar{ animation:calendarDock 0.95s cubic-bezier(.22,1,.36,1) 0.1s forwards; }
.motion-ready .tech-cap .mini-calendar-grid i.busy{ opacity:0.18; transform:scale(0.62); }
.motion-ready .tech-cap.in-view .mini-calendar-grid i.busy{ animation:calendarSet 0.48s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .mini-calendar-grid i.busy:nth-child(3n+1){ animation-delay:0.55s; }
.motion-ready .tech-cap.in-view .mini-calendar-grid i.busy:nth-child(3n+2){ animation-delay:0.72s; }
.motion-ready .tech-cap.in-view .mini-calendar-grid i.busy:nth-child(3n){ animation-delay:0.89s; }
.motion-ready .tech-cap .mini-booking{ opacity:0; transform:translateY(20px); }
.motion-ready .tech-cap.in-view .mini-booking{ animation:bookingArrive 0.7s cubic-bezier(.22,1,.36,1) 1.05s forwards; }

.motion-ready .tech-cap .mini-price > i{ transform:scaleY(0.12); }
.motion-ready .tech-cap.in-view .mini-price > i{ animation:priceSet 0.82s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .mini-price > i:nth-of-type(1){ animation-delay:0.18s; }
.motion-ready .tech-cap.in-view .mini-price > i:nth-of-type(2){ animation-delay:0.28s; }
.motion-ready .tech-cap.in-view .mini-price > i:nth-of-type(3){ animation-delay:0.38s; }
.motion-ready .tech-cap.in-view .mini-price > i:nth-of-type(4){ animation-delay:0.48s; }
.motion-ready .tech-cap.in-view .mini-price > i:nth-of-type(5){ animation-delay:0.58s; }
.motion-ready .tech-cap .mini-price b{ opacity:0; transform:translateY(8px); }
.motion-ready .tech-cap.in-view .mini-price b{ animation:valueConfirm 0.5s ease 0.92s forwards; }

.motion-ready .tech-cap .mini-lock{ opacity:0; transform:translateY(34px) scale(0.96); }
.motion-ready .tech-cap.in-view .mini-lock{ animation:lockDock 0.78s cubic-bezier(.22,1,.36,1) 0.15s forwards; }
.motion-ready .tech-cap .lock-ring i{ opacity:0; transform:scale(0.25); }
.motion-ready .tech-cap.in-view .lock-ring i{ animation:lockConfirm 0.64s cubic-bezier(.22,1,.36,1) 0.82s forwards; }
.motion-ready .tech-cap .mini-lock b{ opacity:0; letter-spacing:0.34em; }
.motion-ready .tech-cap.in-view .mini-lock b{ animation:codeResolve 0.66s cubic-bezier(.22,1,.36,1) 0.72s forwards; }

.motion-ready .tech-cap .building-room{ opacity:0.28; transform:scale(0.94); }
.motion-ready .tech-cap.in-view .building-room{ animation:roomWake 0.65s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .room-one{ animation-delay:0.18s; }.motion-ready .tech-cap.in-view .room-two{ animation-delay:0.36s; }.motion-ready .tech-cap.in-view .room-three{ animation-delay:0.54s; }.motion-ready .tech-cap.in-view .room-four{ animation-delay:0.72s; }
.motion-ready .tech-cap .building-scene{ opacity:0; transform:translate(-50%,-50%) scale(0.72); }
.motion-ready .tech-cap.in-view .building-scene{ animation:sceneConfirm 0.72s cubic-bezier(.22,1,.36,1) 0.88s forwards; }

.motion-ready .tech-cap .mini-messages i{ opacity:0; transform:translateY(22px); }
.motion-ready .tech-cap.in-view .mini-messages i{ animation:messageSet 0.68s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .mini-messages i:nth-child(1){ animation-delay:0.12s; }.motion-ready .tech-cap.in-view .mini-messages i:nth-child(2){ animation-delay:0.32s; }.motion-ready .tech-cap.in-view .mini-messages i:nth-child(3){ animation-delay:0.52s; }

.motion-ready .tech-cap .mini-tasks > span{ opacity:0; transform:translateX(-18px); }
.motion-ready .tech-cap.in-view .mini-tasks > span{ animation:taskSet 0.62s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .mini-tasks > span:nth-child(1){ animation-delay:0.12s; }.motion-ready .tech-cap.in-view .mini-tasks > span:nth-child(2){ animation-delay:0.3s; }.motion-ready .tech-cap.in-view .mini-tasks > span:nth-child(3){ animation-delay:0.48s; }.motion-ready .tech-cap.in-view .mini-tasks > span:nth-child(4){ animation-delay:0.66s; }
.motion-ready .tech-cap .mini-doc{ opacity:0; transform:translateY(72px) rotate(2deg); }
.motion-ready .tech-cap.in-view .mini-doc{ animation:documentPrint 0.9s cubic-bezier(.22,1,.36,1) 0.18s forwards; }
.motion-ready .tech-cap .mini-data i::after{ transform:scaleX(0); }
.motion-ready .tech-cap.in-view .mini-data i::after{ animation:dataFillOnce 1s cubic-bezier(.22,1,.36,1) forwards; }
.motion-ready .tech-cap.in-view .mini-data div:nth-child(1) i::after{ animation-delay:0.18s; }.motion-ready .tech-cap.in-view .mini-data div:nth-child(2) i::after{ animation-delay:0.34s; }.motion-ready .tech-cap.in-view .mini-data div:nth-child(3) i::after{ animation-delay:0.5s; }

.tech-scenes-section{ overflow:hidden; background:#000; color:#fff; }
.tech-scenes-section .section-head h2{ color:#fff; }.tech-scenes-section .section-head p{ color:rgba(255,255,255,0.56); }.tech-scenes-section .section-head .eyebrow{ color:rgba(255,255,255,0.4); }
.tech-scenes{ margin-top:clamp(2.2rem,5vw,4rem); }
.tech-scene-tabs{ display:flex; width:max-content; max-width:100%; gap:0.4rem; margin-bottom:1rem; padding:0.35rem; border:1px solid rgba(255,255,255,0.14); border-radius:999px; background:rgba(255,255,255,0.06); }
.tech-scene-tab{ padding:0.62rem 1.15rem; border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,0.58); font:inherit; font-size:0.86rem; cursor:pointer; transition:background 0.2s ease,color 0.2s ease; }
.tech-scene-tab:hover,.tech-scene-tab:focus-visible{ color:#fff; }.tech-scene-tab:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }.tech-scene-tab.is-active{ background:#fff; color:#1d1d1f; }
.tech-scene-canvas{ position:relative; display:grid; min-height:620px; grid-template-columns:1.14fr 0.86fr; overflow:hidden; border:1px solid rgba(255,255,255,0.13); border-radius:32px; background:#111113; }
.tech-scene-photo{ position:relative; min-height:620px; margin:0; overflow:hidden; }.tech-scene-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 58%,#111113 100%); pointer-events:none; }.tech-scene-photo::before{ content:""; position:absolute; z-index:2; top:0; bottom:0; left:0; width:28%; background:linear-gradient(90deg,transparent,rgba(100,181,246,0.15),rgba(255,255,255,0.42),rgba(100,181,246,0.15),transparent); opacity:0; transform:translateX(-120%); pointer-events:none; }.tech-scenes[data-active="arrival"] .tech-scene-photo::before{ animation:sceneScanArrival 1.1s ease-out; }.tech-scenes[data-active="stay"] .tech-scene-photo::before{ animation:sceneScanStay 1.1s ease-out; }.tech-scenes[data-active="departure"] .tech-scene-photo::before{ animation:sceneScanDeparture 1.1s ease-out; }.tech-scene-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter 0.8s ease; }.tech-scenes[data-active="stay"] .tech-scene-photo img{ transform:scale(1.035); filter:saturate(0.86); }.tech-scenes[data-active="departure"] .tech-scene-photo img{ transform:scale(1.065); filter:brightness(0.7) saturate(0.7); }
.scene-room-status{ position:absolute; z-index:3; left:1rem; bottom:1rem; display:flex; align-items:center; gap:0.55rem; padding:0.7rem 0.85rem; border:1px solid rgba(255,255,255,0.2); border-radius:13px; background:rgba(0,0,0,0.58); transform:translateY(0); transition:transform 0.55s cubic-bezier(.22,1,.36,1),border-color 0.35s ease; backdrop-filter:blur(15px); }.tech-scenes[data-active="stay"] .scene-room-status{ transform:translateY(-4px); border-color:rgba(52,199,89,0.38); }.tech-scenes[data-active="departure"] .scene-room-status{ border-color:rgba(41,151,255,0.42); }.scene-room-status span{ color:rgba(255,255,255,0.6); font-size:0.66rem; }.scene-room-status b{ font-size:0.7rem; }.scene-room-status b::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:0.35rem; border-radius:50%; background:#34c759; }.tech-scenes[data-active="departure"] .scene-room-status b::before{ background:#2997ff; }
.tech-scene-panel{ display:flex; min-width:0; flex-direction:column; justify-content:center; padding:clamp(1.8rem,4vw,3.6rem); animation:scenePanelIn 0.55s cubic-bezier(.22,1,.36,1) both; }.tech-scene-panel[hidden]{ display:none; }.tech-scene-panel h3{ max-width:12ch; margin:0.7rem 0 1.5rem; color:#fff; font-size:clamp(2rem,3.6vw,3.5rem); line-height:1.02; letter-spacing:-0.04em; }.tech-scene-panel .eyebrow{ color:#2997ff; }.tech-scene-panel ul{ display:grid; gap:0.8rem; margin:0; padding:0; list-style:none; }.tech-scene-panel li{ display:grid; grid-template-columns:11px 1fr; align-items:start; gap:0.65rem; color:rgba(255,255,255,0.6); font-size:0.94rem; }.tech-scene-panel li i{ width:8px; height:8px; margin-top:0.42rem; border-radius:50%; background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,0.1); }
.tech-scene-panel.is-active li{ opacity:0; animation:sceneItemIn 0.55s cubic-bezier(.22,1,.36,1) forwards; }.tech-scene-panel.is-active li:nth-child(1){ animation-delay:0.1s; }.tech-scene-panel.is-active li:nth-child(2){ animation-delay:0.18s; }.tech-scene-panel.is-active li:nth-child(3){ animation-delay:0.26s; }.tech-scene-panel.is-active li:nth-child(4){ animation-delay:0.34s; }
.tech-note{ max-width:760px; margin:1.4rem 0 0; color:rgba(255,255,255,0.42); font-size:0.78rem; }

.tech-photo-card{ position:relative; min-height:680px; overflow:hidden; border-radius:32px; background:#000; color:#fff; }.tech-photo-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,0.82) 0,rgba(0,0,0,0.28) 54%,transparent 78%); }.tech-photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.tech-photo-copy{ position:relative; z-index:2; display:flex; min-height:680px; max-width:660px; flex-direction:column; justify-content:center; padding:clamp(2rem,6vw,5rem); }.tech-photo-copy .eyebrow{ color:rgba(255,255,255,0.48); }.tech-photo-copy h2{ max-width:12ch; margin:0.7rem 0 1.2rem; color:#fff; font-size:clamp(2.4rem,5vw,4.8rem); line-height:1; letter-spacing:-0.05em; }.tech-photo-copy p:last-child{ max-width:47ch; color:rgba(255,255,255,0.64); }

@keyframes techAmbient{ to{ opacity:0.72; transform:translateY(-8px) scale(1.035); } }
@keyframes techSignal{ 0%,3%{ opacity:0; stroke-dashoffset:100; } 6%{ opacity:1; } 17%{ opacity:1; stroke-dashoffset:0; } 21%,100%{ opacity:0; stroke-dashoffset:0; } }
@keyframes techNodeSignal{ 0%,3%,22%,100%{ border-color:rgba(0,0,0,0.085); box-shadow:0 28px 65px -42px rgba(0,0,0,0.5); transform:translateY(0) scale(1); } 8%,17%{ border-color:rgba(0,113,227,0.38); box-shadow:0 30px 76px -38px rgba(0,113,227,0.7); transform:translateY(-4px) scale(1.025); } }
@keyframes techCoreSignal{ 0%,100%{ transform:translate(-50%,-50%) rotate(-2deg) scale(1); } 48%,58%{ transform:translate(-50%,-50%) rotate(-0.5deg) scale(1.018); box-shadow:0 48px 120px -46px rgba(0,113,227,0.42); } }
@keyframes statusPulse{ to{ box-shadow:0 0 0 14px rgba(52,199,89,0); } }
@keyframes calendarDock{ to{ opacity:1; transform:translateY(0) rotate(2deg); } }
@keyframes calendarSet{ 65%{ opacity:1; transform:scale(1.13); background:#0071e3; } 100%{ opacity:1; transform:scale(1); background:#1d1d1f; } }
@keyframes bookingArrive{ to{ opacity:1; transform:translateY(0); } }
@keyframes priceSet{ to{ transform:scaleY(1); } }
@keyframes valueConfirm{ to{ opacity:1; transform:translateY(0); } }
@keyframes lockDock{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes lockConfirm{ 70%{ opacity:1; transform:scale(1.35); box-shadow:0 0 0 10px rgba(52,199,89,0.11); } 100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 4px rgba(52,199,89,0.08); } }
@keyframes codeResolve{ to{ opacity:1; letter-spacing:0.2em; } }
@keyframes roomWake{ to{ opacity:1; transform:scale(1); box-shadow:0 14px 38px -30px rgba(0,113,227,0.7); } }
@keyframes sceneConfirm{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes messageSet{ to{ opacity:1; transform:translateY(0); } }
@keyframes taskSet{ to{ opacity:1; transform:translateX(0); } }
@keyframes documentPrint{ to{ opacity:1; transform:translateY(0) rotate(2deg); } }
@keyframes dataFillOnce{ to{ transform:scaleX(1); } }
@keyframes scenePanelIn{ from{ opacity:0; transform:translateY(18px); } }
@keyframes sceneItemIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes sceneScanArrival{ 0%{ opacity:0; transform:translateX(-120%); } 24%{ opacity:1; } 100%{ opacity:0; transform:translateX(480%); } }
@keyframes sceneScanStay{ 0%{ opacity:0; transform:translateX(-120%); } 24%{ opacity:1; } 100%{ opacity:0; transform:translateX(480%); } }
@keyframes sceneScanDeparture{ 0%{ opacity:0; transform:translateX(-120%); } 24%{ opacity:1; } 100%{ opacity:0; transform:translateX(480%); } }
@keyframes mobileTechSignal{ 0%,3%,22%,100%{ opacity:0; transform:scaleX(0); } 8%,17%{ opacity:1; transform:scaleX(1); } }

@media (max-width:920px){
  .nav-links{ gap:1.3rem; }
  .tech-orbit{ height:690px; min-height:690px; }
  .node-booking{ left:4%; }.node-price{ right:4%; }.node-access{ left:0; }.node-building{ right:0; }.node-backoffice{ left:10%; }.node-result{ right:10%; }
  .tech-sequence-grid{ grid-template-columns:minmax(0,0.95fr) minmax(390px,1.05fr); gap:1.5rem; }
  .tech-cap-wide{ min-height:650px; }.mini-calendar,.mini-building{ width:62%; height:65%; }.mini-data{ width:61%; }
}

@media (max-width:760px){
  .lang-switch{ margin-left:auto; }
  .nav-actions{ gap:0.55rem; }
  .tech-hero{ padding-bottom:3rem; }
  .tech-orbit{ height:620px; min-height:620px; margin-top:2.6rem; padding:0 0.8rem; }
  .tech-orbit::before{ inset:10% 0 8%; }
  .tech-orbit::after{ content:""; position:absolute; z-index:-1; left:50%; top:10%; bottom:8%; width:1px; background:linear-gradient(transparent,rgba(29,29,31,0.13) 12%,rgba(29,29,31,0.13) 88%,transparent); }
  .tech-flow-map{ display:none; }
  .tech-orbit-photo{ width:min(43%,190px); border-width:5px; border-radius:22px; }
  .tech-orbit-photo figcaption{ right:7px; bottom:7px; left:7px; padding:0.48rem 0.55rem; border-radius:11px; }
  .tech-orbit-photo figcaption span{ display:none; }
  .tech-orbit-node{ width:42%; min-height:76px; padding:0.68rem; border-radius:15px; }
  .tech-orbit-node::before{ content:""; position:absolute; top:50%; width:20%; height:1px; background:linear-gradient(90deg,rgba(0,113,227,0.08),rgba(0,113,227,0.62),rgba(0,113,227,0.08)); opacity:0; transform:scaleX(0); animation:mobileTechSignal 12s ease-in-out infinite; animation-delay:var(--node-delay); }
  .node-booking::before,.node-access::before,.node-backoffice::before{ left:100%; transform-origin:left; }.node-price::before,.node-building::before,.node-result::before{ right:100%; transform-origin:right; }
  .tech-orbit-node span{ font-size:0.55rem; }.tech-orbit-node b{ font-size:0.78rem; }.tech-orbit-node small{ font-size:0.58rem; }
  .node-booking{ left:1%; top:8%; }.node-price{ right:1%; top:12%; }.node-access{ left:0; top:40%; }.node-building{ right:0; top:43%; }.node-backoffice{ left:2%; bottom:5%; }.node-result{ right:2%; bottom:2%; }
  .tech-orbit-status{ top:1%; }

  .tech-sequence{ height:380svh; }
  .tech-sequence-grid{ grid-template-columns:1fr; grid-template-rows:52% 48%; gap:0; align-items:stretch; padding:0 1rem; }
  .tech-sequence-copy{ min-height:0; padding-top:1.2rem; }
  .tech-sequence-copy > .eyebrow{ top:1.1rem; font-size:0.63rem; }
  .tech-sequence-step{ top:4.6rem; }
  .tech-sequence-step h2{ margin:0.5rem 0 0.7rem; font-size:clamp(2.25rem,10vw,3.5rem); }
  .tech-sequence-step p{ max-width:38ch; font-size:0.9rem; line-height:1.38; }
  .tech-sequence-stage{ height:auto; min-height:0; }
  .sequence-event{ width:42%; min-height:68px; padding:0.52rem 0.6rem; border-radius:13px; }
  .sequence-event span,.sequence-event small{ font-size:0.51rem; }.sequence-event b{ font-size:0.67rem; }
  .event-reservation{ top:1%; }.event-payment{ top:17%; }.event-room{ top:34%; }.event-code{ top:50%; }.event-clean{ top:67%; }.event-report{ top:83%; }

  .tech-bento{ grid-template-columns:1fr; }
  .tech-cap,.tech-cap-wide{ grid-column:auto; min-height:580px; border-radius:24px; }
  .tech-cap-copy{ padding:1.5rem; }.tech-cap-copy h3,.tech-cap:not(.tech-cap-wide) .tech-cap-copy h3{ max-width:14ch; font-size:clamp(1.8rem,8vw,2.5rem); }.tech-cap-copy p{ font-size:0.91rem; }
  .mini-calendar{ right:4%; bottom:-2%; left:4%; width:auto; height:52%; }
  .mini-building{ right:4%; bottom:-1%; left:4%; width:auto; height:53%; }
  .mini-price,.mini-lock{ height:33%; }.mini-messages,.mini-tasks{ bottom:5%; }.mini-doc{ height:32%; }.mini-data{ right:5%; bottom:5%; left:5%; width:auto; }

  .tech-scene-tabs{ width:100%; overflow:auto; }
  .tech-scene-tab{ flex:1; min-width:max-content; }
  .tech-scene-canvas{ min-height:700px; grid-template-columns:1fr; grid-template-rows:44% 56%; border-radius:24px; }
  .tech-scene-photo{ min-height:0; }.tech-scene-photo::after{ background:linear-gradient(0deg,#111113 0,transparent 48%); }
  .tech-scene-panel{ padding:1.5rem; justify-content:flex-start; }.tech-scene-panel h3{ margin-bottom:1.1rem; font-size:clamp(2rem,9vw,3rem); }
  .tech-photo-card,.tech-photo-copy{ min-height:650px; }.tech-photo-card::after{ background:linear-gradient(0deg,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.22) 78%); }.tech-photo-copy{ justify-content:flex-end; padding:1.5rem; }.tech-photo-copy h2{ font-size:clamp(2.2rem,10vw,3.3rem); }
}

@media (prefers-reduced-motion:reduce){
  .tech-orbit::before,.tech-flow-pulse,.tech-orbit-photo,.tech-orbit-node,.tech-orbit-node::before,.tech-orbit-status i,.tech-cap *{ animation:none!important; transition:none!important; }
  .motion-ready .tech-cap .mini-calendar,.motion-ready .tech-cap .mini-booking,.motion-ready .tech-cap .mini-lock,.motion-ready .tech-cap .building-room,.motion-ready .tech-cap .building-scene,.motion-ready .tech-cap .mini-messages i,.motion-ready .tech-cap .mini-tasks > span,.motion-ready .tech-cap .mini-doc{ opacity:1; }
  .motion-ready .tech-cap .mini-calendar{ transform:rotate(2deg); }.motion-ready .tech-cap .mini-lock{ transform:none; }.motion-ready .tech-cap .building-room,.motion-ready .tech-cap .mini-messages i,.motion-ready .tech-cap .mini-tasks > span{ transform:none; }.motion-ready .tech-cap .building-scene{ transform:translate(-50%,-50%); }.motion-ready .tech-cap .mini-doc{ transform:rotate(2deg); }.motion-ready .tech-cap .mini-price > i,.motion-ready .tech-cap .mini-data i::after{ transform:scale(1); }
  .tech-sequence{ height:auto; }
  .tech-sequence-sticky{ position:relative; top:auto; height:auto; min-height:860px; padding:4rem 0; }
  .tech-sequence-copy{ display:grid; gap:1.5rem; }
  .tech-sequence-copy > .eyebrow{ position:static; }
  .tech-sequence-step{ position:static; opacity:1; filter:none; transform:none; }
  .tech-sequence-step h2{ font-size:2.4rem; }
  .tech-sequence-stage{ display:none; }
  .tech-sequence-grid{ grid-template-columns:1fr; }
  .tech-scene-photo::before,.tech-scene-photo img,.tech-scene-panel,.tech-scene-panel.is-active li{ animation:none; transition:none; }
  .tech-scene-panel.is-active li{ opacity:1; transform:none; }
}