/* ===== site.css — Scalik shared design (colours unchanged from the original) ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#FFD700;--gold-dim:#C9A800;--gold-light:#FFF3B0;
  --black:#0A0A0A;--black-soft:#111111;--black-mid:#1A1A1A;--gray:#2A2A2A;
  --white:#FAFAFA;--muted:rgba(250,250,250,.6);--faint:rgba(250,250,250,.42);
  --border:rgba(255,215,0,.14);--line:rgba(250,250,250,.08);
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --wrap:1180px;--pad:clamp(1.25rem,4vw,3rem);
  --display:'Bebas Neue',Impact,sans-serif;
}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:not(.lenis){scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--black);color:var(--white);font-size:16px;line-height:1.7;
  overflow-x:clip;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--black)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:10000;background:var(--gold);color:var(--black);padding:.6rem 1rem;border-radius:8px;font-weight:600;transition:top .5s var(--ease)}
.skip-link:focus{top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* elements animated by motion.js stay hidden until it takes over (falls back to visible) */
html.js:not(.motion-off) :is([data-reveal],[data-split],[data-reveal-img]),
html.js:not(.motion-off) [data-stagger]>*{visibility:hidden}

/* ─── PAGE TRANSITION CURTAIN ─── */
.page-curtain{position:fixed;inset:0;z-index:9990;pointer-events:none;display:grid;place-items:center;background:var(--black-soft);
  transform:translateY(101%);transition:transform .75s var(--ease-io)}
.page-curtain::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.page-curtain span{font-family:var(--display);font-size:clamp(2.4rem,7vw,4rem);letter-spacing:.12em;color:var(--gold);opacity:0;transform:translateY(20px);transition:opacity .5s .25s,transform .9s .2s var(--ease)}
html.is-leaving .page-curtain{transform:none;pointer-events:auto}
html.is-leaving .page-curtain span{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.pt-in body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;background:var(--black-soft);
    border-bottom:1px solid rgba(255,215,0,.5);animation:pt-out .95s var(--ease-io) .05s forwards}
}
@keyframes pt-out{to{transform:translateY(-101%)}}

/* ─── HEADER ─── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem var(--pad);border-bottom:1px solid transparent;
  transition:background .9s var(--ease),padding .9s var(--ease),border-color .9s,backdrop-filter .9s,transform .9s var(--ease-io)}
.site-header.scrolled{background:rgba(10,10,10,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:.85rem var(--pad);border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-105%)}
.logo-wrap{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.logo-wrap img{height:36px;width:auto;transform-origin:50% 12%}
.logo-wrap span{font-family:var(--display);font-size:1.65rem;letter-spacing:.08em;color:var(--gold);line-height:1}
/* logo hover: the mark swings from its top and settles like a pendulum, the wordmark opens up a touch
   and a pale-gold light travels through the letters as each one lifts in a soft wave */
.logo-word{display:inline-flex;transition:letter-spacing 1.2s var(--ease)}
.logo-word i{display:inline-block;font-style:normal}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .logo-wrap:is(:hover,:focus-visible) img{animation:logo-swing 1.6s var(--ease-io)}
  .logo-wrap:is(:hover,:focus-visible) .logo-word{letter-spacing:.13em}
  .logo-wrap:is(:hover,:focus-visible) .logo-word i{animation:logo-wave 1.1s cubic-bezier(.45,0,.2,1) backwards;animation-delay:calc(var(--c) * 55ms)}
}
@keyframes logo-swing{
  0%{transform:none}
  28%{transform:rotate(-13deg) scale(1.06)}
  56%{transform:rotate(6deg) scale(1.03)}
  78%{transform:rotate(-2deg) scale(1.01)}
  100%{transform:none}}
@keyframes logo-wave{
  0%,100%{transform:none;color:var(--gold)}
  40%{transform:translateY(-.12em);color:var(--gold-light)}}
.site-nav{position:relative;display:flex;align-items:center;gap:.2rem;margin-left:auto;counter-reset:nav}
.nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;height:2.3rem;padding:0 .95rem;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,250,.72);
  counter-increment:nav;transition:color .7s var(--ease)}
