/* ==========================================================================
   PORTFOLIO · 01 — case studies: brands we've helped become category leaders (assets/s7-cases.js)
   One long wall of browser-window cards, one per brand. Tap a card to flip
   it and read what we built. Cards rise in as the wall scrolls past, the
   middle column rides lower, the filters reflow the wall, and on desktop
   each card tilts toward the cursor under a soft glare.
   The pre-reveal (hidden) state only applies once .is-js is on the section.
   ========================================================================== */
.s7c { position: relative; padding: 6px 0 84px; }
.s7c *, .s7c *::before, .s7c *::after { box-sizing: border-box; }

/* backdrop: a faint dot grid, plus a violet spotlight that follows the cursor (desktop) */
.s7c-bg { position: absolute; inset: -40px 0 0; z-index: 0; overflow: hidden; pointer-events: none; }
.s7c-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(124, 92, 252, 0.17) 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}
.s7c-spot {
  position: absolute; left: 0; top: 0;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 252, 0.14), rgba(124, 92, 252, 0.05) 55%, transparent);
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
.s7c.is-spot .s7c-spot { opacity: 1; }

.s7c-wrap { position: relative; z-index: 1; max-width: var(--maxw, 1320px); margin: 0 auto; padding: 0 var(--pad, 56px); }   /* the homepage's content column */

