@charset "UTF-8";
/* ============================================================
   SECRETTO shared styles
   Design / fonts ours (brand PDF). Copy from staging.secretto.in
   ============================================================ */
/* ---------- Inter (self-hosted from /fonts) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --black:#1E1E1E;
  --black-2:#161616;
  --black-3:#242424;
  --white:#FFFFFF;
  --orange:#FF1E1E;
  --light-orange:#FF6A12;
  --grad:linear-gradient(90deg,#FE6911 0%,#FE1F1E 100%);
  --grad-soft:linear-gradient(135deg,rgba(254,105,17,.15),rgba(254,31,30,.15));
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.09);
  --radius:18px;
  --nav-h:64px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* force EVERY element (incl. form controls, which don't inherit fonts) to use it */
*, button, input, select, textarea {
  font-family: "Inter", sans-serif;
}

::selection {
  background: var(--light-orange);
  color: var(--white);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: min(1180px, 92%);
  margin-inline: auto;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Loader Secretto SVG slides L->R, riding the progress bar ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  overflow: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#loader {
  /* repeat pages this session: skip loader pre-paint (fast LCP) */
}
.loaded #loader {
  display: none;
}

.load-stage {
  position: absolute;
  left: 50%;
  bottom: 14vh;
  transform: translateX(-50%);
  width: min(1000px, 92vw);
  animation: loadin 0.7s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .load-stage {
    animation: none;
  }
}
@media (max-width: 560px) {
  .load-stage {
    bottom: 13vh;
    width: 88vw;
  }
}

@keyframes loadin {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* the logo rides above the bar and slides left -> right with progress (enters from the left) */
.load-logo-track {
  position: relative;
  height: 58px;
  margin-bottom: 12px;
  overflow: hidden;
}
@media (max-width: 560px) {
  .load-logo-track {
    height: 48px;
  }
}

.load-logo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(210px, 46vw);
  filter: drop-shadow(0 6px 18px rgba(254, 105, 17, 0.5));
  will-change: transform;
}
@media (max-width: 560px) {
  .load-logo {
    width: min(180px, 52vw);
    filter: none;
  }
}

/* the bar fills left -> right, 0% -> 100% */
.load-bar {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.load-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #FE6911, #FE1F1E);
  box-shadow: 0 0 18px rgba(254, 80, 20, 0.85);
}

.load-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.load-text {
  font-weight: 700;
  letter-spacing: 4px;
  font-size: clamp(0.72rem, 3vw, 0.9rem);
  text-transform: uppercase;
  color: var(--muted);
}

.load-pct {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.9rem;
  color: #fff;
}
.load-pct b {
  color: #fff;
}

/* ============================================================
   FLOATING PILL NAVBAR
   ============================================================ */
header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 120;
  background: transparent;
  border: 0;
}

.nav {
  position: relative;
  width: min(1180px, 92%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--nav-h);
  padding: 0 14px 0 26px;
  /* glossy translucent glass: sheen gradient over a light dark tint + strong blur */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0)), rgba(18, 18, 22, 0.38);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 44px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
}
.logo svg {
  width: 34px;
  height: 34px;
}
.logo .word {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo {
  /* official brand logo (icon + wordmark SVG) */
}
.logo img {
  height: 34px;
  width: auto;
  display: block;
}
.foot-brand .logo img {
  height: 40px;
}

nav > ul {
  display: flex;
  gap: 28px;
  list-style: none;
  align-items: center;
}
nav a {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
  transition: color 0.2s;
  text-transform: uppercase;
}
nav a:hover, nav a.active {
  color: var(--white);
}

/* dropdown */
.has-sub {
  position: relative;
}
.has-sub > a::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -4.5 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Earrow_down %5B%23339%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-180.000000, -6684.000000)' fill='%23aca7a6'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39' id='arrow_down-%5B%23339%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 12px;
  height: 10px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-left: 0.4rem;
}
.has-sub::after {
  /* invisible hover bridge so the menu doesn't vanish in the gap */
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 22px;
}

.sub {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(28, 28, 28, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 250px;
  padding: 12px;
  list-style: none;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 130;
}
.has-sub:hover .sub, .has-sub:focus-within .sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sub a {
  display: block;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}
.sub a:hover {
  background: var(--grad-soft);
  color: var(--light-orange);
}
.sub a.active {
  background: var(--grad-soft);
  color: var(--light-orange);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--light-orange);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 50px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  /* glossy: a top sheen over the brand gradient + a bright inner rim */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%), var(--grad);
  color: var(--white);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 26px rgba(254, 60, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(254, 60, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn {
  /* ghost buttons become frosted glass (same treatment as nav & cards) */
}
.btn.ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0)), rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn.ghost:hover {
  border-color: var(--light-orange);
  color: var(--light-orange);
}
.btn.small {
  padding: 11px 22px;
  font-size: 0.84rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}
.menu-toggle svg {
  width: 26px;
  height: 26px;
  display: block;
}
.menu-toggle svg rect {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.menu-toggle.is-open .l1 {
  transform: translateY(5px) rotate(45deg);
}
.menu-toggle.is-open .l2 {
  opacity: 0;
}
.menu-toggle.is-open .l3 {
  transform: translateY(-5px) rotate(-45deg);
}

/* blurred scrim behind the mobile drawer (sits below the header, above the page) */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(6, 6, 9, 0.4);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.nav-scrim.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.menu-open {
  overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* hero + the motion strip below it together fill exactly one screen */
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 104px 24px 44px;
  background: radial-gradient(700px 420px at 85% 8%, rgba(254, 105, 17, 0.16), transparent 65%), radial-gradient(600px 400px at 8% 90%, rgba(254, 31, 30, 0.12), transparent 65%), var(--black);
  /* centered hero content (eyebrow, headline, lead, buttons) */
}
.hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero .container > div {
  max-width: 760px;
  margin-inline: auto;
}
.hero p.lead {
  margin: 26px auto 36px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 540px;
}

/* full-bleed background video + dark overlay for text legibility */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(700px 420px at 85% 8%, rgba(254, 105, 17, 0.16), transparent 60%), radial-gradient(600px 400px at 8% 90%, rgba(254, 31, 30, 0.13), transparent 60%), linear-gradient(180deg, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.78) 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--light-orange);
  border: 1px solid rgba(255, 106, 18, 0.4);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 26px;
  background: rgba(255, 106, 18, 0.07);
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}

.flame-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1080/1500;
  border-radius: 28px;
  overflow: hidden;
  background: var(--black-3);
  box-shadow: 0 30px 80px rgba(254, 60, 20, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 6s ease-in-out infinite;
}
.flame-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flame-card svg {
  width: 62%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.3));
}
.flame-card .badge {
  position: absolute;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
/* NOTE: unscoped on purpose same specificity as the original hand-authored CSS */
.badge.b1 {
  top: 8%;
  left: -4%;
  animation: float 5s ease-in-out infinite reverse;
}

.badge.b2 {
  bottom: 10%;
  right: -4%;
  animation: float 7s ease-in-out infinite;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 150px 0 70px;
  text-align: center;
  background: radial-gradient(700px 380px at 50% -10%, rgba(254, 105, 17, 0.18), transparent 60%), var(--black);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.page-hero p {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--muted);
}

.crumbs {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-orange);
  margin-bottom: 18px;
}
.crumbs a {
  color: var(--muted);
}
.crumbs a:hover {
  color: var(--white);
}

/* ---------- Hero kicker (SpeedUp line under the H1) ---------- */
.hero-kicker {
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd2bf;
}

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  padding: 20px 0;
  overflow: hidden;
  background: var(--black-2);
}
.marquee span {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  /* dot centered vertically + equal space on both sides (between the words) */
}
.marquee span i {
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--light-orange);
  margin: 0 30px;
  font-size: 0;
}

.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: scroll 28s linear infinite;
}

.marquee-rev .marquee-track {
  animation-direction: reverse;
}

/* golden trust / quality ticker gold glowing icons, warm-white labels */
.marquee-gold {
  border-color: rgba(233, 185, 73, 0.22);
}
.marquee-gold .marquee-track {
  gap: 0;
}
.marquee-gold .mq-set {
  display: inline-flex;
  align-items: center;
}
.marquee-gold .mq {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 46px;
  color: rgba(255, 241, 224, 0.9);
}
@media (max-width: 560px) {
  .marquee-gold .mq {
    margin-right: 32px;
    gap: 7px;
  }
}
.marquee-gold .mq:nth-child(3n+2) .mq-ic {
  animation-delay: -0.9s;
}
.marquee-gold .mq:nth-child(3n) .mq-ic {
  animation-delay: -1.8s;
}
.marquee-gold .mq-ic {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(245, 190, 90, 0.8));
  animation: goldPulse 2.6s ease-in-out infinite;
}

.marquee-svc .mq-ic {
  width: 1.8em;
  height: 1.8em;
} /* hero services strip only: 1.5x */
@keyframes goldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(240, 185, 80, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 10px rgb(255, 215, 130));
  }
}
@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}
/* ---------- Generic section ---------- */
section {
  padding: 96px 0;
}

.sec-head {
  max-width: 680px;
  margin-bottom: 58px;
}
.sec-head p {
  margin-top: 18px;
  color: var(--muted);
}

.sec-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--light-orange);
  display: block;
  margin-bottom: 14px;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* ---------- Who we are ---------- */
/* centered "Who We Are": heading (Creative Evolution / Who We Are) + quote */
.who .container {
  display: block;
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}
.who .container > .reveal:first-child {
  margin-bottom: 26px;
}
.who blockquote {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--muted);
}

/* ============================================================
   HORIZONTAL SCROLL-LOCK  (title centered on top, cards below)
   ============================================================ */
.hscroll {
  position: relative;
}

.hscroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 90px;
  padding-bottom: 46px;
}

.hscroll-head {
  flex: 0 0 auto;
  text-align: center;
  width: min(760px, 90%);
  margin: 0 auto 22px;
}
.hscroll-head .sec-tag {
  margin-bottom: 12px;
}
.hscroll-head p {
  margin-top: 14px;
  color: var(--muted);
}

.scroll-hint {
  margin-top: 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.scroll-hint svg {
  width: 16px;
  height: 28px;
  animation: nudgeY 1.6s ease-in-out infinite;
}

@keyframes nudgeY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}
/* viewport: flex fills remaining height so cards centre with breathing room.
   clip-path hides horizontal overflow (the track) while leaving vertical
   space so the card hover-lift / shadow is never cropped. */
.hscroll-viewport {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
  clip-path: inset(-60px 0 -60px 0);
}

.hscroll-track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 max(5vw, 28px);
  will-change: transform;
}

.hpanel {
  flex: 0 0 auto;
  display: flex;
  /* closing cta panel inside a track fully centred */
}
.hpanel.intro {
  width: min(440px, 86vw);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.hpanel.intro .hero-cta {
  justify-content: center;
}

/* progress bar */
.hscroll-bar {
  position: absolute;
  left: max(5vw, 28px);
  right: max(5vw, 28px);
  bottom: 14px;
  height: 3px;
  background: var(--black-3);
  border-radius: 3px;
  overflow: hidden;
}
.hscroll-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  border-radius: 3px;
}