.nav-link:hover,.nav-link[aria-current]{color:var(--gold)}
@media (min-width:821px) and (hover:hover){
  /* the other links step back while one is hovered */
  .site-nav:has(.nav-link:hover) .nav-link:not(:hover){color:rgba(250,250,250,.38)}
  /* tiny index number that slides in above the hovered link */
  .nav-link::before{content:"0" counter(nav);position:absolute;top:.05rem;right:.3rem;font-size:.5rem;letter-spacing:.06em;color:var(--gold-dim);
    opacity:0;transform:translateY(5px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
  .nav-link:hover::before{opacity:1;transform:none}
}
/* gliding pill that follows the hovered link (position, width and squash driven by site.js);
   a soft light inside it tracks the pointer */
.nav-indicator{position:absolute;left:0;top:50%;height:2.3rem;width:0;margin-top:-1.15rem;border-radius:999px;pointer-events:none;will-change:transform,width;
  background:radial-gradient(70px circle at var(--px,50%) 50%,rgba(255,215,0,.17),transparent 75%),rgba(255,215,0,.05);
  border:1px solid rgba(255,215,0,.2);opacity:0;transition:opacity .6s var(--ease)}
.site-nav.has-pill .nav-indicator{opacity:1}
.nav-cta{margin-left:.6rem;padding:.77rem 1.15rem .77rem 1.3rem;gap:.45em;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.nav-meta{display:none}
.header-tools{display:flex;align-items:center;gap:.75rem}

/* header entrance */
@media (prefers-reduced-motion:no-preference){
  .site-header>.logo-wrap,.header-tools{animation:hdr-in 1.3s var(--ease) .1s backwards}
  .header-tools{animation-delay:.55s}
  @media (min-width:821px){
    .site-nav>a{animation:hdr-in 1.2s var(--ease) backwards;animation-delay:calc(.2s + var(--i,0) * .07s)}
  }
}
@keyframes hdr-in{from{opacity:0;transform:translateY(-18px);filter:blur(6px)}}

/* language switch: a glass pill like the nav's (liquid glide driven by site.js, a little slower here),
   labels roll like the nav links and a faint sheen crosses the glass on hover */
.lang-switch{--lw:2.4rem;position:relative;display:flex;padding:3px;border:1px solid var(--border);border-radius:999px;isolation:isolate;
  background:rgba(255,255,255,.025);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color 1s var(--ease),transform .8s var(--ease)}
.lang-switch:hover{border-color:rgba(255,215,0,.26)}
.lang-switch:active{transform:scale(.97);transition-duration:.2s}
.lang-switch a{position:relative;z-index:1;width:var(--lw);padding:.45rem 0;text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  color:rgba(250,250,250,.6);border-radius:999px;transition:color 1s var(--ease)}
.lang-switch a[aria-current]{color:var(--gold)}
.lang-pill{position:absolute;z-index:0;left:0;top:3px;bottom:3px;width:0;border-radius:999px;overflow:hidden;pointer-events:none;will-change:transform,width;
  background:radial-gradient(44px circle at var(--px,50%) 50%,rgba(255,215,0,.2),transparent 75%),rgba(255,215,0,.07);
  border:1px solid rgba(255,215,0,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;transition:opacity .8s var(--ease)}
.lang-switch.has-pill .lang-pill{opacity:1}
html:not(.js) .lang-switch a[aria-current]{background:rgba(255,215,0,.08)}
/* faint sheen that crosses the glass on hover */
.lang-pill::after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:55%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);transition:transform 1.6s var(--ease)}
.lang-switch:hover .lang-pill::after{transform:translateX(320%) skewX(-18deg)}
@media (hover:hover){
  /* the hovered language warms to gold as the pill arrives; the current one steps back like the nav links */
  .lang-switch:has(a:not([aria-current]):hover) a[aria-current]{color:rgba(250,250,250,.38)}
  .lang-switch a:not([aria-current]):hover{color:var(--gold)}
}
.hamburger{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);z-index:102;transition:border-color .6s,background .6s}
.hamburger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--white);border-radius:2px;transform-origin:center;
  transition:transform .8s var(--ease),top .8s var(--ease),left .8s var(--ease),background .5s}
.hamburger span:first-child{top:17px}.hamburger span:last-child{top:25px;left:19px}
.hamburger:hover span:last-child{left:13px}
.nav-open .hamburger{border-color:rgba(255,215,0,.45);background:rgba(255,215,0,.06)}
.nav-open .hamburger span{background:var(--gold);left:13px}
.nav-open .hamburger span:first-child{top:21px;transform:rotate(45deg)}
.nav-open .hamburger span:last-child{top:21px;transform:rotate(-45deg)}

/* ─── SHARED TYPE ─── */
.section{padding:clamp(5rem,10vw,8rem) 0}
.section-label{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.section-label::before{content:"";width:28px;height:1px;background:var(--gold);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
html.motion-on .section-label[data-reveal]:not(.is-in)::before{transform:scaleX(0)}
.section-label.center{justify-content:center}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;letter-spacing:.015em;margin-bottom:1.5rem}
.lead{font-size:clamp(1rem,1.4vw,1.12rem);color:var(--muted);font-weight:300;max-width:56ch;line-height:1.85}
.gold{color:var(--gold)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1.05rem;border:1px solid rgba(255,215,0,.25);border-radius:999px;background:rgba(255,215,0,.06);
  color:var(--gold);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,215,0,.6);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.5)}50%{box-shadow:0 0 0 7px rgba(255,215,0,0)}}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem}

/* ─── BACKGROUND DECOR ─── */
.bg-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,215,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,.045) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 65% at 50% 35%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 35%,#000 25%,transparent 78%)}
/* brighter copy of the grid, only visible in a soft circle around the cursor */
.bg-grid--hot{background-image:linear-gradient(rgba(255,215,0,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,.38) 1px,transparent 1px);
  mask-image:radial-gradient(320px circle at var(--mx,50%) var(--my,-50%),#000,transparent 70%);-webkit-mask-image:radial-gradient(320px circle at var(--mx,50%) var(--my,-50%),#000,transparent 70%);
  opacity:0;transition:opacity 1s var(--ease)}
[data-spot]:hover>.bg-grid--hot{opacity:1}
@media (hover:none){.bg-grid--hot{display:none}}
/* canvas grid drawn by motion.js on desktop: warps + glows around the cursor */
.bg-warp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.has-warp>.bg-grid{display:none}
.bg-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:.55}
.bg-orb.a{width:55vw;height:40vw;max-width:820px;max-height:560px;left:50%;top:-18%;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,215,0,.22),transparent);animation:drift 22s ease-in-out infinite alternate}
.bg-orb.b{width:30vw;height:30vw;right:-6vw;bottom:-6vw;background:radial-gradient(closest-side,rgba(255,215,0,.1),transparent);animation:drift 28s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4vw,3vw) scale(1.12)}}

