/* Home page. Shared tokens and components live in site.css. */
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-light { background: #f2eefa; border-color: transparent; color: #120d1e; font-weight: 600; box-shadow: 0 4px 0 #a99bc8; }
.btn-light:hover { background: #fff; border-color: transparent; transform: translateY(-1px); }
.num small { font: 400 14px/1 var(--font-ui); color: var(--muted); letter-spacing: 0; }
h2 em { font-style: normal; color: var(--violet-hi); }
.center { margin-inline: auto; text-align: center; }
.center .sub { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; max-width: 1360px; height: clamp(640px, 100svh, 780px); margin-top: -76px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; overflow: hidden; }
.hcopy { position: relative; padding-top: 76px; padding-left: 8px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 72px); max-width: 12ch; margin-bottom: 20px; }
.hero .lede { font-size: 19px; margin-bottom: 28px; }
.wall { position: relative; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow: hidden; contain: layout paint; }
.wall::before, .wall::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 10%; pointer-events: none; }
.wall::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.wall::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.wcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; will-change: transform; }
.wpause { z-index: 3; position: absolute; right: 12px; bottom: 9%; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(9, 7, 15, .75); color: var(--text); cursor: pointer; }
.wpause svg { width: 12px; height: 12px; fill: currentColor; }
.wpause .i-play, .wpause[aria-pressed="true"] .i-pause { display: none; }
.wpause[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .wcol { animation: wup 58s linear infinite; }
  .wcol.down { animation-name: wdown; }
  @keyframes wup { to { translate: 0 calc(-50% - 7px); } }
  @keyframes wdown { from { translate: 0 calc(-50% - 7px); } to { translate: 0 0; } }
  .wall:hover .wcol, .wall.paused .wcol, .wcol.hold { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .wpause { display: none; } }

/* ---------- Ad card ---------- */
.ad { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; flex: none; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #140f20; color: #fff; cursor: pointer; font: inherit; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.ad img, .ad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ad video { z-index: 1; }
.wall .tag { display: none; }
.ad .tag { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 6px 9px; border-radius: 999px; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; background: rgba(9, 7, 15, .72); border: 1px solid var(--line); }
.ad .pl { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; display: grid; place-items: center; border-radius: 50%; background: rgba(139, 92, 246, .9); opacity: 0; scale: .8; transition: opacity .2s, scale .2s; }
.ad .pl svg { width: 16px; height: 16px; margin-left: 2px; fill: #fff; }
.ad:hover .pl, .ad:focus-visible .pl { opacity: 1; scale: 1; }
.ad.playing .pl, .ad.playing .tag { opacity: 0; }

/* ---------- Curved portfolio ---------- */
.portfolio { overflow: hidden; padding-bottom: 0; }
.portfolio .sec-head { padding-inline: 16px; margin-bottom: 8px; }
.arc { --cw: 268px; contain: layout paint; position: relative; height: 610px; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.arc.dragged { cursor: grabbing; }
.arc .ad { position: absolute; left: 50%; top: 40px; width: var(--cw); margin-left: calc(var(--cw) / -2); will-change: transform; }
.arc img { pointer-events: none; -webkit-user-drag: none; }
.arcnav { display: flex; justify-content: center; }

/* ---------- Offers ---------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 920px; margin-inline: auto; }
.offer { position: relative; display: grid; gap: 14px; justify-items: start; align-content: start; padding: 30px; border-radius: 26px; }
.offer p { margin: 0 0 6px; font-size: 17px; color: var(--muted); text-wrap: pretty; }
.oimg { position: absolute; right: 14px; top: 10px; width: 116px; height: auto; filter: drop-shadow(0 10px 26px rgba(139, 92, 246, .4)); pointer-events: none; }
.olink { font-size: 14px; color: var(--muted); text-underline-offset: 3px; transition: color .2s; }
.olink:hover { color: var(--text); }
.cta .ctas { justify-content: center; }
.onote { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Narrow screens ---------- */
@media (max-width: 960px) {
  .hero { height: auto; grid-template-columns: minmax(0, 1fr); gap: 34px; overflow: visible; }
  .hcopy { padding-top: 104px; padding-left: 0; }
  .wall { height: 480px; }
  .offers { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 640px) {
  .arc { --cw: 208px; height: 480px; }
  .offer { padding: 26px 22px; }
  .ad .pl { opacity: 1; scale: .8; }
}