/* =====================================================
   Brand tokens (taken from the logo)
   ===================================================== */
:root {
  --plum: #2b0a4a;        /* "Media" purple, deepened for the hero */
  --plum-soft: #3d1466;
  --pink: #e6005c;
  --orange: #ff7a00;
  --amber: #ffb000;
  --lilac: #f6f0fb;
  --ink: #1f1230;
  --white: #ffffff;

  --ribbon: linear-gradient(100deg, var(--amber) 0%, var(--orange) 35%, var(--pink) 100%);
  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: "Hind", "Segoe UI", Arial, sans-serif;

  --bar-h: 76px;
  --bar-gap: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--white); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

/* =====================================================
   Floating header bar
   ===================================================== */
.bar {
  position: sticky;
  top: var(--bar-gap);
  z-index: 50;
  width: min(1320px, calc(100% - 28px));
  height: var(--bar-h);
  margin: var(--bar-gap) auto 0;
  padding: 0 10px 0 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(43, 10, 74, 0.22);
}

.bar-logo img { display: block; height: 80px; width: auto; margin: -6px 0 -6px -8px; }

.bar-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.menu { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.menu > li { position: relative; }

.menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--plum);
  white-space: nowrap;
}

/* the logo's swoosh, used as the hover / current-page marker */
.menu > li > a::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23ff7a00'/%3E%3Cstop offset='1' stop-color='%23e6005c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10 C 25 1 70 -1 100 6 C 70 3 30 4 0 10 Z' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.menu > li > a:hover::before,
.menu > li:focus-within > a::before,
.menu > li > a[aria-current="page"]::before { transform: scaleX(1); }

.menu > li > a:hover,
.menu > li:focus-within > a { color: var(--pink); }

.has-sub > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* invisible bridge so the dropdown does not close while the mouse travels down */
.has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
}

/* ---------- Dropdown panels ---------- */
.sub {
  position: absolute;
  top: calc(100% + 18px);
  left: -14px;
  min-width: 250px;
  padding: 10px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(43, 10, 74, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }

.sub a {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background 0.15s;
}

.sub a:hover, .sub a:focus-visible { background: var(--lilac); }

/* the logo's little rounded squares, used as bullets */
.sub a::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 4px;
  background: var(--orange);
  transition: transform 0.2s;
}
.sub li:nth-child(even) a::before { background: var(--pink); }
.sub a:hover::before { transform: rotate(45deg) scale(1.15); }

.sub strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--plum);
}
.sub small { display: block; font-size: 13.5px; color: #6a5a7d; }

.sub-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 580px;
  left: -150px;
}

/* ---------- Right-side corner ---------- */
.bar-actions { display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
  border-radius: 14px;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.btn-crm { color: var(--plum); background: var(--lilac); }
.btn-crm:hover { background: var(--plum); color: var(--white); }
.btn-crm svg { width: 15px; height: 15px; }

.btn-quote { color: var(--white); background: var(--ribbon); box-shadow: 0 8px 20px rgba(230, 0, 92, 0.3); }
.btn-quote:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(230, 0, 92, 0.42); }

/* ---------- Mobile toggle (no JavaScript) ---------- */
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }

/* =====================================================
   Hero banner
   ===================================================== */
.hero {
  position: relative;
  margin-top: calc(-1 * (var(--bar-h) + var(--bar-gap)));
  padding: calc(var(--bar-h) + var(--bar-gap) + 72px) 24px 96px;
  color: var(--white);
  background:
    radial-gradient(620px 420px at 88% 12%, rgba(230, 0, 92, 0.42), transparent 70%),
    radial-gradient(520px 420px at 62% 100%, rgba(255, 122, 0, 0.26), transparent 70%),
    var(--plum);
  overflow: hidden;
}

.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 56px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 31em;
  margin-top: 22px;
  font-size: clamp(17px, 1.35vw, 20px);
  color: rgba(255, 255, 255, 0.82);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-cta .btn { padding: 16px 28px; font-size: 18px; border-radius: 16px; }
.btn-ghost { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { background: var(--white); color: var(--plum); box-shadow: none; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 40px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.86);
}
.hero-points li { display: flex; align-items: center; gap: 10px; }
.hero-points li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--amber);
}

/* =====================================================
   Tablet and mobile
   ===================================================== */