/* ─── HOME HERO ─── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9rem var(--pad) 5rem;overflow:hidden}
.hero>*:not(.bg-grid):not(.bg-orb):not(.bg-warp){position:relative}
.hero-stats>div:not(.stat-divider){display:flex;flex-direction:column-reverse;align-items:center}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,11vw,9.5rem);line-height:.9;letter-spacing:.01em;margin:2rem 0 0;max-width:12ch}
.hero h1 .line{display:block}
/* line 1: per-letter 3D flip-in (motion.js), then letters react to the pointer via --lift */
.hero-title .m-mask{perspective:700px;white-space:nowrap} /* letters of one word never wrap apart */
.hero-title.is-split .m-mask{overflow:visible}
.hero-title .m-unit{translate:0 calc(var(--lift,0) * -.09em);scale:calc(1 + var(--lift,0) * .06);
  color:color-mix(in srgb,var(--gold) calc(var(--lift,0) * 100%),var(--white))}
/* line 2: letters close in from wide tracking, then a hand-drawn stroke underlines it */
.hero .hero-title .line--accent{position:relative;display:inline-block}
.line--accent .m-glow-sweep{display:inline-block}
.line--accent.is-in .m-glow-sweep{animation:m-sweep 5.5s var(--ease-io) infinite 2.2s,track-in 2.2s var(--ease) backwards}
@keyframes track-in{from{letter-spacing:.42em;opacity:0}}
.hero-swoosh{position:absolute;left:3%;bottom:-.1em;width:94%;height:.17em;overflow:visible;pointer-events:none}
.hero-swoosh path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;
  transition:stroke-dashoffset 1.8s var(--ease-io) 1.1s,stroke .8s,opacity .8s}
.line--accent.is-in .hero-swoosh path{stroke-dashoffset:0}
.hero-title:hover .hero-swoosh path{stroke:var(--gold-light);opacity:1}
html:not(.motion-on) .hero-swoosh path{stroke-dashoffset:0}
/* room for Slovak diacritics (š, č, ď) above tight display line-heights:
   background-clip:text and split-text masks only paint inside the box */
.m-glow-sweep,.m-glow-spot{padding-block:.18em;margin-block:-.18em}
:is(.hero,.page-hero,.section-title) .m-mask{padding-top:.18em;margin-top:-.18em}
.hero .lead{margin:2rem auto 0;text-align:center;max-width:48ch}
.hero .btn-row{justify-content:center;margin-top:2.6rem}
.hero-stats{display:flex;align-items:stretch;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem);margin-top:clamp(3rem,7vh,5rem);padding-top:2rem;border-top:1px solid var(--line)}
.stat-num{font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{margin-top:.35rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stat-divider{width:1px;background:var(--border)}

/* ─── MARQUEE: two tilted bands crossing, running in opposite directions ─── */
.marquee-stack{position:relative;overflow:hidden;padding:clamp(2.5rem,5vw,4rem) 0;margin:-1rem 0}
.marquee-band{position:relative;width:110%;margin-left:-5%;padding:1.3rem 0;background:var(--black-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(-2deg);z-index:1;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.marquee-band .m-marquee__item{font-family:var(--display);font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.1;letter-spacing:.03em;color:rgba(250,250,250,.88);gap:clamp(1.2rem,3vw,2.6rem);padding-right:clamp(1.2rem,3vw,2.6rem)}
.marquee-band .m-marquee__item::after{content:"✦";display:inline-block;font-size:.5em;color:var(--gold);animation:spin 7s linear infinite}
.marquee-band--alt{margin-top:-1.4rem;padding:.75rem 0;background:var(--gold);border-color:transparent;transform:rotate(1.6deg);z-index:0}
.marquee-band--alt .m-marquee__item{font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--black)}
.marquee-band--alt .m-marquee__item::after{content:"●";font-size:.32em;color:var(--black);animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* CSS fallback loop; motion.js takes over (adds .is-js) to add scroll velocity + direction */
.m-marquee__track{animation:marquee calc(var(--speed,60) * 1s) linear infinite}
.m-marquee[data-dir="-1"] .m-marquee__track{animation-direction:reverse}
.m-marquee.is-js .m-marquee__track{animation:none}
@keyframes marquee{to{transform:translateX(-25%)}} /* track holds 4 identical copies */

/* ─── METHOD ROWS ─── */
.rows{margin-top:3rem;border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:5rem 1fr 1.2fr 2rem;gap:1.5rem;align-items:baseline;padding:2.1rem 0;border-bottom:1px solid var(--line);isolation:isolate;--soft:cubic-bezier(.33,1,.68,1)}
.row-num{font-family:var(--display);font-size:1.4rem;color:var(--gold-dim);transition:color 1s var(--soft),transform 1.4s var(--soft)}
.row h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:.02em;line-height:1}
.row p{color:var(--muted);font-weight:300;font-size:.95rem}
.rows .row:not(:has(.row-arrow)){grid-template-columns:5rem 1fr 1.2fr}
.row-arrow{justify-self:end;align-self:center;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--border);
  color:var(--gold);font-size:.85rem;opacity:0;transform:translate(-10px,10px) rotate(-45deg);
  transition:opacity 1s var(--soft),transform 1.4s var(--soft),background 1s var(--soft),color 1s var(--soft)}
/* gold rule that wipes across, plus a soft light sweep behind the row */
.row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(255,215,0,.15));
  transform:scaleX(0);transform-origin:right;transition:transform 1.7s var(--soft)}
.m-row::before{content:"";position:absolute;inset:0 -1.25rem;z-index:-1;border-radius:14px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,215,0,.07),rgba(255,215,0,0) 70%);opacity:0;transform:scaleX(.96);transform-origin:left;
  transition:opacity 1.2s var(--soft),transform 1.5s var(--soft)}
