/* ===================================================================
   Code Aesthetics — design tokens
=================================================================== */
:root{
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --panel: #f5f5f7;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #c7c7cc;
  --accent: #ed1c24;
  --accent-2: #d6ff4b;
  --line: rgba(0,0,0,0.1);

  --font-display: "Syne", sans-serif;
  --font-body: "Inter", sans-serif;

  --container: 1400px;
  --pad: clamp(20px, 4vw, 64px);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ background: var(--bg); }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }

body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; cursor:none; color:inherit; }
em{ font-style:normal; color: var(--accent); }

::selection{ background: var(--accent); color:#fff; }

@media (hover:none){ body{ cursor:auto; } .cursor{ display:none !important; } }

/* ===================================================================
   Preloader
=================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.preloader__mark{ width:clamp(150px,20vw,220px); height:auto; }
.preloader__count{
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:0.06em;
  color:var(--muted); font-variant-numeric:tabular-nums; min-width:4ch; text-align:center;
}
.preloader__bar{ width:min(260px,60vw); height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.preloader__bar-fill{ width:0%; height:100%; background:var(--accent); border-radius:3px; }

/* ===================================================================
   Custom cursor
=================================================================== */
.cursor{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  display:flex; flex-direction:column; align-items:flex-start;
  transition: opacity .25s ease;
}
.cursor svg{ width:18px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25)); transition:transform .25s ease; transform-origin:top left; }
.cursor svg path{ fill:var(--accent); stroke:#fff; stroke-width:1.4; stroke-linejoin:round; }
.cursor span{
  margin:2px 0 0 15px; padding:4px 10px; border-radius:6px 999px 999px 999px; background:var(--accent); color:#fff;
  font-family:var(--font-body); font-size:12px; font-weight:700; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,0.15);
  transition:transform .25s ease;
  transform-origin:top left;
}
.cursor.is-hover svg{ transform:scale(1.15); }
.cursor.is-hover span{ transform:scale(1.08); background:#1d1d1f; }
.cursor.is-hidden{ opacity:0; }
.cursor.is-on-accent svg path{ fill:#fff; stroke:var(--accent); }
.cursor.is-on-accent span{ background:#fff; color:var(--accent); }

/* ===================================================================
   Grain
=================================================================== */
.grain{
  position:fixed; inset:-50%; z-index:30; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  width:200%; height:200%;
}

/* ===================================================================
   Layout helpers
=================================================================== */
.section-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.section-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.section-tag--light{ color:rgba(255,255,255,0.75); }
.section-tag--light::before{ background:#fff; }

.section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(32px,4.4vw,58px); line-height:1.08; letter-spacing:-0.02em; max-width:18ch;
}

/* ===================================================================
   Nav
=================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px var(--pad);
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.nav.is-scrolled{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
}
.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__logo-img{ height:28px; width:auto; display:block; }

.nav__links{ display:flex; align-items:center; gap:36px; font-size:14px; }
.nav__links a{ position:relative; padding:4px 0; }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0%; height:1px; background:var(--fg);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__links .nav__cta{
  border:1px solid var(--fg); border-radius:999px; padding:10px 22px; line-height:1;
  transition: background .25s ease, color .25s ease;
}
.nav__links .nav__cta:hover{ background:var(--fg); color:var(--bg); }

.nav__toggle{ width:46px; height:46px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.nav__toggle span{ width:22px; height:1.5px; background:var(--fg); display:block; }

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}

/* ===================================================================
   Fullscreen menu
=================================================================== */
.menu{
  position:fixed; inset:0; z-index:600; background:var(--accent); color:#fff;
  clip-path: circle(0px at calc(100% - 48px) 48px);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 24px var(--pad) 48px;
  pointer-events:none;
}
.menu.is-open{ pointer-events:auto; }

.menu__top{ display:flex; align-items:center; justify-content:space-between; }
.menu__label{ font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; }
.menu__close{ width:46px; height:46px; position:relative; }
.menu__close span{
  position:absolute; top:50%; left:50%; width:22px; height:1.5px; background:#fff;
}
.menu__close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.menu__close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }

.menu__links{ display:flex; flex-direction:column; gap:4px; margin:40px 0; }
.menu-link{
  display:flex; align-items:baseline; gap:20px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px,9vw,110px); line-height:1.05; letter-spacing:-0.02em;
  overflow:hidden;
}
.menu-link span{ font-family:var(--font-body); font-weight:500; font-size:16px; opacity:0.55; }
.menu-link:hover{ padding-left:14px; transition:padding .35s cubic-bezier(.22,1,.36,1); }

.menu__bottom{ display:flex; gap:80px; flex-wrap:wrap; font-size:15px; }
.menu__col p{ opacity:0.75; line-height:1.5; }
.menu__col a{ font-weight:600; }

/* ===================================================================
   Hero
=================================================================== */
.hero{ position:relative; padding:150px var(--pad) 130px; overflow:hidden; }
.hero__eyebrow{
  font-family:var(--font-display); font-size:14px; letter-spacing:0.05em; color:var(--muted);
  margin-bottom:28px;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.split-line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.split-line .line-inner{ display:block; }

.hero__lines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.hero__head{
  position:relative; z-index:2; max-width:1100px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px; margin-bottom:30px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--muted); box-shadow:0 6px 16px rgba(0,0,0,0.04);
}
.hero__badge i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(237,28,36,0.15); }
.hero__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.04em;
  font-size:clamp(31px, 7.2vw, 104px); line-height:1.02;
}
.hero__title .dot{ color:var(--accent); }
.hero__desc{ max-width:560px; margin:28px auto 0; color:var(--muted); font-size:18px; }
.hero--home .hero__actions{ justify-content:center; margin-top:34px; }
.hero__head .mp-cursor{ position:absolute; left:var(--x); top:var(--y); }