@media (max-width: 1340px) {
  .bar { padding-right: 12px; }

  .burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border-radius: 14px;
    background: var(--lilac);
    cursor: pointer;
  }
  .burger span { width: 22px; height: 3px; border-radius: 3px; background: var(--plum); transition: transform 0.25s, opacity 0.2s; }
  .nav-check:focus-visible ~ .burger { outline: 3px solid var(--amber); outline-offset: 3px; }
  .nav-check:checked ~ .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-check:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .bar-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--bar-h) - 50px);
    overflow-y: auto;
    padding: 12px 18px 18px;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 22px 50px rgba(43, 10, 74, 0.3);
  }
  .nav-check:checked ~ .bar-nav { display: flex; }

  .menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .menu > li > a { padding: 13px 4px; font-size: 18px; }
  .menu > li > a::before { display: none; }
  .has-sub > a::after, .has-sub::after { display: none; }

  .sub, .sub-wide {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    padding: 0 0 8px;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sub a { padding: 8px 10px; }
  .sub small { display: none; }

  .bar-actions { flex-direction: column; align-items: stretch; padding-top: 12px; }
  .bar-actions .btn { padding: 14px 20px; }
}

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--bar-h) + var(--bar-gap) + 48px); padding-bottom: 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 480px) {
  :root { --bar-h: 66px; --bar-gap: 10px; }
  .bar { border-radius: 18px; padding-left: 14px; width: calc(100% - 20px); }
  .bar-logo img { height: 66px; margin: -4px 0 -4px -6px; }
  .hero { padding-left: 18px; padding-right: 18px; }
  .hero-cta .btn { width: 100%; }
}

/* =====================================================
   Hero scene: sleeping phone -> play pressed -> flooded with enquiries (12s loop)
   ===================================================== */
.stage { --loop: 12s; position: relative; width: 100%; max-width: 500px; aspect-ratio: 1 / 1; margin-left: auto; font-family: var(--display); }
.stage * { animation-duration: var(--loop); animation-iteration-count: infinite; animation-timing-function: ease; }
.phone { position: absolute; left: 50%; top: 21%; width: 36%; height: 58%; translate: -50% 0; padding: 9px; border-radius: 34px; background: #12041f; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 26px 50px rgba(0, 0, 0, 0.5); }
.screen { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; }
.phone-sleep { animation-name: gate-sleep; }
.phone-sleep .screen { background: #2a1245; }
.phone-awake { animation-name: gate-awake; }
.phone-awake .screen { background: linear-gradient(160deg, var(--amber), var(--orange) 40%, var(--pink)); }
.buzz { width: 100%; height: 100%; animation: buzz 0.09s linear infinite alternate; }
.face { display: grid; grid-template-columns: auto auto; gap: 14px 22px; justify-items: center; }
.eye, .mouth { display: block; background: var(--white); }
.mouth { grid-column: 1 / -1; }
.phone-sleep .eye { width: 26px; height: 5px; border-radius: 5px; opacity: 0.8; }
.phone-sleep .mouth { width: 14px; height: 5px; border-radius: 5px; opacity: 0.8; }
.phone-awake .eye { position: relative; width: 34px; height: 34px; border-radius: 50%; }
.phone-awake .eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; background: var(--plum); animation: look 1.3s ease-in-out infinite alternate; }
.phone-awake .mouth { width: 26px; height: 32px; border-radius: 50%; background: var(--plum); }
.phone-happy .mouth { width: 30px; height: 15px; border-radius: 0 0 30px 30px; }
.zzz { position: absolute; left: 72%; top: -6%; color: var(--amber); font-family: var(--display); font-weight: 800; }
.zzz b { position: absolute; opacity: 0; font-size: 26px; animation: zz 2.4s ease-in infinite; }
.zzz b:nth-child(2) { animation-delay: 0.8s; font-size: 21px; }
.zzz b:nth-child(3) { animation-delay: 1.6s; font-size: 17px; }
.sweat { position: absolute; right: -16%; top: 4%; font-size: 30px; animation-name: gate-late; }
.say { position: absolute; left: 0; top: 0; max-width: 62%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--white); color: var(--plum); font-weight: 700; font-size: 17px; line-height: 1.25; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); opacity: 0; z-index: 4; }
.say-1 { animation-name: say-1; }
.say-2 { animation-name: say-2; }
.say-3 { animation-name: say-3; }
.spider { position: absolute; left: 84%; top: 0; height: 26%; width: 2px; background: rgba(255, 255, 255, 0.45); animation-name: spider; transform-origin: top; }
.spider span { position: absolute; left: 50%; top: 100%; translate: -50% -30%; font-size: 30px; }
.notifs { position: absolute; inset: 0; animation-name: gate-notifs; z-index: 3; pointer-events: none; }
.n { position: absolute; left: 50%; top: 30%; padding: 7px 13px; border-radius: 999px; background: var(--white); color: var(--plum); font-weight: 700; font-size: 14.5px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); opacity: 0; animation: fly 3.2s ease-out var(--dl) infinite; }
.n.big { padding: 0; background: none; box-shadow: none; font-size: 30px; }
.playbtn { position: absolute; left: 50%; bottom: 0; width: 17%; aspect-ratio: 1 / 1; translate: -50% 0; display: grid; place-items: center; border-radius: 50%; background: var(--ribbon); box-shadow: 0 10px 26px rgba(230, 0, 92, 0.5); animation-name: press; }
.playbtn svg { width: 42%; margin-left: 6%; }
.playbtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--amber); animation: ping 1.6s ease-out infinite; }
.hand { position: absolute; left: 53%; bottom: -9%; font-size: 44px; animation-name: hand; z-index: 5; }