/* reveal: rows draw their base line + slide in (motion.js adds .is-in) */
html.motion-on [data-rows]>.row{border-bottom-color:transparent}
html.motion-on [data-rows]>.row:not(.is-in)>:not(.row-arrow,.row-line){opacity:0}
[data-rows]>.row.is-in>:is(.row-num,h3,p){animation:row-in 2s cubic-bezier(.22,1,.36,1) backwards}
[data-rows]>.row.is-in>h3{animation-delay:.14s}
[data-rows]>.row.is-in>p{animation-delay:.28s}
@keyframes row-in{from{opacity:0;transform:translateY(34px);filter:blur(8px)}}
/* desktop: a single highlight glides from row to row (motion.js), replacing each row's own fade */
.rows.has-hl{position:relative;isolation:isolate}
.rows-hl{position:absolute;left:-1.25rem;right:-1.25rem;top:0;height:0;z-index:-1;border-radius:14px;pointer-events:none;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,215,0,.09),rgba(255,215,0,.025) 55%,rgba(255,215,0,0) 85%)}
.has-hl>.m-row::before{display:none}
.row-line{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 2s cubic-bezier(.65,0,.35,1)}
.row.is-in>.row-line{transform:none}
.m-row.is-active::after,.m-row:hover::after{transform:scaleX(1);transform-origin:left}
.m-row.is-active::before,.m-row:hover::before{opacity:1;transform:none}
.m-row.is-active .row-num,.m-row:hover .row-num{color:var(--gold);transform:scale(1.15)}
.rows>.m-row.is-active>.row-arrow,.rows>.m-row:hover>.row-arrow{opacity:1;transform:none}
.m-row:hover>.row-arrow{background:var(--gold);color:var(--black)}

/* ─── SPLIT (text + visual) ─── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.split .lead{margin-bottom:2rem}
.mockup{position:relative;border:1px solid var(--border);border-radius:18px;background:var(--black-mid);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02)}
.mockup-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:var(--gray)}
.mockup-bar i{width:10px;height:10px;border-radius:50%;background:#FF5F57}
.mockup-bar i:nth-child(2){background:#FEBC2E}.mockup-bar i:nth-child(3){background:#28C840}
.mockup-url{flex:1;margin-left:.75rem;padding:.2rem .7rem;border-radius:6px;background:rgba(255,255,255,.06);font-size:.7rem;color:rgba(255,255,255,.35)}
.mockup-body{display:grid;gap:.75rem;padding:1.5rem}
.mock-hero{height:92px;border-radius:10px;background:linear-gradient(120deg,var(--gold-dim),var(--gold),var(--gold-light),var(--gold));background-size:300% 100%;animation:sheen 9s ease-in-out infinite alternate;
  display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;letter-spacing:.06em;color:var(--black)}
@keyframes sheen{to{background-position:100% 0}}
.mock-row{display:flex;gap:.75rem}
.mock-card{flex:1;height:62px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.mock-card.tall{height:104px}
.mock-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);transform:translateX(-100%);animation:skel 3.6s var(--ease) infinite}
@keyframes skel{60%,100%{transform:translateX(100%)}}
/* mockup "builds itself" when it scrolls in (motion.js adds .is-in) */
html.motion-on .mockup :is(.mock-hero,.mock-card){opacity:0;transform:translateY(14px) scale(.97);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.motion-on .mockup.is-in :is(.mock-hero,.mock-card){opacity:1;transform:none}
.mockup .mock-row:first-of-type .mock-card:nth-child(1){transition-delay:.25s}
.mockup .mock-row:first-of-type .mock-card:nth-child(2){transition-delay:.33s}
.mockup .mock-row:first-of-type .mock-card:nth-child(3){transition-delay:.41s}
.mockup .mock-row:last-child .mock-card:nth-child(1){transition-delay:.5s}
.mockup .mock-row:last-child .mock-card:nth-child(2){transition-delay:.58s}
.mockup .mock-hero{transition-delay:.12s}
.visual-wrap{position:relative}
.badge-float{position:absolute;right:-1rem;bottom:-1.2rem;padding:.8rem 1.3rem;border-radius:14px;background:var(--gold);color:var(--black);font-size:.8rem;font-weight:600;
  animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

/* ─── GROWTH CHART ─── */
.band{background:var(--black-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chart-card{position:relative;margin-top:3rem;padding:clamp(1.25rem,3vw,2.25rem);border-radius:20px;border:1px solid var(--border);background:var(--black-mid);overflow:hidden}
.chart-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.chart-box{position:relative;height:clamp(240px,34vw,340px)}
.chart-note{margin:1.75rem auto 0;max-width:62ch;text-align:center;color:var(--faint);font-weight:300;font-size:.92rem}

/* ─── CARDS GRID ─── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem;margin-top:3rem}
.card-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:1.5rem;border-radius:14px;border:1px solid var(--border);background:rgba(255,215,0,.05);font-size:1.4rem;
  transition:transform .9s var(--ease),background .7s}
.m-card:hover .card-icon{transform:translateY(-4px) rotate(-6deg) scale(1.05);background:rgba(255,215,0,.12)}
.m-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.95)}
.card-title{font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:.03em;line-height:1.05;margin-bottom:.7rem}
.card-text{color:var(--muted);font-weight:300;font-size:.92rem;line-height:1.75}
.card-text a,.inline-link{color:var(--gold)}

/* ─── CTA ─── */
.cta-card{position:relative;text-align:center;padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);border-radius:28px;border:1px solid var(--border);background:var(--black-soft);overflow:hidden;isolation:isolate}
.cta-card::before{content:"";position:absolute;inset:auto 0 -40% 0;height:80%;z-index:-1;background:radial-gradient(ellipse 60% 60% at 50% 100%,rgba(255,215,0,.16),transparent 70%);
  animation:glow-breathe 7s ease-in-out infinite}
/* slow rotating light along the border */
.cta-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(255,215,0,.75) 82%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border-spin 9s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes border-spin{to{--a:360deg}}
@keyframes glow-breathe{50%{opacity:.6;transform:scale(1.08)}}
.cta-card .section-title{font-size:clamp(3rem,8vw,6rem)}
.cta-card .lead{margin:0 auto 2.4rem;text-align:center}
.cta-card .btn-row{justify-content:center}

/* ─── PAGE HERO (sub pages) ─── */
.page-hero{position:relative;padding:clamp(9rem,18vw,12rem) var(--pad) clamp(3rem,6vw,5rem);text-align:center;overflow:hidden}
.page-hero>*:not(.bg-grid):not(.bg-orb):not(.bg-warp){position:relative}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,8.5vw,7rem);line-height:.92;letter-spacing:.01em;max-width:14ch;margin:1.6rem auto 1.4rem}
.page-hero .lead{margin:0 auto;text-align:center}
.breadcrumb{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem;list-style:none;font-size:.75rem;color:var(--faint)}
.breadcrumb li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.breadcrumb a{color:rgba(255,215,0,.7);transition:color .5s}
.breadcrumb a:hover{color:var(--gold)}
.client-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.5rem;color:var(--faint);font-size:.88rem}
.client-meta strong{color:rgba(250,250,250,.85);font-weight:500}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:999px;border:1px solid rgba(255,215,0,.22);background:rgba(255,215,0,.06);color:var(--gold);font-size:.82rem;font-weight:500;transition:background .6s,border-color .6s,transform .8s var(--ease)}
.chip:hover{background:rgba(255,215,0,.13);border-color:rgba(255,215,0,.45);transform:translateY(-2px)}