/* ---- filters ------------------------------------------------------------ */
.s7c-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 52px; }
.s7c-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 16px;
  border: 1px solid rgba(20, 19, 32, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #26233a;
  font: 500 14px/1 'Geist', -apple-system, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.s7c-chip i { font: 600 11px/1 'Geist Mono', ui-monospace, monospace; font-style: normal; color: #8f88ad; transition: color .25s; }
.s7c-chip:hover { border-color: rgba(109, 74, 255, 0.45); transform: translateY(-1px); }
.s7c-chip:focus-visible { outline: 3px solid #7c5cfc; outline-offset: 3px; }
.s7c-chip[aria-pressed="true"] { background: #16132a; border-color: #16132a; color: #ffffff; box-shadow: 0 10px 22px -12px rgba(22, 19, 42, 0.65); }
.s7c-chip[aria-pressed="true"] i { color: #b9a8ff; }
.s7c-count { flex-basis: 100%; margin: 8px 0 0; text-align: center; font: 500 11.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #8f88ad; }
.s7c-count b { color: #4c2fd0; font-weight: 600; }
.s7c-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the wall --------------------------------------------------------------- */
.s7c-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 30px; padding-bottom: 72px; }
.s7c-card[hidden] { display: none !important; }
.s7c-card.is-off { translate: 0 72px; }                 /* the middle column rides lower: a staggered wall */

/* ---- a card ------------------------------------------------------------------ */
.s7c-card { position: relative; aspect-ratio: 0.74; perspective: 1500px; }
.s7c.is-js .s7c-card {
  opacity: 0;
  transform: perspective(1000px) translateY(64px) rotateX(10deg) scale(0.95);
  transform-origin: 50% 100%;
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s);
}
.s7c.is-js .s7c-card.is-in { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(0) scale(1); }

/* only the faces take pointer events: the 3D wrappers would otherwise win hit-tests mid-tilt */
.s7c-tilt, .s7c-inner { pointer-events: none; }
.s7c-face { pointer-events: auto; }
.s7c-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.s7c-card.is-hover .s7c-tilt { --lift: -10px; transition: transform .2s ease-out; }
.s7c-card.is-flipping .s7c-tilt { animation: s7cPop .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes s7cPop { 40% { scale: 0.95; } }
.s7c-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.22, .9, .28, 1.1); }
.s7c-card.is-flipped .s7c-inner { transform: rotateY(180deg); }

.s7c-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0c0d12;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 22px 46px -26px rgba(12, 13, 18, 0.62), 0 2px 8px rgba(12, 13, 18, 0.08);
  transition: box-shadow .45s ease;
}
.s7c-card.is-hover .s7c-face { box-shadow: 0 40px 70px -30px rgba(12, 13, 18, 0.62), 0 10px 22px rgba(12, 13, 18, 0.10); }
.s7c-front { cursor: pointer; }

/* browser chrome */
.s7c-chrome { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.s7c-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.s7c-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background .35s; }
.s7c-dots i:nth-child(1) { --dc: #ff5f57; }
.s7c-dots i:nth-child(2) { --dc: #febc2e; }
.s7c-dots i:nth-child(3) { --dc: #28c840; }
.s7c-card.is-in .s7c-dots i { animation: s7cDot 1.2s ease 1 backwards; }              /* the window "boots" as it lands */
.s7c-card.is-in .s7c-dots i:nth-child(1) { animation-delay: calc(var(--d, 0s) + .55s); }
.s7c-card.is-in .s7c-dots i:nth-child(2) { animation-delay: calc(var(--d, 0s) + .68s); }
.s7c-card.is-in .s7c-dots i:nth-child(3) { animation-delay: calc(var(--d, 0s) + .81s); }
@keyframes s7cDot { 0%, 100% { background: rgba(255, 255, 255, 0.22); } 30%, 62% { background: var(--dc); } }
.s7c-card.is-hover .s7c-dots i { background: var(--dc); }
.s7c-url {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding: 6px 10px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.58);
  font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: -0.01em;
  white-space: nowrap; text-overflow: ellipsis;
}
.s7c-url::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); }
.s7c-card.is-hover .s7c-url::after { animation: s7cShim 1.1s ease .05s 1; }
@keyframes s7cShim { to { transform: translateX(120%); } }
.s7c-flag {
  flex: 0 0 auto;
  padding: 5px 7px; border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(124, 92, 252, 0.28);
  color: #ece6ff;
  font: 600 9px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.s7c-flag--gift { border-color: rgba(127, 203, 95, 0.5); background: rgba(127, 203, 95, 0.2); color: #e2f6d6; }

/* the artwork */
.s7c-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--art, #101118); }
.s7c-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.s7c-art--contain img { object-fit: contain; padding: 17%; }
.s7c.is-js .s7c-art img { transform: scale(1.14); }
.s7c.is-js .s7c-card.is-in .s7c-art img { transform: scale(1.02); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.s7c.is-js .s7c-card.is-in.is-hover .s7c-art img { transform: scale(1.09); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) 0s; }
.s7c-art::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(8, 8, 12, 0.55)); }
.s7c-art--light::after { display: none; }

/* a result, pinned to the artwork */
.s7c-stat {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 28px);
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 9, 14, 0.7);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font: 600 12.5px/1.2 'Geist', -apple-system, sans-serif;
  letter-spacing: -0.01em;
}
.s7c-stat i {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--a, #c9bbff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0d12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.s7c.is-js .s7c-stat { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.s7c.is-js .s7c-card.is-in .s7c-stat { opacity: 1; transform: none; transition-delay: calc(var(--d, 0s) + .8s); }

/* name, place, services */
.s7c-meta { flex: 0 0 auto; padding: 14px 18px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)), var(--g2, #0c0d12); }
.s7c-name { margin: 0; color: #ffffff; font: 600 18px/1.2 'Geist', -apple-system, sans-serif; letter-spacing: -0.02em; }
.s7c-tag { margin: 3px 0 0; color: rgba(255, 255, 255, 0.62); font: 400 13px/1.35 'Geist', -apple-system, sans-serif; }
.s7c-svcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.s7c-svcs span { padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.06); color: var(--a, #c9bbff); font: 600 9.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }

/* the whole front is one real button */
.s7c-flipbtn {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; z-index: 3;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s7c-flipbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #a78bfa; }
.s7c-hint {
  position: absolute; top: 52px; right: 14px;
  padding: 7px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(12, 13, 18, 0.62);
  color: #ffffff;
  font: 600 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.s7c-card.is-hover .s7c-hint, .s7c-flipbtn:focus-visible .s7c-hint { opacity: 1; transform: none; }
@media (hover: none) { .s7c-hint { opacity: .95; transform: none; } }
.s7c:not(.is-js) .s7c-hint { display: none; }
.s7c-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s; background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.16), transparent 46%); }
.s7c-card.is-hover .s7c-glare { opacity: 1; }

/* ---- the back: what we built ----------------------------------------------- */
.s7c-back { transform: rotateY(180deg); padding: 20px 22px 18px; background: radial-gradient(130% 90% at 12% 0%, var(--g1, #2b2540), var(--g2, #0b0a10) 70%); }
.s7c-back::before { content: ''; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent); pointer-events: none; }
/* the card's number, set huge and faint in the corner */
.s7c-back::after {
  content: attr(data-n);
  position: absolute; right: 16px; bottom: 66px; z-index: 0;
  font: 700 128px/0.8 'Geist', -apple-system, sans-serif; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.s7c-back > * { z-index: 1; }
.s7c-back:focus { outline: none; }
.s7c-back-top { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; margin-bottom: 14px; }
.s7c-logo { display: block; height: 26px; width: auto; max-width: 64%; object-fit: contain; object-position: left center; }
.s7c-logo--ink { filter: brightness(0) invert(1); }
.s7c-logo--round { height: 34px; }
.s7c-mono { display: inline-grid; place-items: center; height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; font: 700 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; }
.s7c-num { color: rgba(255, 255, 255, 0.5); font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.s7c-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.s7c-back-name { margin: 0; color: #ffffff; font: 600 19px/1.2 'Geist', -apple-system, sans-serif; letter-spacing: -0.02em; }
.s7c-back-cat { margin: 7px 0 10px; color: var(--a, #c9bbff); font: 600 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.s7c-desc { margin: 0 0 12px; color: rgba(255, 255, 255, 0.86); font: 400 13.5px/1.5 'Geist', -apple-system, sans-serif; }
.s7c-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.s7c-list li { position: relative; margin: 0; padding-left: 22px; color: rgba(255, 255, 255, 0.92); font: 400 13px/1.38 'Geist', -apple-system, sans-serif; }
.s7c-list li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--a, #c9bbff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0d12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.s7c-actions { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; gap: 10px; padding-top: 14px; }
.s7c-cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #ffffff; color: #0c0d12; font: 600 13.5px/1 'Geist', -apple-system, sans-serif; text-decoration: none; white-space: nowrap; transition: gap .25s, background .25s; }
.s7c-cta:hover { gap: 12px; background: #ece7ff; }
.s7c-cta:focus-visible, .s7c-backbtn:focus-visible { outline: 3px solid #b9a8ff; outline-offset: 2px; }
.s7c-cta--soon { border: 1px dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.72); cursor: default; }
.s7c-cta--soon:hover { gap: 8px; background: rgba(255, 255, 255, 0.07); }
.s7c-backbtn { -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #ffffff; font: 600 13px/1 'Geist', -apple-system, sans-serif; cursor: pointer; }
.s7c-backbtn:hover { background: rgba(255, 255, 255, 0.14); }

/* the back builds itself, line by line, once the card has turned */
.s7c-back-top, .s7c-back-name, .s7c-back-cat, .s7c-desc, .s7c-list li, .s7c-actions { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.s7c-card.is-flipped :is(.s7c-back-top, .s7c-back-name, .s7c-back-cat, .s7c-desc, .s7c-list li, .s7c-actions) { opacity: 1; transform: none; }
.s7c-card.is-flipped .s7c-back-top { transition-delay: .28s; }
.s7c-card.is-flipped .s7c-back-name { transition-delay: .34s; }
.s7c-card.is-flipped .s7c-back-cat { transition-delay: .39s; }
.s7c-card.is-flipped .s7c-desc { transition-delay: .44s; }
.s7c-card.is-flipped .s7c-list li:nth-child(1) { transition-delay: .50s; }
.s7c-card.is-flipped .s7c-list li:nth-child(2) { transition-delay: .56s; }
.s7c-card.is-flipped .s7c-list li:nth-child(3) { transition-delay: .62s; }
.s7c-card.is-flipped .s7c-list li:nth-child(4) { transition-delay: .68s; }
.s7c-card.is-flipped .s7c-list li:nth-child(5) { transition-delay: .74s; }
.s7c-card.is-flipped .s7c-actions { transition-delay: .82s; }

/* ---- the open slot at the end of the wall ------------------------------------ */
@property --s7cAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.s7c-ctaface { color: #ffffff; text-decoration: none; background: radial-gradient(125% 90% at 18% 0%, #4c2fd0 0%, #22164f 52%, #0c0a18 100%); }
.s7c-ctaface::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--s7cAng), transparent 0 58%, rgba(196, 181, 255, 0.95) 76%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: s7cSpin 7s linear infinite paused;
}
.s7c-card--cta.is-live .s7c-ctaface::before { animation-play-state: running; }
@keyframes s7cSpin { to { --s7cAng: 360deg; } }
/* an empty art slot, waiting for the next logo */
.s7c-ctaslot {
  position: relative; flex: 1 1 auto; min-height: 0;
  margin: 16px 16px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  overflow: hidden;
  border: 1.5px dashed rgba(201, 187, 255, 0.36);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.s7c-ctaslot::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 35%, rgba(201, 187, 255, 0.12) 50%, transparent 65%); pointer-events: none; }
.s7c-card--cta.is-live .s7c-ctaslot::after { animation: s7cSweep 3.8s ease-in-out infinite; }
@keyframes s7cSweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.s7c-ctanum {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 700 210px/1 'Geist', -apple-system, sans-serif; letter-spacing: -0.07em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(214, 204, 255, 0.16);
  white-space: nowrap; pointer-events: none;
}
.s7c-ctaplus { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(201, 187, 255, 0.45); background: rgba(201, 187, 255, 0.14); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.s7c-ctaplus::before, .s7c-ctaplus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: #e6dfff; }
.s7c-ctaplus::after { transform: rotate(90deg); }
.s7c-card--cta.is-live .s7c-ctaplus { animation: s7cPulse 2.6s ease-out infinite; }
@keyframes s7cPulse { 0% { box-shadow: 0 0 0 0 rgba(201, 187, 255, 0.35); } 70%, 100% { box-shadow: 0 0 0 20px rgba(201, 187, 255, 0); } }
.s7c-ctaface:hover .s7c-ctaplus { transform: rotate(90deg) scale(1.06); }
.s7c-ctalbl { position: relative; color: rgba(225, 218, 255, 0.78); font: 600 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.s7c-ctameta { position: relative; flex: 0 0 auto; padding: 18px 22px 22px; }
.s7c-ctakick { margin: 0 0 10px; color: #c9bbff; font: 600 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.s7c-ctatitle { margin: 0; color: #ffffff; font: 600 28px/1.08 'Geist', -apple-system, sans-serif; letter-spacing: -0.035em; }
.s7c-ctatitle em { font-style: normal; color: #c9bbff; }
.s7c-ctatext { margin: 8px 0 16px; color: rgba(255, 255, 255, 0.7); font: 400 13.5px/1.5 'Geist', -apple-system, sans-serif; }
.s7c-ctabtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: 12px; background: #ffffff; color: #16132a; font: 600 14px/1 'Geist', -apple-system, sans-serif; transition: gap .25s, background .25s; }
.s7c-ctaface:hover .s7c-ctabtn { gap: 12px; background: #ece7ff; }
.s7c-ctaface:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #c9bbff; }

/* ---- sizes -------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .s7c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 26px; padding-bottom: 58px; }
  .s7c-card.is-off { translate: 0 58px; }
}
@media (max-width: 719px) {
  .s7c { padding-bottom: 56px; }
  .s7c-wrap { padding: 0 20px; }
  .s7c-bar { gap: 7px 6px; margin-bottom: 34px; }
  .s7c-chip { gap: 6px; padding: 9px 11px; font-size: 12.5px; }
  .s7c-chip i { font-size: 10px; }
  .s7c-back::after { font-size: 108px; bottom: 64px; }
  .s7c-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 440px; margin: 0 auto; padding-bottom: 0; }
  .s7c-card { aspect-ratio: 0.72; }
  .s7c-card.is-off { translate: none; }
}
@media (max-width: 380px) {
  .s7c-wrap { padding: 0 16px; }
  .s7c-card { aspect-ratio: 0.66; }
  .s7c-back { padding: 16px 18px 14px; }
  .s7c-back-top { margin-bottom: 10px; }
  .s7c-desc { font-size: 12.5px; }
  .s7c-list { gap: 5px; }
  .s7c-list li { font-size: 12.5px; }
  .s7c-ctatitle { font-size: 24px; }
}

/* ---- less motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .s7c.is-js .s7c-card, .s7c.is-js .s7c-card.is-in { transform: none; transition: opacity .4s ease; }
  .s7c-tilt, .s7c-card.is-hover .s7c-tilt { transform: none; transition: none; }
  .s7c-inner { transition: none; }
  .s7c.is-js .s7c-art img, .s7c.is-js .s7c-card.is-in .s7c-art img, .s7c.is-js .s7c-card.is-in.is-hover .s7c-art img { transform: scale(1.02); transition: none; }
  .s7c.is-js .s7c-stat { transform: none; }
  .s7c-card.is-flipping .s7c-tilt, .s7c-card.is-in .s7c-dots i, .s7c-card.is-hover .s7c-url::after, .s7c-ctaface::before,
  .s7c-card--cta.is-live .s7c-ctaslot::after, .s7c-card--cta.is-live .s7c-ctaplus { animation: none; }
  .s7c-ctaface:hover .s7c-ctaplus { transform: none; }
  .s7c-back-top, .s7c-back-name, .s7c-back-cat, .s7c-desc, .s7c-list li, .s7c-actions { transform: none !important; transition: opacity .2s ease !important; }
}