@keyframes gate-sleep { 0%, 33% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gate-awake { 0%, 33% { opacity: 0; scale: 0.9; } 34% { opacity: 1; scale: 1.14; } 38%, 95% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 0.9; } }
@keyframes gate-notifs { 0%, 36% { opacity: 0; } 38%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes gate-late { 0%, 64% { opacity: 0; } 67%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes say-1 { 0%, 2% { opacity: 0; scale: 0.6; } 5%, 30% { opacity: 1; scale: 1; } 33%, 100% { opacity: 0; scale: 0.6; } }
@keyframes say-2 { 0%, 36% { opacity: 0; scale: 0.6; } 39%, 61% { opacity: 1; scale: 1; } 64%, 100% { opacity: 0; scale: 0.6; } }
@keyframes say-3 { 0%, 64% { opacity: 0; scale: 0.6; } 67%, 92% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; scale: 0.6; } }
@keyframes spider { 0%, 30% { transform: scaleY(1); opacity: 1; } 15% { transform: scaleY(1.12); } 35%, 94% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes press { 0%, 29% { scale: 1; } 31% { scale: 0.8; } 34% { scale: 1.15; } 37%, 100% { scale: 1; } }
@keyframes hand { 0%, 16% { translate: 110px 110px; opacity: 0; } 27% { translate: 0 0; opacity: 1; } 31% { translate: -6px -16px; opacity: 1; } 34% { translate: 0 0; opacity: 1; } 42%, 100% { translate: 110px 110px; opacity: 0; } }
@keyframes buzz { from { transform: translateX(-3px) rotate(-2deg); } to { transform: translateX(3px) rotate(2deg); } }
@keyframes look { from { translate: -85% -50%; } to { translate: -15% -50%; } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -54px) rotate(12deg); } }
@keyframes ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes fly {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.3); }
  15% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.25), calc(var(--dy) * 0.25)) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--r)) scale(1); }
}
@keyframes bob { from { rotate: -4deg; translate: 0 0; } to { rotate: 4deg; translate: 0 -8px; } }
@keyframes snore { 0%, 100% { scale: 1; rotate: -3deg; } 50% { scale: 1.04; rotate: -3deg; } }

/* small stand-alone mascots (FAQ, call-to-action, 404, thank-you) */
.mascot { position: relative; width: 126px; height: 204px; flex: none; }
.mascot .phone { position: relative; left: 0; top: 0; width: 100%; height: 100%; translate: none; opacity: 1; scale: 1; border-radius: 28px; animation: bob 2.2s ease-in-out infinite alternate; }
.mascot .screen { border-radius: 20px; }
.mascot .face { gap: 12px 14px; }
.mascot.nap { width: 170px; height: 270px; }
.mascot.nap .phone { border-radius: 34px; animation: snore 3s ease-in-out infinite; }
.mascot.nap .screen { border-radius: 26px; }
.mascot.nap .zzz { color: var(--plum); }

/* =====================================================
   Shared section pieces
   ===================================================== */