/* ─── PORTFOLIO ─── */
.work-stats{display:flex;justify-content:center;gap:clamp(1.5rem,6vw,4.5rem);margin:clamp(2.5rem,5vw,3.5rem) auto 0;padding-top:1.75rem;border-top:1px solid var(--line);max-width:640px}
.work-stats>div{display:flex;flex-direction:column-reverse;align-items:center}
.work-stats dd{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.work-stats dt{margin-top:.35rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.work-hint{max-width:30ch;margin-bottom:1.9rem;color:var(--faint);font-size:.85rem;font-weight:300}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:2rem}
/* --lift/--rx/--ry/--gx/--gy/--px/--py are eased by motion.js on desktop; CSS only reads them */
.work-card{display:block;position:relative;--lift:0;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--px:0px;--py:0px}
/* soft gold glow under the photo: a pre-rendered shadow that only fades (no box-shadow repaints) */
.work-card::before{content:"";position:absolute;left:5%;right:5%;top:7%;aspect-ratio:4/4.6;z-index:-1;border-radius:18px;pointer-events:none;
  box-shadow:0 40px 80px -24px rgba(255,215,0,.26),0 30px 60px -30px rgba(0,0,0,.9);opacity:0;
  transform:translateY(calc(var(--lift) * 10px));transition:opacity 1.1s var(--ease)}
.work-media{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--black-soft);border:1px solid var(--line);isolation:isolate;
  transform:perspective(1100px) translate3d(0,calc(var(--lift) * -8px),0) rotateX(var(--rx)) rotateY(var(--ry));
  backface-visibility:hidden;will-change:transform;transition:border-color .9s var(--ease)}
.work-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,transparent 26%,transparent 62%,rgba(10,10,10,.7) 100%);transition:opacity 1s var(--ease)}
/* the photo stack zooms in on hover and drifts against the pointer */
.work-slides{position:absolute;inset:0;translate:var(--px) var(--py);scale:1;transition:scale 1.8s var(--ease);will-change:transform}
/* incoming photo fades in on top and settles from a slight zoom; the outgoing one (.is-prev) stays
   fully visible underneath until it's covered, so there's no dip to black between slides */
.work-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;
  opacity:0;z-index:0;transform:scale(1.14);transition:opacity 1s cubic-bezier(.33,1,.68,1),transform 0s 1s}
.work-slides img.is-prev{opacity:1;transition:none}
.work-slides img.is-on{opacity:1;z-index:1;transform:scale(1);transition:opacity 1s cubic-bezier(.33,1,.68,1),transform 2.6s var(--ease)}
/* light sheen that follows the pointer across the photo */
.work-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);
  background:radial-gradient(480px circle at var(--gx) var(--gy),rgba(255,246,205,.2),rgba(255,215,0,.06) 40%,transparent 70%)}
