/* =========================================================
   Pattern D — Playful / Personality  (loads after style.css)
   ========================================================= */
:root {
  --cream: #fff8ec;
  --cream-2: #fdefd6;
  --ink: #14142b;
  --navy: #191970;
  --coral: #ff6450;
  --yellow: #ffd23f;
  --sky: #4cc9ff;
  --mint: #5be3b6;
  --pink: #ff8fb1;
  --text: #14142b;
  --muted: #5b5d7a;
  --line: rgba(20, 20, 43, 0.14);
  --font-en: "Unbounded", "Manrope", system-ui, sans-serif;
  --shadow: 6px 6px 0 var(--ink);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body { background: var(--cream); color: var(--text); }
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, h3 { font-weight: 900; }

/* loader */
.loader { background: var(--yellow); }
.loader__mark { color: var(--ink); }
.loader__bar { background: var(--ink); }

/* header */
.header { color: var(--ink); }
.header .logo { color: var(--ink); }
.header::after { background: rgba(255, 248, 236, 0.85); border-bottom: 2px solid var(--ink); }
.header.is-solid { color: var(--ink); }
.header.is-solid .logo { color: var(--ink); }
.nav__link { font-weight: 700; letter-spacing: 0.04em; font-size: 13px; }
.nav__link::after { height: 3px; background: var(--coral); border-radius: 3px; }
.btn {
  --bg: var(--ink); --fg: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-bounce), background 0.3s;
}
.btn::before { display: none; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { --bg: #fff; --fg: var(--ink); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn--light { --bg: var(--coral); --fg: #fff; }
.btn--light:hover { color: #fff; }
.btn--yellow { --bg: var(--yellow); --fg: var(--ink); }
.header .btn--ghost, .header.is-solid .btn--ghost { --bg: var(--yellow); --fg: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.header .btn--ghost:hover { box-shadow: 5px 5px 0 var(--ink); }
.burger span { height: 3px; }
.drawer { background: var(--coral); color: var(--ink); }
.drawer__link small { opacity: 0.8; }

/* hero */
.hero { background: var(--cream); color: var(--ink); min-height: 100svh; padding-bottom: 150px; overflow: hidden; }
.hero__video, .hero__canvas, .hero__grid { display: none; }
.hero__shade { display: none; }
.shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shape { position: absolute; will-change: transform; translate: var(--px, 0) var(--py, 0); transition: translate 0.6s cubic-bezier(0.22,1,0.36,1); }
.px { translate: var(--px, 0) var(--py, 0); transition: translate 0.8s cubic-bezier(0.22,1,0.36,1); }
.shape--1 { left: 6%; top: 18%; width: 90px; height: 90px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); animation: floatY 6s ease-in-out infinite; }
.shape--2 { right: 10%; top: 14%; width: 70px; height: 70px; background: var(--sky); border: 3px solid var(--ink); border-radius: 18px; transform: rotate(15deg); animation: spinSlow 18s linear infinite; }
.shape--3 { left: 42%; bottom: 22%; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid var(--coral); filter: drop-shadow(0 0 0 var(--ink)); animation: floatY 7s ease-in-out infinite reverse; }
.shape--4 { right: 26%; bottom: 30%; width: 120px; height: 34px; background: var(--mint); border: 3px solid var(--ink); border-radius: 999px; transform: rotate(-20deg); animation: floatY 5s ease-in-out infinite 1s; }
.shape--5 { left: 20%; bottom: 18%; width: 54px; height: 54px; background: var(--pink); border: 3px solid var(--ink); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: spinSlow 12s linear infinite reverse; }
@keyframes floatY { 0%,100% { margin-top: 0; } 50% { margin-top: -22px; } }
@keyframes spinSlow { to { rotate: 360deg; } }

.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero__eyebrow { color: var(--ink); opacity: 1; }
.hero__eyebrow::before { background: var(--coral); height: 3px; border-radius: 3px; }
.is-ready .hero__eyebrow { opacity: 1; }
.hero__title { font-size: clamp(38px, 6.4vw, 88px); line-height: 1.2; letter-spacing: 0; }
.hero__title .ch { transform: translateY(110%) rotate(8deg); }
.hero__title .grad {
  background: none; color: var(--ink); -webkit-text-fill-color: currentColor; animation: none;
  position: relative; display: inline-block; padding: 0 0.15em; margin: 0 0.05em;
}
.hero__title .grad::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12%; bottom: 8%; z-index: -1;
  background: var(--yellow); border-radius: 14px; transform: rotate(-2deg) scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease-bounce) 1.2s;
}
.is-ready .hero__title .grad::before { transform: rotate(-2deg) scaleX(1); }
.hero__lead { color: var(--muted); font-weight: 500; }
.is-ready .hero__lead { opacity: 1; }
.hero__cta .btn { padding: 18px 28px; font-size: 15px; }

.hero__art { position: relative; aspect-ratio: 1; }
.blob {
  position: absolute; inset: 0; overflow: hidden; border: 3px solid var(--ink);
  border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
  animation: morph 12s ease-in-out infinite; box-shadow: 10px 10px 0 var(--ink);
}
.blob img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
@keyframes morph {
  0%,100% { border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%; }
  33% { border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%; }
  66% { border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%; }
}
.sticker {
  position: absolute; z-index: 2; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 999px;
  font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; box-shadow: 4px 4px 0 var(--ink);
  background: #fff; color: var(--ink); transform: rotate(-8deg);
  animation: stickerIn 0.6s var(--ease-bounce) both;
}
.sticker--a { left: -24px; top: 12%; background: var(--yellow); animation-delay: 1.4s; }
.sticker--b { right: -18px; top: 38%; background: var(--sky); transform: rotate(10deg); animation-delay: 1.6s; }
.sticker--c { left: 10%; bottom: -10px; background: var(--coral); color: #fff; transform: rotate(4deg); animation-delay: 1.8s; }
@keyframes stickerIn { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
.rotator {
  position: absolute; right: 4%; bottom: 8%; width: 130px; height: 130px; z-index: 3;
  animation: spinSlow 14s linear infinite;
}
.rotator text { font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; fill: var(--ink); }
.rotator__core { position: absolute; inset: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 34px; animation: spinSlow 14s linear infinite reverse; }

.hero__scroll { color: var(--ink); opacity: 0.8; }
.hero__scroll i { background: rgba(20,20,43,0.2); }
.hero__scroll i::after { background: var(--ink); }
.hero__marquee {
  background: var(--yellow); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(-1.5deg) scale(1.03); transform-origin: center; bottom: 30px; mask-image: none; -webkit-mask-image: none;
  padding: 16px 0;
}
.marquee__item { color: var(--ink); opacity: 1; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; }
.marquee__item::after { background: var(--ink); width: 10px; height: 10px; }

/* sections */
.section--paper { background: #fff; }
.section--dark { background: var(--ink); color: #fff; }
.sec-head__label { color: var(--coral); font-weight: 800; }
.sec-head__label::before { width: 12px; height: 12px; border: 2px solid var(--ink); background: var(--yellow); }
.sec-head__title { font-weight: 900; }
.sec-head__desc { color: var(--muted); }
.bg-text { -webkit-text-stroke: 2px rgba(20,20,43,0.1); }
.section--dark .bg-text { -webkit-text-stroke: 2px rgba(255,255,255,0.1); }

.mark { position: relative; display: inline-block; z-index: 0; }
.mark::before {
  content: ""; position: absolute; left: -0.1em; right: -0.1em; top: 55%; height: 45%; z-index: -1;
  background: var(--mark, var(--yellow)); border-radius: 6px; transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease) 0.3s;
}
.is-in .mark::before, .is-in.mark::before { transform: scaleX(1); }

/* about */
.about__title { font-weight: 900; font-size: clamp(26px, 3.4vw, 44px); }
.about__body { color: var(--muted); font-weight: 500; }
.about__media { border: 3px solid var(--ink); border-radius: 32px; box-shadow: 10px 10px 0 var(--ink); }
.about__media { border-radius: 32px; }
.reveal-img::after { background: var(--coral); }
.about__badge { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 18px; transform: rotate(-4deg) translateY(20px); }
.reveal-img.is-in .about__badge { transform: rotate(-4deg); }
.about__badge b { color: var(--ink); }

.values { background: transparent; border: 0; gap: 24px; border-radius: 0; overflow: visible; }
.value {
  border: 3px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s var(--ease-bounce);
}
.value:nth-child(1) { background: var(--yellow); transform: rotate(-1.5deg); }
.value:nth-child(2) { background: var(--sky); transform: rotate(1deg); }
.value:nth-child(3) { background: var(--pink); transform: rotate(-1deg); }
.value:hover { transform: rotate(0) translateY(-6px); box-shadow: 10px 12px 0 var(--ink); }
.value::before { display: none; }
.value__num { color: var(--ink); opacity: 0.7; }
.value__en { color: var(--ink); font-weight: 800; }
.value__desc { color: var(--ink); opacity: 0.8; }

/* service */
.cards { grid-template-columns: 1fr 1fr; gap: 32px; }
.service__layout { grid-template-columns: 1fr; }
.service__side { position: static; }
.service__nav { display: none; }
.card {
  grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow); background: #fff;
  transform-style: preserve-3d; transition: transform 0.25s ease-out, box-shadow 0.4s var(--ease-bounce);
}
.card::before { display: none; }
.card:hover { transform: translateY(-4px); box-shadow: 10px 12px 0 var(--ink); border-color: var(--ink); }
.card > div:first-child { padding: 28px 30px 32px; order: 2; }
.card__visual { order: 1; min-height: 0; height: auto; aspect-ratio: 16 / 8; border-radius: 0; border-bottom: 3px solid var(--ink); background: var(--c, var(--yellow)); }
.card--1 { --c: var(--yellow); }
.card--2 { --c: var(--sky); }
.card--3 { --c: var(--coral); }
.card--4 { --c: var(--mint); }
.card__visual .vis { display: none; }
.card__visual .vis-inner { color: var(--ink); }
.card__visual .vis-inner svg { width: 30%; filter: none; stroke-width: 3; }
.card__visual .badge {
  position: absolute; right: 16px; top: 16px; padding: 8px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 999px;
  font-family: var(--font-en); font-weight: 700; font-size: 12px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(6deg);
}
.card__num { color: var(--coral); font-weight: 800; }
.card__en { background: none; -webkit-text-fill-color: currentColor; color: var(--muted); }
.card__title { font-weight: 900; }
.card__tags li { background: var(--cream-2); border: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.link-arrow .circ { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.link-arrow:hover .circ { background: var(--ink); color: #fff; transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* flow */
.flow { background: var(--ink); }
.flow__grid::before { background: repeating-linear-gradient(90deg, var(--yellow) 0 12px, transparent 12px 20px); height: 3px; }
.step__dot { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); width: 36px; height: 36px; top: 17px; }
.step__dot::after { display: none; }
.step__en { background: none; -webkit-text-fill-color: currentColor; color: var(--yellow); font-weight: 800; }
.step__chip { border: 2px solid rgba(255,255,255,0.3); }

/* company */
.company__dl > div { border-color: var(--line); }
.company__map { border: 3px solid var(--ink); border-radius: 32px; box-shadow: var(--shadow); }
.company__map iframe { filter: none; }
.company__map .pin { border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fff; }
.polaroids { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.polaroid {
  width: 200px; padding: 10px 10px 32px; background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease-bounce);
}
.polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.polaroid span { display: block; margin-top: 10px; font-family: var(--font-en); font-size: 11px; font-weight: 700; }
.polaroid:nth-child(1) { transform: rotate(-4deg); }
.polaroid:nth-child(2) { transform: rotate(3deg); margin-top: 24px; }
.polaroid:nth-child(3) { transform: rotate(-2deg); }
.polaroid:hover { transform: rotate(0) scale(1.06); z-index: 2; }

/* news */
.news__item { border-color: var(--line); }
.news__cat { border: 2px solid var(--ink); font-weight: 800; background: var(--yellow); }
.news__item .circ { border: 2px solid var(--ink); }
.news__item:hover .circ { background: var(--ink); }

/* cta */
.cta { background: var(--coral); color: var(--ink); }
.cta__canvas, .cta__shade { display: none; }
.cta .sec-head__label { color: var(--ink) !important; }
.cta__title { font-weight: 900; }
.cta__title .wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.cta__desc { opacity: 0.9; font-weight: 500; }
.cta__actions .btn { --bg: var(--ink); --fg: #fff; box-shadow: 6px 6px 0 #fff; }
.cta__actions .btn:hover { box-shadow: 8px 8px 0 #fff; }
.cta__actions small { color: var(--ink); opacity: 0.8; }

/* footer */
.footer { background: var(--ink); }
.footer__col a:hover { color: var(--yellow); }

/* glow */
.glow { background: radial-gradient(circle, rgba(255,210,63,0.35), rgba(255,210,63,0) 65%); mix-blend-mode: multiply; width: 300px; height: 300px; }

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { width: min(100%, 420px); margin: 32px auto 0; justify-self: center; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero__title { font-size: clamp(34px, 10vw, 52px); }
  .hero__art { width: min(100%, 300px); }
  .shape--3, .shape--4 { display: none; }
  .rotator { width: 100px; height: 100px; }
  .rotator__core { inset: 24px; font-size: 26px; }
  .card__visual { aspect-ratio: 16 / 8; }
  .value:nth-child(n) { transform: none; }
  .polaroid { width: calc(50% - 10px); }
}


/* =========================================================
   Rich hero (pattern D v2)
   ========================================================= */
.hero--rich { padding-top: calc(var(--header-h) + 40px); padding-bottom: 170px; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora {
  position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  filter: blur(90px); opacity: 0.55; mix-blend-mode: multiply;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
.aurora--1 { background: var(--yellow); left: -12%; top: -20%; }
.aurora--2 { background: var(--sky); right: -18%; top: -10%; animation-delay: -7s; animation-duration: 26s; }
.aurora--3 { background: var(--pink); left: 30%; bottom: -35%; animation-delay: -14s; animation-duration: 30s; opacity: 0.45; }
@keyframes auroraDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8%, 10%) scale(1.15); } }
.hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20,20,43,0.22) 1.2px, transparent 1.3px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 60% at 60% 45%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(70% 60% at 60% 45%, #000 20%, transparent 80%);
}
.hero__bigtext {
  position: absolute; left: 0; right: 0; bottom: 110px; white-space: nowrap; overflow: hidden;
  font-family: var(--font-en); font-weight: 800; font-size: clamp(90px, 15vw, 220px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(20,20,43,0.09);
}
.hero__bigtext span { display: inline-block; animation: bigScroll 40s linear infinite; }
@keyframes bigScroll { to { transform: translateX(-33.33%); } }

.shape--squiggle { width: 200px; height: auto; color: var(--coral); left: 54%; top: 12%; rotate: -12deg; animation: floatY 8s ease-in-out infinite 0.5s; }
.shape--ring { width: 110px; height: 110px; border-radius: 50%; border: 10px solid var(--sky); right: 6%; bottom: 36%; animation: spinSlow 20s linear infinite; border-right-color: var(--yellow); border-bottom-color: var(--coral); }
.shape--2 { display: none; }
.hero--rich .shape--1 { left: -22px; top: 52%; width: 56px; height: 56px; }
.spark { position: absolute; font-size: 26px; color: var(--yellow); -webkit-text-stroke: 1.5px var(--ink); animation: twinkle 2.4s ease-in-out infinite; }
.spark--1 { left: 36%; top: 22%; }
.spark--2 { right: 30%; top: 60%; animation-delay: 0.8s; font-size: 18px; }
.spark--3 { left: 8%; bottom: 34%; animation-delay: 1.6s; font-size: 32px; color: var(--pink); }
@keyframes twinkle { 0%,100% { opacity: 0.2; scale: 0.6; rotate: 0deg; } 50% { opacity: 1; scale: 1.1; rotate: 40deg; } }

.hero--rich .hero__inner { grid-template-columns: 1.2fr 0.9fr; gap: 48px; }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero__eyebrow::before { display: none; }
.hero__eyebrow .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: none; box-shadow: 3px 3px 0 var(--ink);
}
.hero__eyebrow .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: blinkDot 1.6s ease-in-out infinite; }
@keyframes blinkDot { 50% { opacity: 0.2; scale: 0.7; } }
.hero__eyebrow .en { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hero--rich .hero__title { font-size: clamp(38px, 5.3vw, 76px); }
.hero--rich .hero__title .line:nth-child(2) { padding-left: 0.3em; }
.hero--rich .hero__title .line:nth-child(3) { padding-left: 0.1em; }
.hero__underline { width: min(360px, 60%); height: auto; margin: -6px 0 0 0.1em; display: block; }
.hero__underline path { stroke-dasharray: 460; stroke-dashoffset: 460; transition: stroke-dashoffset 1.1s cubic-bezier(0.65,0,0.35,1) 1.5s; }
.is-ready .hero__underline path { stroke-dashoffset: 0; }
.hero--rich .hero__lead { margin-top: 22px; max-width: 520px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease) 1s, transform 0.8s var(--ease) 1s; }
.is-ready .hero__chips { opacity: 1; transform: none; }
.hero__chips li { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
.hero__chips li b { font-family: var(--font-en); font-size: 15px; font-weight: 800; color: var(--coral); }
.hero__chips li:nth-child(2) b { color: var(--navy); }
.hero__chips li:nth-child(3) b { color: #1a9c78; }
.btn__emoji { display: inline-block; font-size: 18px; transition: transform 0.4s var(--ease-bounce); }
.btn:hover .btn__emoji { transform: rotate(20deg) scale(1.2); }

.hero--rich .hero__art { aspect-ratio: 1 / 1.02; }
.hero--rich .blob { inset: 6% 8% 12% 4%; box-shadow: 14px 14px 0 var(--ink); }
.hero--rich .blob img { transition: transform 1.2s var(--ease); }
.hero--rich .blob:hover img { transform: scale(1.18); }
.blob__tint { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,210,63,0.35), rgba(76,201,255,0) 55%, rgba(255,100,80,0.28)); mix-blend-mode: multiply; pointer-events: none; }
.orb {
  position: absolute; right: -6%; top: -4%; width: 38%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--ink); z-index: 3;
  animation: orbIn 0.9s var(--ease-bounce) 1.1s both, floatOrb 7s ease-in-out 2s infinite;
}
.orb video { width: 100%; height: 100%; object-fit: cover; }
.orb__label { position: absolute; left: 14px; bottom: 12px; color: #fff; font-family: var(--font-en); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: 0.06em; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
@keyframes orbIn { from { opacity: 0; scale: 0.3; rotate: -30deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes floatOrb { 0%,100% { margin-top: 0; } 50% { margin-top: -14px; } }
.minicard {
  position: absolute; left: -10%; bottom: 4%; width: 44%; border: 3px solid var(--ink); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 8px 8px 0 var(--ink); rotate: -6deg; z-index: 3;
  animation: cardIn 0.8s var(--ease-bounce) 1.3s both;
}
.minicard video { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; border-bottom: 3px solid var(--ink); }
.minicard__meta { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 10px; font-weight: 700; }
.minicard__meta b { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.12em; color: var(--coral); display: inline-flex; align-items: center; gap: 6px; }
.minicard__meta b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: blinkDot 1.2s infinite; }
@keyframes cardIn { from { opacity: 0; margin-bottom: -40px; } to { opacity: 1; margin-bottom: 0; } }
.hero--rich .sticker--a { left: -6%; top: 6%; }
.hero--rich .sticker--b { right: 2%; top: 44%; }
.hero--rich .sticker--c { left: 34%; bottom: -2%; }
.sticker:hover { animation: wobble 0.6s ease-in-out; }
@keyframes wobble { 0%,100% { rotate: 0deg; } 25% { rotate: 8deg; } 75% { rotate: -8deg; } }
.hero--rich .rotator { right: 28%; bottom: -8%; width: 120px; height: 120px; }

.hero__marquee--back {
  background: var(--coral); border-color: var(--ink); transform: rotate(2deg) scale(1.03); bottom: 44px; z-index: 1; opacity: 0.95;
}
.hero__marquee--back .marquee__item { color: #fff; font-size: 12px; }
.hero__marquee--back .marquee__item::after { background: #fff; }
.marquee__track--rev { animation-direction: reverse; animation-duration: 26s; }
.hero--rich .hero__marquee { bottom: 20px; z-index: 2; }

@media (max-width: 1024px) {
  .hero--rich .hero__inner { grid-template-columns: 1fr; }
  .hero--rich .hero__art { width: min(100%, 460px); margin: 56px auto 0; }
  .hero__bigtext { bottom: 90px; }
}
@media (max-width: 767px) {
  .hero--rich { padding-bottom: 160px; }
  .hero--rich .hero__art { width: min(100%, 320px); margin-top: 48px; }
  .shape--squiggle, .shape--ring, .spark--2 { display: none; }
  .hero__bigtext { font-size: 28vw; bottom: 100px; }
  .minicard { width: 52%; left: -4%; }
  .orb { width: 42%; right: -4%; }
  .hero--rich .rotator { width: 96px; height: 96px; right: 0; bottom: -16%; }
  .hero--rich .sticker--c { left: 4%; bottom: -8%; }
  .minicard__meta span { display: none; }
  .hero__marquee--back { bottom: 40px; }
  .hero__eyebrow { flex-wrap: wrap; gap: 8px; }
  .hero__chips li { padding: 6px 10px; }
  .aurora { filter: blur(60px); }
}


/* ---------- Hero ornaments v3: glossy 3D objects ---------- */
.orn {
  position: absolute; height: auto; z-index: 0;
  translate: var(--px, 0) var(--py, 0); transition: translate 0.8s cubic-bezier(0.22,1,0.36,1);
  filter: drop-shadow(0 22px 26px rgba(20,20,43,0.22)) drop-shadow(0 2px 2px rgba(20,20,43,0.08));
}
.orn > * { transform-box: fill-box; transform-origin: center; }
.orn--sphere { width: 118px; left: 41%; top: 9%; animation: ornFloat 7s ease-in-out infinite; }
.orn--torus { width: 150px; right: 4%; bottom: 28%; animation: ornSpin 26s linear infinite, ornFloat 9s ease-in-out infinite 1s; }
.orn--capsule { width: 150px; left: 43%; top: 34%; rotate: -32deg; animation: ornFloat 8s ease-in-out infinite 2s; }
.orn--coin { width: 84px; left: -12px; top: 52%; animation: ornFloat 6s ease-in-out infinite 0.5s; }
.orn--pebble { display: none; }
@keyframes ornFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -18px; } }
@keyframes ornSpin { to { rotate: 360deg; } }
.orn--torus { animation: ornTorus 26s linear infinite; }
@keyframes ornTorus { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (max-width: 1024px) {
  .orn--sphere { left: 62%; top: 4%; width: 96px; }
  .orn--capsule { left: auto; right: 4%; top: 40%; width: 130px; }
  .orn--pebble { display: none; }
}
@media (max-width: 767px) {
  .orn--torus, .orn--capsule { display: none; }
  .orn--sphere { width: 72px; left: auto; right: 4%; top: 12%; }
  .orn--coin { display: none; }
}