/* ---------- Ready to grow (standalone CTA, styled like the services head) ---------- */
.ready {
  background: var(--black-2);
  text-align: center;
  border-top: 1px solid var(--line);
}
.ready .container {
  max-width: 760px;
}
.ready p {
  margin: 16px auto 30px;
  color: var(--muted);
  max-width: 560px;
}
.ready .hero-cta {
  justify-content: center;
}

/* ---------- Service cards ---------- */
.services {
  background: var(--black-2);
}

.svc {
  position: relative;
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.hpanel .svc {
  width: min(380px, 84vw);
  height: min(60vh, 430px);
}
.svc { /* ALL cards the same size */ }
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.25s;
}
.svc:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 18, 0.45);
}
.svc:hover::before {
  opacity: 1;
}
.svc > * {
  position: relative;
}
.svc .icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.svc h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.svc {
  /* description clamped to 7 lines; "Read More" appears only after the 7th line */
}
.svc p {
  font-size: 0.9rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc {
  /* Read More shows the full text, scrolling inside the card so its size stays the same */
}
.svc.svc-open p {
  display: block;
  -webkit-line-clamp: none;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
}
.svc .num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
}
.svc .view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--light-orange);
  letter-spacing: 0.5px;
}
.svc .view:hover {
  text-decoration: underline;
}

/* Read More + View Service together on one line, pinned to the card bottom
   (so shorter descriptions get extra padding below the text) */
.svc-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}

.svc-more {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: var(--light-orange);
}
.svc-more:hover {
  text-decoration: underline;
}

/* grid layout when NOT horizontal */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svc-foot {
  text-align: center;
  margin-top: 48px;
}

/* ---------- Testimonials ---------- */
.quote {
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.hpanel .quote {
  width: min(420px, 84vw);
  height: min(52vh, 380px);
}
.quote .stars {
  color: var(--light-orange);
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.quote p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  overflow: auto;
}
.quote .who2 {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.quote .who2 b {
  letter-spacing: 1px;
}
.quote .who2 small {
  display: block;
  color: var(--muted);
  letter-spacing: 2px;
  font-size: 0.72rem;
}
.quote .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 44px;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Clients ---------- */
.clients {
  background: var(--black-2);
  padding: 70px 0;
}
.clients h2 {
  text-align: center;
  margin-bottom: 44px;
}

/* Our Clients continuous looping logo marquee (seamless via 2 identical sets).
   Duration is card-count driven (~4.4s per unique logo) so the scroll speed
   stays constant regardless of how many clients are in a strip; all 3 strips
   currently hold 7 unique logos each (7 × 4.4s ≈ 30.8s). If a strip's unique
   logo count changes, update its duration (and the delay divisor below)
   accordingly see assets/clients/ and index.html for how to add one. */
.client-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.client-marquee--2, .client-marquee--3 {
  margin-top: 20px;
}
.client-marquee {
  /* strip 3 offset by half a card so its cards centre between strip 1's cards
     (half-card / half-track = 1/14 of the loop, 14 = 2 sets × 7 unique logos) */
}
.client-marquee--3 .client-track {
  animation-delay: -2.2s;
}
.client-marquee:hover .client-track {
  animation-play-state: paused;
}

.client-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll 30.8s linear infinite;
}
.client-track.rev {
  animation-direction: reverse;
}

.client-logo {
  flex: 0 0 auto;
  margin-right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.client-logo span {
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  transition: color 0.25s;
}
.client-logo img,
.client-logo svg {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  display: block;
}
.client-logo {
  /* logos that render dark-on-transparent (e.g. black wordmarks) go invisible
     under the grayscale+brighten treatment above invert them instead */
}
.client-logo img.on-dark {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.client-logo:hover {
  border-color: rgba(255, 106, 18, 0.45);
}
.client-logo:hover span {
  color: var(--light-orange);
}
@media (max-width: 560px) {
  .client-logo {
    width: 132px;
    height: 68px;
    margin-right: 16px;
  }
}

/* ---------- Platforms (marketplace-management.html only) ---------- */
.platforms {
  background: var(--black-2);
  padding: 70px 0;
}
.platforms h2 {
  text-align: center;
  margin-bottom: 44px;
}

/* Marketplaces We Manage continuous looping logo marquee, same pattern as
   the "Our Clients" marquee (seamless via 2 identical sets). Duration is
   card-count driven (~4.4s per unique logo) so the scroll speed stays
   constant; all 3 strips currently hold 4 unique logos each (4 × 4.4s = 17.6s).
   If the logo count changes, update the duration (and the delay divisor
   below) accordingly see assets/platforms/ and marketplace-management.html
   for how to add one. */
.platform-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.platform-marquee--2, .platform-marquee--3 {
  margin-top: 20px;
}
.platform-marquee {
  /* strip 3 offset by half a card so its cards centre between strip 1's cards
     (half-card / half-track = 1/8 of the loop, 8 = 2 sets × 4 unique logos) */
}
.platform-marquee--3 .platform-track {
  animation-delay: -2.2s;
}
.platform-marquee:hover .platform-track {
  animation-play-state: paused;
}

.platform-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll 17.6s linear infinite;
}
.platform-track.rev {
  animation-direction: reverse;
}

.platform-logo {
  flex: 0 0 auto;
  margin-right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.platform-logo img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  display: block;
}
.platform-logo:hover {
  border-color: rgba(255, 106, 18, 0.45);
}
@media (max-width: 560px) {
  .platform-logo {
    width: 132px;
    height: 68px;
    margin-right: 16px;
  }
}

/* ---------- CTA ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 80px 56px;
  text-align: center;
  /* dark glass same look/colour as the client-section cards */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0)), var(--black-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cta-banner h2, .cta-banner .btn {
  position: relative;
  z-index: 2;
}
.cta-banner h2 {
  margin-bottom: 34px;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.15;
}
.cta-banner {
  /* "Start Your Journey" standard brand button, same as the Contact page buttons */
}
.cta-banner .btn:hover {
  transform: translateY(-2px);
}

/* keep the looping video, but under a neutral DARK overlay so the card reads dark like the clients */
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0)), linear-gradient(180deg, rgba(12, 12, 16, 0.82) 0%, rgba(12, 12, 16, 0.9) 100%);
}

/* ---------- Service detail blocks ---------- */
.svc-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.svc-detail:nth-child(even) .sd-art {
  order: -1;
}
.svc-detail .sd-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 22px;
}
.svc-detail h2 {
  margin-bottom: 18px;
}
.svc-detail h2 a {
  transition: opacity 0.2s;
}
.svc-detail h2 a:hover {
  opacity: 0.82;
}
.svc-detail p {
  color: var(--muted);
}

.sd-art {
  aspect-ratio: 4/3;
  border-radius: 20px;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-art .big-num {
  font-size: 6rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.info-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--black-3);
  margin-bottom: 18px;
}
.info-card .ic {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.info-card h4 {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-orange);
  margin-bottom: 6px;
}
.info-card p, .info-card a {
  color: var(--muted);
  font-size: 0.95rem;
}
.info-card a:hover {
  color: var(--white);
}

form.lead-form {
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}

.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--black-2);
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--light-orange);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}
.form-note.ok {
  color: var(--light-orange);
}
.form-note.err {
  color: #ff6a6a;
}

/* ---------- Stats strip ---------- */
.stats {
  background: var(--black-2);
  border-block: 1px solid var(--line);
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.stat .num {
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .lbl {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Values ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--black-3);
}
.value .icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.value h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.value p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- "What Drives Us" code-animated icons (motion themed to each card) ---------- */
.drive .icon {
  overflow: visible;
}
.drive .icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Visionary Ideas: bulb pulses (glows), rays twinkle, filament flickers */
.ico-bulb .glass {
  transform-box: fill-box;
  transform-origin: center;
  animation: bulbPulse 1.5s ease-in-out infinite;
  /* fast motion on hover premium interactive feel */
}
.value.drive:hover .ico-bulb .glass {
  animation-duration: 0.7s;
}
.ico-bulb .rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 1.5s ease-in-out infinite;
}
.value.drive:hover .ico-bulb .rays {
  animation-duration: 0.7s;
}
.ico-bulb .fila {
  animation: flick 2.6s steps(1, end) infinite;
}

@keyframes bulbPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes flick {
  0%, 94%, 100% {
    opacity: 1;
  }
  96% {
    opacity: 0.3;
  }
}
/* Intelligent Execution: interlocking gears rotate opposite ways */
.ico-gear .g1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 3.2s linear infinite;
}
.value.drive:hover .ico-gear .g1 {
  animation-duration: 1.1s;
}
.ico-gear .g2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 2.1s linear infinite reverse;
}
.value.drive:hover .ico-gear .g2 {
  animation-duration: 0.7s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Real Partnership: linked rings slowly rotate + drift together (merge) */
.ico-link {
  transform-box: fill-box;
  transform-origin: center;
  animation: linkspin 7s linear infinite;
}
.value.drive:hover .ico-link {
  animation-duration: 2.6s;
}
.ico-link .r1 {
  animation: mergeL 1.8s ease-in-out infinite;
}
.value.drive:hover .ico-link .r1 {
  animation-duration: 0.85s;
}
.ico-link .r2 {
  animation: mergeR 1.8s ease-in-out infinite;
}
.value.drive:hover .ico-link .r2 {
  animation-duration: 0.85s;
}

@keyframes linkspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mergeL {
  0%, 100% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(-1px);
  }
}
@keyframes mergeR {
  0%, 100% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drive .icon svg *, .drive .ico-link {
    animation: none !important;
  }
}
/* ================= SITE-WIDE ANIMATED ICON FORMULA every card icon (home / services / service pages / contact) ================= */
.svc .icon, .value:not(.drive) .icon, .svc-detail .sd-icon, .info-card .ic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-box: fill-box;
  transform-origin: center;
  animation: icoFloat 3.6s ease-in-out infinite;
  transition: box-shadow 0.4s ease, filter 0.4s ease;
  will-change: transform;
}

/* gentle float + breathe */
@keyframes icoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.06);
  }
}
/* looping glossy shine sweep across the tile */
.svc .icon::after, .value:not(.drive) .icon::after, .svc-detail .sd-icon::after, .info-card .ic::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -70%;
  width: 45%;
  height: 140%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  animation: icoShine 4.8s ease-in-out infinite;
}

@keyframes icoShine {
  0%, 58% {
    left: -70%;
  }
  82%, 100% {
    left: 130%;
  }
}
/* keep emoji glyph above the shine */
.svc .icon, .value:not(.drive) .icon, .svc-detail .sd-icon, .info-card .ic {
  z-index: 0;
}