/* chips sit on moving photos, so they use a solid tint instead of backdrop blur (blur re-renders every frame) */
.work-tag,.work-count{position:absolute;top:1rem;z-index:3;padding:.32rem .8rem;border-radius:999px;background:rgba(10,10,10,.72);
  font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.work-tag{left:1rem;border:1px solid rgba(255,215,0,.22);color:var(--gold);transition:background .8s var(--ease),color .8s var(--ease),border-color .8s}
.work-count{right:1rem;border:1px solid rgba(250,250,250,.12);color:rgba(250,250,250,.8);transform:translateY(-8px);opacity:0;transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.work-dots{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:3;display:flex;gap:.35rem;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.work-dots i{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(250,250,250,.22);overflow:hidden;
  transform:scaleX(.4);transform-origin:left;transition:transform 1s var(--ease)}
.work-dots i:nth-child(2){transition-delay:.05s}.work-dots i:nth-child(3){transition-delay:.1s}.work-dots i:nth-child(n+4){transition-delay:.15s}
.work-dots i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.work-dots i.is-done::after{transform:scaleX(1)}
.work-dots i.is-on::after{animation:dot-fill var(--slide,1.6s) linear forwards}
@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.work-view{position:absolute;left:50%;top:50%;z-index:4;width:104px;height:104px;margin:-52px 0 0 -52px;pointer-events:none}
.work-view>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--gold);color:var(--black);
  box-shadow:0 14px 40px -10px rgba(255,215,0,.55);
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transform:scale(.2) rotate(-25deg);opacity:0;
  transition:transform 1.1s cubic-bezier(.34,1.35,.5,1),opacity .5s var(--ease)}
.work-info{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:.9rem;padding:1.15rem .25rem 1rem}
.work-info::after{content:"";position:absolute;left:.25rem;right:.25rem;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),rgba(255,215,0,.12));
  transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--ease)}
.work-num{grid-row:span 2;font-family:var(--display);font-size:1.1rem;color:var(--gold-dim);transition:color .8s var(--ease),transform 1s var(--ease)}
.work-info h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.4vw,1.9rem);letter-spacing:.03em;line-height:1;transition:color .8s var(--ease),transform 1.1s var(--ease)}
.work-info p{margin-top:.3rem;font-size:.8rem;color:var(--faint);transition:color .8s var(--ease),transform 1.1s var(--ease) .05s}
/* round arrow button: fills with gold, arrow exits top-right and a copy comes in from bottom-left */
.work-go{grid-column:3;grid-row:1/span 2;align-self:center;position:relative;isolation:isolate;display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;border:1px solid rgba(250,250,250,.14);color:var(--faint);overflow:hidden;transition:border-color .8s var(--ease),color .6s var(--ease)}
.work-go::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .9s var(--ease)}
.work-go i{grid-area:1/1;font-style:normal;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.work-go i+i{transform:translate(-160%,160%)}
/* hover / keyboard focus (and auto-cycling on touch for the chips) */
.work-card:is(:hover,:focus-visible,.is-cycling) :is(.work-count,.work-dots){opacity:1;transform:none}
.work-card:is(:hover,:focus-visible,.is-cycling) .work-dots i{transform:none}
.work-card:is(:hover,:focus-visible)::before{opacity:1}
.work-card:is(:hover,:focus-visible) .work-media{border-color:rgba(255,215,0,.3)}
.work-card:is(:hover,:focus-visible) .work-slides{scale:1.07}
.work-card:is(:hover,:focus-visible) .work-glare{opacity:1}
.work-card:is(:hover,:focus-visible) .work-media::after{opacity:.75}
.work-card:is(:hover,:focus-visible) .work-tag{background:var(--gold);color:var(--black);border-color:var(--gold)}
.work-card:hover .work-view>span{transform:none;opacity:1}
.work-card:is(:hover,:focus-visible) .work-info::after{transform:scaleX(1);transform-origin:left}
.work-card:is(:hover,:focus-visible) :is(h3,.work-info p){transform:translateX(.4rem)}
.work-card:is(:hover,:focus-visible) h3{color:var(--gold)}
.work-card:is(:hover,:focus-visible) .work-info p{color:rgba(250,250,250,.7)}
.work-card:is(:hover,:focus-visible) .work-num{color:var(--gold);transform:translateY(-.15rem)}
.work-card:is(:hover,:focus-visible) .work-go{border-color:var(--gold);color:var(--black)}
.work-card:is(:hover,:focus-visible) .work-go::before{transform:scale(1)}
.work-card:is(:hover,:focus-visible) .work-go i:first-child{transform:translate(160%,-160%)}
.work-card:is(:hover,:focus-visible) .work-go i+i{transform:none;transition-delay:.08s}
.work-card:focus-visible{outline:none}
.work-card:focus-visible .work-media{outline:2px solid var(--gold);outline-offset:4px}
/* hovering one project gently steps the others back */
@media (hover:hover){
  .work-grid .work-card{transition:opacity 1s var(--ease)}
  .work-grid:has(.work-card:hover) .work-card:not(:hover){opacity:.45}
}
@media (min-width:1000px){
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .work-card:nth-child(3n+2){margin-top:5.5rem}
}

/* ─── GALLERY ─── */
.gallery{columns:3 300px;column-gap:1rem}
.gallery figure{position:relative;break-inside:avoid;margin-bottom:1rem;border-radius:14px;overflow:hidden;background:var(--black-soft);border:1px solid var(--line);transform:translateZ(0)}
.gallery a{position:relative;display:block;cursor:zoom-in}
/* darkening is an overlay fade instead of filter:brightness, which repaints the photo every frame */
.gallery a::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.08),rgba(10,10,10,.5));opacity:0;transition:opacity 1s var(--ease)}
.gallery figure{transition:border-color .9s var(--ease)}
.gallery img{width:100%;height:auto;backface-visibility:hidden;transition:transform 1.8s var(--ease)}
.gallery figure:hover{border-color:rgba(255,215,0,.28)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure:hover a::after{opacity:1}
.gallery-zoom{position:absolute;inset:auto .8rem .8rem auto;display:flex;align-items:center;gap:.55rem;padding:.35rem .4rem .35rem .8rem;border-radius:999px;
  z-index:1;background:rgba(10,10,10,.75);border:1px solid rgba(255,215,0,.25);color:var(--gold);font-size:.95rem;line-height:1;
  opacity:0;transform:translateY(8px);transition:opacity .6s,transform .9s var(--ease)}
.gallery-zoom span{font-size:.62rem;font-weight:600;letter-spacing:.12em;color:rgba(250,250,250,.75)}
.gallery-zoom::after{content:"";order:2}
.gallery figure:hover .gallery-zoom,.gallery a:focus-visible .gallery-zoom{opacity:1;transform:none}
.back-link{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;color:var(--faint);font-size:.85rem;transition:color .6s}
.back-link span{transition:transform .8s var(--ease)}
.back-link:hover{color:var(--gold)}
.back-link:hover span{transform:translateX(-.3rem)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:4.5rem 4vw;background:rgba(5,5,5,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s;touch-action:pan-y}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
.lb-stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.lightbox img{grid-area:1/1;max-width:100%;max-height:calc(100svh - 9rem);width:auto;border-radius:10px;box-shadow:0 40px 90px -30px #000;
  transform:scale(.94);opacity:0;transition:transform 1s var(--ease),opacity .6s var(--ease)}
.lightbox.open img.is-on{transform:none;opacity:1}
.lightbox img.out-l{transform:translateX(-6%) scale(.96);opacity:0}
.lightbox img.out-r{transform:translateX(6%) scale(.96);opacity:0}
.lightbox img.in-l{transform:translateX(-6%) scale(.96);opacity:0;transition:none}
.lightbox img.in-r{transform:translateX(6%) scale(.96);opacity:0;transition:none}
.lightbox .lb-btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,10,.55);font-size:1.2rem;
  transition:border-color .5s,color .5s,transform .8s var(--ease)}