.sec { position: relative; overflow: hidden; padding: 96px 24px; }
.wrap { max-width: 1240px; margin: 0 auto; }
.sec > .wrap { position: relative; z-index: 1; }
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -0.01em; color: var(--plum); text-wrap: balance; }
.lead { max-width: 36em; margin-top: 14px; font-size: 19px; color: #5d4d70; }
.lead a, .link { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.btn-plum { color: var(--white); background: var(--plum); }
.btn-plum:hover { background: var(--pink); }
.btn-white { color: var(--plum); background: var(--white); }
.btn-white:hover { background: var(--amber); }
.btn-line { color: var(--plum); box-shadow: inset 0 0 0 2px var(--plum); }
.btn-line:hover { background: var(--plum); color: var(--white); }
.sample { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--amber); color: var(--plum); font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 1.5; vertical-align: middle; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }

/* section backgrounds: smooth glows, no patterns */
.bg-a { background: radial-gradient(680px 520px at 100% 0%, rgba(255, 122, 0, 0.16), transparent 70%), radial-gradient(680px 520px at 0% 100%, rgba(230, 0, 92, 0.12), transparent 70%), radial-gradient(520px 420px at 55% 50%, rgba(122, 63, 209, 0.07), transparent 70%), var(--white); }
.bg-b { background: radial-gradient(680px 520px at 0% 0%, rgba(255, 176, 0, 0.2), transparent 70%), radial-gradient(680px 520px at 100% 100%, rgba(230, 0, 92, 0.12), transparent 70%), radial-gradient(520px 420px at 45% 55%, rgba(122, 63, 209, 0.07), transparent 70%), var(--white); }
.bg-c { background: radial-gradient(760px 540px at 105% 100%, rgba(255, 122, 0, 0.2), transparent 70%), radial-gradient(760px 540px at -5% 0%, rgba(230, 0, 92, 0.14), transparent 70%), linear-gradient(160deg, #f3eafc 0%, #fbeef5 50%, #fff1e6 100%); }
.bg-d { color: var(--white); background: radial-gradient(640px 460px at 100% 0%, rgba(230, 0, 92, 0.45), transparent 70%), radial-gradient(560px 420px at 0% 100%, rgba(255, 122, 0, 0.28), transparent 70%), var(--plum); }
.bg-d .h2 { color: var(--white); }
.bg-d .lead { color: rgba(255, 255, 255, 0.82); }

/* drifting rounded squares from the logo */
.deco::before, .deco::after { content: ""; position: absolute; z-index: 0; border-radius: 26%; pointer-events: none; animation: deco 7s ease-in-out infinite alternate; }
.deco::before { right: 4%; top: 56px; width: 86px; height: 86px; background: var(--amber); rotate: 16deg; }
.deco::after { right: calc(4% + 96px); top: 36px; width: 38px; height: 38px; background: var(--pink); rotate: -12deg; animation-delay: -3s; }
.deco.deco-l::before { right: auto; left: -26px; top: auto; bottom: 70px; width: 110px; height: 110px; background: var(--pink); }
.deco.deco-l::after { right: auto; left: 96px; top: auto; bottom: 46px; background: var(--orange); }
@keyframes deco { from { translate: 0 0; } to { translate: 0 -18px; } }

/* =====================================================
   Home sections
   ===================================================== */
.ticker { overflow: hidden; padding: 14px 0; background: var(--ribbon); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 20px; }
.ticker-run { display: flex; width: max-content; animation: tick 30s linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
.ticker span { display: flex; align-items: center; gap: 18px; padding-right: 18px; white-space: nowrap; }
.ticker span::after { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--plum); }
@keyframes tick { to { transform: translateX(-50%); } }

.svc-list { margin-top: 48px; border-top: 3px solid var(--plum); }
.svc { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) 48px; align-items: center; gap: 28px; padding: 22px 18px; border-bottom: 1px solid #e2d6ee; transition: padding 0.3s ease; }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ribbon); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1); }
.svc:hover::before, .svc:focus-visible::before { transform: scaleX(1); }
.svc:hover, .svc:focus-visible { padding-left: 34px; }
.svc-name { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; color: var(--plum); transition: color 0.2s; }
.svc-joke { font-size: 18px; color: #6a5a7d; transition: color 0.2s; }
.go { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--lilac); color: var(--plum); transition: rotate 0.3s, background 0.2s; }
.go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc-name, .svc:hover .svc-joke, .svc:focus-visible .svc-name, .svc:focus-visible .svc-joke { color: var(--white); }
.svc:hover .go, .svc:focus-visible .go { background: var(--white); rotate: -45deg; }

.player { margin-top: 48px; padding: 26px; border-radius: 30px; background: var(--plum); color: var(--white); box-shadow: 0 30px 60px rgba(43, 10, 74, 0.25); }
.scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.scene { padding: 24px 22px 26px; border-radius: 20px; background: rgba(255, 255, 255, 0.07); animation: scene 12s calc(var(--i) * 3s) infinite; }
.scene small { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; opacity: 0.7; }
.scene h3 { margin: 6px 0 8px; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.scene p { font-size: 16.5px; opacity: 0.85; }
.controls { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 0 6px; font-family: var(--display); font-weight: 700; font-size: 15px; }
.controls svg { width: 22px; height: 22px; fill: var(--white); flex: none; }
.track { position: relative; flex: 1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); }
.track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: var(--ribbon); animation: prog 12s linear infinite; }
.track i::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; border-radius: 50%; background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
@keyframes scene { 0%, 24% { background: var(--white); color: var(--plum); } 26%, 100% { background: rgba(255, 255, 255, 0.07); color: var(--white); } }
@keyframes prog { to { width: 100%; } }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.vs-card { padding: 34px 34px 38px; border-radius: 28px; }
.vs-card h3 { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.vs-card li { position: relative; margin-top: 18px; padding-left: 38px; font-size: 18px; }
.vs-card li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 8px; background: currentColor; opacity: 0.2; }
.vs-card li::after { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 700; font-size: 15px; line-height: 1; }
.them { background: #f4f2f6; color: #6b6475; border: 2px dashed #cdc4d8; rotate: -1.2deg; }
.them li::after { content: "✕"; }
.us { background: var(--plum); color: var(--white); box-shadow: 0 26px 50px rgba(43, 10, 74, 0.28); }
.us li::before { background: var(--amber); opacity: 1; }
.us li::after { content: "✓"; color: var(--plum); }

.office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; margin-top: 84px; padding: 48px; border-radius: 34px; background: var(--plum); color: var(--white); box-shadow: 0 30px 60px rgba(43, 10, 74, 0.25); }
.office-q { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--amber); }
.office-big { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.office-sub { margin-top: 18px; font-size: 18px; color: rgba(255, 255, 255, 0.8); }
.wifi-ic { width: 40px; height: 40px; flex: none; }
.wifi-ic path { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; opacity: 0.25; animation: wifi 1.8s ease-in-out infinite; }
.wifi-ic path:nth-child(2) { animation-delay: 0.25s; }
.wifi-ic path:nth-child(3) { animation-delay: 0.5s; }
.wifi-ic circle { fill: var(--amber); }
@keyframes wifi { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.map { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background-color: #3a1560; background-image: linear-gradient(118deg, transparent 47%, rgba(255, 176, 0, 0.28) 47%, rgba(255, 176, 0, 0.28) 50.5%, transparent 50.5%), linear-gradient(24deg, transparent 61%, rgba(230, 0, 92, 0.3) 61%, rgba(230, 0, 92, 0.3) 63.5%, transparent 63.5%), linear-gradient(rgba(255, 255, 255, 0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 2px, transparent 2px); background-size: 100% 100%, 100% 100%, 54px 54px, 54px 54px; }
.map-tag { position: absolute; left: 14px; bottom: 12px; font-family: var(--display); font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; animation: pin-drop 9s cubic-bezier(0.3, 1.6, 0.5, 1) var(--d) infinite both; }
.pin.l { flex-direction: row-reverse; translate: -100% 0; }
.pin i { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9); }
.pin i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pink); animation: ping 1.8s ease-out infinite; }
.pin b { padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--plum); font-family: var(--display); font-weight: 700; font-size: 14.5px; white-space: nowrap; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-60px); } 5%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 22px; margin-top: 48px; }
.plan { padding: 32px; border-radius: 28px; background: var(--white); border: 2px solid #e2d6ee; }
.plan small { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--pink); }
.plan h3 { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.1; color: var(--plum); }
.plan-line { margin-top: 4px; color: #5d4d70; }
.price { margin: 20px 0 6px; font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; color: var(--plum); }
.price span { font-family: var(--body); font-weight: 500; font-size: 16px; opacity: 0.7; }
.plan li { position: relative; margin-top: 12px; padding-left: 24px; font-size: 17px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border-radius: 4px; background: var(--orange); }
.plan .btn { width: 100%; margin-top: 26px; }
.plan-hit { padding-top: 40px; padding-bottom: 40px; background: var(--plum); border-color: var(--plum); color: var(--white); box-shadow: 0 30px 60px rgba(43, 10, 74, 0.3); }
.plan-hit h3, .plan-hit .price { color: var(--white); }
.plan-hit small { color: var(--amber); }
.plan-hit .plan-line { color: rgba(255, 255, 255, 0.8); }
.plan-hit li::before { background: var(--amber); }

.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.mate { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 18px; padding: 22px; border-radius: 26px; background: var(--lilac); }
.av { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 26%; background: var(--ribbon); font-size: 34px; transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.3s; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.mate:nth-child(3n + 2) .av { background: var(--plum); }
.mate:nth-child(3n) .av { background: var(--amber); }
.mate:hover .av { rotate: -10deg; scale: 1.08; }
.mate h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--plum); }
.mate small { display: block; font-size: 14.5px; color: #8a7b9f; }
.mate p { margin-top: 4px; font-size: 16.5px; color: #5d4d70; }

.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.proj { position: relative; display: block; overflow: hidden; border-radius: 28px; background: var(--white); box-shadow: 0 14px 34px rgba(43, 10, 74, 0.1); transition: translate 0.3s ease, box-shadow 0.3s ease; }
.proj:hover, .proj:focus-visible { translate: 0 -8px; box-shadow: 0 28px 54px rgba(43, 10, 74, 0.2); }
.proj > .sample { position: absolute; left: 16px; top: 16px; z-index: 2; margin: 0; font-size: 13px; padding: 4px 12px; background: var(--white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.proj-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plum); }
.proj-art img { width: 100%; height: 100%; object-fit: cover; }
.proj:nth-child(3n + 2) .proj-art { background: linear-gradient(150deg, var(--pink), var(--orange)); }
.proj:nth-child(3n) .proj-art { background: var(--amber); }
.proj-body { display: block; padding: 22px 24px 24px; }
.proj-body small { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--pink); }
.proj-body b { display: block; margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.15; color: var(--plum); }
.proj-body span { display: block; margin-top: 6px; font-size: 16.5px; color: #5d4d70; }

/* drawn mock-ups (portfolio samples and service pages) */
.m-web { width: 74%; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4); rotate: -3deg; transition: rotate 0.4s ease; }
.proj:hover .m-web { rotate: 0deg; }
.m-web i { display: block; }
.m-web .bar-b { height: 22px; background: #ece4f5; background-image: radial-gradient(circle at 14px 11px, var(--pink) 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, var(--amber) 4px, transparent 4.5px), radial-gradient(circle at 42px 11px, #57c98a 4px, transparent 4.5px); }
.m-web .hero-b { height: 74px; margin: 10px; border-radius: 10px; background: var(--ribbon); }
.m-web .ln { height: 9px; margin: 8px 10px; border-radius: 9px; background: #e2d6ee; }
.m-web .ln.s { width: 55%; margin-bottom: 14px; }
.m-post { width: 40%; padding: 8px 8px 12px; border-radius: 22px; background: var(--white); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); rotate: 5deg; transition: rotate 0.4s ease; }
.proj:hover .m-post { rotate: 0deg; }
.m-post i { display: block; }
.m-post .pic { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--plum); font-style: normal; font-size: 46px; }
.m-post .acts { margin-top: 9px; font-style: normal; font-size: 17px; line-height: 1; letter-spacing: 4px; color: var(--plum); }
.m-post .ln { height: 7px; margin-top: 8px; border-radius: 7px; background: #e2d6ee; }
.m-post .ln.s { width: 60%; }
.heart { position: absolute; left: 62%; bottom: 30%; font-size: 26px; opacity: 0; animation: heart 2.6s ease-out infinite; }
.heart.h2 { left: 70%; animation-delay: 0.9s; font-size: 20px; }
.heart.h3 { left: 56%; animation-delay: 1.7s; font-size: 18px; }
@keyframes heart { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-110px) scale(1.2) rotate(18deg); } }
.m-ads { display: flex; align-items: flex-end; align-self: end; gap: 10px; width: 70%; height: 62%; padding: 16px 16px 0; border-radius: 16px 16px 0 0; background: var(--white); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25); }
.m-ads i { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: var(--plum); transform-origin: bottom; animation: grow 3.4s cubic-bezier(0.3, 1.4, 0.5, 1) infinite alternate; }
.m-ads i:nth-child(2) { animation-delay: 0.15s; }
.m-ads i:nth-child(3) { animation-delay: 0.3s; }
.m-ads i:nth-child(4) { animation-delay: 0.45s; background: var(--pink); }
.m-ads i:nth-child(5) { animation-delay: 0.6s; background: var(--ribbon); }
@keyframes grow { 0%, 20% { transform: scaleY(0.35); } 70%, 100% { transform: scaleY(1); } }