/* staggered start so a grid feels alive, not synchronized */
.value:not(.drive):nth-child(3n+2) .icon, .svc:nth-child(3n+2) .icon, .svc-detail:nth-child(3n+2) .sd-icon, .info-card:nth-of-type(2) .ic {
  animation-delay: 0.5s;
}

.value:not(.drive):nth-child(3n) .icon, .svc:nth-child(3n) .icon, .svc-detail:nth-child(3n) .sd-icon, .info-card:nth-of-type(3) .ic {
  animation-delay: 1s;
}

.info-card:nth-of-type(4) .ic {
  animation-delay: 1.5s;
}

.value:not(.drive):nth-child(3n+2) .icon::after, .svc:nth-child(3n+2) .icon::after, .svc-detail:nth-child(3n+2) .sd-icon::after, .info-card:nth-of-type(2) .ic::after {
  animation-delay: 0.5s;
}

.value:not(.drive):nth-child(3n) .icon::after, .svc:nth-child(3n) .icon::after, .svc-detail:nth-child(3n) .sd-icon::after, .info-card:nth-of-type(3) .ic::after {
  animation-delay: 1s;
}

/* fast motion + glow on hover luxury interactive feel */
.svc:hover .icon, .value:not(.drive):hover .icon, .svc-detail:hover .sd-icon, .info-card:hover .ic {
  animation-duration: 1.3s;
  box-shadow: 0 12px 30px rgba(254, 60, 20, 0.45);
  filter: brightness(1.08);
}

.svc:hover .icon::after, .value:not(.drive):hover .icon::after, .svc-detail:hover .sd-icon::after, .info-card:hover .ic::after {
  animation-duration: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
  .svc .icon, .value:not(.drive) .icon, .svc-detail .sd-icon, .info-card .ic {
    animation: none !important;
  }
  .svc .icon::after, .value:not(.drive) .icon::after, .svc-detail .sd-icon::after, .info-card .ic::after {
    animation: none !important;
    opacity: 0;
  }
}
/* ============================================================
   WEBSITE DEVELOPMENT card one: "a website building itself"
   pure HTML/CSS animated scene (browser → load → assemble)
   master loop = 7s, every element locked to the same timeline
   ============================================================ */
.wd-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.wd-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  perspective: 900px;
  background: radial-gradient(120% 90% at 25% 0%, rgba(254, 60, 20, 0.16), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(254, 60, 20, 0.1), transparent 60%), #0b0b0e;
  /* subtle grid backdrop */
}
.wd-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .wd-scene * {
    animation: none !important;
  }
}

/* ---- browser window ---- */
.wd-browser {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 15%;
  bottom: 17%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(17, 17, 21, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: rotateX(7deg);
  transform-origin: 50% 0;
  animation: wdTilt var(--D) ease-in-out infinite;
}

@keyframes wdTilt {
  0%, 100% {
    transform: rotateX(7deg) translateY(0);
  }
  50% {
    transform: rotateX(3deg) translateY(-3px);
  }
}
.wd-top {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 9%;
  min-height: 20px;
  padding: 0 3.5%;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
  flex: 0 0 auto;
}
.wd-dot:nth-child(2) {
  background: #febc2e;
}
.wd-dot:nth-child(3) {
  background: #28c840;
}

.wd-url {
  flex: 1;
  margin-left: 6px;
  height: 62%;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  overflow: hidden;
}

.wd-lock {
  width: 6px;
  height: 6px;
  border: 1.4px solid var(--light-orange);
  border-radius: 2px 2px 0 0;
  flex: 0 0 auto;
}

.wd-addr {
  font: 600 8px/1 monospace;
  color: #d7dade;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: wdType var(--D) steps(22, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-addr {
    width: 70%;
  }
}

@keyframes wdType {
  0% {
    width: 0;
  }
  17% {
    width: 104px;
  }
  84% {
    width: 104px;
  }
  92%, 100% {
    width: 0;
  }
}
.wd-caret {
  width: 1.4px;
  height: 9px;
  background: var(--light-orange);
  flex: 0 0 auto;
  animation: wdBlink 0.7s steps(1, end) infinite;
}

@keyframes wdBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
/* loading bar under the toolbar */
.wd-load {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.wd-load i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(254, 60, 20, 0.9);
  animation: wdLoad var(--D) ease-in-out infinite;
}

@keyframes wdLoad {
  0% {
    width: 0;
    opacity: 1;
  }
  20% {
    width: 100%;
    opacity: 1;
  }
  34% {
    width: 100%;
    opacity: 0;
  }
  90% {
    width: 100%;
    opacity: 0;
  }
  92% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 0;
  }
}
/* rendered page viewport */
.wd-view {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(9% + 2px);
  bottom: 0;
  padding: 6% 6% 7%;
  display: flex;
  flex-direction: column;
  gap: 7%;
}