.lightbox .lb-btn:hover{border-color:var(--gold);color:var(--gold)}
.lb-close{top:1.25rem;right:1.25rem}.lb-close:hover{transform:rotate(90deg)}
.lb-prev{left:1.25rem;top:50%;translate:0 -50%}.lb-next{right:1.25rem;top:50%;translate:0 -50%}
.lb-prev:hover{transform:translateX(-3px)}.lb-next:hover{transform:translateX(3px)}
.lb-count{position:absolute;top:1.6rem;left:1.5rem;z-index:2;font-family:var(--display);font-size:1.3rem;letter-spacing:.08em;color:var(--faint);font-variant-numeric:tabular-nums}
.lb-count b{font-weight:400;color:var(--gold)}
.lb-bar{position:absolute;left:50%;bottom:1.6rem;z-index:2;width:min(240px,50vw);height:2px;translate:-50% 0;border-radius:2px;background:rgba(250,250,250,.14);overflow:hidden}
.lb-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .9s var(--ease)}
.prose{max-width:760px}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--gold);letter-spacing:.02em;line-height:1;margin-bottom:1.2rem}
.prose p{color:var(--muted);font-weight:300;margin-bottom:1rem}
.prose a{color:var(--gold)}

/* ─── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-big{display:block;font-family:var(--display);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;letter-spacing:.01em;margin:1.5rem 0 .5rem;word-break:break-word}
.contact-card .card-platform{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.contact-card .card-value{font-size:1.1rem;font-weight:500;margin-bottom:.3rem}
.contact-card .card-desc{font-size:.86rem;color:var(--faint);font-weight:300;margin-bottom:1.4rem}
.stack{display:grid;gap:1rem}

/* ─── FOOTER ─── */
.site-footer{margin-top:auto;border-top:1px solid var(--line);background:var(--black-soft);overflow:hidden}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;max-width:var(--wrap);margin:0 auto;padding:4rem var(--pad) 3rem}
.footer-brand p{margin-top:1rem;max-width:32ch;color:var(--faint);font-size:.9rem;font-weight:300}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;font-size:.9rem;color:var(--muted)}
.footer-col h2{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.footer-col a{transition:color .5s}.footer-col a:hover{color:var(--white)}
/* oversized wordmark: outline that fills with gold as the footer scrolls in (motion.js sets --fill) */
.footer-mark{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);font-family:var(--display);font-size:clamp(5rem,23vw,17rem);line-height:.8;letter-spacing:.04em;
  text-align:center;user-select:none;pointer-events:none;margin-bottom:-.06em}
.footer-mark span{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,215,0,.22)}
.footer-mark__fill{position:absolute;inset:0 var(--pad);-webkit-text-stroke:0!important;
  background:linear-gradient(180deg,var(--gold),var(--gold-dim) 70%,rgba(201,168,0,.15));-webkit-background-clip:text;background-clip:text;
  clip-path:inset(calc(100% - var(--fill,0) * 100%) 0 0 0)}
html:not(.motion-on) .footer-mark__fill{--fill:.45}
.footer-bottom{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;max-width:var(--wrap);margin:0 auto;padding:1.5rem var(--pad);border-top:1px solid var(--line);font-size:.78rem;color:rgba(250,250,250,.32);background:var(--black-soft)}
.footer-bottom a{color:rgba(255,215,0,.6)}