/* showcase stage */
.stage{ position:relative; z-index:1; max-width:1120px; margin:84px auto 0; perspective:1600px; }
.stage__tilt{ position:relative; transform-origin:50% 0; will-change:transform; }
.stage__browser{
  background:#fff; border:1px solid rgba(0,0,0,0.12); border-radius:18px; overflow:hidden;
  box-shadow:0 50px 100px rgba(0,0,0,0.16), 0 10px 30px rgba(0,0,0,0.06);
}
.stage__browser .mock-browser__bar{ padding:13px 16px; }
.stage__browser .mock-browser__bar i{ width:10px; height:10px; }
.stage__browser .mock-browser__bar span{ margin-left:14px; padding:4px 14px; font-size:12px; background:#f0f0f2; border-radius:999px; }
.stage__screen{ position:relative; aspect-ratio:16/9.4; background:#111; }
.stage__screen img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:top;
  opacity:0; transition:opacity .9s ease;
}
.stage__screen img.is-active{ opacity:1; }
.stage__phone{ right:-3%; bottom:-9%; width:17%; min-width:104px; border-radius:30px; z-index:3; }
.stage__phone-screen{ position:relative; aspect-ratio:9/19; border-radius:21px; overflow:hidden; background:#fff; }
.stage__phone-screen img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; opacity:0; transition:opacity .9s ease; }
.stage__phone-screen img.is-active{ opacity:1; }
.stage__chat{ position:absolute; left:-5%; top:16%; }
.stage__code{ position:absolute; left:-4%; bottom:9%; z-index:3; }

/* shared mock pieces */
.mock-browser__bar{ display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line); background:#fafafa; }
.mock-browser__bar i{ width:8px; height:8px; border-radius:50%; background:#ddd; display:block; }
.mock-browser__bar span{ margin-left:10px; font-size:10.5px; color:var(--muted); }

.mock-phone{
  width:120px; background:#111; border-radius:24px; padding:8px; box-shadow:0 30px 60px rgba(0,0,0,0.2); z-index:1;
  position:absolute;
}
.mock-phone__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:30%; height:12px; background:#111; border-radius:8px; z-index:2; }
.mock-phone img{ display:block; width:100%; aspect-ratio:9/19; object-fit:cover; object-position:top; border-radius:21px; }

.collage-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.08); width:200px; font-size:13px;
}
.collage-card--code{
  width:220px; background:#17171b; color:#f4f3ee; font-family:ui-monospace,monospace; font-size:12.5px; line-height:1.8;
}
.collage-card--code .c-kw{ color:#ed1c24; }
.collage-card--code .c-fn{ color:#4bd6ff; }

.chat-bubble{
  display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.08); border-radius:16px; padding:12px 16px 12px 12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1); max-width:300px; z-index:4; text-align:left;
}
.chat-bubble__avatar{ width:30px; height:30px; border-radius:50%; background:#111; flex:none; }
.chat-bubble__head{ font-size:11.5px; color:var(--muted); margin-bottom:2px; }
.chat-bubble__head strong{ color:var(--fg); margin-right:4px; }
.chat-bubble p{ font-size:13.5px; font-weight:500; }

/* multiplayer cursors */
.mp-cursor{ z-index:5; display:flex; flex-direction:column; align-items:flex-start; pointer-events:none; }
.mp-cursor svg{ width:16px; height:20px; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.mp-cursor svg path{ stroke:#fff; stroke-width:1.4; stroke-linejoin:round; }
.mp-cursor span{
  margin:2px 0 0 14px; padding:4px 9px; border-radius:6px 999px 999px 999px; font-size:12px; font-weight:600;
  color:#fff; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,0.15);
}
.mp-cursor--green  svg path{ fill:#10b981; } .mp-cursor--green  span{ background:#10b981; }
.mp-cursor--blue   svg path{ fill:#2f6fed; } .mp-cursor--blue   span{ background:#2f6fed; }
.mp-cursor--purple svg path{ fill:#7c5cff; } .mp-cursor--purple span{ background:#7c5cff; }
.mp-cursor--pink   svg path{ fill:#e0459b; } .mp-cursor--pink   span{ background:#e0459b; }
.mp-cursor--yellow svg path{ fill:#f2b705; } .mp-cursor--yellow span{ background:#f2b705; color:#1d1d1f; }
.mp-cursor--orange svg path{ fill:var(--accent); } .mp-cursor--orange span{ background:var(--accent); }

@media (max-width:1240px){
  .stage__chat{ left:-1%; }
  .stage__code{ left:-1%; }
  .stage__phone{ right:-1%; }
}
@media (max-width:860px){
  .hero{ padding:130px var(--pad) 90px; }
  .hero__desc{ font-size:16px; }
  .stage{ margin-top:60px; }
  .stage__chat, .stage__code{ display:none; }
  .stage__phone{ right:3%; bottom:-12%; width:24%; border-radius:20px; padding:5px; }
  .stage__phone-screen{ border-radius:15px; }
  .stage__phone .mock-phone__notch{ top:9px; height:8px; }
  .hero__head .mp-cursor--blue, .hero__head .mp-cursor--purple, .hero__head .mp-cursor--yellow{ display:none; }
  .hero__head .mp-cursor--green{ --x:-2% !important; --y:-13% !important; }
  .hero__head .mp-cursor--pink{ --x:66% !important; --y:-14% !important; }
  .hero__head .mp-cursor--orange{ --x:64% !important; --y:101% !important; }
}

/* ===================================================================
   Buttons
=================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:17px 32px; border-radius:999px; font-size:14px; font-weight:600; overflow:hidden;
  isolation:isolate;
}
.btn span{ position:relative; z-index:2; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--ghost{ border:1px solid var(--line); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--fg); }
.btn--primary-light{ background:#fff; color:var(--accent); }
.btn--ghost-light{ border:1px solid rgba(255,255,255,0.6); color:#fff; }
.btn--ghost-light:hover{ background:#fff; color:var(--accent); }

/* ===================================================================
   Marquee
=================================================================== */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; }
.marquee__track{
  display:flex; align-items:center; gap:28px; white-space:nowrap; width:max-content;
  font-family:var(--font-display); font-size:clamp(18px,2.4vw,26px); font-weight:600;
}
.marquee__dot{ color:var(--accent); font-size:12px; }

.tag-chip{
  display:inline-flex; align-items:center; padding:10px 20px; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:14px; color:#fff; background:var(--accent); box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

/* ===================================================================
   Dotted grid texture (reusable)
=================================================================== */
.dotted-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ===================================================================
   Statement / pinned about
=================================================================== */
.statement{ padding: 160px var(--pad) 100px; position:relative; overflow:hidden; }
.statement__inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:1; }
.statement__inner > .section-tag{ display:flex; justify-content:center; }
.statement__text{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(32px,5.4vw,78px); line-height:1.08; max-width:20ch; margin:0 auto; text-align:center;
  color: var(--muted-2);
}
.statement__text .word{ color: var(--fg); transition:none; }

.statement__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:110px;
}
.stat{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 24px; box-shadow:0 16px 32px rgba(0,0,0,0.05);
}
.stat__num{ font-family:var(--font-body); font-weight:600; letter-spacing:-0.045em; font-variant-numeric:tabular-nums; font-size:clamp(40px,4.6vw,64px); line-height:1; color:var(--fg); display:inline-block; }
.stat__plus{ font-family:var(--font-body); font-weight:600; letter-spacing:-0.02em; margin-left:2px; font-size:clamp(28px,3vw,42px); color:var(--accent); }
.stat__value{ display:flex; align-items:baseline; gap:2px; }
.stat__label{ color:var(--muted); font-size:14px; margin-top:8px; }

@media (max-width:760px){ .statement__stats{ grid-template-columns:repeat(2,1fr); row-gap:40px; } }

/* ===================================================================
   Services
=================================================================== */
.services{
  max-width:var(--container); margin:0 auto; padding:120px var(--pad);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:70px; align-items:start;
}
.services__side{ position:sticky; top:120px; display:flex; flex-direction:column; align-items:flex-start; }
.services__intro{ color:var(--muted); font-size:17px; max-width:36ch; margin:22px 0 30px; }

.svc{ border-top:1px solid var(--line); }
.svc:last-child{ border-bottom:1px solid var(--line); }
.svc__head{
  width:100%; display:grid; grid-template-columns:54px 1fr 30px; align-items:center; gap:10px;
  padding:28px 4px; text-align:left;
}
.svc__num{ font-family:var(--font-display); font-size:14px; color:var(--muted); }
.svc__title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.01em;
  transition:color .3s ease;
}
.svc__head:hover .svc__title, .svc.is-open .svc__title{ color:var(--accent); }
.svc__icon{
  position:relative; width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  transition:background .3s ease, border-color .3s ease;
}
.svc__icon::before, .svc__icon::after{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; background:var(--fg);
  transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.svc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.svc.is-open .svc__icon{ background:var(--accent); border-color:var(--accent); }
.svc.is-open .svc__icon::before, .svc.is-open .svc__icon::after{ background:#fff; }
.svc.is-open .svc__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }

.svc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.svc.is-open .svc__body{ grid-template-rows:1fr; }
.svc__inner{ overflow:hidden; min-height:0; padding-left:68px; }
.svc__inner p{ color:var(--muted); font-size:16px; max-width:48ch; margin-bottom:18px; }
.svc__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.svc__tags span, .stack-card__meta span{
  font-size:12px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted);
  white-space:nowrap; background:#fff;
}
.svc__link{ display:inline-block; margin-bottom:30px; font-size:14px; font-weight:700; border-bottom:1.5px solid var(--fg); padding-bottom:2px; }
.svc__link:hover{ color:var(--accent); border-color:var(--accent); }

@media (max-width:900px){
  .services{ grid-template-columns:1fr; gap:44px; padding:90px var(--pad); }
  .services__side{ position:static; }
  .svc__head{ grid-template-columns:40px 1fr 30px; padding:22px 0; }
  .svc__inner{ padding-left:50px; }
}

/* ===================================================================
   Work — stacking cards
=================================================================== */
.work{ max-width:var(--container); margin:0 auto; padding:120px var(--pad) 40px; }
.work__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:50px; }

.stack-card{
  position:sticky; top:calc(96px + var(--i, 0) * 14px);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px;
  height:min(72vh, 600px); min-height:440px; margin-bottom:36px; padding:48px 0 0 48px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:28px; overflow:hidden;
  box-shadow:0 -12px 40px rgba(0,0,0,0.06); transform-origin:50% 0; will-change:transform;
}
.stack-card:nth-child(2){ --i:1; }
.stack-card:nth-child(3){ --i:2; }
.stack-card:nth-child(4){ --i:3; }
.stack-card:nth-child(5){ --i:4; }

.stack-card__info{ display:flex; flex-direction:column; align-items:flex-start; padding-bottom:48px; min-width:0; }
.stack-card__num{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent); }
.stack-card h3{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; line-height:1.05;
  font-size:clamp(28px,3.4vw,46px); margin:14px 0 16px;
}
.stack-card p{ color:var(--muted); font-size:16px; max-width:38ch; }
.stack-card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.stack-card__cta{
  margin-top:auto; font-size:15px; font-weight:700; padding-bottom:3px; border-bottom:2px solid var(--fg);
  transition:color .3s ease, border-color .3s ease;
}
.stack-card:hover .stack-card__cta{ color:var(--accent); border-color:var(--accent); }

.stack-card__media{
  display:flex; flex-direction:column; min-width:0; background:#fff;
  border:1px solid rgba(0,0,0,0.1); border-right:0; border-bottom:0; border-radius:16px 0 0 0; overflow:hidden;
  box-shadow:-20px 20px 60px rgba(0,0,0,0.1);
}
.stack-card__shot{ flex:1; overflow:hidden; }
.stack-card__shot img{ width:100%; max-width:none; display:block; transition:transform 5s cubic-bezier(.3,.1,.3,1); }
.stack-card:hover .stack-card__shot img{ transform:translateY(-30%); }

@media (max-width:860px){
  .work{ padding-top:90px; }
  .stack-card{
    position:relative; top:auto; grid-template-columns:1fr; gap:26px; height:auto; min-height:0;
    padding:28px 0 0 24px; margin-bottom:22px; border-radius:22px;
  }
  .stack-card__info{ padding:0 24px 0 0; }
  .stack-card__cta{ margin-top:22px; }
  .stack-card__shot{ flex:none; aspect-ratio:16/10; }
  .stack-card:hover .stack-card__shot img{ transform:none; }
}

/* ===================================================================
   Process
=================================================================== */
.process{ padding:120px var(--pad) 140px; max-width:var(--container); margin:0 auto; }
.process__head{ margin-bottom:70px; }
.process__line{ position:relative; height:2px; background:var(--line); margin-bottom:-13px; }
.process__line i{ position:absolute; inset:0; display:block; background:var(--accent); transform:scaleX(0); transform-origin:left center; }
.process__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.process-item{ position:relative; padding-right:8px; }
.process-item__top{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; margin-bottom:12px; }
.process-item__num{
  position:relative; z-index:1; display:inline-flex; align-items:center; height:24px; padding:0 12px; border-radius:999px;
  background:var(--fg); color:#fff; font-family:var(--font-body); font-size:12px; font-weight:700;
}
.process-item h3{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.01em; }
.process-item p{ color:var(--muted); font-size:15px; max-width:30ch; }

@media (max-width:900px){
  .process{ padding:90px var(--pad); }
  .process__line{ display:none; }
  .process__list{ grid-template-columns:1fr 1fr; gap:40px 24px; }
  .process-item__top{ gap:16px; }
}
@media (max-width:520px){ .process__list{ grid-template-columns:1fr; } }

/* ===================================================================
   Quote
=================================================================== */
.quote{ padding:140px var(--pad); background:var(--bg-alt); position:relative; overflow:hidden; }
.quote__inner{ max-width:900px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.quote__mark{
  width:56px; height:56px; padding:14px; box-sizing:border-box; color:#fff; background:var(--accent);
  border-radius:50%; margin:0 auto 28px;
}
.quote__text{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,36px); line-height:1.4; letter-spacing:-0.01em; }
.quote__by{ display:block; margin-top:28px; color:var(--muted); font-size:14px; }

/* ===================================================================
   CTA
=================================================================== */
.cta{ background:var(--accent); color:#fff; padding:160px var(--pad) 120px; position:relative; overflow:hidden; }
.cta__inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:1; }
.cta .dotted-grid{ background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px); }
.cta__title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(40px,7vw,96px); line-height:1.02; margin-bottom:50px;
}
.cta__title em{ color:#fff; text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:10px; }
.cta__email{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3vw,34px); border-bottom:2px solid rgba(255,255,255,0.5);
  padding-bottom:8px; margin-bottom:56px;
}
.cta__actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ===================================================================
   Footer
=================================================================== */
.footer{ background:var(--bg); padding-top:0; }
.footer__marquee{ border-top:none; }
.footer__marquee .marquee__track span{ color:var(--muted-2); }
.footer__marquee .marquee__dot{ color: var(--muted-2); }

.footer__grid{
  max-width:var(--container); margin:0 auto; padding:80px var(--pad) 60px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px;
}
.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__col a, .footer__col p{ color:var(--muted); font-size:14.5px; }
.footer__col a:hover{ color:var(--fg); }
.footer__col--brand{ gap:16px; }
.footer__logo-img{ height:30px; width:auto; align-self:flex-start; object-fit:contain; }
.footer__col--brand p{ max-width:22ch; }
.footer__col .menu__label{ color:var(--muted-2); margin-bottom:6px; }

.footer__bottom{
  max-width:var(--container); margin:0 auto; padding:28px var(--pad) 40px;
  border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  color:var(--muted-2); font-size:13px;
}

@media (max-width:980px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ===================================================================
   Reveal utility fallback (before JS sets initial state)
=================================================================== */
[data-reveal-up]{ opacity:1; }

/* ===================================================================
   Nav active state (multi-page)
=================================================================== */
.nav__links a.is-active{ color:var(--accent); }

/* ===================================================================
   Page hero (sub-pages)
=================================================================== */
.page-hero{ padding:160px var(--pad) 80px; max-width:var(--container); margin:0 auto; }
.page-hero__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(36px,6vw,80px); line-height:1.02; margin:20px 0 28px; max-width:16ch;
}
.page-hero__desc{ color:var(--muted); font-size:18px; max-width:50ch; }

/* ===================================================================
   Work — filter + grid
=================================================================== */
.work-filter{
  max-width:var(--container); margin:0 auto; padding:0 var(--pad) 50px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.work-filter__btn{
  font-family:var(--font-body); font-size:14px; font-weight:600; padding:10px 20px;
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.work-filter__btn.is-active, .work-filter__btn:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.work-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--pad) 100px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.grid-card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.grid-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.grid-card__media{ aspect-ratio:16/10; overflow:hidden; }
.grid-card__media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.grid-card:hover .grid-card__media img{ transform:scale(1.04); }
.grid-card__media--1{ background:linear-gradient(135deg,#ed1c24,#6b0a0e); }
.grid-card__media--2{ background:linear-gradient(135deg,#d6ff4b,#3a4204); }
.grid-card__media--3{ background:linear-gradient(135deg,#4bd6ff,#06367a); }
.grid-card__media--4{ background:linear-gradient(135deg,#ff4bd6,#4b0637); }
.grid-card__media--5{ background:linear-gradient(135deg,#ffb04b,#4a2702); }
.grid-card__media--6{ background:linear-gradient(135deg,#9a4bff,#200a4a); }
.grid-card h3{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:20px 20px 8px; }
.grid-card__alt{ color:var(--muted); font-weight:500; font-size:14px; }
.grid-card p{ color:var(--muted); font-size:14px; margin:0 20px 16px; flex:1; }
.grid-card__tag{ font-size:12px; color:var(--muted); margin:0 20px 20px; text-transform:uppercase; letter-spacing:0.04em; }
.grid-card.is-hidden{ display:none; }

@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .work-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   Service detail (services.html)
=================================================================== */
.service-detail{ padding:80px var(--pad); border-top:1px solid var(--line); }
.service-detail--alt{ background:var(--bg-alt); }
.service-detail__inner{ max-width:var(--container); margin:0 auto; }
.service-detail__num{ font-family:var(--font-display); color:var(--accent); font-size:15px; }
.service-detail__inner h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(28px,3.6vw,44px); margin:14px 0 24px;
}
.service-detail__lead{ color:var(--muted); font-size:17px; max-width:62ch; margin-bottom:48px; }
.service-detail__cols{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.service-detail__cols h4{ font-family:var(--font-display); font-size:15px; margin-bottom:16px; }
.service-detail__cols ul{ display:flex; flex-direction:column; gap:10px; }
.service-detail__cols li{ color:var(--muted); font-size:15px; padding-left:18px; position:relative; }
.service-detail__cols li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
.service-detail__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.service-detail__tags span{ font-size:12px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }

@media (max-width:760px){ .service-detail__cols{ grid-template-columns:1fr; } }

/* ===================================================================
   Values grid (about.html)
=================================================================== */
.values{ padding:100px var(--pad); max-width:var(--container); margin:0 auto; }
.values__head{ margin-bottom:56px; }
.values__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{ background:var(--bg); padding:36px 28px; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.value-card__num{ font-family:var(--font-display); color:var(--accent); font-size:14px; }
.value-card h3{ font-family:var(--font-display); font-weight:700; font-size:20px; margin:40px 0 10px; }
.value-card p{ color:var(--muted); font-size:14.5px; }

@media (max-width:980px){ .values__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .values__grid{ grid-template-columns:1fr; } }

/* ===================================================================
   Team note (about.html)
=================================================================== */
.team-note{ background:var(--bg-alt); padding:100px var(--pad); }
.team-note__inner{ max-width:700px; margin:0 auto; text-align:center; }
.team-note__inner p{ font-size:18px; color:var(--muted); margin:20px 0 36px; }

/* ===================================================================
   Contact page
=================================================================== */
.contact-grid{
  max-width:var(--container); margin:0 auto; padding:40px var(--pad) 140px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px;
}
.contact-form{ display:flex; flex-direction:column; gap:22px; }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--font-body); font-size:15px; color:var(--fg); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; resize:vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.contact-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; line-height:1.3; height:48px; padding-top:0; padding-bottom:0;
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:14px;
}
.contact-form select:invalid{ color:var(--muted); }
.contact-form select option{ color:var(--fg); }
.contact-form button{ align-self:flex-start; border:none; }

.contact-offices{ display:flex; flex-direction:column; gap:20px; }
.office-card{ border:1px solid var(--line); border-radius:16px; padding:28px; }
.office-card--dark{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.office-card--dark a{ color:var(--accent); font-weight:600; }
.office-card__tag{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); }
.office-card h3{ font-family:var(--font-display); font-weight:700; font-size:22px; margin:10px 0 8px; }
.office-card p{ font-size:14.5px; opacity:0.8; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form__row{ grid-template-columns:1fr; }
}

/* ===================================================================
   Insights grid
=================================================================== */
.insight-grid{
  max-width:var(--container); margin:0 auto; padding:20px var(--pad) 120px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;
}
.insight-card{ border:1px solid var(--line); border-radius:16px; padding:36px; }
.insight-card__tag{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); }
.insight-card h3{ font-family:var(--font-display); font-weight:700; font-size:22px; margin:16px 0 14px; max-width:28ch; }
.insight-card p{ color:var(--muted); font-size:15px; }

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

/* ===================================================================
   Case study pages
=================================================================== */
.case-hero{ padding-bottom:60px; }
.case-back{ display:inline-block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:28px; }
.case-back:hover{ color:var(--fg); }
.page-hero__title .dot{ color:var(--accent); }
.case-meta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.case-meta > div{
  display:flex; flex-direction:column; gap:4px; padding:16px 20px; border:1px solid var(--line);
  border-radius:14px; font-size:15px; font-weight:600; min-width:180px;
}
.case-meta span{ font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.case-meta a{ color:var(--accent); }

.case-block{ padding:70px var(--pad); position:relative; }
.case-block--alt{ background:var(--bg-alt); }
.case-block__head{ max-width:var(--container); margin:0 auto 26px; }

.case-browser{
  max-width:1100px; margin:0 auto; background:#fff; border:1px solid rgba(0,0,0,0.12); border-radius:16px;
  overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.12);
}
.case-browser__scroll{ max-height:72vh; overflow-y:auto; overscroll-behavior:contain; }
.case-browser__scroll img{ width:100%; display:block; }
.case-hint{ text-align:center; color:var(--muted); font-size:13px; margin-top:16px; }

.case-phones{ max-width:1100px; margin:0 auto; display:flex; justify-content:center; gap:34px; flex-wrap:wrap; }
.case-phone{
  width:min(280px, 80vw); background:#111; border-radius:36px; padding:10px; box-shadow:0 30px 60px rgba(0,0,0,0.18);
}
.case-phone img{ width:100%; display:block; border-radius:28px; }
.case-phones .case-phone:nth-child(2){ transform:translateY(40px); }

.case-overview{ max-width:820px; margin:0 auto; }
.case-overview__text{ margin-top:10px; }
.case-overview__text p{ font-size:17px; line-height:1.75; color:#3a3a3f; margin-bottom:18px; }
.case-overview__text h4{ font-family:var(--font-display); font-weight:700; font-size:20px; margin:34px 0 8px; color:var(--fg); }
.case-overview__text h4:first-child{ margin-top:0; }

.case-next{
  max-width:var(--container); margin:0 auto; padding:40px var(--pad) 100px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.case-next__link{
  display:flex; flex-direction:column; gap:8px; padding:30px; border:1px solid var(--line); border-radius:20px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,30px);
  transition:background .3s ease, color .3s ease;
}
.case-next__link span{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--muted); }
.case-next__link:last-child{ text-align:right; align-items:flex-end; }
.case-next__link:hover{ background:var(--fg); color:#fff; }
.case-next__link:hover span{ color:rgba(255,255,255,.6); }

@media (max-width:700px){
  .case-next{ grid-template-columns:1fr; }
  .case-phones .case-phone:nth-child(2){ transform:none; }
}

/* ===================================================================
   Design portfolio (design.html + design/<slug>/)
=================================================================== */
.dz-hero{ padding:170px var(--pad) 60px; max-width:var(--container); margin:0 auto; }
.dz-hero__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.04em; line-height:1;
  font-size:clamp(44px,8vw,120px); margin:18px 0 26px;
}
.dz-hero__title .dot{ color:var(--accent); }
.dz-hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.dz-hero__desc{ max-width:52ch; color:var(--muted); font-size:18px; }
.dz-hero__stats{ display:flex; gap:40px; }
.dz-hero__stats strong{ display:block; font-family:var(--font-body); font-weight:600; letter-spacing:-0.045em; font-size:38px; line-height:1; }
.dz-hero__stats span{ font-size:13px; color:var(--muted); }

.dz-filter{ max-width:var(--container); margin:0 auto; padding:10px var(--pad) 40px; display:flex; gap:10px; flex-wrap:wrap; }

.dz-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--pad) 120px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.dz-card{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.dz-card.is-hidden{ display:none; }
.dz-card--wide{ grid-column:span 2; }
.dz-card__stage{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:28px; overflow:hidden;
  background:var(--stage, #f2f2f4); display:flex; align-items:flex-end; justify-content:center;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.dz-card--wide .dz-card__stage{ aspect-ratio:16/8; }
.dz-card:hover .dz-card__stage{ transform:scale(.985); }
.dz-card__stage img{ display:block; max-width:none; }

.dz-browser{
  width:78%; margin-bottom:-2%; background:#fff; border-radius:14px 14px 0 0; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.18); transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.dz-card:hover .dz-browser{ transform:translateY(-10px); }
.dz-browser .mock-browser__bar{ padding:10px 14px; }
.dz-browser__shot{ aspect-ratio:16/10.5; overflow:hidden; }
.dz-browser__shot img{ width:100%; transition:transform 4s cubic-bezier(.3,.1,.3,1); }
.dz-card:hover .dz-browser__shot img{ transform:translateY(calc(-100% + 100px)); }

.dz-phones{ display:flex; gap:4%; align-items:flex-end; justify-content:center; width:100%; height:92%; padding:0 6%; }
.dz-phones img{ height:100%; width:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.18)); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.dz-phones img:nth-child(2){ height:108%; margin-bottom:-6%; }
.dz-card:hover .dz-phones img:nth-child(1){ transform:translateY(-12px) rotate(-2deg); }
.dz-card:hover .dz-phones img:nth-child(3){ transform:translateY(-12px) rotate(2deg); }

.dz-card__meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.dz-card__meta h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.02em; }
.dz-card__meta p{ color:var(--muted); font-size:15px; margin-top:4px; }
.dz-card__arrow{
  flex:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:background .3s ease, color .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.dz-card:hover .dz-card__arrow{ background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(45deg); }

/* design project page */
.dz-shots{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:60px; }
.dz-shots .case-browser{ max-width:none; }
.dz-shot-label{ font-size:13px; color:var(--muted); text-align:center; margin-top:14px; }
.dz-phone-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:30px 24px; }
.dz-phone-grid figure{ text-align:center; }
.dz-phone-grid img{ width:100%; filter:drop-shadow(0 24px 34px rgba(0,0,0,.14)); }
.dz-phone-grid figcaption{ font-size:13px; color:var(--muted); margin-top:6px; }

@media (max-width:860px){
  .dz-grid{ grid-template-columns:minmax(0,1fr); }
  .dz-card--wide{ grid-column:span 1; }
  .dz-card--wide .dz-card__stage{ aspect-ratio:4/3; }
  .dz-hero__stats{ gap:24px; }
  .dz-phone-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
}
.dz-laptop{ width:88%; margin-bottom:4%; filter:drop-shadow(0 30px 40px rgba(0,0,0,.2)); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.dz-card:hover .dz-laptop{ transform:translateY(-10px) scale(1.02); }
.dz-card__stage:has(.dz-laptop){ align-items:center; }
.dz-laptops{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:70px; }
.dz-laptops img{ width:100%; filter:drop-shadow(0 40px 50px rgba(0,0,0,.16)); }
.dz-laptops figure{ text-align:center; }
.dz-cssphone{
  display:inline-block; background:#111; border-radius:34px; padding:9px; box-shadow:0 30px 50px rgba(0,0,0,.18);
}
.dz-cssphone img{ display:block; width:100%; border-radius:26px; }
.dz-phones .dz-cssphone{ height:100%; }
.dz-phones .dz-cssphone img{ height:100%; width:auto; }
.dz-phones .dz-cssphone:nth-child(2){ height:108%; margin-bottom:-6%; }
.dz-phone-grid .dz-cssphone{ width:100%; }

/* design page: Behance work */
.dz-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,1,.36,1); }
.dz-card:hover .dz-cover{ transform:scale(1.04); }
.dz-posts-stack{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.dz-posts-stack img{ position:absolute; height:72%; width:auto; max-width:46%; aspect-ratio:1; object-fit:cover; border-radius:14px; box-shadow:0 24px 50px rgba(0,0,0,.18); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.dz-posts-stack img:nth-child(1){ transform:translateX(-42%) rotate(-8deg); }
.dz-posts-stack img:nth-child(2){ transform:translateX(42%) rotate(8deg); }
.dz-posts-stack img:nth-child(3){ transform:translateY(-4%); z-index:2; }
.dz-card:hover .dz-posts-stack img:nth-child(1){ transform:translateX(-56%) rotate(-12deg); }
.dz-card:hover .dz-posts-stack img:nth-child(2){ transform:translateX(56%) rotate(12deg); }
.dz-card__stage:has(.dz-posts-stack){ align-items:center; }
.dz-slides{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.dz-slides img{ width:100%; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.08); }
.dz-posts{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.dz-posts img{ width:100%; border-radius:16px; }

.dz-extra{ max-width:var(--container); margin:0 auto; padding:0 var(--pad) 120px; }
.dz-extra__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:44px; padding-top:60px; border-top:1px solid var(--line); }
.dz-extra__head h2{ font-family:var(--font-display); font-size:clamp(36px,5vw,72px); letter-spacing:-.03em; line-height:1; margin-top:16px; }
.dz-extra__head p{ max-width:400px; color:var(--muted); }
.dz-brands{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; }
.dz-brand__img{ aspect-ratio:9/7; border-radius:16px; overflow:hidden; background:#eee; }
.dz-brand__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1); }
.dz-brand:hover .dz-brand__img img{ transform:scale(1.06); }
.dz-brand p{ display:flex; flex-direction:column; margin-top:12px; font-size:15px; }
.dz-brand p span{ color:var(--muted); font-size:13px; }
.dz-motion{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.dz-motion__card{ position:relative; display:block; aspect-ratio:16/11; border-radius:24px; overflow:hidden; background:#eee; }
.dz-motion__card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.dz-motion__card:hover img{ transform:scale(1.05); }
.dz-motion__info{ position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:24px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.dz-motion__info h3{ font-family:var(--font-display); font-size:clamp(20px,2.2vw,30px); }
.dz-motion__info p{ font-size:14px; opacity:.85; }
.dz-motion__play{ flex:none; width:58px; height:58px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; }
@media (max-width:860px){
  .dz-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dz-motion{ grid-template-columns:minmax(0,1fr); }
  .dz-posts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

[data-section].is-hidden{ display:none; }
.dz-filter{ position:relative; z-index:2; }
.dz-logo-mosaic{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:5%; transform:rotate(-6deg) scale(1.12); transition:transform 1s cubic-bezier(.22,1,.36,1); }
.dz-logo-mosaic img{ width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.14); }
.dz-card:hover .dz-logo-mosaic{ transform:rotate(-3deg) scale(1.16); }
.dz-motion-duo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.dz-motion-duo img{ position:absolute; width:56%; aspect-ratio:9/7; object-fit:cover; border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,.18); transition:transform .9s cubic-bezier(.22,1,.36,1); }
.dz-motion-duo img:nth-child(1){ transform:translateX(-22%) rotate(-5deg); }
.dz-motion-duo img:nth-child(2){ transform:translateX(22%) rotate(5deg); }
.dz-card:hover .dz-motion-duo img:nth-child(1){ transform:translateX(-30%) rotate(-8deg); }
.dz-card:hover .dz-motion-duo img:nth-child(2){ transform:translateX(30%) rotate(8deg); }
.dz-motion-duo .dz-motion__play{ position:relative; z-index:2; color:#fff; }

/* contact form sending states */
.contact-form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form{ position:relative; }
.contact-form__status{ font-size:14px; min-height:0; }
.contact-form__status.is-error{ color:#c4161c; background:#fdecec; border-radius:10px; padding:12px 16px; }
.contact-form .is-invalid{ border-color:#e5484d !important; background:#fff6f6; }
.contact-form button[disabled]{ opacity:.6; pointer-events:none; }
.contact-success{ border:1px solid var(--line); border-radius:20px; padding:44px 36px; background:var(--bg-alt); display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.contact-success[hidden]{ display:none; }
.contact-success__icon{ width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.contact-success h3{ font-family:var(--font-display); font-size:30px; letter-spacing:-.02em; }
.contact-success p{ color:var(--muted); max-width:44ch; }
.contact-form[hidden]{ display:none; }
.contact-form-wrap{ min-width:0; }