/* nav bar */
.wd-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(-8px);
  animation: wdNav var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-nav {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdNav {
  0%, 22% {
    opacity: 0;
    transform: translateY(-8px);
  }
  30%, 86% {
    opacity: 1;
    transform: none;
  }
  94%, 100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.wd-logo {
  width: 26px;
  height: 8px;
  border-radius: 3px;
  background: var(--grad);
}

.wd-sp {
  flex: 1;
}

.wd-link {
  width: 14px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

/* hero */
.wd-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wd-h1 {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.55));
  width: 0;
  animation: wdH1 var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-h1 {
    width: 70%;
  }
}

@keyframes wdH1 {
  0%, 28% {
    width: 0;
  }
  45%, 86% {
    width: 78%;
  }
  94%, 100% {
    width: 0;
  }
}
.wd-h2 {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  width: 0;
  animation: wdH2 var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-h2 {
    width: 70%;
  }
}

@keyframes wdH2 {
  0%, 44% {
    width: 0;
  }
  54%, 86% {
    width: 54%;
  }
  94%, 100% {
    width: 0;
  }
}
.wd-btn {
  margin-top: 3px;
  width: 44px;
  height: 14px;
  border-radius: 7px;
  background: var(--grad);
  box-shadow: 0 4px 12px rgba(254, 60, 20, 0.5);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: left;
  animation: wdBtn var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-btn {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdBtn {
  0%, 52% {
    opacity: 0;
    transform: scale(0.5);
  }
  60%, 86% {
    opacity: 1;
    transform: scale(1);
  }
  94%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
/* content grid */
.wd-grid {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.wd-card {
  flex: 1;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transform-origin: bottom;
}
.wd-card:nth-child(1) {
  animation: wdC1 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.wd-card:nth-child(2) {
  animation: wdC2 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.wd-card:nth-child(3) {
  animation: wdC3 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wd-card {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdC1 {
  0%, 58% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  66%, 86% {
    opacity: 1;
    transform: none;
  }
  94%, 100% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
}
@keyframes wdC2 {
  0%, 63% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  71%, 86% {
    opacity: 1;
    transform: none;
  }
  94%, 100% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
}
@keyframes wdC3 {
  0%, 68% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  76%, 86% {
    opacity: 1;
    transform: none;
  }
  94%, 100% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
}
/* glossy glare sweeping the whole browser */
.wd-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

@keyframes wdGlare {
  0%, 40% {
    left: -60%;
  }
  70%, 100% {
    left: 130%;
  }
}
/* floating </> code chip */
.wd-chip {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(254, 60, 20, 0.35);
  animation: wdFloat 3.4s ease-in-out infinite;
  z-index: 4;
}
.wd-chip b {
  font: 700 12px/1 monospace;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 560px) {
  .wd-chip {
    width: 26px;
    height: 26px;
  }
  .wd-chip b {
    font-size: 10px;
  }
}

@keyframes wdFloat {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-7px) rotate(4deg);
  }
}
/* build cursor gliding over the page */
.wd-cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 0 72%, 20% 56%, 34% 88%, 48% 82%, 35% 52%, 60% 52%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  animation: wdPointer var(--D) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes wdPointer {
  0%, 22% {
    left: 64%;
    top: 70%;
    opacity: 0;
  }
  30% {
    left: 26%;
    top: 30%;
    opacity: 1;
  }
  56% {
    left: 32%;
    top: 60%;
    opacity: 1;
  } /* moves toward the button */
  62% {
    left: 34%;
    top: 66%;
    opacity: 1;
    transform: scale(0.82);
  } /* click */
  64% {
    transform: scale(1);
  }
  86% {
    left: 60%;
    top: 44%;
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
/* ============================================================
   PERFORMANCE MARKETING card two: live campaign dashboard
   pure HTML/CSS: conversions count up, growth line draws itself,
   glowing tip dot, trend badge counts, KPI pills pop. loop = 7s
   ============================================================ */
@property --pmConv {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --pmUp {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.pm-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.pm-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 80% 0%, rgba(254, 60, 20, 0.18), transparent 55%), #0b0b0e;
}
.pm-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
  mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .pm-scene * {
    animation: none !important;
  }
}

.pm-panel {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 13%;
  bottom: 15%;
  border-radius: 14px;
  padding: 5% 6%;
  display: flex;
  flex-direction: column;
  background: rgba(17, 17, 21, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pm-lbl {
  display: block;
  font: 700 7px/1 monospace;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.pm-big {
  display: block;
  margin-top: 3px;
  font: 800 20px/1 "Inter", sans-serif;
  color: #fff;
}
@media (max-width: 560px) {
  .pm-big {
    font-size: 17px;
  }
}

.pm-conv {
  counter-reset: c var(--pmConv);
  animation: pmConvA var(--D) linear infinite;
}
.pm-conv::after {
  content: counter(c);
}

@keyframes pmConvA {
  0%, 12% {
    --pmConv:0;
  }
  52%, 100% {
    --pmConv:512;
  }
}
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 20px;
  font: 700 9px/1 monospace;
  color: #39d353;
  background: rgba(40, 200, 64, 0.16);
  border: 1px solid rgba(40, 200, 64, 0.4);
}

.pm-tri {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 6px solid #39d353;
}

.pm-up {
  counter-reset: u var(--pmUp);
  animation: pmUpA var(--D) linear infinite;
}
.pm-up::after {
  content: counter(u);
}

@keyframes pmUpA {
  0%, 12% {
    --pmUp:0;
  }
  50%, 100% {
    --pmUp:72;
  }
}
.pm-chart {
  position: relative;
  flex: 1;
  margin: 7% 0;
  border-radius: 8px;
  background: repeating-linear-gradient(to top, transparent 0, transparent 24%, rgba(255, 255, 255, 0.06) 24%, rgba(255, 255, 255, 0.06) calc(24% + 1px));
}

.pm-graph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pm-area {
  opacity: 0;
  animation: pmArea var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pm-area {
    opacity: 0.9;
  }
}

@keyframes pmArea {
  0%, 10% {
    opacity: 0;
  }
  42%, 100% {
    opacity: 0.9;
  }
}
.pm-line {
  fill: none;
  stroke: #ff6a2b;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(254, 60, 20, 0.8));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pmDraw var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pm-line {
    stroke-dashoffset: 0;
  }
}

@keyframes pmDraw {
  0%, 10% {
    stroke-dashoffset: 100;
  }
  44%, 100% {
    stroke-dashoffset: 0;
  }
}
.pm-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  left: 0;
  top: 82%;
  opacity: 0;
  box-shadow: 0 0 0 3px rgba(254, 60, 20, 0.35), 0 0 10px rgba(254, 60, 20, 0.9);
  animation: pmDot var(--D) linear infinite, pmPulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pm-dot {
    opacity: 1;
    left: 100%;
    top: 10%;
  }
}

@keyframes pmDot {
  0%, 10% {
    left: 0%;
    top: 82%;
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  16% {
    left: 17%;
    top: 67%;
  }
  21% {
    left: 34%;
    top: 72%;
  }
  27% {
    left: 51%;
    top: 45%;
  }
  33% {
    left: 68%;
    top: 50%;
  }
  38% {
    left: 85%;
    top: 22%;
  }
  44%, 100% {
    left: 100%;
    top: 10%;
    opacity: 1;
  }
}
@keyframes pmPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
}
.pm-kpis {
  display: flex;
  gap: 5px;
}

.pm-kpi {
  flex: 1;
  padding: 4px 3px;
  border-radius: 6px;
  text-align: center;
  font: 700 7.5px/1.2 monospace;
  letter-spacing: 0.5px;
  color: #cfd2d6;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(8px);
}
.pm-kpi.up {
  color: #39d353;
}
.pm-kpi b {
  color: #fff;
}
.pm-kpi:nth-child(1) {
  animation: pmK1 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.pm-kpi:nth-child(2) {
  animation: pmK2 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.pm-kpi:nth-child(3) {
  animation: pmK3 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pm-kpi {
    opacity: 1;
    transform: none;
  }
}

@keyframes pmK1 {
  0%, 46% {
    opacity: 0;
    transform: translateY(8px);
  }
  54%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pmK2 {
  0%, 52% {
    opacity: 0;
    transform: translateY(8px);
  }
  60%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pmK3 {
  0%, 58% {
    opacity: 0;
    transform: translateY(8px);
  }
  66%, 100% {
    opacity: 1;
    transform: none;
  }
}
.pm-chip {
  position: absolute;
  top: 7%;
  left: 5%;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(254, 60, 20, 0.35);
  animation: pmFloat 3.2s ease-in-out infinite;
  z-index: 4;
}
.pm-chip b {
  font: 800 15px/1 "Inter", sans-serif;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 560px) {
  .pm-chip {
    width: 26px;
    height: 26px;
  }
}

@keyframes pmFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}
.pm-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

/* ============================================================
   MARKETPLACE MANAGEMENT card three: live storefront tile
   pure HTML/CSS: product loads, stars fill, cursor taps buy,
   cart badge +1 flies to cart, orders counter climbs. loop = 7s
   ============================================================ */
@property --mkOrders {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --mkCart {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.mk-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.mk-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(254, 60, 20, 0.16), transparent 55%), #0b0b0e;
}
.mk-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
  mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mk-scene * {
    animation: none !important;
  }
}

.mk-panel {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 13%;
  bottom: 15%;
  border-radius: 14px;
  padding: 5% 6%;
  display: flex;
  flex-direction: column;
  gap: 8%;
  background: rgba(17, 17, 21, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* top bar */
.mk-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mk-logo {
  width: 30px;
  height: 9px;
  border-radius: 3px;
  background: var(--grad);
}

.mk-ord {
  margin-left: auto;
  font: 700 7.5px/1 monospace;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.mk-ord b {
  color: #fff;
}

.mk-orders {
  counter-reset: o var(--mkOrders);
  animation: mkOrdersA var(--D) linear infinite;
}
.mk-orders::after {
  content: counter(o);
}

@keyframes mkOrdersA {
  0%, 12% {
    --mkOrders:0;
  }
  64%, 100% {
    --mkOrders:1240;
  }
}
.mk-cart {
  position: relative;
  flex: 0 0 auto;
  animation: mkCartB var(--D) ease infinite;
}

.mk-cicon {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}
@media (max-width: 560px) {
  .mk-cicon {
    width: 18px;
    height: 18px;
  }
}

@keyframes mkCartB {
  0%, 70% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px) scale(1.08);
  }
  82%, 100% {
    transform: translateY(0) scale(1);
  }
}
.mk-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border-radius: 7px;
  background: var(--grad);
  color: #fff;
  font: 800 8px/13px "Inter", sans-serif;
  text-align: center;
  box-shadow: 0 0 8px rgba(254, 60, 20, 0.8);
  counter-reset: b var(--mkCart);
  opacity: 0;
  transform: scale(0);
  animation: mkBadgeNum var(--D) linear infinite, mkBadgePop var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.mk-badge::after {
  content: counter(b);
}
@media (prefers-reduced-motion: reduce) {
  .mk-badge {
    opacity: 1;
    transform: none;
  }
}

@keyframes mkBadgeNum {
  0%, 60% {
    --mkCart:0;
  }
  61%, 100% {
    --mkCart:1;
  }
}
@keyframes mkBadgePop {
  0%, 60% {
    opacity: 0;
    transform: scale(0);
  }
  66% {
    opacity: 1;
    transform: scale(1.35);
  }
  72%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* product card */
.mk-card {
  flex: 1;
  display: flex;
  gap: 9px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: mkCardIn var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-card {
    opacity: 1;
    transform: none;
  }
}

@keyframes mkCardIn {
  0%, 16% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  24%, 100% {
    opacity: 1;
    transform: none;
  }
}
.mk-img {
  flex: 0 0 40%;
  border-radius: 8px;
  background: linear-gradient(115deg, #26262d 30%, #3a3a45 50%, #26262d 70%);
  background-size: 220% 100%;
  animation: mkShine 2.4s linear infinite;
}

@keyframes mkShine {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.mk-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mk-tag {
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: 20px;
  font: 800 7px/1 "Inter", sans-serif;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 4px 10px rgba(254, 60, 20, 0.5);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: left;
  animation: mkTag var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-tag {
    opacity: 1;
    transform: none;
  }
}

@keyframes mkTag {
  0%, 26% {
    opacity: 0;
    transform: scale(0.5);
  }
  32%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
.mk-t1, .mk-t2 {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
  width: 0;
}

.mk-t1 {
  animation: mkT1 var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-t1 {
    width: 90%;
  }
}

.mk-t2 {
  background: rgba(255, 255, 255, 0.2);
  animation: mkT2 var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-t2 {
    width: 60%;
  }
}

@keyframes mkT1 {
  0%, 28% {
    width: 0;
  }
  38%, 100% {
    width: 90%;
  }
}
@keyframes mkT2 {
  0%, 34% {
    width: 0;
  }
  42%, 100% {
    width: 60%;
  }
}
.mk-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 11px;
}
.mk-stars i {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mk-stars i:nth-child(1) {
  animation: mkStar var(--D) ease infinite;
}
.mk-stars i:nth-child(2) {
  animation: mkStar2 var(--D) ease infinite;
}
.mk-stars i:nth-child(3) {
  animation: mkStar3 var(--D) ease infinite;
}
.mk-stars i:nth-child(4) {
  animation: mkStar4 var(--D) ease infinite;
}
.mk-stars i:nth-child(5) {
  animation: mkStar5 var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-stars i {
    background: #ffb400;
  }
}
.mk-stars em {
  margin-left: 3px;
  font: 600 7px/1 monospace;
  font-style: normal;
  color: var(--muted);
}

@keyframes mkStar {
  0%, 40% {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  43% {
    background: #ffb400;
    transform: scale(1.45);
  }
  47%, 100% {
    background: #ffb400;
    transform: scale(1);
  }
}
@keyframes mkStar2 {
  0%, 43% {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  46% {
    background: #ffb400;
    transform: scale(1.45);
  }
  50%, 100% {
    background: #ffb400;
    transform: scale(1);
  }
}
@keyframes mkStar3 {
  0%, 46% {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  49% {
    background: #ffb400;
    transform: scale(1.45);
  }
  53%, 100% {
    background: #ffb400;
    transform: scale(1);
  }
}
@keyframes mkStar4 {
  0%, 49% {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  52% {
    background: #ffb400;
    transform: scale(1.45);
  }
  56%, 100% {
    background: #ffb400;
    transform: scale(1);
  }
}
@keyframes mkStar5 {
  0%, 52% {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  55% {
    background: #ffb400;
    transform: scale(1.45);
  }
  59%, 100% {
    background: #ffb400;
    transform: scale(1);
  }
}
.mk-price {
  font: 800 13px/1 "Inter", sans-serif;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  animation: mkPrice var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-price {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 560px) {
  .mk-price {
    font-size: 12px;
  }
}

@keyframes mkPrice {
  0%, 52% {
    opacity: 0;
    transform: translateY(4px);
  }
  58%, 100% {
    opacity: 1;
    transform: none;
  }
}
.mk-buy {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 12px;
  border-radius: 7px;
  font: 800 8px/1 "Inter", sans-serif;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 16px rgba(254, 60, 20, 0.5);
  opacity: 0;
  transform: scale(0.6);
  transform-origin: left;
  animation: mkBuy var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-buy {
    opacity: 1;
    transform: none;
  }
}

@keyframes mkBuy {
  0%, 36% {
    opacity: 0;
    transform: scale(0.6);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
  60%, 61% {
    transform: scale(1);
  }
  62% {
    transform: scale(0.9);
  }
  64%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* flying +1 bubble button -> cart */
.mk-plus {
  position: absolute;
  padding: 2px 5px;
  border-radius: 20px;
  font: 800 8px/1 "Inter", sans-serif;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 4px 12px rgba(254, 60, 20, 0.6);
  opacity: 0;
  z-index: 6;
  animation: mkPlus var(--D) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-plus {
    display: none;
  }
}

@keyframes mkPlus {
  0%, 60% {
    left: 58%;
    top: 72%;
    opacity: 0;
    transform: scale(0.5);
  }
  63% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    left: 80%;
    top: 20%;
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
  }
}
/* tapping cursor */
.mk-cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 0 72%, 20% 56%, 34% 88%, 48% 82%, 35% 52%, 60% 52%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  animation: mkCursor var(--D) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mk-cursor {
    display: none;
  }
}

@keyframes mkCursor {
  0%, 42% {
    left: 72%;
    top: 90%;
    opacity: 0;
  }
  50% {
    left: 60%;
    top: 75%;
    opacity: 1;
  }
  60% {
    left: 60%;
    top: 75%;
    opacity: 1;
  }
  62% {
    transform: scale(0.8);
  }
  64% {
    transform: scale(1);
  }
  86% {
    left: 82%;
    top: 32%;
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
.mk-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

/* ============================================================
   CONTENT CREATION card four: social reel / video player
   pure HTML/CSS: play tapped, scrubber fills, waveform bounces,
   heart likes + hearts float, likes/views counters climb. loop=7s
   ============================================================ */
@property --ccLikes {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --ccViews {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.cc-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.cc-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 70% 0%, rgba(254, 60, 20, 0.16), transparent 55%), #0b0b0e;
}
.cc-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
  mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .cc-scene * {
    animation: none !important;
  }
}

.cc-player {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 11%;
  bottom: 11%;
  border-radius: 16px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(17, 17, 21, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (max-width: 560px) {
  .cc-player {
    left: 16%;
    right: 16%;
  }
}

/* video area */
.cc-video {
  position: relative;
  flex: 1;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(125deg, #241f2b 20%, #3a2b34 45%, #241f2b 70%);
  background-size: 220% 100%;
  animation: ccShine 2.6s linear infinite;
}

@keyframes ccShine {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.cc-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 20px;
  font: 800 6.5px/1 "Inter", sans-serif;
  letter-spacing: 0.6px;
  color: #fff;
  background: rgba(254, 60, 20, 0.9);
  box-shadow: 0 0 10px rgba(254, 60, 20, 0.7);
}

/* play button */
.cc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 0;
  border-radius: 50%;
  cursor: default;
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  animation: ccRing 1.5s ease-out infinite, ccPlay var(--D) ease infinite;
}
.cc-play::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #17171b;
}
@media (prefers-reduced-motion: reduce) {
  .cc-play {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .cc-play {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
  }
}

@keyframes ccRing {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  70%, 100% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
}
@keyframes ccPlay {
  0%, 20% {
    opacity: 1;
    transform: scale(1);
  }
  23% {
    transform: scale(0.8);
  }
  25% {
    transform: scale(1);
  }
  28% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  95%, 100% {
    opacity: 1;
  }
}
/* engagement rail */
.cc-rail {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cc-heart {
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  animation: ccBeat 1s ease-in-out infinite, ccLike var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-heart {
    color: #ff3b5c;
  }
}

@keyframes ccBeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
@keyframes ccLike {
  0%, 38% {
    color: rgba(255, 255, 255, 0.45);
  }
  42%, 100% {
    color: #ff3b5c;
    text-shadow: 0 0 8px rgba(255, 59, 92, 0.8);
  }
}
.cc-likes {
  font: 800 7px/1 "Inter", sans-serif;
  color: #fff;
  counter-reset: l var(--ccLikes);
  animation: ccLikesA var(--D) linear infinite;
}
.cc-likes::after {
  content: counter(l);
}

@keyframes ccLikesA {
  0%, 30% {
    --ccLikes:0;
  }
  72%, 100% {
    --ccLikes:892;
  }
}
.cc-cmt, .cc-shr {
  width: 11px;
  height: 11px;
  border: 1.6px solid rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.cc-cmt {
  border-radius: 3px 3px 3px 0;
}

.cc-shr {
  border-radius: 50%;
  border-style: dashed;
}

/* floating hearts */
.cc-fh {
  position: absolute;
  right: 11px;
  bottom: 22px;
  z-index: 2;
  font-size: 9px;
  color: #ff3b5c;
  opacity: 0;
}
.cc-fh1 {
  animation: ccFH var(--D) ease-out infinite;
}
.cc-fh2 {
  animation: ccFH2 var(--D) ease-out infinite;
}
.cc-fh3 {
  animation: ccFH3 var(--D) ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-fh {
    display: none;
  }
}

@keyframes ccFH {
  0%, 40% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  60% {
    transform: translateY(-38px) translateX(-6px) scale(1.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ccFH2 {
  0%, 50% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  70% {
    transform: translateY(-42px) translateX(5px) scale(1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ccFH3 {
  0%, 60% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  80% {
    transform: translateY(-36px) translateX(-3px) scale(1.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* audio waveform / equalizer */
.cc-wave {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.cc-wave i {
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(#ff6a2b, #fe3c14);
  animation: ccEq 0.7s ease-in-out infinite;
}
.cc-wave i:nth-child(1) {
  animation-delay: -0.1s;
}
.cc-wave i:nth-child(2) {
  animation-delay: -0.5s;
}
.cc-wave i:nth-child(3) {
  animation-delay: -0.25s;
}
.cc-wave i:nth-child(4) {
  animation-delay: -0.65s;
}
.cc-wave i:nth-child(5) {
  animation-delay: -0.35s;
}
.cc-wave i:nth-child(6) {
  animation-delay: -0.55s;
}
.cc-wave i:nth-child(7) {
  animation-delay: -0.15s;
}
.cc-wave i:nth-child(8) {
  animation-delay: -0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .cc-wave i {
    height: 60%;
  }
}

@keyframes ccEq {
  0%, 100% {
    height: 20%;
  }
  50% {
    height: 100%;
  }
}
/* scrubber */
.cc-bar {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.cc-bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--grad);
  animation: ccFill var(--D) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-bar i {
    width: 100%;
  }
}

.cc-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(254, 60, 20, 0.9);
  animation: ccKnob var(--D) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-knob {
    left: 100%;
  }
}

@keyframes ccFill {
  0%, 24% {
    width: 0;
  }
  88% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes ccKnob {
  0%, 24% {
    left: 0;
  }
  88% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* meta row */
.cc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 7px/1 monospace;
  color: var(--muted);
}

.cc-views b {
  color: #fff;
}

.cc-vc {
  counter-reset: v var(--ccViews);
  animation: ccViewsA var(--D) linear infinite;
}
.cc-vc::after {
  content: counter(v);
}

@keyframes ccViewsA {
  0%, 24% {
    --ccViews:0;
  }
  80%, 100% {
    --ccViews:12480;
  }
}
/* floating chip + glare */
.cc-chip {
  position: absolute;
  top: 8%;
  left: 6%;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(254, 60, 20, 0.35);
  animation: ccFloat 3.3s ease-in-out infinite;
  z-index: 4;
}
.cc-chip b {
  font: 800 13px/1 "Inter", sans-serif;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes ccFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}
.cc-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

/* ============================================================
   INFLUENCER MARKETING card five: creator profile / collab
   pure HTML/CSS: story-ring avatar, verified pop, follower &
   reach counters climb, Follow->Following tap, platform chips,
   audience dots join. loop = 7s
   ============================================================ */
@property --imFol {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --imRea {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.im-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.im-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 30% 0%, rgba(254, 60, 20, 0.16), transparent 55%), #0b0b0e;
}
.im-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
  mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .im-scene * {
    animation: none !important;
  }
}

.im-panel {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 16%;
  border-radius: 14px;
  padding: 6%;
  display: flex;
  flex-direction: column;
  gap: 8%;
  background: rgba(17, 17, 21, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* header */
.im-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-ava {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 0deg, #fe3c14, #ff9d00, #ff2d6f, #7a3cff, #fe3c14);
  animation: imSpin 4s linear infinite;
}
@media (max-width: 560px) {
  .im-ava {
    width: 30px;
    height: 30px;
  }
}

.im-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2530, #3d2b39);
  box-shadow: inset 0 0 0 2px #17171b;
}

@keyframes imSpin {
  to {
    transform: rotate(360deg);
  }
}
.im-verify {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #33a1ff;
  color: #fff;
  font: 800 8px/13px "Inter", sans-serif;
  font-style: normal;
  text-align: center;
  border: 2px solid #17171b;
  opacity: 0;
  transform: scale(0);
  animation: imVer var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-verify {
    opacity: 1;
    transform: none;
  }
}

@keyframes imVer {
  0%, 16% {
    opacity: 0;
    transform: scale(0);
  }
  22%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
.im-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.im-name {
  font: 800 9px/1 "Inter", sans-serif;
  color: #fff;
  opacity: 0;
  transform: translateX(-6px);
  animation: imName var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-name {
    opacity: 1;
    transform: none;
  }
}

.im-handle {
  font: 600 6.5px/1 monospace;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-6px);
  animation: imHandle var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-handle {
    opacity: 1;
    transform: none;
  }
}

@keyframes imName {
  0%, 12% {
    opacity: 0;
    transform: translateX(-6px);
  }
  20%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes imHandle {
  0%, 16% {
    opacity: 0;
    transform: translateX(-6px);
  }
  24%, 100% {
    opacity: 1;
    transform: none;
  }
}
/* follow button toggling to following */
.im-follow {
  position: relative;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 7px;
  border: 0;
  cursor: default;
  overflow: hidden;
  font: 800 7.5px/1 "Inter", sans-serif;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 14px rgba(254, 60, 20, 0.45);
  animation: imBtnBg var(--D) step-end infinite;
}
.im-follow em {
  font-style: normal;
  display: block;
}
.im-follow .f1 {
  animation: imF1 var(--D) step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-follow .f1 {
    opacity: 0;
  }
}
.im-follow .f2 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: imF2 var(--D) step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-follow .f2 {
    opacity: 1;
  }
}

@keyframes imF1 {
  0%, 55% {
    opacity: 1;
  }
  56%, 100% {
    opacity: 0;
  }
}
@keyframes imF2 {
  0%, 55% {
    opacity: 0;
  }
  56%, 100% {
    opacity: 1;
  }
}
@keyframes imBtnBg {
  0%, 55% {
    background: var(--grad);
    box-shadow: 0 6px 14px rgba(254, 60, 20, 0.45);
  }
  56%, 100% {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  }
}
/* stats row */
.im-stats {
  display: flex;
  gap: 6px;
}

.im-st {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.im-st b {
  font: 800 11px/1 "Inter", sans-serif;
  color: #fff;
}
@media (max-width: 560px) {
  .im-st b {
    font-size: 10px;
  }
}
.im-st em {
  font: 600 6px/1 monospace;
  font-style: normal;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
}

.im-followers {
  font-style: normal;
  counter-reset: f var(--imFol);
  animation: imFolA var(--D) linear infinite;
}
.im-followers::after {
  content: counter(f);
}

@keyframes imFolA {
  0%, 20% {
    --imFol:0;
  }
  60%, 100% {
    --imFol:248;
  }
}
.im-reach {
  font-style: normal;
  counter-reset: r var(--imRea);
  animation: imReaA var(--D) linear infinite;
}
.im-reach::after {
  content: counter(r);
}

@keyframes imReaA {
  0%, 24% {
    --imRea:0;
  }
  64%, 100% {
    --imRea:890;
  }
}
/* engagement bar */
.im-eng {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.im-eng i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #fe3c14, #ff9d00);
  animation: imEng var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-eng i {
    width: 72%;
  }
}

@keyframes imEng {
  0%, 26% {
    width: 0;
  }
  70%, 100% {
    width: 72%;
  }
}
/* platform chips */
.im-plats {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.im-plats i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 10px/1 "Inter", sans-serif;
  color: #fff;
  opacity: 0;
  transform: translateY(8px) scale(0.7);
}
.im-plats i:nth-child(1) {
  animation: imPlat var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.im-plats i:nth-child(2) {
  animation: imPlat2 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.im-plats i:nth-child(3) {
  animation: imPlat3 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-plats i {
    opacity: 1;
    transform: none;
  }
}

@keyframes imPlat {
  0%, 30% {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
  }
  38%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes imPlat2 {
  0%, 36% {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
  }
  44%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes imPlat3 {
  0%, 42% {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
  }
  50%, 100% {
    opacity: 1;
    transform: none;
  }
}
.im-ig {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf);
}

.im-tt {
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 2px 0 0 -1px #ff2d55, -2px 0 0 -1px #25f4ee;
}

.im-yt {
  background: #ff0000;
  position: relative;
}
.im-yt::before {
  content: "";
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
}

/* audience dots joining after the follow tap */
.im-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9d00, #fe3c14);
  box-shadow: 0 0 8px rgba(254, 60, 20, 0.7), 0 0 0 2px #0b0b0e;
  opacity: 0;
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
  .im-dot {
    opacity: 1;
    transform: scale(1);
  }
}

.im-d1 {
  right: 14%;
  top: 20%;
  animation: imDot var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.im-d2 {
  right: 8%;
  top: 34%;
  animation: imDot2 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.im-d3 {
  right: 18%;
  top: 46%;
  animation: imDot3 var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes imDot {
  0%, 57% {
    opacity: 0;
    transform: scale(0);
  }
  63%, 88% {
    opacity: 1;
    transform: scale(1);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes imDot2 {
  0%, 61% {
    opacity: 0;
    transform: scale(0);
  }
  67%, 88% {
    opacity: 1;
    transform: scale(1);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes imDot3 {
  0%, 65% {
    opacity: 0;
    transform: scale(0);
  }
  71%, 88% {
    opacity: 1;
    transform: scale(1);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(0);
  }
}
/* tapping cursor */
.im-cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 0 72%, 20% 56%, 34% 88%, 48% 82%, 35% 52%, 60% 52%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  animation: imCursor var(--D) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .im-cursor {
    display: none;
  }
}

@keyframes imCursor {
  0%, 40% {
    left: 74%;
    top: 70%;
    opacity: 0;
  }
  50% {
    left: 80%;
    top: 24%;
    opacity: 1;
  }
  55% {
    left: 80%;
    top: 24%;
    opacity: 1;
  }
  56% {
    transform: scale(0.8);
  }
  58% {
    transform: scale(1);
  }
  86% {
    left: 60%;
    top: 60%;
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
.im-chip {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(254, 60, 20, 0.35);
  animation: imFloat 3.3s ease-in-out infinite;
  z-index: 3;
}
.im-chip b {
  font: 800 15px/1 "Inter", sans-serif;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes imFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}
.im-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

/* ============================================================
   SHOPIFY DEVELOPMENT card six: checkout -> sale completed
   pure HTML/CSS: order builds, checkout tapped, spinner ->
   success tick draws + ring burst + confetti, cha-ching toast
   slides in, today's revenue counter climbs. loop = 7s
   ============================================================ */
@property --shRev {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.sh-art {
  position: relative;
  overflow: hidden;
  padding: 0;
  --D:7s;
}

.sh-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 60% 0%, rgba(150, 220, 120, 0.14), transparent 55%), radial-gradient(90% 80% at 10% 100%, rgba(254, 60, 20, 0.12), transparent 60%), #0b0b0e;
}
.sh-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
  mask: radial-gradient(75% 75% at 50% 45%, #000, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .sh-scene * {
    animation: none !important;
  }
}

.sh-panel {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 12%;
  bottom: 12%;
  border-radius: 14px;
  padding: 8% 7%;
  display: flex;
  flex-direction: column;
  gap: 7%;
  background: rgba(17, 17, 21, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (max-width: 560px) {
  .sh-panel {
    left: 10%;
    right: 10%;
  }
}

/* top bar */
.sh-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sh-brand {
  width: 26px;
  height: 9px;
  border-radius: 3px;
  background: var(--grad);
}

.sh-today {
  margin-left: auto;
  font: 700 7px/1 monospace;
  letter-spacing: 0.3px;
  color: var(--muted);
  text-transform: uppercase;
}
.sh-today b {
  color: #fff;
}

.sh-rev {
  counter-reset: s var(--shRev);
  animation: shRevA var(--D) linear infinite;
}
.sh-rev::after {
  content: counter(s);
}

@keyframes shRevA {
  0%, 64% {
    --shRev:15901;
  }
  68%, 100% {
    --shRev:18400;
  }
}
.sh-bag {
  flex: 0 0 auto;
}
.sh-bag svg {
  width: 17px;
  height: 17px;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}

/* order items */
.sh-order {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.sh-item {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-8px);
}
.sh-item.i1 {
  animation: shItem var(--D) ease infinite;
}
.sh-item.i2 {
  animation: shItem2 var(--D) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-item {
    opacity: 1;
    transform: none;
  }
}

@keyframes shItem {
  0%, 14% {
    opacity: 0;
    transform: translateX(-8px);
  }
  22%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes shItem2 {
  0%, 20% {
    opacity: 0;
    transform: translateX(-8px);
  }
  28%, 100% {
    opacity: 1;
    transform: none;
  }
}
.sh-thumb {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(120deg, #26262d 30%, #3a3a45 50%, #26262d 70%);
  background-size: 220% 100%;
  animation: shShine 2.4s linear infinite;
}

@keyframes shShine {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.sh-l {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
}

.sh-p {
  font: 700 8px/1 "Inter", sans-serif;
  color: #cfd2d6;
}

.sh-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  font: 700 7px/1 monospace;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0;
  animation: shTotal var(--D) ease infinite;
}
.sh-total b {
  font: 800 11px/1 "Inter", sans-serif;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .sh-total {
    opacity: 1;
  }
}

@keyframes shTotal {
  0%, 30% {
    opacity: 0;
  }
  36%, 100% {
    opacity: 1;
  }
}
/* checkout button with 3 states */
.sh-checkout {
  position: relative;
  height: 26px;
  border: 0;
  border-radius: 8px;
  cursor: default;
  overflow: hidden;
  font: 800 8.5px/1 "Inter", sans-serif;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 16px rgba(254, 60, 20, 0.45);
  animation: shBtn var(--D) step-end infinite;
}
.sh-checkout em {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-style: normal;
}
.sh-checkout .s1 {
  animation: shS1 var(--D) step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-checkout .s1 {
    opacity: 0;
  }
}
.sh-checkout .s2 {
  opacity: 0;
  animation: shS2 var(--D) step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-checkout .s2 {
    opacity: 0;
  }
}
.sh-checkout .s3 {
  opacity: 0;
  animation: shS3 var(--D) step-end infinite;
}
.sh-checkout .s3 svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
@media (prefers-reduced-motion: reduce) {
  .sh-checkout .s3 {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-checkout {
    background: linear-gradient(180deg, #2fbf4f, #1ea23f);
  }
}

@keyframes shBtn {
  0%, 60% {
    background: var(--grad);
    box-shadow: 0 6px 16px rgba(254, 60, 20, 0.45);
  }
  61%, 100% {
    background: linear-gradient(180deg, #2fbf4f, #1ea23f);
    box-shadow: 0 6px 16px rgba(40, 200, 64, 0.5);
  }
}
@keyframes shS1 {
  0%, 52% {
    opacity: 1;
  }
  53%, 100% {
    opacity: 0;
  }
}
@keyframes shS2 {
  0%, 52% {
    opacity: 0;
  }
  53%, 60% {
    opacity: 1;
  }
  61%, 100% {
    opacity: 0;
  }
}
@keyframes shS3 {
  0%, 60% {
    opacity: 0;
  }
  61%, 100% {
    opacity: 1;
  }
}
.sh-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: shSpin 0.6s linear infinite;
}

@keyframes shSpin {
  to {
    transform: rotate(360deg);
  }
}
.sh-tick {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: shTick var(--D) cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-tick {
    stroke-dashoffset: 0;
  }
}

@keyframes shTick {
  0%, 61% {
    stroke-dashoffset: 100;
  }
  70%, 100% {
    stroke-dashoffset: 0;
  }
}
/* success ring burst */
.sh-ring {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 20px;
  height: 20px;
  margin: -10px;
  border-radius: 50%;
  border: 2px solid #2fbf4f;
  opacity: 0;
  z-index: 4;
  animation: shRing var(--D) ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-ring {
    display: none;
  }
}

@keyframes shRing {
  0%, 60% {
    opacity: 0;
    transform: scale(0.3);
  }
  63% {
    opacity: 0.9;
  }
  75% {
    opacity: 0;
    transform: scale(3.4);
  }
  100% {
    opacity: 0;
  }
}
/* confetti */
.sh-cf {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  opacity: 0;
  z-index: 4;
  animation: shCf var(--D) cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
.sh-cf1 {
  --x:-30px;
  --y:-26px;
  --r:160deg;
  background: #fe3c14;
}
.sh-cf2 {
  --x:28px;
  --y:-30px;
  --r:-140deg;
  background: #ff9d00;
}
.sh-cf3 {
  --x:-40px;
  --y:-6px;
  --r:90deg;
  background: #2fbf4f;
}
.sh-cf4 {
  --x:38px;
  --y:-10px;
  --r:-100deg;
  background: #33a1ff;
}
.sh-cf5 {
  --x:-14px;
  --y:-40px;
  --r:200deg;
  background: #ff2d6f;
}
.sh-cf6 {
  --x:16px;
  --y:-42px;
  --r:-60deg;
  background: #ffd23f;
}
@media (prefers-reduced-motion: reduce) {
  .sh-cf {
    display: none;
  }
}

@keyframes shCf {
  0%, 61% {
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(0.4);
  }
  65% {
    opacity: 1;
  }
  78% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
  100% {
    opacity: 0;
  }
}
/* cha-ching toast */
.sh-toast {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 6%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 10px;
  font: 700 8px/1.1 "Inter", sans-serif;
  color: #fff;
  background: rgba(20, 22, 20, 0.92);
  border: 1px solid rgba(47, 191, 79, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(47, 191, 79, 0.35);
  opacity: 0;
  transform: translateY(-14px);
  animation: shToast var(--D) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.sh-toast b {
  color: #4ade80;
}
@media (prefers-reduced-motion: reduce) {
  .sh-toast {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 560px) {
  .sh-toast {
    font-size: 7.5px;
  }
}

.sh-tbag {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(180deg, #2fbf4f, #1ea23f);
  box-shadow: 0 0 8px rgba(47, 191, 79, 0.6);
}

@keyframes shToast {
  0%, 63% {
    opacity: 0;
    transform: translateY(-14px);
  }
  69%, 88% {
    opacity: 1;
    transform: none;
  }
  95%, 100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}
/* cursor */
.sh-cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 0 72%, 20% 56%, 34% 88%, 48% 82%, 35% 52%, 60% 52%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  animation: shCursor var(--D) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-cursor {
    display: none;
  }
}

@keyframes shCursor {
  0%, 38% {
    left: 70%;
    top: 92%;
    opacity: 0;
  }
  50% {
    left: 50%;
    top: 80%;
    opacity: 1;
  }
  52% {
    left: 50%;
    top: 80%;
    transform: scale(0.8);
  }
  54% {
    transform: scale(1);
  }
  84% {
    left: 66%;
    top: 64%;
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
.sh-chip {
  position: absolute;
  bottom: 9%;
  right: 7%;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(47, 191, 79, 0.35);
  animation: shFloat 3.3s ease-in-out infinite;
  z-index: 3;
}
.sh-chip b {
  font: 800 15px/1 "Inter", sans-serif;
  background: linear-gradient(180deg, #5ed17a, #2fbf4f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes shFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}
.sh-glare {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-16deg);
  animation: wdGlare var(--D) ease-in-out infinite;
}

/* ============================================================
   SERVICE CARD ICONS white code-animated SVGs (About-page style)
   replace the six .sd-icon emojis; motion themed to each service
   ============================================================ */
.svc-detail .sd-icon .sdi {
  width: 45px;
  height: 45px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .svc-detail .sd-icon .sdi * {
    animation: none !important;
  }
}

/* 1 · Website Development browser + </> chevrons breathing */
.sdi-web .wv-l, .sdi-web .wv-r {
  transform-box: fill-box;
  transform-origin: center;
}
.sdi-web .wv-l {
  animation: sdiWvL 1.8s ease-in-out infinite;
  /* fast motion on hover premium interactive feel */
}
.svc-detail:hover .sdi-web .wv-l, .svc:hover .sdi-web .wv-l {
  animation-duration: 0.8s;
}
.sdi-web .wv-r {
  animation: sdiWvR 1.8s ease-in-out infinite;
}
.svc-detail:hover .sdi-web .wv-r, .svc:hover .sdi-web .wv-r {
  animation-duration: 0.8s;
}

@keyframes sdiWvL {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.6px);
  }
}
@keyframes sdiWvR {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.6px);
  }
}
/* 2 · Performance Marketing trend line draws up, arrowhead follows */
.sdi-perf .pf-line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: sdiDraw 2.6s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
.svc-detail:hover .sdi-perf .pf-line, .svc:hover .sdi-perf .pf-line {
  animation-duration: 1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .sdi-perf .pf-line {
    stroke-dashoffset: 0;
  }
}
.sdi-perf .pf-head {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: sdiHead 2.6s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
.svc-detail:hover .sdi-perf .pf-head, .svc:hover .sdi-perf .pf-head {
  animation-duration: 1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .sdi-perf .pf-head {
    stroke-dashoffset: 0;
  }
}

@keyframes sdiDraw {
  0%, 8% {
    stroke-dashoffset: 60;
  }
  45%, 100% {
    stroke-dashoffset: 0;
  }
}
@keyframes sdiHead {
  0%, 40% {
    stroke-dashoffset: 24;
  }
  58%, 100% {
    stroke-dashoffset: 0;
  }
}
/* 3 · Marketplace cart rolls back and forth */
.sdi-market .cart {
  transform-box: fill-box;
  transform-origin: center;
  animation: sdiRoll 1.8s ease-in-out infinite;
}
.svc-detail:hover .sdi-market .cart, .svc:hover .sdi-market .cart {
  animation-duration: 0.9s;
}

@keyframes sdiRoll {
  0%, 100% {
    transform: translateX(-1.5px) rotate(-2deg);
  }
  50% {
    transform: translateX(1.5px) rotate(2deg);
  }
}
/* 4 · Content Creation clapperboard snaps open/shut */
.sdi-content .clap-top {
  transform-box: fill-box;
  transform-origin: 9px 21px;
  animation: sdiClap 2.2s ease-in-out infinite;
}
.svc-detail:hover .sdi-content .clap-top, .svc:hover .sdi-content .clap-top {
  animation-duration: 1s;
}

@keyframes sdiClap {
  0%, 55% {
    transform: rotate(0);
  }
  68% {
    transform: rotate(-24deg);
  }
  80%, 100% {
    transform: rotate(0);
  }
}
/* 5 · Influencer Marketing megaphone broadcast waves pulse out */
.sdi-influencer .wave1, .sdi-influencer .wave2 {
  transform-box: fill-box;
  transform-origin: 24px 24px;
}
.sdi-influencer .wave1 {
  animation: sdiWave 1.6s ease-out infinite;
}
.svc-detail:hover .sdi-influencer .wave1, .svc:hover .sdi-influencer .wave1 {
  animation-duration: 0.9s;
}
.sdi-influencer .wave2 {
  animation: sdiWave 1.6s ease-out infinite 0.32s;
}
.svc-detail:hover .sdi-influencer .wave2, .svc:hover .sdi-influencer .wave2 {
  animation-duration: 0.9s;
}

@keyframes sdiWave {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
/* 6 · Shopify Development shopping bag swings, sparkle twinkles */
.sdi-shopify .bag {
  transform-box: fill-box;
  transform-origin: 24px 16px;
  animation: sdiSwing 2.4s ease-in-out infinite;
}
.svc-detail:hover .sdi-shopify .bag, .svc:hover .sdi-shopify .bag {
  animation-duration: 1.1s;
}
.sdi-shopify .spark {
  fill: #fff;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: sdiSpark 2.4s ease-in-out infinite;
}

@keyframes sdiSwing {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@keyframes sdiSpark {
  0%, 60%, 100% {
    opacity: 0;
    transform: scale(0.4);
  }
  78% {
    opacity: 1;
    transform: scale(1.15);
  }
}
/* ============================================================
   CONTACT "Ready To Speedup?" info cards: white animated icons
   pin bobs · envelope seals · phone rings · clock ticks
   ============================================================ */
.info-card .ic .cic {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .info-card .ic .cic {
    animation: none !important;
  }
  .info-card .ic .cic * {
    animation: none !important;
  }
}

/* Office location pin gently bobs, centre dot pulses */
.ci-pin {
  transform-origin: center;
  animation: ciBob 1.9s ease-in-out infinite;
}
.ci-pin circle {
  transform-box: view-box;
  transform-origin: 12px 10px;
  animation: ciDot 1.9s ease-in-out infinite;
}
.ci-pin {
  /* fast motion on hover premium interactive feel */
}
.info-card:hover .ci-pin {
  animation-duration: 0.95s;
}

@keyframes ciBob {
  0%, 100% {
    transform: translateY(1.5px);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes ciDot {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
/* Email envelope flap seals & opens */
.ci-mail .flap {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: ciFlap 2.4s ease-in-out infinite;
}
.info-card:hover .ci-mail .flap {
  animation-duration: 1.1s;
}
@media (prefers-reduced-motion: reduce) {
  .ci-mail .flap {
    stroke-dashoffset: 0;
  }
}

@keyframes ciFlap {
  0% {
    stroke-dashoffset: 26;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 26;
  }
}
/* Phone handset rings (shake) */
.ci-phone {
  transform-origin: center;
  animation: ciRing 1.9s ease-in-out infinite;
}
.info-card:hover .ci-phone {
  animation-duration: 0.9s;
}

@keyframes ciRing {
  0%, 54%, 86%, 100% {
    transform: rotate(0);
  }
  59% {
    transform: rotate(-15deg);
  }
  65% {
    transform: rotate(13deg);
  }
  71% {
    transform: rotate(-9deg);
  }
  77% {
    transform: rotate(6deg);
  }
}
/* Working Hours clock hands tick */
.ci-clock .ch-m, .ci-clock .ch-h {
  transform-box: view-box;
  transform-origin: 12px 12px;
}
.ci-clock .ch-m {
  animation: ciSpin 3s linear infinite;
}
.info-card:hover .ci-clock .ch-m {
  animation-duration: 1.2s;
}
.ci-clock .ch-h {
  animation: ciSpin 9s linear infinite;
}
.info-card:hover .ci-clock .ch-h {
  animation-duration: 3.6s;
}

@keyframes ciSpin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   HOME "Our Services" cards same white animated icons
   (reuses the .sdi-* keyframes from the service pages)
   ============================================================ */
.svc .icon .sdi {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .svc .icon .sdi * {
    animation: none !important;
  }
}

/* ---------- Service pages shared extra layouts ---------- */
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head.center p {
  margin-inline: auto;
}

/* two-up grid (e.g. marketplace engine, 2×2 feature blocks) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 980px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* creator / influencer cards */
.creator {
  text-align: center;
}
.creator .pic {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 0.1rem solid #FFF;
  background: var(--grad);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0 auto 18px;
}
.creator .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creator h3 {
  margin-bottom: 6px;
}
.creator .count {
  color: var(--light-orange);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

/* tech-stack grid (shopify) */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .stack-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }
}

.stack {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--black-3);
}
.stack h4 {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-orange);
  margin-bottom: 16px;
}
.stack ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.stack li {
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.3px;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 30px;
  background: var(--black-2);
}
footer h4 {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-orange);
  margin-bottom: 18px;
}
footer ul {
  list-style: none;
  display: grid;
  gap: 11px;
}
footer ul a,
footer ul li {
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
footer ul a.flex,
footer ul li.flex {
  display: inline-flex;
  justify-content: start;
  align-items: start;
  gap: 0.4rem;
  line-height: 1.6;
}
footer ul a svg,
footer ul li svg {
  width: 20px;
  height: auto;
  flex-shrink: 0;
}
footer ul a:hover {
  color: var(--white);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: 44px;
  margin-bottom: 48px;
}

.foot-brand p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 16px 0 24px;
  max-width: 320px;
}

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.85rem;
}
.foot-bottom .legal a {
  color: var(--muted);
}
.foot-bottom .legal a:hover {
  color: var(--light-orange);
}

/* footer social icons */
.foot-social {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 14px;
}
.foot-social .soc-off {
  cursor: default;
}
.foot-social {
  /* Instagram & X placeholders until real profile URLs */
}
.foot-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.foot-social a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.foot-social a:hover {
  color: #fff;
  border-color: rgba(255, 106, 18, 0.5);
  background: var(--grad);
  transform: translateY(-3px);
}

/* ============================================================
   GLASSMORPHISM translucent frosted glass on cards + footer
   (nav & dropdown already use the same backdrop-blur treatment)
   ============================================================ */
.svc, .value, .quote, .info-card, .stack, form.lead-form {
  /* same glossy translucent glass as the navbar: sheen gradient + strong blur */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0)), rgba(20, 20, 24, 0.4);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
}

.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.client-chip {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

footer {
  background: rgba(18, 18, 20, 0.66);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ---------- Floating WhatsApp button (fixed, all pages) ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* glowing GOLD same gold as the trust-ticker icons */
  background: linear-gradient(145deg, #FBEFB8 0%, #F1CB63 32%, #E9B949 58%, #B8791A 100%);
  color: #2f2205;
  box-shadow: 0 10px 28px rgba(233, 185, 73, 0.5), 0 0 18px rgba(255, 210, 120, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
  animation: waGlow 2.4s ease-in-out infinite; /* always-on golden glow */
}
.wa-float svg {
  width: 32px;
  height: 32px;
  display: block;
  position: relative;
  z-index: 2;
}
.wa-float:hover {
  transform: scale(1.08);
}
.wa-float::after { /* continuous sliding golden shimmer (clipped to circle) */
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 42%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-18deg);
  animation: waShine 3.2s ease-in-out infinite;
}
@media (max-width: 560px) {
  .wa-float {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
  }
  .wa-float svg {
    width: 29px;
    height: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float {
    animation: none;
  }
  .wa-float::after {
    animation: none;
  }
}

@keyframes waGlow {
  0%, 100% {
    box-shadow: 0 10px 28px rgba(233, 185, 73, 0.5), 0 0 16px rgba(255, 210, 120, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 12px 34px rgba(233, 185, 73, 0.78), 0 0 30px rgb(255, 222, 140), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
}
@keyframes waShine {
  0%, 55% {
    left: -60%;
  }
  82%, 100% {
    left: 135%;
  }
}
/* ---------- Speed Up quick services accordion (index) ---------- */
.speedup {
  background: var(--black);
}
.speedup .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) {
  .speedup .container {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.speedup-head {
  position: sticky;
  top: 120px;
}
.speedup-head p {
  margin-top: 18px;
  color: var(--muted);
  max-width: 440px;
}
@media (max-width: 980px) {
  .speedup-head {
    position: static;
  }
}

.su-list {
  border-top: 1px solid var(--line);
}

.su-item {
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}
.su-item[open] {
  background: linear-gradient(90deg, rgba(254, 105, 17, 0.06), transparent 70%);
}
.su-item[open] .su-plus {
  background: var(--grad);
  border-color: transparent;
}
.su-item[open] .su-plus::before, .su-item[open] .su-plus::after {
  background: #fff;
}
.su-item[open] .su-plus::after {
  transform: rotate(0);
}
.su-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 8px;
}
.su-item summary::-webkit-details-marker {
  display: none;
}
.su-item summary:focus-visible {
  outline: 2px solid var(--light-orange);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (max-width: 560px) {
  .su-item summary {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 18px 4px;
  }
}
.su-item:hover .su-title {
  color: var(--light-orange);
}

.su-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--light-orange);
}

.su-title {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.su-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: 6px 12px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .su-tag {
    grid-column: 2/3;
    grid-row: 2;
    justify-self: start;
    margin-top: -6px;
  }
}

.su-plus {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 106, 18, 0.45);
  flex: 0 0 auto;
}
.su-plus::before, .su-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: var(--light-orange);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.su-plus::after {
  transform: rotate(90deg);
}
@media (max-width: 560px) {
  .su-plus {
    grid-column: 3;
    grid-row: 1;
  }
}

.su-panel {
  padding: 0 8px 24px calc(8px + 2.6em);
  color: var(--muted);
}
.su-panel p {
  max-width: 560px;
}
.su-panel .view {
  display: inline-flex;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--light-orange);
  letter-spacing: 0.5px;
}
.su-panel .view:hover {
  text-decoration: underline;
}
@media (max-width: 560px) {
  .su-panel {
    padding: 0 4px 20px;
  }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Title reveal per-letter rise + fade (currently the hero only) ----------
   JS splits a .reveal-text heading into .rl letters that rise a little and fade in,
   staggered, and the whole thing replays whenever the heading re-enters the viewport.
   Gated behind .js so no-JS users see the heading normally. ALL CAPS is done with CSS
   uppercase (works per-letter) so the DOM text keeps real casing for screen readers. */
.reveal-text {
  text-transform: uppercase;
}
.reveal-text.tt-none {
  text-transform: none;
}
.reveal-text {
  /* keep each word's letters together so words never break apart (natural wrap) */
}
.reveal-text .word {
  display: inline-block;
  white-space: nowrap;
}
.reveal-text .rl {
  display: inline-block;
}
.reveal-text {
  /* Letters REST fully visible: crawlers, no-JS, and non-scrolling renderers
     always see the real heading text, and there is no visible->hidden FOUC.
     The rise+fade is an ANIMATION that only plays while a heading is in view
     (.in) and settles back to the visible resting state so a letter is only
     ever transiently hidden during its own reveal, never left hidden. */
}
.js .reveal-text.in .rl {
  animation: rlIn 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-text.in .rl {
    animation: none;
  }
}

@keyframes rlIn {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
/* tablet / collapse nav to hamburger */
@media (max-width: 1080px) {
  nav > ul {
    display: none;
  }
  .menu-toggle {
    display: block;
    order: 3;
    padding: 8px 10px;
    font-size: 1.6rem;
  }
  .nav > .btn {
    order: 2;
  }
  nav.open > ul {
    display: grid;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0)), rgba(16, 16, 20, 0.55);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    padding: 22px;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  nav.open > ul a {
    font-size: 1rem;
    display: block;
    padding: 10px 8px;
    border-radius: 10px;
  }
  nav.open > ul a.active, nav.open > ul a:hover {
    background: var(--grad-soft);
    color: var(--white);
  }
  .has-sub::after {
    display: none;
  }
  .has-sub > a::after {
    content: "";
  }
  .has-sub {
    /* desktop dropdown is a hover/focus flyout (absolute + hidden by default);
       inside the mobile drawer it's shown instead as an always-expanded glass
       panel under "Services" so its pages are actually reachable on mobile —
       same glossy translucent glass as the nav pill / cards site-wide */
  }
  .has-sub .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: grid;
    gap: 2px;
    margin: 8px 0 4px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0)), rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    /* same active/hover treatment as the desktop dropdown (.sub a in _navbar.scss),
       not the generic white-on-grad-soft used by the top-level mobile nav links */
  }
  .has-sub .sub a {
    font-size: 0.92rem;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--muted);
  }
  .has-sub .sub a:hover {
    background: var(--grad-soft);
    color: var(--light-orange);
  }
  .has-sub .sub a.active {
    background: var(--grad-soft);
    color: var(--light-orange);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--light-orange);
  }
}
@media (max-width: 980px) {
  .hero .container, .who .container, .svc-detail, .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-art {
    order: -1;
  }
  .flame-card {
    max-width: 320px;
  }
  .svc-grid, .quotes, .values {
    grid-template-columns: 1fr 1fr;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats .container {
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }
  .svc-detail:nth-child(even) .sd-art {
    order: 0;
  }
}
@media (max-width: 760px) {
  section {
    padding: 66px 0;
  }
  .hero {
    padding: 90px 22px 34px;
  } /* phone: clear nav + balanced L/R & bottom, fits one screen */
  .page-hero {
    padding: 106px 0 50px;
  }
  .svc-grid, .quotes, .values, .foot-grid {
    grid-template-columns: 1fr;
  }
  .cta-banner {
    padding: 50px 24px;
  }
  .stats .container {
    grid-template-columns: 1fr 1fr;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav {
    padding: 0 12px 0 18px;
  }
  .nav > .btn {
    display: none;
  } /* clean phone navbar: logo + menu button only */
  .logo {
    font-size: 1.25rem;
  }
  .logo svg {
    width: 30px;
    height: 30px;
  }
  .logo img {
    height: 26px;
  }
  .hero p.lead {
    font-size: 1rem;
    margin: 18px auto 26px;
  }
  .flame-card {
    max-width: 280px;
  }
  form.lead-form {
    padding: 22px;
  }
  .info-card {
    padding: 20px;
    gap: 14px;
  }
  /* keep the pinned title + cards inside one screen on phones */
  .hscroll-sticky {
    padding-top: 80px;
    padding-bottom: 26px;
  }
  .hscroll-head {
    margin-bottom: 14px;
  }
  .hscroll-head p {
    font-size: 0.85rem;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .scroll-hint {
    margin-top: 10px;
  }
  /* cards fit their own content (no forced equal height); keep mobile widths */
  .hpanel .svc, .hpanel .quote {
    width: min(380px, 86vw);
  }
}
@media (max-width: 560px) {
  section {
    padding: 52px 0;
  }
  .hero {
    padding: 82px 18px 28px;
  } /* tighter so it still fits one screen w/ the strip */
  .eyebrow {
    margin-bottom: 18px;
  }
  /* stack primary CTAs full-width for easy thumb tapping */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .flame-card {
    max-width: 240px;
  }
  .flame-card .badge {
    display: none;
  }
  .flame-card { /* avoid off-card overflow on small screens */ }
  .cta-banner {
    padding: 42px 20px;
  }
  .svc-detail {
    gap: 30px;
    padding: 42px 0;
  }
  .sd-art .big-num {
    font-size: 4.5rem;
  }
  form.lead-form {
    padding: 20px;
  }
}
@media (max-width: 420px) {
  .hero h1 {
    font-size: 2rem;
  }
  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 1.2px;
  }
  .cta-banner h2 {
    font-size: 1.7rem;
  }
  .container {
    width: min(1180px, 94%);
  }
}
/* ---------- Mobile fallback (no-pin): stack cards VERTICALLY ----------
   On mobile the horizontal scroll-lock is disabled. Instead of sliding the
   cards right-to-left, they drop straight down the page in a single column. */
.hscroll.no-pin {
  height: auto !important;
}
.hscroll.no-pin .hscroll-sticky {
  position: static;
  height: auto;
  overflow: visible;
  display: block;
  padding: 70px 0 50px;
}
.hscroll.no-pin .hscroll-head {
  margin-bottom: 30px;
}
.hscroll.no-pin .hscroll-viewport {
  overflow: visible;
  clip-path: none;
  display: block;
}
.hscroll.no-pin .hscroll-track {
  transform: none !important;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0;
  width: 100%;
}
.hscroll.no-pin .hpanel {
  width: 100%;
  justify-content: center;
}
.hscroll.no-pin .hpanel .svc,
.hscroll.no-pin .hpanel .quote {
  width: min(440px, 92vw);
  height: auto;
  min-height: 0;
}
.hscroll.no-pin .hpanel.intro {
  display: flex;
  width: min(440px, 92vw);
}
.hscroll.no-pin .hscroll-bar {
  display: none;
}
.hscroll.no-pin .scroll-hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hscroll {
    height: auto !important;
  }
  .hscroll .hscroll-sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding: 70px 0 50px;
  }
  .hscroll .hscroll-viewport {
    overflow: visible;
    clip-path: none;
    display: block;
  }
  .hscroll .hscroll-track {
    transform: none !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .hscroll .hpanel .svc, .hscroll .hpanel .quote {
    width: min(440px, 92vw);
    height: auto;
    min-height: 0;
  }
  .marquee-track, .client-track, .mq-ic, .flame-card, .badge {
    animation: none !important;
  }
}
/* services.html quick stack/platform tag under a service title */
.sd-stack {
  display: inline-block;
  margin-top: 14px;
}