/* ─── RESPONSIVE ─── */
@media (max-width:900px){
  .split,.contact-grid{grid-template-columns:1fr}
  .row,.rows .row:not(:has(.row-arrow)){grid-template-columns:3rem 1fr;row-gap:.5rem}
  .row p{grid-column:2}
  .row-arrow{position:absolute;right:0;top:2.1rem}
  .row h3{padding-right:2.5rem}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .hamburger{display:block}
  .site-header{padding:1rem var(--pad)}
  .site-header.scrolled{padding:.7rem var(--pad)}
  .site-nav{position:fixed;inset:0;z-index:101;flex-direction:column;justify-content:center;align-items:stretch;gap:0;margin:0;
    padding:6.5rem var(--pad) 7rem;counter-reset:nav;overflow-y:auto;
    background:radial-gradient(90% 55% at 100% 0%,rgba(255,215,0,.13),transparent 60%),radial-gradient(70% 40% at 0% 100%,rgba(255,215,0,.06),transparent 70%),rgba(10,10,10,.985);
    clip-path:circle(0% at calc(100% - var(--pad) - 22px) 2.4rem);visibility:hidden;
    transition:clip-path .9s var(--ease-io),visibility 0s .9s}
  .nav-open .site-nav{clip-path:circle(150% at calc(100% - var(--pad) - 22px) 2.4rem);visibility:visible;transition:clip-path 1.1s var(--ease-io)}
  .nav-indicator{display:none}
  .site-nav>*{opacity:0;transform:translateY(34px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .nav-open .site-nav>*{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(.28s + var(--i,0) * .07s)}
  .nav-link{counter-increment:nav;display:flex;align-items:baseline;gap:1rem;height:auto;padding:.55rem 0;border-bottom:1px solid var(--line);
    font-family:var(--display);font-size:clamp(2.5rem,11vw,3.4rem);line-height:1.05;letter-spacing:.03em;text-transform:none;font-weight:400;color:var(--white)}
  .nav-link::before{content:"0" counter(nav);font-family:'DM Sans',sans-serif;font-size:.7rem;letter-spacing:.14em;color:var(--gold-dim);transform:translateY(-1.4em)}
  .nav-link[aria-current]::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--gold)}
  .nav-cta{margin:2rem 0 0;padding:1.05rem 1.3rem;font-size:.85rem}
  .nav-meta{display:flex;flex-direction:column;gap:.35rem;position:absolute;left:var(--pad);right:var(--pad);bottom:2rem;font-size:.85rem;color:var(--faint)}
  .nav-meta a{width:fit-content}
  .header-tools{position:relative;z-index:102}
  /* backdrop-filter/transform would trap the fixed overlay inside the header box */
  .nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;background:transparent;border-bottom-color:transparent}
  .nav-open .logo-wrap{position:relative;z-index:102}
  .marquee-band{transform:rotate(-3deg)}
  .marquee-band--alt{transform:rotate(2.4deg)}
}
@media (max-height:620px) and (max-width:820px){
  .nav-meta{display:none}
  .site-nav{padding-bottom:2rem}
}
@media (max-width:640px){
  .section{padding:clamp(4rem,14vw,5rem) 0}
  .hero{padding:7.5rem var(--pad) 5.5rem}
  .hero h1{font-size:clamp(3.3rem,15vw,4.6rem);margin-top:1.6rem}
  .hero .lead,.lead{font-size:1rem;line-height:1.75}
  .hero .btn-row,.cta-card .btn-row{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-inline:auto}
  .hero-stats{width:100%;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.6rem;margin-top:2.5rem}
  .stat-label{font-size:.58rem;letter-spacing:.08em;line-height:1.35;text-align:center}
  .section-title{font-size:clamp(2.4rem,12vw,3.2rem)}
  .rows{margin-top:2rem}
  .row{padding:1.5rem 0;column-gap:1rem}
  .m-row::before{inset:0 -.75rem}
  .m-card{padding:1.6rem}
  .cards{gap:1rem;margin-top:2rem}
  .card-icon{margin-bottom:1.1rem;width:46px;height:46px}
  .badge-float{right:.5rem;bottom:-1rem;font-size:.74rem;padding:.65rem 1rem}
  .mockup-body{padding:1rem;gap:.6rem}
  .mock-hero{height:72px;font-size:1.3rem}
  .chart-box{height:240px}
  .cta-card{border-radius:22px}
  .cta-card .m-btn{width:100%;font-size:.84rem}
  .page-hero{padding:7.5rem var(--pad) 2.5rem}
  .page-hero h1{font-size:clamp(2.9rem,13vw,4rem)}
  .work-head{display:block}
  .work-hint{display:none}
  .work-grid{grid-template-columns:1fr;gap:2.25rem}
  .work-media{aspect-ratio:4/4.6;border-radius:16px}
  .work-card::before{aspect-ratio:4/4.2}
  .gallery{columns:2;column-gap:.6rem}
  .gallery figure{margin-bottom:.6rem;border-radius:10px}
  .gallery-zoom{display:none}
  .contact-big{font-size:clamp(1.8rem,9vw,2.4rem)}
  .footer-inner{grid-template-columns:1fr;padding-top:3rem;gap:2rem}
  .footer-bottom{flex-direction:column}
  .lightbox{padding:4rem .75rem 5rem}
  .lightbox img{max-height:calc(100svh - 10rem)}
  .lb-prev,.lb-next{top:auto;bottom:1rem;translate:none}
  .lb-bar{bottom:2.35rem}
}
@media (max-width:380px){
  .logo-wrap span{font-size:1.4rem}
  .lang-switch{--lw:2.1rem}
}
@media (prefers-reduced-motion:reduce){
  .bg-orb,.eyebrow::before,.mock-hero,.mock-card::after,.badge-float,.cta-card::before,.cta-card::after,
  .m-marquee__track,.marquee-band .m-marquee__item::after{animation:none}
}