.rev-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 64px; }
.rev-grid .btn { margin-top: 30px; }
.chatbox { border-radius: 30px; overflow: hidden; background: #f3ecfa; color: var(--ink); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45); rotate: 1.2deg; }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: var(--white); border-bottom: 1px solid #e2d6ee; }
.chat-head i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ribbon); font-style: normal; font-size: 22px; }
.chat-head b { display: block; font-family: var(--display); font-size: 19px; line-height: 1.2; color: var(--plum); }
.chat-head small { font-size: 14px; color: #2e9e5b; }
.chat-head small.demo { color: #8a7b9f; }
.chat-body { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.bubble { position: relative; max-width: 82%; padding: 12px 16px 10px; border-radius: 6px 20px 20px 20px; background: var(--white); box-shadow: 0 3px 10px rgba(43, 10, 74, 0.08); }
.bubble b { display: block; font-family: var(--display); font-size: 15.5px; color: var(--pink); }
.bubble:nth-child(3n + 2) b { color: var(--orange); }
.bubble:nth-child(3n) b { color: #7a3fd1; }
.stars { color: var(--amber); font-size: 15px; letter-spacing: 2px; }
.bubble p { margin-top: 2px; font-size: 17px; color: #4d3f60; }
.bubble time { display: block; margin-top: 4px; text-align: right; font-size: 12.5px; color: #9a8dab; }
.bubble.me { align-self: flex-end; border-radius: 20px 6px 20px 20px; background: var(--ribbon); color: var(--white); }
.bubble.me p { color: var(--white); }
.bubble.me time { color: rgba(255, 255, 255, 0.85); }
.typing { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #8a7b9f; }
.typing span { display: flex; gap: 5px; padding: 12px 14px; border-radius: 6px 18px 18px 18px; background: var(--white); }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #b7a7cc; animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; background: var(--pink); } }

.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 52px; }
.note { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 330px; padding: 28px 28px 26px; border-radius: 30px; background: var(--plum); color: var(--white); rotate: -2deg; box-shadow: 0 18px 36px rgba(43, 10, 74, 0.18); transition: rotate 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), translate 0.3s ease, box-shadow 0.3s ease; }
.note:nth-child(3n + 2) { background: var(--pink); rotate: 1.5deg; margin-top: 26px; }
.note:nth-child(3n) { background: var(--amber); color: var(--plum); rotate: -1deg; }
.note:hover, .note:focus-visible { rotate: 0deg; translate: 0 -10px; box-shadow: 0 30px 56px rgba(43, 10, 74, 0.28); }
.note-top { display: flex; align-items: center; justify-content: space-between; }
.note-tag { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-family: var(--display); font-weight: 700; font-size: 15px; }
.note:nth-child(3n) .note-tag { background: rgba(43, 10, 74, 0.14); }
.note-emoji { font-size: 44px; line-height: 1; transition: rotate 0.3s, scale 0.3s; }
.note:hover .note-emoji { rotate: 14deg; scale: 1.2; }
.note h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; text-wrap: balance; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; }
.note-foot > span:first-child { opacity: 0.85; }
.note .go { background: var(--white); border-radius: 16px; width: 46px; height: 46px; }
.note:hover .go { rotate: -45deg; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ask { display: flex; align-items: flex-start; gap: 18px; margin-top: 44px; }
.ask-say { margin-top: 14px; padding: 14px 18px; border-radius: 6px 20px 20px 20px; background: var(--plum); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.25; box-shadow: 0 14px 30px rgba(43, 10, 74, 0.25); }
.faq details { margin-bottom: 14px; border: 2px solid #e6dbf1; border-radius: 24px; background: var(--white); box-shadow: 0 8px 22px rgba(43, 10, 74, 0.06); transition: background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.faq details:hover { border-color: var(--pink); }
.faq summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--plum); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--lilac); font-size: 24px; line-height: 1; transition: rotate 0.25s, background 0.2s, color 0.2s; }
.q-ic { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 16px; background: var(--lilac); font-size: 24px; transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s; }
.q-tx { flex: 1; }
.faq details > div, .faq details > p { max-width: 40em; padding: 0 24px 24px 86px; font-size: 18px; color: #5d4d70; }
.faq details[open] { background: var(--plum); border-color: var(--plum); box-shadow: 0 24px 48px rgba(43, 10, 74, 0.28); }
.faq details[open] summary { color: var(--white); }
.faq details[open] .q-ic { background: var(--amber); rotate: -8deg; }
.faq details[open] > div, .faq details[open] > p { color: rgba(255, 255, 255, 0.86); }
.faq details[open] summary::after { rotate: 45deg; background: var(--white); color: var(--pink); }

.cta { padding-top: 0; }
.cta-inner { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 64px; padding: 56px 64px; border-radius: 36px; background: var(--amber); color: var(--plum); box-shadow: 0 30px 60px rgba(255, 122, 0, 0.28); }
.cta .lead { color: var(--plum); }
.cta .hero-cta { margin-top: 30px; }

.foot { padding: 72px 24px 28px; background: #14061f; color: rgba(255, 255, 255, 0.72); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.foot-logo { display: inline-block; padding: 6px 16px 6px 8px; border-radius: 18px; background: var(--white); }
.foot-logo img { display: block; height: 62px; width: auto; }
.foot-about p { max-width: 22em; margin-top: 16px; }
.foot h4 { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--white); }
.foot li { margin-top: 10px; }
.foot li a:hover { color: var(--amber); text-decoration: underline; }
.foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.foot-social a { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 14.5px; transition: background 0.2s; }
.foot-social a:hover { background: var(--pink); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 15px; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 1000px) {
  .team { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 900px) {
  .stage { max-width: 400px; margin: 0 auto; }
  .say { font-size: 15px; }
  .sec { padding: 68px 20px; }
  .deco::before { width: 56px; height: 56px; top: 24px; }
  .deco::after { width: 26px; height: 26px; top: 16px; right: calc(4% + 64px); }
  .deco.deco-l::before { width: 70px; height: 70px; bottom: 24px; top: auto; }
  .deco.deco-l::after { left: 60px; bottom: 16px; top: auto; right: auto; }
  .svc { grid-template-columns: 1fr 44px; gap: 6px 16px; padding: 18px 8px; }
  .svc:hover, .svc:focus-visible { padding-left: 16px; }
  .svc-joke { grid-column: 1; grid-row: 2; font-size: 16px; }
  .svc .go { grid-column: 2; grid-row: 1 / 3; width: 44px; height: 44px; }
  .scenes { grid-template-columns: 1fr 1fr; }
  .vs, .work, .notes, .rev-grid, .faq-grid { grid-template-columns: 1fr; }
  .rev-grid { gap: 40px; }
  .faq-grid { gap: 32px; }
  .chatbox { rotate: 0deg; }
  .office { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; padding: 28px 22px; border-radius: 28px; }
  .pin b { font-size: 12.5px; padding: 5px 9px; }
  .note { min-height: 0; gap: 28px; }
  .note:nth-child(3n + 2) { margin-top: 0; }
  .faq details > div, .faq details > p { padding: 0 20px 22px 20px; }
  .q-ic { width: 42px; height: 42px; font-size: 20px; border-radius: 14px; }
  .cta-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; border-radius: 28px; }
  .mascot.nap { width: 120px; height: 190px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .say { font-size: 13.5px; padding: 9px 12px; }
  .n { font-size: 12px; padding: 5px 10px; }
  .stage .phone { border-radius: 28px; }
  .stage .screen { border-radius: 20px; }
  .scenes { grid-template-columns: 1fr; }
  .player { padding: 16px; border-radius: 24px; }
  .vs-card { padding: 26px 22px 30px; }
  .ticker { font-size: 17px; }
  .faq summary { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .phone-sleep, .spider, .hand, .say-1, .say-3, .sweat { display: none; }
  .stage .say-2, .stage .n { opacity: 1; }
  .stage .n { position: static; display: inline-block; margin: 2px; }
  .stage .notifs { inset: auto 0 22% 0; text-align: center; }
}