@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap");
@import "tailwindcss";

:root {
  --paper: #f4ead7;
  --paper-light: #fffaf0;
  --ink: #171711;
  --muted: #615f54;
  --coral: #f0643f;
  --blue: #3759e8;
  --yellow: #f5d449;
  --mint: #9fd9bd;
  --lilac: #cbbbf1;
  --line: 2px solid var(--ink);
  --hand: "Caveat", "Comic Sans MS", cursive;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(44, 40, 20, .035) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: var(--yellow); }

.section-pad { padding: 118px max(6vw, 28px); }
.site-header {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(244, 234, 215, .89);
  border-bottom: 1.5px solid rgba(23, 23, 17, .5);
  display: flex;
  height: 82px;
  justify-content: space-between;
  left: 0;
  padding: 0 max(6vw, 28px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.brand { align-items: center; display: inline-flex; font-size: 20px; font-weight: 800; gap: 10px; letter-spacing: -.8px; }
.brand em { color: var(--coral); font-family: var(--hand); font-size: 24px; font-style: normal; margin-left: 2px; }
.brand-mark {
  align-items: center;
  background: var(--ink);
  border-radius: 47% 53% 41% 59% / 57% 47% 53% 43%;
  color: var(--paper);
  display: inline-flex;
  font-family: var(--hand);
  font-size: 23px;
  height: 37px;
  justify-content: center;
  transform: rotate(-6deg);
  width: 39px;
}
.nav-links { align-items: center; display: flex; font-size: 13px; font-weight: 700; gap: 30px; }
.nav-links > a:not(.nav-cta) { position: relative; }
.nav-links > a:not(.nav-cta)::after { background: var(--coral); bottom: -5px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0) rotate(-1deg); transform-origin: left; transition: transform .2s; width: 100%; }
.nav-links > a:hover::after { transform: scaleX(1) rotate(-1deg); }
.nav-cta { background: var(--coral); border: var(--line); box-shadow: 4px 4px 0 var(--ink); padding: 12px 17px; transform: rotate(1deg); transition: .2s ease; }
.nav-cta:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px) rotate(0); }
.menu-button { background: none; border: 0; cursor: pointer; display: none; height: 42px; padding: 8px; position: relative; touch-action: manipulation; width: 46px; }
.menu-button span { background: var(--ink); height: 2px; left: 8px; position: absolute; transition: .2s; width: 30px; }
.menu-button span:first-child { top: 14px; transform: rotate(2deg); }
.menu-button span:last-child { top: 26px; transform: rotate(-2deg); }
.menu-button.open span:first-child { top: 20px; transform: rotate(45deg); }
.menu-button.open span:last-child { top: 20px; transform: rotate(-45deg); }

.hero { align-items: center; display: grid; gap: clamp(45px, 8vw, 130px); grid-template-columns: minmax(0, 1.03fr) minmax(390px, .8fr); min-height: 780px; padding-top: 155px; }
.eyebrow { align-items: center; display: flex; font-size: 11px; font-weight: 800; gap: 10px; letter-spacing: .12em; margin: 0 0 28px; text-transform: uppercase; }
.eyebrow span { color: var(--coral); font-size: 17px; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { font-size: clamp(52px, 6.2vw, 99px); font-weight: 800; letter-spacing: -.075em; line-height: .94; margin-bottom: 34px; max-width: 900px; }
.scribble { display: inline-block; font-family: var(--hand); font-weight: 700; letter-spacing: -.03em; position: relative; transform: rotate(-2deg); }
.scribble::after { border-bottom: 4px solid currentColor; border-radius: 50%; bottom: 0; content: ""; height: 10px; left: 3%; opacity: .8; position: absolute; transform: rotate(-1deg); width: 94%; }
.coral-ink { color: var(--coral); }
.blue-ink { color: var(--blue); }
.hero-lead { color: #3f3e37; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; max-width: 680px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 31px; margin-top: 38px; }
.button { align-items: center; border: var(--line); display: inline-flex; font-size: 14px; font-weight: 800; gap: 21px; justify-content: center; padding: 16px 21px; transition: .2s ease; }
.button.primary { background: var(--coral); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-.6deg); }
.button.primary:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(4px, 4px) rotate(0); }
.button.ink { background: var(--ink); color: var(--paper-light); width: max-content; }
.button.ink:hover { background: var(--coral); color: var(--ink); }
.text-link { border-bottom: 2px solid var(--ink); font-size: 14px; font-weight: 800; padding-bottom: 4px; }
.text-link span { display: inline-block; margin-left: 9px; transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }
.hero-note { align-items: center; display: flex; gap: 14px; margin: 38px 0 0 48px; transform: rotate(-3deg); width: max-content; }
.hero-note p { font-family: var(--hand); font-size: 18px; line-height: 1.05; margin: 0; }
.hand-arrow { color: var(--blue); font-family: var(--hand); font-size: 45px; transform: rotate(20deg); }

.hero-collage { height: 560px; margin: 0 auto; max-width: 540px; position: relative; width: 100%; }
.collage-card { border: var(--line); box-shadow: 8px 9px 0 rgba(23,23,17,.15); position: absolute; }
.card-blue { background: var(--blue); height: 325px; left: 12px; overflow: hidden; top: 30px; transform: rotate(-5deg); width: 285px; }
.card-label { color: #fff; font-size: 10px; font-weight: 800; left: 18px; letter-spacing: .13em; position: absolute; top: 18px; }
.sunburst { align-items: center; background: repeating-conic-gradient(var(--yellow) 0 8deg, var(--blue) 8deg 17deg); border-radius: 50%; bottom: -55px; display: flex; height: 276px; justify-content: center; position: absolute; right: -34px; width: 276px; }
.sunburst::after { background: var(--yellow); border: var(--line); border-radius: 50%; content: ""; height: 115px; position: absolute; width: 115px; }
.sunburst span { font-family: var(--hand); font-size: 25px; font-weight: 800; line-height: .9; position: relative; text-align: center; transform: rotate(-5deg); z-index: 2; }
.card-photo { background: #f8a3a0; height: 300px; padding: 22px; right: 4px; top: 105px; transform: rotate(6deg); width: 265px; }
.photo-shape { background: #a9d7c3; border: var(--line); border-radius: 49% 51% 42% 58% / 37% 52% 48% 63%; height: 190px; overflow: hidden; position: relative; }
.photo-shape::before { background: var(--ink); border-radius: 50% 50% 40% 60%; content: ""; height: 110px; left: 37px; position: absolute; top: -22px; transform: rotate(-17deg); width: 142px; }
.eye { font-size: 24px; left: 72px; position: absolute; top: 74px; }
.smile { font-size: 50px; left: 81px; position: absolute; top: 91px; transform: rotate(-9deg); }
.card-photo p { bottom: 12px; font-family: var(--hand); font-size: 21px; line-height: .82; margin: 0; position: absolute; right: 18px; text-align: right; transform: rotate(-5deg); }
.card-yellow { background: var(--yellow); bottom: 28px; height: 190px; left: 80px; padding: 20px; transform: rotate(2deg); width: 320px; }
.card-yellow .tiny-note { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.growth-number { display: block; font-size: 82px; letter-spacing: -.09em; line-height: 1; }
.card-yellow > span:last-child { bottom: 22px; font-family: var(--hand); font-size: 20px; position: absolute; right: 24px; transform: rotate(-4deg); }
.paper-tape, .tape { background: rgba(255,250,240,.72); box-shadow: 0 1px 3px rgba(0,0,0,.12); height: 30px; position: absolute; width: 92px; z-index: 7; }
.tape-one { left: 105px; top: 20px; transform: rotate(6deg); }
.tape-two { bottom: 17px; right: 53px; transform: rotate(-9deg); }
.doodle-star { font-family: var(--hand); font-size: 42px; position: absolute; z-index: 8; }
.star-one { color: var(--coral); right: -21px; top: 42px; transform: rotate(13deg); }
.star-two { bottom: 46px; color: var(--blue); left: 10px; }
.orbit-line { border: 3px solid var(--ink); border-left-color: transparent; border-radius: 50%; height: 125px; left: -30px; opacity: .9; position: absolute; top: 365px; transform: rotate(38deg); width: 74px; }
.orbit-line::after { border: solid var(--ink); border-width: 0 3px 3px 0; bottom: 4px; content: ""; height: 9px; position: absolute; right: -1px; transform: rotate(13deg); width: 9px; }
.hand-caption { bottom: -4px; font-family: var(--hand); font-size: 21px; position: absolute; right: 37px; transform: rotate(-3deg); }

.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 15px 0; transform: rotate(-1deg) scale(1.02); }
.ticker-track { animation: ticker 30s linear infinite; align-items: center; display: flex; font-size: 13px; font-weight: 800; gap: 27px; letter-spacing: .14em; width: max-content; }
.ticker-track i { color: var(--yellow); font-size: 17px; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-kicker { align-items: center; display: flex; font-size: 11px; font-weight: 800; gap: 11px; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker span { align-items: center; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; height: 30px; justify-content: center; letter-spacing: 0; width: 30px; }
.section-kicker.light { color: var(--paper); }
.intro-grid { align-items: start; display: grid; gap: 10vw; grid-template-columns: 1.1fr .8fr; margin-top: 38px; }
.intro h2, .section-heading h2, .work-heading h2, .process h2, .faq h2 { font-size: clamp(47px, 6.2vw, 88px); font-weight: 800; letter-spacing: -.065em; line-height: .95; margin-bottom: 0; }
.circle-word { display: inline-block; font-family: var(--hand); position: relative; transform: rotate(-3deg); }
.circle-word::after { border: 3px solid var(--coral); border-radius: 50%; content: ""; inset: -1px -15px -4px -14px; position: absolute; transform: rotate(2deg); }
.intro-copy { padding-top: 22px; }
.intro-copy p { color: var(--muted); font-size: 16px; line-height: 1.72; }
.intro-copy .intro-big { color: var(--ink); font-size: 23px; font-weight: 600; line-height: 1.42; }
.intro-copy .text-link { display: inline-block; margin-top: 15px; }
.stats-row { border-bottom: var(--line); border-top: var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 85px; }
.stats-row > div { display: flex; flex-direction: column; min-height: 150px; padding: 28px; position: relative; }
.stats-row > div:not(:last-child) { border-right: var(--line); }
.stats-row strong { font-size: 46px; letter-spacing: -.06em; }
.stats-row span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.stats-row .stat-note { background: var(--yellow); justify-content: center; transform: rotate(1deg) scale(1.03); }
.stats-row .stat-note strong { font-family: var(--hand); font-size: 27px; letter-spacing: 0; margin-top: 8px; transform: rotate(-2deg); }

.services { background: var(--paper-light); border-bottom: var(--line); border-top: var(--line); }
.section-heading { align-items: end; display: grid; gap: 24px 7vw; grid-template-columns: .55fr 1.3fr .72fr; margin-bottom: 65px; }
.section-heading h2 span { color: var(--coral); font-family: var(--hand); }
.section-heading > p { color: var(--muted); line-height: 1.6; margin: 0; }
.service-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.service-card { border: var(--line); display: flex; flex-direction: column; min-height: 400px; padding: 28px; position: relative; transition: transform .25s, box-shadow .25s; }
.service-card:hover { box-shadow: 8px 8px 0 var(--ink); transform: translate(-4px, -4px) rotate(-.5deg); }
.service-card:nth-child(even):hover { transform: translate(-4px, -4px) rotate(.5deg); }
.service-card.sun { background: var(--yellow); }
.service-card.coral { background: var(--coral); }
.service-card.blue { background: var(--blue); color: white; }
.service-card.mint { background: var(--mint); }
.service-card.lilac { background: var(--lilac); }
.service-card.paper { background: var(--paper); }
.service-top { align-items: start; display: flex; justify-content: space-between; }
.service-no { border-bottom: 2px solid currentColor; font-family: var(--hand); font-size: 20px; }
.service-icon { align-items: center; border: 2px solid currentColor; border-radius: 47% 53% 44% 56%; display: inline-flex; font-family: var(--hand); font-size: 21px; height: 48px; justify-content: center; transform: rotate(8deg); width: 50px; }
.service-card h3 { font-size: 27px; letter-spacing: -.04em; line-height: 1.08; margin: 48px 0 12px; max-width: 270px; }
.service-short { font-family: var(--hand); font-size: 21px; font-weight: 600; line-height: 1; margin-bottom: 21px; transform: rotate(-1deg); }
.service-copy { font-size: 13px; line-height: 1.65; opacity: .8; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 20px; }
.tag-row span { border: 1.5px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 6px 9px; text-transform: uppercase; }

.work { background: var(--ink); color: var(--paper); }
.work-heading { align-items: end; grid-template-columns: .55fr 1.3fr .72fr; }
.work-heading > p { color: #c8c2b4; }
.work.section-pad { display: flex; flex-direction: column; }
.work-heading { order: 1; }
.work-tabs { order: 2; }
.case-study { order: 3; }
.case-controls { order: 4; }
.case-note { order: 5; }
.work-tabs { border-bottom: 0; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto 42px; max-width: 920px; }
.work-tabs button { align-items: end; background: #292821; border: 1.5px solid #6d695e; color: var(--paper); cursor: pointer; display: grid; font-size: 13px; font-weight: 800; grid-template-columns: auto minmax(0, 1fr) auto; line-height: 1.05; min-height: 0; overflow: hidden; padding: 0 12px 13px; position: relative; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.work-tabs button:hover { border-color: var(--paper); transform: translateY(-2px); }
.work-tabs button span { color: var(--coral); font-family: var(--hand); font-size: 18px; font-weight: 800; margin: 0 10px 0 0; }
.work-tabs button strong { display: block; font: inherit; overflow-wrap: anywhere; }
.work-tabs button::before { aspect-ratio: 1 / 1; background-color: #fff; background-image: var(--case-thumb); background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; display: block; grid-column: 1 / -1; margin: 0 -12px 12px; width: calc(100% + 24px); }
.case-toggle-icon { align-items: center; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; font-family: var(--sans); font-size: 18px; font-style: normal; font-weight: 700; height: 31px; justify-content: center; justify-self: end; line-height: 1; width: 31px; }
.work-tabs button::after { background: var(--coral); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .16s ease; width: 100%; }
.work-tabs button[aria-selected="true"] { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); color: white; }
.work-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.work-tabs button:focus-visible, .mockup-toolbar button:focus-visible, .case-controls button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.case-study { border: var(--line); color: var(--ink); contain: layout paint; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 760px; overflow: hidden; }
.project-blue { background: #98bffc; }
.project-yellow { background: var(--yellow); }
.project-omaya { background: #d9eadf; }
.project-coral { background: #ef856e; }
.project-mint { background: var(--mint); }
.project-jade { background: #f5efe2; }
.project-vituit { background: #e9edf0; }
.project-calvary { background: #d8f2f0; }
.project-ultralinks { background: #f6d9cc; }
.project-xianwei { background: #e8e8e5; }
.project-mindflow { background: #e9e3ff; }
.project-pinnacle { background: #e8edf7; }
.project-community { background: #d9f0e1; }
.project-event { background: #e8f2df; }
.case-copy { border-right: var(--line); display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 4.3vw, 66px); }
.case-count { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 17px; }
.case-count span { border: 1.5px solid var(--ink); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .15em; padding: 6px 9px; }
.case-count i { font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.case-copy h3 { animation: case-in .14s ease both; font-size: clamp(43px, 5vw, 72px); letter-spacing: -.07em; line-height: .9; margin: 25px 0 18px; }
@keyframes case-in { from { opacity: 0; transform: translateY(10px) rotate(-1deg); } }
.case-intro { font-size: 17px; font-weight: 600; line-height: 1.55; max-width: 570px; }
.case-explanation { border-bottom: 1.5px solid rgba(23,23,17,.45); border-top: 1.5px solid rgba(23,23,17,.45); display: grid; gap: 24px; grid-template-columns: 1fr 1fr; margin: 8px 0 23px; padding: 23px 0; }
.case-explanation small, .case-services > small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .16em; margin-bottom: 9px; }
.case-explanation p { font-size: 12px; line-height: 1.55; margin: 0; }
.case-services > div { display: flex; flex-wrap: wrap; gap: 7px; }
.case-services span { background: rgba(255,255,255,.32); border: 1.5px solid var(--ink); border-radius: 999px; font-size: 9px; font-weight: 700; padding: 6px 9px; }
.result-sticker { align-items: center; background: var(--paper-light); border: var(--line); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-wrap: wrap; font-family: var(--hand); font-size: 19px; gap: 7px 10px; line-height: 1.15; margin: 25px 0 26px; max-width: 100%; padding: 10px 15px; transform: rotate(-2deg); width: fit-content; }
.result-sticker small { font-family: var(--sans); font-size: 8px; letter-spacing: .14em; }
.case-art { align-items: stretch; background: rgba(255,255,255,.12); display: flex; flex-direction: column; justify-content: center; min-height: 760px; overflow: hidden; padding: 34px clamp(24px, 3.5vw, 52px) 58px; position: relative; }
.case-art::before { background: rgba(255,255,255,.18); border: 3px solid var(--ink); border-radius: 50%; content: ""; height: 510px; left: 50%; position: absolute; top: 54%; transform: translate(-50%, -50%) rotate(10deg); width: 510px; }
.case-art.wakanet::after { color: #f05d2f; content: "⌁ connect everywhere"; font-family: var(--hand); font-size: 26px; font-weight: 800; position: absolute; right: 18px; top: 77px; transform: rotate(5deg); }
.case-art.omaya::after { color: #08743f; content: "₿ learn → trust → trade"; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 77px; transform: rotate(5deg); }
.case-art.netpay::after { border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); content: ""; height: 45px; position: absolute; right: 25px; top: 95px; transform: rotate(15deg) skew(-20deg); width: 95px; }
.case-art.jishikie::after { bottom: 24px; color: #08753c; content: "social • story • site visit"; font-family: var(--hand); font-size: 24px; font-weight: 800; position: absolute; right: 24px; transform: rotate(-4deg); }
.case-art.jishikie-event::after { color: #e95f2b; content: "✦ invite • engage • amplify"; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.jade::after { color: #f46a24; content: "✦"; font-family: var(--hand); font-size: 86px; position: absolute; right: 19px; top: 74px; transform: rotate(9deg); }
.case-art.vituit::after { color: #ef202c; content: "# ISP GROWTH"; font-family: var(--hand); font-size: 26px; font-weight: 800; position: absolute; right: 18px; top: 78px; transform: rotate(5deg); }
.case-art.calvary::after { color: #00a5c9; content: "✚ care, clearly"; font-family: var(--hand); font-size: 27px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.ultralinks::after { color: #ec4a00; content: "⌁ stay connected"; font-family: var(--hand); font-size: 27px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.xianwei::after { color: #171711; content: "⌁ connected. protected. ready."; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.mindflow::after { color: #7658eb; content: "◉ breathe • notice • grow"; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.pinnacle::after { color: #ff6937; content: "⌂ peak quality, every time"; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-art.community::after { color: #168c49; content: "◎ listen • share • grow"; font-family: var(--hand); font-size: 25px; font-weight: 800; position: absolute; right: 18px; top: 76px; transform: rotate(5deg); }
.case-tape { left: 50%; top: 85px; transform: rotate(-4deg); }
.mockup-toolbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 35px; position: relative; z-index: 5; }
.mockup-toolbar > span { font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.mockup-toolbar > div { background: rgba(255,255,255,.35); border: 1.5px solid var(--ink); display: flex; padding: 3px; }
.mockup-toolbar button { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 10px; font-weight: 800; padding: 8px 12px; }
.mockup-toolbar button.active { background: var(--ink); color: var(--paper-light); }
.mockup-stage { align-items: center; animation: mockup-in .14s ease both; contain: paint; display: flex; flex: 1; justify-content: center; min-height: 520px; position: relative; z-index: 3; }
.mockup-stage img { background: rgba(255,255,255,.16); }
@keyframes mockup-in { from { opacity: 0; transform: translateY(16px) scale(.97) rotate(-1deg); } }
.art-scribble { bottom: 23px; font-family: var(--hand); font-size: 22px; font-weight: 700; position: absolute; right: 30px; transform: rotate(-7deg); z-index: 4; }
.case-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; }
.case-contact-link { border-bottom: 2px solid var(--ink); font-family: var(--hand); font-size: 18px; font-weight: 700; }
.case-mobile-close { display: none; }

.wakanet-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.wakanet-sheet { background: #fff; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.wakanet-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.wakanet-sheet-one { height: 382px; left: 2%; top: 48px; transform: rotate(-7deg); width: 210px; z-index: 1; }
.wakanet-sheet-two { height: 430px; left: 34%; top: 12px; transform: rotate(1deg); width: 220px; z-index: 3; }
.wakanet-sheet-three { height: 374px; right: 1%; top: 64px; transform: rotate(7deg); width: 205px; z-index: 2; }
.wakanet-wall:hover .wakanet-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.wakanet-wall:hover .wakanet-sheet-two { transform: translateY(-8px) rotate(0); }
.wakanet-wall:hover .wakanet-sheet-three { transform: translateX(8px) rotate(9deg); }
.wakanet-pin { background: #f05d2f; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.wakanet-pin-one { left: 20%; top: 61px; }
.wakanet-pin-two { background: #172a57; right: 18%; top: 77px; }
.wakanet-wall-note { background: #172a57; border: 2px solid var(--ink); bottom: 4px; color: #fff; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.wakanet-channel-scene { height: 490px; max-width: 610px; position: relative; width: 100%; }
.wakanet-channel { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 8px 10px 0 rgba(23,23,17,.18); height: 425px; margin: 0; overflow: hidden; padding: 25px 6px 7px; position: absolute; top: 17px; width: 205px; }
.wakanet-channel::before { background: var(--ink); border-radius: 99px; content: ""; height: 5px; left: 50%; position: absolute; top: 10px; transform: translateX(-50%); width: 45px; }
.wakanet-channel > span { background: #172a57; border: 2px solid var(--ink); color: #fff; font-size: 8px; font-weight: 800; left: 50%; letter-spacing: .13em; padding: 5px 8px; position: absolute; top: -4px; transform: translate(-50%,-50%); z-index: 4; }
.wakanet-channel img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.wakanet-channel-facebook { left: 0; transform: rotate(-7deg); z-index: 1; }
.wakanet-channel-tiktok { left: 50%; top: 0; transform: translateX(-50%) rotate(1deg); z-index: 3; }
.wakanet-channel-instagram { right: 0; transform: rotate(7deg); z-index: 2; }
.wakanet-channel-card { background: #f05d2f; border: 3px solid var(--ink); bottom: 0; box-shadow: 7px 8px 0 rgba(23,23,17,.18); color: #fff; padding: 13px 16px; position: absolute; right: 5%; transform: rotate(-4deg); width: 172px; z-index: 5; }
.wakanet-channel-card small { display: block; font-size: 7px; font-weight: 800; letter-spacing: .16em; margin-bottom: 7px; }
.wakanet-channel-card strong { font-size: 16px; line-height: 1.2; }

.wakanet-web-board { height: 480px; max-width: 620px; position: relative; width: 100%; }
.wakanet-browser { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 350px; left: 0; overflow: hidden; position: absolute; top: 25px; transform: rotate(2deg); width: 86%; }
.wakanet-browser-image { height: calc(100% - 32px); overflow: hidden; }
.wakanet-browser-image img { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.wakanet-web-phone { background: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 290px; margin: 0; overflow: hidden; padding: 7px; position: absolute; right: 0; top: 82px; transform: rotate(7deg); transition: transform .28s ease; width: 150px; z-index: 3; }
.wakanet-web-phone img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.wakanet-web-board:hover .wakanet-web-phone { transform: translate(6px,-7px) rotate(9deg); }
.wakanet-palette { bottom: 1px; display: flex; left: 8%; position: absolute; transform: rotate(-3deg); }
.wakanet-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.wakanet-navy { background: #172a57; }.wakanet-orange { background: #f05d2f; }.wakanet-white { background: #fff; }.wakanet-green { background: #20c86a; }
.wakanet-web-card { background: #172a57; border: 3px solid var(--ink); bottom: 19px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: #fff; padding: 18px 16px; position: absolute; right: 5px; transform: rotate(-5deg); width: 190px; z-index: 4; }
.wakanet-web-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.wakanet-web-card strong { font-size: 18px; line-height: 1.25; }

.community-growth-scene { height: 470px; max-width: 610px; position: relative; width: 100%; }
.community-milestone-card { background: #11161a; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.18); left: 50%; margin: 0; overflow: hidden; padding: 7px; position: absolute; top: 28px; transform: translateX(-50%) rotate(-2deg); width: 94%; z-index: 2; }
.community-milestone-card img { display: block; height: auto; width: 100%; }
.community-growth-stats { bottom: 38px; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); left: 0; position: absolute; width: 100%; z-index: 4; }
.community-growth-stats span { background: var(--paper-light); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(23,23,17,.17); display: flex; flex-direction: column; min-height: 130px; padding: 15px; }
.community-growth-stats span:nth-child(1) { transform: rotate(-3deg); }
.community-growth-stats span:nth-child(2) { background: #b9efc9; transform: translateY(7px) rotate(1deg); }
.community-growth-stats span:nth-child(3) { background: var(--yellow); transform: rotate(3deg); }
.community-growth-stats small { font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.community-growth-stats strong { font-size: 36px; line-height: 1; margin: 13px 0 6px; }
.community-growth-stats i { font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.community-growth-note { bottom: -3px; color: #08783b; font-family: var(--hand); font-size: 20px; font-weight: 800; position: absolute; right: 15px; transform: rotate(-3deg); z-index: 5; }

.community-hubs { height: 500px; max-width: 620px; position: relative; width: 100%; }
.community-hub { background: #171c20; border: 3px solid var(--ink); box-shadow: 9px 11px 0 rgba(23,23,17,.18); height: 400px; margin: 0; overflow: hidden; padding: 27px 7px 7px; position: absolute; top: 35px; width: 198px; }
.community-hub > span { color: white; font-size: 7px; font-weight: 900; left: 10px; letter-spacing: .09em; position: absolute; top: 10px; }
.community-hub img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.community-hub-nespak { left: 0; transform: rotate(-6deg); z-index: 1; }
.community-hub-netpay { left: 50%; top: 13px; transform: translateX(-50%) rotate(1deg); z-index: 3; }
.community-hub-jade { right: 0; transform: rotate(6deg); z-index: 2; }
.community-hub:hover { z-index: 5; }
.community-hubs-note { background: #24d366; border: 2px solid var(--ink); bottom: 7px; font-family: var(--hand); font-size: 19px; font-weight: 800; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 6; }

.community-system-board { background: #f8f3e8; border: 3px solid var(--ink); box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 455px; max-width: 600px; padding: 23px; position: relative; transform: rotate(-1deg); width: 100%; }
.community-board-head { align-items: center; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; padding-bottom: 13px; }
.community-board-head span { font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.community-board-head small { color: #168c49; font-size: 8px; font-weight: 900; }
.community-channel-scorecards { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); margin-top: 17px; }
.community-channel-scorecards > span { background: white; border: 1.5px solid var(--ink); display: flex; flex-direction: column; min-height: 98px; padding: 11px; }
.community-channel-scorecards > span:nth-child(2) { background: #e9f2ff; }
.community-channel-scorecards > span:nth-child(3) { background: #dff6e6; }
.community-channel-scorecards i { font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.community-channel-scorecards strong { font-size: 27px; line-height: 1; margin: 10px 0 3px; }
.community-channel-scorecards small { font-size: 8px; font-weight: 700; }
.community-workflow { bottom: 23px; left: 23px; position: absolute; width: 56%; }
.community-workflow > small { font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.community-workflow > div { align-items: center; background: #b9efc9; border: 2px solid var(--ink); display: flex; justify-content: space-between; margin-top: 8px; padding: 13px; }
.community-workflow strong { font-size: 10px; }
.community-workflow i { font-family: var(--hand); font-size: 16px; font-style: normal; }
.community-proof-thumb { background: #11161a; border: 2px solid var(--ink); bottom: 111px; margin: 0; overflow: hidden; padding: 4px; position: absolute; right: 23px; transform: rotate(3deg); width: 34%; }
.community-proof-thumb img { display: block; height: auto; width: 100%; }
.community-total { align-items: flex-end; bottom: 21px; display: flex; flex-wrap: wrap; justify-content: flex-end; position: absolute; right: 23px; width: 34%; }
.community-total small { flex: 0 0 100%; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-align: right; }
.community-total strong { color: #168c49; font-size: 31px; line-height: 1; margin: 5px 5px 0 0; }
.community-total span { font-size: 8px; font-weight: 800; padding-bottom: 3px; text-transform: uppercase; }

.pinnacle-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.pinnacle-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.pinnacle-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.pinnacle-sheet-one { height: 342px; left: 0; top: 64px; transform: rotate(-7deg); width: 255px; z-index: 1; }
.pinnacle-sheet-two { height: 398px; left: 29%; top: 18px; transform: rotate(2deg); width: 280px; z-index: 3; }
.pinnacle-sheet-three { height: 352px; right: 0; top: 77px; transform: rotate(7deg); width: 242px; z-index: 2; }
.pinnacle-wall:hover .pinnacle-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.pinnacle-wall:hover .pinnacle-sheet-two { transform: translateY(-8px) rotate(1deg); }
.pinnacle-wall:hover .pinnacle-sheet-three { transform: translateX(8px) rotate(9deg); }
.pinnacle-pin { background: #ff6937; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.pinnacle-pin-one { left: 20%; top: 69px; }
.pinnacle-pin-two { background: #2f4778; right: 18%; top: 84px; }
.pinnacle-wall-note { background: #ff6937; border: 2px solid var(--ink); bottom: 4px; color: white; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.pinnacle-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.pinnacle-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.pinnacle-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 9px; justify-content: space-between; padding: 7px 3px 9px; }
.pinnacle-feed-head strong { color: #2f4778; font-size: 10px; }
.pinnacle-feed-image { background: #eef1f7; height: 326px; overflow: hidden; }
.pinnacle-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.pinnacle-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.pinnacle-feed-actions i { font-style: normal; margin-left: auto; }
.pinnacle-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.pinnacle-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 312px; overflow: hidden; position: absolute; right: 0; top: 90px; transform: rotate(8deg); width: 190px; z-index: 2; }
.pinnacle-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.pinnacle-scroll-note { bottom: 3px; color: #2f4778; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.pinnacle-brand-board { height: 485px; max-width: 620px; position: relative; width: 100%; }
.pinnacle-billboard-frame { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 350px; left: 0; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 82%; }
.pinnacle-billboard-image { height: calc(100% - 32px); overflow: hidden; }
.pinnacle-billboard-image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.pinnacle-logo-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 170px; margin: 0; overflow: hidden; padding: 6px; position: absolute; right: 0; top: 69px; transform: rotate(7deg); transition: transform .28s ease; width: 220px; z-index: 3; }
.pinnacle-logo-card img { display: block; height: 100%; object-fit: contain; width: 100%; }
.pinnacle-brand-board:hover .pinnacle-logo-card { transform: translate(6px,-7px) rotate(9deg); }
.pinnacle-palette { bottom: 0; display: flex; left: 8%; position: absolute; transform: rotate(-3deg); }
.pinnacle-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.pinnacle-orange { background: #ff6937; }.pinnacle-navy { background: #2f4778; }.pinnacle-white { background: #fff; }.pinnacle-grey { background: #dbe0e9; }
.pinnacle-system-card { background: #2f4778; border: 3px solid var(--ink); bottom: 30px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: #fff; padding: 18px 16px; position: absolute; right: 4px; transform: rotate(-5deg); width: 205px; z-index: 4; }
.pinnacle-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.pinnacle-system-card strong { font-size: 18px; line-height: 1.28; }

.omaya-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.omaya-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.omaya-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.omaya-sheet-one { height: 342px; left: 0; top: 63px; transform: rotate(-7deg); width: 255px; z-index: 1; }
.omaya-sheet-two { height: 398px; left: 29%; top: 18px; transform: rotate(2deg); width: 280px; z-index: 3; }
.omaya-sheet-three { height: 352px; right: 0; top: 76px; transform: rotate(7deg); width: 238px; z-index: 2; }
.omaya-wall:hover .omaya-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.omaya-wall:hover .omaya-sheet-two { transform: translateY(-8px) rotate(1deg); }
.omaya-wall:hover .omaya-sheet-three { transform: translateX(8px) rotate(9deg); }
.omaya-pin { background: #f89a27; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.omaya-pin-one { left: 20%; top: 69px; }
.omaya-pin-two { background: #08743f; right: 18%; top: 83px; }
.omaya-wall-note { background: #08743f; border: 2px solid var(--ink); bottom: 4px; color: white; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.omaya-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.omaya-social-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.omaya-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 9px; justify-content: space-between; padding: 7px 3px 9px; }
.omaya-feed-head strong { color: #08743f; font-size: 10px; }
.omaya-feed-image { background: #edf5ef; height: 326px; overflow: hidden; }
.omaya-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.omaya-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.omaya-feed-actions i { font-style: normal; margin-left: auto; }
.omaya-social-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.omaya-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 312px; overflow: hidden; position: absolute; right: 0; top: 90px; transform: rotate(8deg); width: 190px; z-index: 2; }
.omaya-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.omaya-scroll-note { bottom: 3px; color: #08743f; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.omaya-system-board { height: 475px; max-width: 600px; position: relative; width: 100%; }
.omaya-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 1%; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 78%; }
.omaya-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.omaya-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.omaya-palette { bottom: 2px; display: flex; left: 8%; position: absolute; transform: rotate(-3deg); }
.omaya-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.omaya-green { background: #08743f; }.omaya-orange { background: #f89a27; }.omaya-mint { background: #d9eadf; }.omaya-white { background: #fff; }
.omaya-system-card { background: #08743f; border: 3px solid var(--ink); bottom: 38px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: white; padding: 20px 18px; position: absolute; right: 0; transform: rotate(-5deg); width: 205px; z-index: 4; }
.omaya-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.omaya-system-card strong { font-size: 20px; line-height: 1.24; }

.xianwei-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.xianwei-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.xianwei-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.xianwei-sheet-one { height: 330px; left: 0; top: 70px; transform: rotate(-7deg); width: 250px; z-index: 1; }
.xianwei-sheet-two { height: 395px; left: 29%; top: 18px; transform: rotate(2deg); width: 278px; z-index: 3; }
.xianwei-sheet-three { height: 355px; right: 0; top: 76px; transform: rotate(7deg); width: 240px; z-index: 2; }
.xianwei-wall:hover .xianwei-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.xianwei-wall:hover .xianwei-sheet-two { transform: translateY(-8px) rotate(1deg); }
.xianwei-wall:hover .xianwei-sheet-three { transform: translateX(8px) rotate(9deg); }
.xianwei-pin { background: #171711; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.xianwei-pin-one { left: 20%; top: 75px; }
.xianwei-pin-two { background: #2674d9; right: 18%; top: 83px; }
.xianwei-wall-note { background: #fff; border: 2px solid var(--ink); bottom: 4px; color: var(--ink); font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.xianwei-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.xianwei-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.xianwei-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 8px; justify-content: space-between; padding: 7px 3px 9px; }
.xianwei-feed-head strong { color: #171711; font-size: 9px; }
.xianwei-feed-image { background: #f3f3f1; height: 326px; overflow: hidden; }
.xianwei-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.xianwei-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.xianwei-feed-actions i { font-style: normal; margin-left: auto; }
.xianwei-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.xianwei-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 310px; overflow: hidden; position: absolute; right: 0; top: 90px; transform: rotate(8deg); width: 190px; z-index: 2; }
.xianwei-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.xianwei-scroll-note { bottom: 3px; color: #171711; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.xianwei-system-board { height: 475px; max-width: 600px; position: relative; width: 100%; }
.xianwei-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 1%; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 78%; }
.xianwei-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.xianwei-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.xianwei-palette { bottom: 2px; display: flex; left: 8%; position: absolute; transform: rotate(-3deg); }
.xianwei-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.xianwei-black { background: #171711; }.xianwei-white { background: #fff; }.xianwei-grey { background: #d9d9d7; }.xianwei-blue { background: #2674d9; }
.xianwei-system-card { background: #171711; border: 3px solid var(--ink); bottom: 38px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: #fff; padding: 20px 18px; position: absolute; right: 0; transform: rotate(-5deg); width: 210px; z-index: 4; }
.xianwei-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.xianwei-system-card strong { font-size: 18px; line-height: 1.28; }

.mindflow-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.mindflow-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.mindflow-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mindflow-sheet-one { height: 370px; left: 0; top: 54px; transform: rotate(-7deg); width: 248px; z-index: 1; }
.mindflow-sheet-two { height: 405px; left: 29%; top: 17px; transform: rotate(2deg); width: 278px; z-index: 3; }
.mindflow-sheet-three { height: 322px; right: 0; top: 91px; transform: rotate(8deg); width: 250px; z-index: 2; }
.mindflow-wall:hover .mindflow-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.mindflow-wall:hover .mindflow-sheet-two { transform: translateY(-8px) rotate(1deg); }
.mindflow-wall:hover .mindflow-sheet-three { transform: translateX(8px) rotate(10deg); }
.mindflow-pin { background: #7658eb; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.mindflow-pin-one { left: 20%; top: 59px; }
.mindflow-pin-two { background: #61a7ef; right: 18%; top: 96px; }
.mindflow-wall-note { background: #7658eb; border: 2px solid var(--ink); bottom: 4px; color: white; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.mindflow-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.mindflow-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.mindflow-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 9px; justify-content: space-between; padding: 7px 3px 9px; }
.mindflow-feed-head strong { color: #7658eb; font-size: 12px; }
.mindflow-feed-image { background: #f1edff; height: 326px; overflow: hidden; }
.mindflow-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mindflow-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.mindflow-feed-actions i { font-style: normal; margin-left: auto; }
.mindflow-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.mindflow-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 312px; overflow: hidden; position: absolute; right: 0; top: 90px; transform: rotate(8deg); width: 190px; z-index: 2; }
.mindflow-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mindflow-scroll-note { bottom: 3px; color: #7658eb; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.mindflow-app-board { height: 485px; max-width: 610px; position: relative; width: 100%; }
.mindflow-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 0; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 75%; }
.mindflow-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.mindflow-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mindflow-app-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 266px; margin: 0; overflow: hidden; padding: 6px; position: absolute; right: 0; top: 89px; transform: rotate(7deg); transition: transform .28s ease; width: 184px; z-index: 3; }
.mindflow-app-card img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mindflow-app-board:hover .mindflow-app-card { transform: translate(6px,-7px) rotate(9deg); }
.mindflow-palette { bottom: 0; display: flex; left: 8%; position: absolute; transform: rotate(-3deg); }
.mindflow-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.mindflow-purple { background: #7658eb; }.mindflow-blue { background: #61a7ef; }.mindflow-lilac { background: #e9e3ff; }.mindflow-white { background: #fff; }
.mindflow-system-card { background: #7658eb; border: 3px solid var(--ink); bottom: 30px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: #fff; padding: 18px 16px; position: absolute; right: 4px; transform: rotate(-5deg); width: 205px; z-index: 4; }
.mindflow-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.mindflow-system-card strong { font-size: 18px; line-height: 1.28; }

.ultralinks-brand-scene { height: 500px; max-width: 610px; position: relative; width: 100%; }
.ultralinks-brand-board { background: #fff; border: 3px solid var(--ink); box-shadow: 11px 13px 0 rgba(23,23,17,.2); height: 440px; left: 0; margin: 0; overflow: hidden; padding: 7px; position: absolute; top: 15px; transform: rotate(-2deg); width: 84%; }
.ultralinks-brand-board img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ultralinks-lanyard-card { background: #fff; border: 3px solid var(--ink); bottom: 8px; box-shadow: 8px 10px 0 rgba(23,23,17,.18); height: 210px; margin: 0; overflow: hidden; padding: 6px; position: absolute; right: 0; transform: rotate(6deg); transition: transform .28s ease; width: 245px; z-index: 3; }
.ultralinks-lanyard-card img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ultralinks-brand-scene:hover .ultralinks-lanyard-card { transform: translate(6px,-7px) rotate(8deg); }
.ultralinks-brand-note { background: #ec4a00; border: 2px solid var(--ink); color: #fff; font-family: var(--hand); font-size: 19px; font-weight: 700; left: 12%; padding: 5px 10px; position: absolute; top: 4px; transform: rotate(-5deg); z-index: 5; }

.ultralinks-digital-scene { height: 490px; max-width: 610px; position: relative; width: 100%; }
.ultralinks-browser { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 365px; left: 0; overflow: hidden; position: absolute; top: 34px; transform: rotate(2deg); width: 82%; }
.ultralinks-browser-screen { height: calc(100% - 32px); overflow: hidden; }
.ultralinks-browser-screen img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.ultralinks-phone-frame { background: #fff; border: 4px solid var(--ink); border-radius: 31px; bottom: 0; box-shadow: 9px 11px 0 rgba(23,23,17,.2); height: 356px; overflow: hidden; padding: 22px 7px 7px; position: absolute; right: 0; transform: rotate(-5deg); width: 190px; z-index: 3; }
.ultralinks-phone-frame img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.ultralinks-digital-note { bottom: 1px; color: #ec4a00; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 2%; position: absolute; transform: rotate(-5deg); }

.ultralinks-campaign-board { height: 480px; max-width: 610px; position: relative; width: 100%; }
.ultralinks-campaign-main, .ultralinks-campaign-side { background: #fff; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.18); margin: 0; overflow: hidden; padding: 7px; position: absolute; }
.ultralinks-campaign-main { height: 365px; left: 0; top: 28px; transform: rotate(-5deg); width: 58%; z-index: 2; }
.ultralinks-campaign-side { height: 300px; right: 0; top: 62px; transform: rotate(6deg); width: 52%; z-index: 1; }
.ultralinks-campaign-main img, .ultralinks-campaign-side img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ultralinks-palette { bottom: 4px; display: flex; left: 6%; position: absolute; transform: rotate(-3deg); z-index: 5; }
.ultralinks-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.ultra-orange { background: #ec4a00; }.ultra-cream { background: #f6d9cc; }.ultra-white { background: #fff; }.ultra-charcoal { background: #252525; }
.ultralinks-system-card { background: #ec4a00; border: 3px solid var(--ink); bottom: 17px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: #fff; padding: 19px 18px; position: absolute; right: 2%; transform: rotate(-4deg); width: 205px; z-index: 4; }
.ultralinks-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.ultralinks-system-card strong { font-size: 20px; line-height: 1.24; }

.calvary-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.calvary-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.calvary-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.calvary-sheet-one { height: 335px; left: 0; top: 65px; transform: rotate(-7deg); width: 260px; z-index: 1; }
.calvary-sheet-two { height: 390px; left: 28%; top: 20px; transform: rotate(2deg); width: 282px; z-index: 3; }
.calvary-sheet-three { height: 350px; right: 0; top: 78px; transform: rotate(7deg); width: 240px; z-index: 2; }
.calvary-wall:hover .calvary-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.calvary-wall:hover .calvary-sheet-two { transform: translateY(-8px) rotate(1deg); }
.calvary-wall:hover .calvary-sheet-three { transform: translateX(8px) rotate(9deg); }
.calvary-pin { background: #7bc342; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.calvary-pin-one { left: 20%; top: 70px; }
.calvary-pin-two { background: #00a5c9; right: 18%; top: 86px; }
.calvary-wall-note { background: #7bc342; border: 2px solid var(--ink); bottom: 4px; color: var(--ink); font-family: var(--hand); font-size: 20px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.calvary-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.calvary-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.calvary-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 9px; justify-content: space-between; padding: 7px 3px 9px; }
.calvary-feed-head strong { color: #009fc7; font-size: 10px; }
.calvary-feed-image { background: #eef9fa; height: 326px; overflow: hidden; }
.calvary-feed-image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.calvary-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.calvary-feed-actions i { font-style: normal; margin-left: auto; }
.calvary-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.calvary-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 310px; overflow: hidden; position: absolute; right: 0; top: 90px; transform: rotate(8deg); width: 190px; z-index: 2; }
.calvary-story-card img { height: 100%; object-fit: cover; object-position: left top; width: 100%; }
.calvary-scroll-note { bottom: 3px; color: #009fc7; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.calvary-calendar-board { height: 475px; max-width: 600px; position: relative; width: 100%; }
.calvary-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 1%; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 78%; }
.calvary-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.calvary-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.calvary-palette { bottom: 2px; display: flex; gap: 0; left: 8%; position: absolute; transform: rotate(-3deg); }
.calvary-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.calvary-cyan { background: #19a7d5; }.calvary-green { background: #7bc342; }.calvary-teal { background: #00b9bd; }.calvary-white { background: #fff; }
.calvary-system-card { background: #19a7d5; border: 3px solid var(--ink); bottom: 38px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: white; padding: 20px 18px; position: absolute; right: 0; transform: rotate(-5deg); width: 205px; z-index: 4; }
.calvary-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.calvary-system-card strong { font-size: 20px; line-height: 1.24; }

.vituit-wall { height: 490px; max-width: 600px; position: relative; width: 100%; }
.vituit-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.vituit-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.vituit-sheet-one { height: 338px; left: 0; top: 66px; transform: rotate(-7deg); width: 252px; z-index: 1; }
.vituit-sheet-two { height: 392px; left: 29%; top: 21px; transform: rotate(2deg); width: 275px; z-index: 3; }
.vituit-sheet-three { height: 368px; right: 0; top: 72px; transform: rotate(7deg); width: 225px; z-index: 2; }
.vituit-wall:hover .vituit-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.vituit-wall:hover .vituit-sheet-two { transform: translateY(-8px) rotate(1deg); }
.vituit-wall:hover .vituit-sheet-three { transform: translateX(8px) rotate(9deg); }
.vituit-pin { background: #ef202c; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.vituit-pin-one { left: 20%; top: 70px; }
.vituit-pin-two { background: #202a38; right: 18%; top: 85px; }
.vituit-wall-note { background: #ef202c; border: 2px solid var(--ink); bottom: 5px; color: white; font-family: var(--hand); font-size: 19px; font-weight: 700; left: 50%; padding: 5px 10px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.vituit-feed-scene { height: 490px; max-width: 530px; position: relative; width: 100%; }
.vituit-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 24%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.vituit-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 10px; justify-content: space-between; padding: 7px 3px 9px; }
.vituit-feed-head strong { color: #202a38; font-size: 13px; }
.vituit-feed-image { background: #f4f4f4; height: 326px; overflow: hidden; }
.vituit-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.vituit-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.vituit-feed-actions i { font-style: normal; margin-left: auto; }
.vituit-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.vituit-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 315px; overflow: hidden; position: absolute; right: 0; top: 88px; transform: rotate(8deg); width: 190px; z-index: 2; }
.vituit-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.vituit-scroll-note { bottom: 4px; color: #ef202c; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 0; position: absolute; transform: rotate(-6deg); }

.vituit-product-board { height: 475px; max-width: 600px; position: relative; width: 100%; }
.vituit-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 1%; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 78%; }
.vituit-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.vituit-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.vituit-palette { bottom: 2px; display: flex; gap: 0; left: 8%; position: absolute; transform: rotate(-3deg); }
.vituit-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.vituit-red { background: #ef202c; }.vituit-navy { background: #202a38; }.vituit-grey { background: #d9dcdf; }.vituit-white { background: #fff; }
.vituit-system-card { background: #ef202c; border: 3px solid var(--ink); bottom: 38px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); color: white; padding: 20px 18px; position: absolute; right: 0; transform: rotate(-5deg); width: 205px; z-index: 4; }
.vituit-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.vituit-system-card strong { font-size: 20px; line-height: 1.24; }

.jade-wall { height: 490px; max-width: 590px; position: relative; width: 100%; }
.jade-sheet { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; padding: 7px; position: absolute; transition: transform .28s ease; }
.jade-sheet img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.jade-sheet-one { height: 380px; left: 1%; top: 52px; transform: rotate(-7deg); width: 248px; z-index: 1; }
.jade-sheet-two { height: 405px; left: 32%; top: 17px; transform: rotate(2deg); width: 278px; z-index: 3; }
.jade-sheet-three { height: 335px; right: 0; top: 90px; transform: rotate(8deg); width: 225px; z-index: 2; }
.jade-wall:hover .jade-sheet-one { transform: translateX(-8px) rotate(-9deg); }
.jade-wall:hover .jade-sheet-two { transform: translateY(-8px) rotate(1deg); }
.jade-wall:hover .jade-sheet-three { transform: translateX(8px) rotate(10deg); }
.jade-pin { background: #f46a24; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(23,23,17,.25); height: 17px; position: absolute; width: 17px; z-index: 6; }
.pin-one { left: 22%; top: 57px; }
.pin-two { background: #1c71b8; right: 20%; top: 95px; }
.jade-wall-note { background: var(--yellow); border: 2px solid var(--ink); bottom: 8px; font-family: var(--hand); font-size: 19px; font-weight: 700; left: 50%; padding: 5px 10px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }

.jade-feed-scene { height: 490px; max-width: 520px; position: relative; width: 100%; }
.jade-phone { background: #fff; border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 470px; left: 25%; overflow: hidden; padding: 24px 10px 13px; position: absolute; top: 0; transform: rotate(-3deg); width: 246px; z-index: 3; }
.jade-feed-head { align-items: center; border-bottom: 1px solid #d7d7d7; display: flex; font-size: 9px; justify-content: space-between; padding: 7px 3px 9px; }
.jade-feed-image { background: #f4f4f4; height: 322px; overflow: hidden; }
.jade-feed-image img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.jade-feed-actions { display: flex; font-size: 17px; gap: 10px; padding: 7px 2px 4px; }
.jade-feed-actions i { font-style: normal; margin-left: auto; }
.jade-phone p { font-size: 7px; line-height: 1.35; margin: 0 2px; }
.jade-story-card { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.18); height: 300px; overflow: hidden; position: absolute; right: 1%; top: 92px; transform: rotate(8deg); width: 183px; z-index: 2; }
.jade-story-card img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.jade-scroll-note { bottom: 5px; font-family: var(--hand); font-size: 20px; font-weight: 700; left: 2%; position: absolute; transform: rotate(-6deg); }

.jade-system-board { height: 475px; max-width: 590px; position: relative; width: 100%; }
.jade-monitor { background: #fff; border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.2); height: 355px; left: 2%; overflow: hidden; position: absolute; top: 22px; transform: rotate(2deg); width: 74%; }
.jade-monitor-screen { height: calc(100% - 32px); overflow: hidden; }
.jade-monitor-screen img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.jade-monitor::after { background: var(--ink); bottom: -52px; content: ""; height: 52px; left: 50%; position: absolute; transform: translateX(-50%); width: 15px; }
.jade-palette { bottom: 3px; display: flex; gap: 0; left: 8%; position: absolute; transform: rotate(-3deg); }
.jade-palette span { border: 2px solid var(--ink); border-radius: 50%; height: 43px; margin-left: -5px; width: 43px; }
.jade-orange { background: #ff6a1a; }.jade-blue { background: #087fc3; }.jade-navy { background: #123f88; }.jade-white { background: #fff; }
.jade-system-card { background: var(--yellow); border: 3px solid var(--ink); bottom: 41px; box-shadow: 8px 9px 0 rgba(23,23,17,.18); padding: 20px 18px; position: absolute; right: 0; transform: rotate(-5deg); width: 210px; z-index: 4; }
.jade-system-card small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
.jade-system-card strong { font-size: 17px; line-height: 1.3; }
.web-mock { background: var(--paper-light); border: 3px solid var(--ink); box-shadow: 13px 14px 0 rgba(23,23,17,.18); height: 400px; overflow: hidden; position: relative; transform: rotate(2deg); width: min(100%, 610px); }
.mock-top { align-items: center; border-bottom: 1.5px solid var(--ink); display: flex; gap: 6px; height: 32px; padding: 0 10px; }
.mock-top > span { background: var(--ink); border-radius: 50%; height: 7px; width: 7px; }
.mock-top i { border: 1px solid rgba(23,23,17,.35); font-size: 7px; font-style: normal; margin-left: 7px; padding: 3px 10px; text-align: center; width: 58%; }
.mock-nav { align-items: center; display: flex; gap: 14px; height: 48px; padding: 0 18px; }
.mock-nav strong { font-size: 13px; margin-right: auto; }
.mock-nav strong span { color: var(--coral); }
.mock-nav > i { background: var(--ink); height: 4px; opacity: .4; width: 32px; }
.mock-button { background: var(--coral); border: 1.5px solid var(--ink); color: var(--ink); display: inline-block; font-size: 7px; font-weight: 800; padding: 7px 10px; }
.mock-hero { background: #132152; color: white; height: 215px; overflow: hidden; padding: 34px 35px; position: relative; }
.mock-hero small { font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.mock-hero h4 { font-size: 34px; letter-spacing: -.07em; line-height: .86; margin: 10px 0 19px; }
.mock-hero .mock-button { background: #4bd6f2; }
.signal { color: #4bd6f2; font-family: var(--hand); font-size: 100px; position: absolute; right: -8px; top: 18px; transform: rotate(-43deg); }
.package-strip { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); padding: 12px 16px; }
.package-strip span { background: #e8eefc; border: 1px solid #9eadd7; font-size: 7px; padding: 11px; }
.package-strip b { display: block; font-size: 17px; }
.phone-mock { background: var(--paper-light); border: 4px solid var(--ink); border-radius: 34px; box-shadow: 11px 13px 0 rgba(23,23,17,.18); height: 475px; overflow: hidden; padding: 28px 23px 22px; position: relative; transform: rotate(-3deg); width: 245px; }
.phone-speaker { background: var(--ink); border-radius: 999px; height: 6px; left: 50%; position: absolute; top: 11px; transform: translateX(-50%); width: 52px; }
.wakanet-phone { background: #122053; color: white; }
.wakanet-phone > small, .jishikie-phone > small { font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.phone-signal { color: #4bd6f2; font-family: var(--hand); font-size: 58px; margin: 12px 0 -5px; transform: rotate(-43deg); width: max-content; }
.wakanet-phone h4 { font-size: 31px; letter-spacing: -.06em; line-height: .92; margin: 8px 0 20px; }
.phone-plans { display: flex; flex-direction: column; gap: 7px; }
.phone-plans span { align-items: center; background: white; border: 1.5px solid var(--ink); color: var(--ink); display: flex; justify-content: space-between; padding: 10px; }
.phone-plans b { font-size: 11px; }
.phone-plans i { font-size: 7px; font-style: normal; text-transform: uppercase; }
.wakanet-phone > .mock-button { background: #4bd6f2; margin-top: 17px; text-align: center; width: 100%; }
.omaya-phone { background: #f8f5ff; color: #24144f; }
.app-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 30px; }
.app-head strong { font-size: 12px; }
.app-head span { border: 1px solid #6c4cc7; border-radius: 50%; padding: 4px; }
.omaya-phone > small { color: #776d91; font-size: 8px; }
.omaya-phone > h4 { font-size: 25px; letter-spacing: -.05em; margin: 5px 0 18px; }
.exchange-card { background: #2b1760; border-radius: 15px; color: white; display: grid; gap: 5px 8px; grid-template-columns: 1fr 1.6fr; padding: 15px; position: relative; }
.exchange-card i { font-size: 8px; font-style: normal; opacity: .65; }
.exchange-card b { font-size: 11px; }
.exchange-card span { align-items: center; background: #f5d449; border: 2px solid #2b1760; border-radius: 50%; color: #2b1760; display: flex; height: 27px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 27px; }
.omaya-phone > .mock-button { background: #f5d449; border-color: #2b1760; margin-top: 17px; text-align: center; width: 100%; }
.app-tabs { border-top: 1px solid #d6cfea; bottom: 18px; display: flex; justify-content: space-around; left: 23px; padding-top: 12px; position: absolute; right: 23px; }
.omaya-dashboard { background: #f8f5ff; color: #2b1760; }
.dash-shell { display: grid; grid-template-columns: 65px 1fr; height: calc(100% - 32px); }
.dash-shell aside { align-items: center; background: #2b1760; display: flex; flex-direction: column; gap: 27px; padding-top: 22px; }
.dash-shell aside b { align-items: center; background: #f5d449; border-radius: 50%; display: flex; height: 28px; justify-content: center; width: 28px; }
.dash-shell aside i { background: #aa97da; height: 7px; width: 25px; }
.dash-main { padding: 26px 32px; }
.dash-main small { font-size: 7px; letter-spacing: .16em; }
.dash-main h4 { font-size: 29px; letter-spacing: -.05em; margin: 7px 0 18px; }
.line-chart { align-items: end; border-bottom: 1px solid #9c91b9; display: flex; gap: 18px; height: 140px; overflow: hidden; }
.line-chart span { background: #6c4cc7; display: block; height: 4px; transform: rotate(var(--tilt, 0)); width: 54px; }
.line-chart span:nth-child(1) { margin-bottom: 28px; transform: rotate(-18deg); }
.line-chart span:nth-child(2) { margin-bottom: 42px; transform: rotate(9deg); }
.line-chart span:nth-child(3) { margin-bottom: 57px; transform: rotate(-14deg); }
.line-chart span:nth-child(4) { margin-bottom: 75px; transform: rotate(12deg); }
.line-chart span:nth-child(5) { margin-bottom: 91px; transform: rotate(-10deg); }
.line-chart span:nth-child(6) { margin-bottom: 108px; }
.dash-cards { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); margin-top: 15px; }
.dash-cards i { background: white; border: 1px solid #c8bde6; font-size: 8px; font-style: normal; padding: 10px; }
.dash-cards b { color: #2ca26f; }
.campaign-mock { height: 465px; position: relative; width: min(100%, 510px); }
.social-post { border: 3px solid var(--ink); box-shadow: 10px 11px 0 rgba(23,23,17,.18); position: absolute; }
.post-main { background: #121b3e; color: white; height: 380px; left: 15px; padding: 30px; top: 28px; transform: rotate(-3deg); width: 330px; }
.post-main small { font-size: 8px; letter-spacing: .16em; }
.post-main h4 { font-size: 42px; letter-spacing: -.07em; line-height: .9; margin: 38px 0 20px; }
.post-main h4 span { color: #ef6040; font-family: var(--hand); }
.post-main p { bottom: 25px; font-size: 9px; line-height: 1.5; max-width: 230px; position: absolute; }
.bill-card { align-items: center; background: white; color: var(--ink); display: flex; font-size: 8px; justify-content: space-between; padding: 12px; transform: rotate(2deg); }
.bill-card i { font-style: normal; }
.bill-card b { background: var(--mint); padding: 4px; }
.post-side { align-items: center; background: var(--coral); bottom: 15px; display: flex; flex-direction: column; height: 190px; justify-content: center; right: 3px; transform: rotate(6deg); width: 180px; }
.post-side b { font-size: 72px; letter-spacing: -.1em; line-height: .8; }
.post-side span { font-family: var(--hand); font-size: 20px; line-height: .9; text-align: center; }
.swatch { border: 2px solid var(--ink); border-radius: 50%; height: 35px; position: absolute; right: 45px; top: 20px; width: 35px; }
.swatch-one { background: var(--yellow); }
.swatch-two { background: var(--blue); right: 17px; top: 45px; }
.netpay-analytics { background: #fbfaf7; }
.analytics-head { display: flex; flex-direction: column; gap: 5px; padding: 22px 25px 13px; }
.analytics-head small { font-size: 7px; letter-spacing: .16em; }
.analytics-head strong { font-size: 20px; }
.metric-row { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); padding: 0 25px; }
.metric-row span { border: 1px solid #d2cec2; display: flex; flex-direction: column; padding: 11px; }
.metric-row i { font-size: 7px; font-style: normal; }
.metric-row b { font-size: 19px; margin: 4px 0; }
.metric-row em { color: #208c5b; font-size: 7px; font-style: normal; }
.bar-chart { align-items: end; border-bottom: 1px solid #a9a49a; display: flex; gap: 13px; height: 180px; margin: 16px 25px 0; padding: 0 12px; }
.bar-chart i { background: var(--coral); display: block; flex: 1; max-width: 45px; }
.jishikie-growth-scene, .jishikie-instagram-scene, .jishikie-channel-board { height: 500px; max-width: 610px; position: relative; width: 100%; }
.jishikie-growth-scene figure, .jishikie-instagram-scene figure, .jishikie-channel-board figure { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; position: absolute; transition: transform .28s ease; }
.jishikie-growth-scene figure img, .jishikie-instagram-scene figure img, .jishikie-channel-board figure img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.jishikie-tiktok-profile { height: 445px; left: 2%; top: 15px; transform: rotate(-6deg); width: 278px; z-index: 2; }
.jishikie-tiktok-grid { height: 420px; right: 1%; top: 52px; transform: rotate(6deg); width: 272px; z-index: 1; }
.jishikie-growth-scene:hover .jishikie-tiktok-profile { transform: translate(-7px,-5px) rotate(-8deg); }
.jishikie-growth-scene:hover .jishikie-tiktok-grid { transform: translate(7px,-5px) rotate(8deg); }
.jishikie-growth-card { background: #f16b2b; border: 3px solid var(--ink); bottom: 8px; box-shadow: 7px 8px 0 rgba(23,23,17,.2); color: white; display: grid; padding: 13px 15px; position: absolute; right: 17%; transform: rotate(-3deg); width: 175px; z-index: 5; }
.jishikie-growth-card small, .jishikie-revamp-card small, .jishikie-channel-flow small { font-size: 7px; font-weight: 800; letter-spacing: .16em; margin-bottom: 5px; }
.jishikie-growth-card strong { font-size: 36px; letter-spacing: -.07em; line-height: .85; }
.jishikie-growth-card span { font-family: var(--hand); font-size: 17px; font-weight: 700; }
.jishikie-growth-card b { border-top: 1px solid rgba(255,255,255,.6); font-size: 10px; margin-top: 7px; padding-top: 7px; }
.jishikie-growth-note, .jishikie-instagram-note, .jishikie-channel-note { background: #08753c; border: 2px solid var(--ink); color: white; font-family: var(--hand); font-size: 19px; font-weight: 700; left: 50%; padding: 5px 11px; position: absolute; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; z-index: 7; }
.jishikie-growth-note { top: 0; }

.jishikie-instagram-profile { height: 430px; left: 0; top: 27px; transform: rotate(-5deg); width: 270px; z-index: 1; }
.jishikie-instagram-grid { height: 445px; right: 0; top: 17px; transform: rotate(5deg); width: 282px; z-index: 2; }
.jishikie-instagram-scene:hover .jishikie-instagram-profile { transform: translate(-7px,-5px) rotate(-7deg); }
.jishikie-instagram-scene:hover .jishikie-instagram-grid { transform: translate(7px,-5px) rotate(7deg); }
.jishikie-revamp-card { background: #f7f0de; border: 3px solid var(--ink); bottom: 5px; box-shadow: 7px 8px 0 rgba(23,23,17,.2); color: #08753c; padding: 14px 16px; position: absolute; left: 34%; transform: rotate(3deg); width: 185px; z-index: 5; }
.jishikie-revamp-card strong { font-size: 18px; line-height: 1.22; }
.jishikie-instagram-note { right: -5px; left: auto; top: 0; transform: rotate(3deg); }

.jishikie-channel-tiktok { height: 410px; left: 2%; top: 18px; transform: rotate(-6deg); width: 250px; z-index: 2; }
.jishikie-channel-instagram { height: 410px; right: 2%; top: 45px; transform: rotate(6deg); width: 250px; z-index: 1; }
.jishikie-channel-board figure > span { background: #08753c; border-bottom: 2px solid var(--ink); color: white; display: block; font-size: 8px; font-weight: 800; letter-spacing: .16em; padding: 8px 10px; }
.jishikie-channel-board figure img { height: calc(100% - 31px); }
.jishikie-channel-board:hover .jishikie-channel-tiktok { transform: translate(-7px,-5px) rotate(-8deg); }
.jishikie-channel-board:hover .jishikie-channel-instagram { transform: translate(7px,-5px) rotate(8deg); }
.jishikie-channel-flow { align-items: center; background: #f16b2b; border: 3px solid var(--ink); bottom: 5px; box-shadow: 8px 9px 0 rgba(23,23,17,.2); color: white; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; left: 50%; padding: 13px 14px; position: absolute; transform: translateX(-50%) rotate(-2deg); width: 330px; z-index: 5; }
.jishikie-channel-flow small { flex: 0 0 100%; text-align: center; }
.jishikie-channel-flow strong { font-size: 11px; }
.jishikie-channel-flow i { font-family: var(--hand); font-size: 15px; font-style: normal; }
.jishikie-channel-note { left: 50%; top: 0; }

.jishikie-event-brand-scene, .jishikie-event-experience, .jishikie-event-journey { height: 500px; max-width: 610px; position: relative; width: 100%; }
.jishikie-event-brand-scene figure, .jishikie-event-experience figure, .jishikie-event-journey figure { background: white; border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(23,23,17,.19); margin: 0; overflow: hidden; position: absolute; transition: transform .28s ease; }
.jishikie-event-brand-scene figure img, .jishikie-event-experience figure img, .jishikie-event-journey figure img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }

.event-brand-main { height: 438px; left: 0; top: 28px; transform: rotate(-6deg); width: 286px; z-index: 2; }
.event-brand-team { height: 342px; right: 0; top: 52px; transform: rotate(7deg); width: 236px; z-index: 1; }
.event-brand-guests { bottom: 2px; height: 284px; right: 18%; transform: rotate(-1deg); width: 216px; z-index: 3; }
.jishikie-event-brand-scene:hover .event-brand-main { transform: translate(-7px,-5px) rotate(-8deg); }
.jishikie-event-brand-scene:hover .event-brand-team { transform: translate(7px,-5px) rotate(9deg); }
.jishikie-event-brand-scene:hover .event-brand-guests { transform: translateY(-7px) rotate(1deg); }
.event-brand-kit { background: #08753c; border: 3px solid var(--ink); bottom: 12px; box-shadow: 7px 8px 0 rgba(23,23,17,.2); color: white; display: flex; flex-direction: column; left: 3%; padding: 13px 15px; position: absolute; transform: rotate(3deg); width: 205px; z-index: 5; }
.event-brand-kit small, .event-attendance-card small, .event-journey-flow small { font-size: 7px; font-weight: 900; letter-spacing: .15em; margin-bottom: 6px; }
.event-brand-kit strong { font-size: 15px; line-height: 1.25; }
.event-brand-note, .event-experience-note, .event-journey-note { background: #f06a2b; border: 2px solid var(--ink); color: white; font-family: var(--hand); font-size: 19px; font-weight: 700; padding: 5px 11px; position: absolute; white-space: nowrap; z-index: 7; }
.event-brand-note { right: 4%; top: 4px; transform: rotate(3deg); }

.event-experience-main { height: 430px; left: 0; top: 35px; transform: rotate(-6deg); width: 276px; z-index: 2; }
.event-experience-community { height: 392px; right: 0; top: 65px; transform: rotate(7deg); width: 270px; z-index: 1; }
.event-experience-live { bottom: 5px; height: 252px; left: 35%; transform: rotate(2deg); width: 190px; z-index: 3; }
.jishikie-event-experience:hover .event-experience-main { transform: translate(-7px,-5px) rotate(-8deg); }
.jishikie-event-experience:hover .event-experience-community { transform: translate(7px,-5px) rotate(9deg); }
.jishikie-event-experience:hover .event-experience-live { transform: translateY(-7px) rotate(0); }
.event-attendance-card { background: #f06a2b; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(23,23,17,.2); color: white; display: grid; left: 39%; padding: 13px 15px; position: absolute; top: 3px; transform: rotate(-2deg); width: 178px; z-index: 6; }
.event-attendance-card strong { font-size: 42px; letter-spacing: -.07em; line-height: .85; }
.event-attendance-card span { font-family: var(--hand); font-size: 17px; font-weight: 700; }
.event-attendance-card b { border-top: 1px solid rgba(255,255,255,.62); font-size: 8px; margin-top: 7px; padding-top: 7px; text-transform: uppercase; }
.event-experience-note { bottom: 0; right: 1%; transform: rotate(-3deg); }

.event-journey-site { height: 346px; left: 0; top: 67px; transform: rotate(-7deg); width: 220px; z-index: 1; }
.event-journey-ambassador { height: 398px; left: 50%; top: 17px; transform: translateX(-50%) rotate(1deg); width: 226px; z-index: 3; }
.event-journey-proof { height: 346px; right: 0; top: 68px; transform: rotate(7deg); width: 220px; z-index: 2; }
.jishikie-event-journey figure > span { background: #08753c; border-bottom: 2px solid var(--ink); color: white; display: block; font-size: 7px; font-weight: 900; letter-spacing: .13em; padding: 8px 9px; }
.jishikie-event-journey figure img { height: calc(100% - 31px); }
.jishikie-event-journey:hover .event-journey-site { transform: translate(-7px,-5px) rotate(-9deg); }
.jishikie-event-journey:hover .event-journey-ambassador { transform: translate(-50%,-7px) rotate(0); }
.jishikie-event-journey:hover .event-journey-proof { transform: translate(7px,-5px) rotate(9deg); }
.event-journey-flow { align-items: center; background: #f7f0de; border: 3px solid var(--ink); bottom: 3px; box-shadow: 8px 9px 0 rgba(23,23,17,.2); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; left: 50%; padding: 12px 14px; position: absolute; transform: translateX(-50%) rotate(-2deg); width: 365px; z-index: 6; }
.event-journey-flow small { flex: 0 0 100%; text-align: center; }
.event-journey-flow strong { font-size: 10px; }
.event-journey-flow i { color: #f06a2b; font-family: var(--hand); font-size: 16px; font-style: normal; }
.event-journey-note { left: 50%; top: 0; transform: translateX(-50%) rotate(2deg); }
.case-controls { align-items: center; border-bottom: 1px solid #555347; display: flex; justify-content: space-between; margin-top: 22px; padding-bottom: 17px; }
.case-controls button { background: transparent; border: 0; color: var(--paper); cursor: pointer; font-family: var(--hand); font-size: 19px; }
.case-controls span { color: #aaa69a; font-size: 10px; letter-spacing: .15em; }
.case-note { color: #aaa69a; font-family: var(--hand); font-size: 19px; margin: 28px auto 0; text-align: center; }

.process { align-items: start; display: grid; gap: 9vw; grid-template-columns: .78fr 1.22fr; }
.process-intro { position: sticky; top: 135px; }
.process-intro .section-kicker { margin-bottom: 35px; }
.process-intro h2 { font-size: clamp(43px, 5vw, 74px); }
.process-intro > p { color: var(--muted); line-height: 1.65; margin-top: 30px; max-width: 450px; }
.process-doodle { color: var(--blue); display: inline-block; font-family: var(--hand); font-size: 23px; margin: 28px 0 0 80px; transform: rotate(-4deg); }
.process-list article { align-items: start; border-bottom: var(--line); display: grid; gap: 18px; grid-template-columns: 55px 1fr 1.25fr 35px; padding: 37px 0; }
.process-list article:first-child { border-top: var(--line); }
.process-no { font-family: var(--hand); font-size: 18px; }
.process-list h3 { font-size: 24px; letter-spacing: -.04em; margin: 0; }
.process-list p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.process-mark { align-items: center; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; height: 31px; justify-content: center; transform: rotate(4deg); width: 31px; }

.why { background: var(--paper-light); padding-bottom: 90px; padding-top: 90px; }
.why-card { background: var(--blue); border: var(--line); box-shadow: 12px 13px 0 var(--ink); color: white; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; overflow: hidden; padding: clamp(40px, 7vw, 96px); position: relative; transform: rotate(-.5deg); }
.why-card h2 { font-size: clamp(46px, 5.8vw, 80px); letter-spacing: -.065em; line-height: .95; margin: 45px 0 0; }
.why-card h2 span { color: var(--yellow); font-family: var(--hand); }
.why-list p { border-bottom: 1px solid rgba(255,255,255,.45); display: flex; flex-direction: column; gap: 8px; padding: 21px 0; }
.why-list strong { font-size: 19px; }
.why-list span { color: #d9deff; font-size: 13px; line-height: 1.55; }
.why-sticker { align-items: center; background: var(--yellow); border: var(--line); border-radius: 50%; bottom: -26px; color: var(--ink); display: flex; font-family: var(--hand); font-size: 17px; font-weight: 800; height: 155px; justify-content: center; left: 44%; line-height: .95; position: absolute; text-align: center; transform: rotate(10deg); width: 155px; }

.faq { display: grid; gap: 10vw; grid-template-columns: .8fr 1.2fr; }
.faq-title .section-kicker { margin-bottom: 35px; }
.faq-title h2 { font-size: clamp(45px, 5vw, 72px); }
.faq-title > p { color: var(--muted); line-height: 1.65; margin-top: 27px; max-width: 370px; }
.faq-list { border-top: var(--line); }
.faq-list article { border-bottom: var(--line); }
.faq-list button { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; font-size: 17px; font-weight: 700; justify-content: space-between; padding: 26px 0; text-align: left; width: 100%; }
.faq-list button span { padding-right: 30px; }
.faq-list button i { align-items: center; border: 1.5px solid var(--ink); border-radius: 50%; display: flex; flex: 0 0 auto; font-size: 22px; font-style: normal; height: 34px; justify-content: center; transition: .2s; width: 34px; }
.faq-list article.open button i { background: var(--coral); transform: rotate(6deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-answer p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; max-width: 700px; overflow: hidden; }
.faq-list article.open .faq-answer { grid-template-rows: 1fr; }
.faq-list article.open .faq-answer p { padding-bottom: 28px; }

.contact { align-items: start; background: var(--coral); border-top: var(--line); display: grid; gap: 9vw; grid-template-columns: .9fr 1.1fr; }
.contact-copy h2 { font-size: clamp(50px, 6.4vw, 91px); letter-spacing: -.075em; line-height: .91; margin: 45px 0 32px; }
.contact-copy h2 span { color: var(--paper); font-family: var(--hand); }
.contact-copy > p { font-size: 17px; line-height: 1.65; max-width: 560px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.contact-details a { display: flex; flex-direction: column; gap: 4px; width: max-content; }
.contact-details small { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.contact-details strong { border-bottom: 2px solid var(--ink); font-size: 18px; }
.contact-note { display: inline-block; font-family: var(--hand); font-size: 21px; margin: 40px 0 0 50px; transform: rotate(-3deg); }
.contact-form { background: var(--paper-light); border: 3px solid var(--ink); box-shadow: 12px 13px 0 rgba(23,23,17,.35); display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 5vw, 55px); position: relative; transform: rotate(1deg); }
.contact-form::before { background: rgba(255,255,255,.6); content: ""; height: 30px; left: 50%; position: absolute; top: -16px; transform: translateX(-50%) rotate(-3deg); width: 115px; }
.form-head { align-items: center; border-bottom: var(--line); display: flex; font-size: 11px; font-weight: 800; justify-content: space-between; letter-spacing: .16em; padding-bottom: 18px; }
.form-head i { font-family: var(--hand); font-size: 27px; font-style: normal; }
.contact-form label { display: flex; flex: 1; flex-direction: column; font-size: 11px; font-weight: 800; gap: 9px; letter-spacing: .09em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); font-size: 15px; outline: none; padding: 9px 2px 12px; text-transform: none; width: 100%; }
.contact-form textarea { border: 1.5px solid var(--ink); min-height: 105px; padding: 13px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
.form-row { display: flex; gap: 20px; }
.form-submit { cursor: pointer; margin-top: 5px; width: 100%; }
.success-message { background: var(--mint); border: 1.5px solid var(--ink); font-family: var(--hand); font-size: 18px; margin: 0; padding: 10px 12px; text-align: center; transform: rotate(-1deg); }
.error-message { background: #ffd5cc; border: 1.5px solid var(--ink); font-family: var(--hand); font-size: 18px; margin: 0; padding: 10px 12px; text-align: center; transform: rotate(1deg); }
.form-honeypot { height: 1px !important; left: -10000px !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; width: 1px !important; }
.form-submit:disabled { cursor: wait; opacity: .68; transform: none; }

footer { background: var(--ink); color: var(--paper); padding: 75px max(6vw, 28px) 30px; }
.footer-top { align-items: end; display: grid; gap: 7vw; grid-template-columns: .7fr 1fr .5fr; padding-bottom: 65px; }
.footer-brand .brand-mark { background: var(--paper); color: var(--ink); }
.footer-top p { color: #bcb6aa; line-height: 1.65; margin: 0; max-width: 480px; }
.footer-whatsapp { border-bottom: 2px solid var(--paper); font-family: var(--hand); font-size: 22px; justify-self: end; }
.footer-bottom { border-top: 1px solid #48463e; color: #aaa69a; display: flex; font-size: 11px; justify-content: space-between; letter-spacing: .09em; padding-top: 27px; text-transform: uppercase; }
.footer-bottom a { transition: color .2s ease; }
.footer-bottom a:hover { color: var(--paper); }
.jade-company { color: var(--paper); font-weight: 700; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease var(--delay, 0ms), transform .65s ease var(--delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.case-study[data-reveal],
.case-controls[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1080px) {
  .hero { gap: 45px; grid-template-columns: 1fr .8fr; }
  .hero h1 { font-size: clamp(55px, 7.7vw, 82px); }
  .hero-collage { transform: scale(.87); transform-origin: center; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .section-heading, .work-heading { grid-template-columns: .5fr 1.4fr; }
  .section-heading > p { grid-column: 2; }
  .work-tabs { gap: 18px; }
  .work-tabs button { font-size: 12px; }
  .work-tabs button::before { height: auto; }
  .why-card { gap: 45px; }
}

@media (max-width: 820px) {
  .section-pad { padding: 88px 25px; }
  .site-header { height: 70px; padding: 0 22px; }
  .menu-button { display: block; }
  .nav-links { align-items: stretch; background: var(--paper); border-bottom: var(--line); display: flex; flex-direction: column; gap: 0; left: 0; opacity: 0; padding: 18px 22px 29px; pointer-events: none; position: absolute; right: 0; top: 69px; transform: translateY(-14px); transition: .22s; }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links a { border-bottom: 1px solid rgba(23,23,17,.3); font-size: 17px; padding: 15px 4px; }
  .nav-links .nav-cta { border: var(--line); margin-top: 17px; text-align: center; }
  .hero { grid-template-columns: 1fr; padding-top: 125px; }
  .hero-copy { position: relative; z-index: 2; }
  .hero h1 { font-size: clamp(50px, 12vw, 76px); }
  .hero-collage { margin-top: -20px; }
  .intro-grid, .process, .faq, .contact { grid-template-columns: 1fr; }
  .intro-grid { gap: 35px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row > div:nth-child(2) { border-right: 0; }
  .stats-row > div:nth-child(-n+2) { border-bottom: var(--line); }
  .section-heading, .work-heading { display: block; }
  .section-heading h2 { margin: 35px 0 24px; }
  .work-tabs { display: flex; overflow-x: auto; }
  .work-tabs button { flex: 0 0 auto; min-width: 175px; }
  .case-study { grid-template-columns: 1fr; }
  .case-copy { border-bottom: var(--line); border-right: 0; }
  .case-art { min-height: 680px; }
  .process-intro { position: static; }
  .process-list article { grid-template-columns: 45px 1fr 31px; }
  .process-list p { grid-column: 2 / 4; }
  .why-card { grid-template-columns: 1fr; }
  .why-sticker { left: auto; right: -25px; }
  .faq { gap: 55px; }
  .contact { gap: 65px; }
  .footer-top { align-items: start; grid-template-columns: 1fr; }
  .footer-whatsapp { justify-self: start; }
}

@media (max-width: 560px) {
  .section-pad { padding: 78px 19px; }
  .brand { font-size: 17px; }
  .brand em { font-size: 21px; }
  .brand-mark { height: 33px; width: 35px; }
  .eyebrow { line-height: 1.4; }
  .hero { min-height: auto; padding-top: 110px; }
  .hero h1 { font-size: clamp(45px, 13.5vw, 63px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 25px; }
  .hero-note { margin-left: 15px; }
  .hero-collage { height: 480px; margin-left: 50%; transform: translateX(-50%) scale(.75); transform-origin: top center; width: 510px; }
  .ticker { margin-top: -85px; }
  .intro h2, .section-heading h2, .work-heading h2, .process h2, .faq h2 { font-size: 46px; }
  .stats-row > div { min-height: 120px; padding: 19px; }
  .stats-row strong { font-size: 35px; }
  .stats-row .stat-note strong { font-size: 21px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 370px; }
  .work-tabs { display: flex; overflow-x: auto; }
  .work-tabs button { flex: 0 0 auto; min-width: 175px; }
  .case-copy { padding: 38px 25px; }
  .case-explanation { grid-template-columns: 1fr; }
  .result-sticker { font-size: 17px; max-width: 100%; }
  .case-art { min-height: 590px; padding: 28px 16px 53px; }
  .case-art::before { height: 320px; width: 320px; }
  .mockup-toolbar { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 20px; }
  .mockup-toolbar > div { width: 100%; }
  .mockup-toolbar button { flex: 1; }
  .mockup-stage { min-height: 465px; }
  .web-mock { height: 340px; }
  .mock-hero { height: 175px; padding: 25px; }
  .mock-hero h4 { font-size: 29px; }
  .signal { font-size: 80px; }
  .campaign-mock { transform: scale(.86); }
  .jishikie-growth-scene { flex: 0 0 540px; transform: scale(.68); }
  .jishikie-instagram-scene { flex: 0 0 540px; transform: scale(.68); }
  .jishikie-channel-board { flex: 0 0 540px; transform: scale(.68); }
  .jishikie-event-brand-scene { flex: 0 0 540px; transform: scale(.68); }
  .jishikie-event-experience { flex: 0 0 540px; transform: scale(.68); }
  .jishikie-event-journey { flex: 0 0 540px; transform: scale(.68); }
  .omaya-wall { flex: 0 0 510px; transform: scale(.69); }
  .omaya-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .omaya-system-board { flex: 0 0 530px; transform: scale(.71); }
  .jade-wall { flex: 0 0 500px; transform: scale(.7); }
  .jade-feed-scene { flex: 0 0 460px; transform: scale(.78); }
  .jade-system-board { flex: 0 0 520px; transform: scale(.72); }
  .vituit-wall { flex: 0 0 510px; transform: scale(.69); }
  .vituit-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .vituit-product-board { flex: 0 0 530px; transform: scale(.71); }
  .calvary-wall { flex: 0 0 510px; transform: scale(.69); }
  .calvary-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .calvary-calendar-board { flex: 0 0 530px; transform: scale(.71); }
  .ultralinks-brand-scene { flex: 0 0 520px; transform: scale(.69); }
  .ultralinks-digital-scene { flex: 0 0 520px; transform: scale(.7); }
  .ultralinks-campaign-board { flex: 0 0 520px; transform: scale(.7); }
  .xianwei-wall { flex: 0 0 510px; transform: scale(.69); }
  .xianwei-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .xianwei-system-board { flex: 0 0 530px; transform: scale(.71); }
  .mindflow-wall { flex: 0 0 510px; transform: scale(.69); }
  .mindflow-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .mindflow-app-board { flex: 0 0 530px; transform: scale(.71); }
  .pinnacle-wall { flex: 0 0 510px; transform: scale(.69); }
  .pinnacle-feed-scene { flex: 0 0 470px; transform: scale(.76); }
  .pinnacle-brand-board { flex: 0 0 530px; transform: scale(.71); }
  .wakanet-wall { flex: 0 0 510px; transform: scale(.69); }
  .wakanet-channel-scene { flex: 0 0 540px; transform: scale(.68); }
  .wakanet-web-board { flex: 0 0 530px; transform: scale(.71); }
  .community-growth-scene { flex: 0 0 520px; transform: scale(.7); }
  .community-hubs { flex: 0 0 530px; transform: scale(.69); }
  .community-system-board { flex: 0 0 540px; transform: scale(.7) rotate(-1deg); }
  .art-scribble { font-size: 19px; }
  .process-list article { gap: 10px; }
  .why-card { padding: 42px 25px 105px; }
  .why-sticker { bottom: -30px; height: 135px; width: 135px; }
  .form-row { flex-direction: column; }
  .contact-form { padding: 35px 22px; }
  .contact-details strong { font-size: 15px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Mobile usability: prevent overflow, keep navigation reachable and collapse detailed case studies. */
html,
body { max-width: 100%; }

main { overflow: clip; }

img,
svg,
video { max-width: 100%; }

.hero-copy,
.hero-collage,
.intro-grid > *,
.section-heading > *,
.case-copy,
.case-art,
.contact-copy,
.contact-form,
.footer-top > * { min-width: 0; }

.case-copy h3,
.hero h1,
.hero-lead,
.contact-details strong,
.footer-top p { overflow-wrap: anywhere; }

#active-case-study { scroll-margin-top: 82px; }

@media (max-width: 820px) {
  .work-tabs { order: 2; }
  .case-study { order: 3; }
  .case-controls { order: 4; }
  .case-note { order: 5; }
  .site-header { isolation: isolate; }

  .menu-button { display: block; z-index: 3; }

  .menu-button:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
  }

  .nav-links {
    box-shadow: 0 14px 24px rgba(23, 23, 17, .18);
    max-height: calc(100dvh - 69px);
    overflow-y: auto;
    overscroll-behavior: contain;
    top: 100%;
    visibility: hidden;
    z-index: 2;
  }

  .nav-links.open { visibility: visible; }

  .nav-links a { min-height: 50px; }

  .work-tabs {
    overscroll-behavior-inline: contain;
    padding-bottom: 5px;
    scroll-padding-inline: 4px;
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--coral) #555347;
    scrollbar-width: thin;
  }

  .work-tabs button {
    min-height: 54px;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  .case-study { min-height: 0; }
  .case-copy { justify-content: flex-start; }
  .case-art { min-height: clamp(590px, 88vw, 700px); }
  .mockup-stage { width: 100%; }
  .case-controls button { min-height: 44px; touch-action: manipulation; }
}

@media (max-width: 640px) {
  .section-pad { padding-left: 18px; padding-right: 18px; }
  .hero {
    gap: 26px;
    padding-bottom: 34px;
    padding-top: 92px;
  }
  .eyebrow {
    font-size: 10px;
    gap: 8px;
    letter-spacing: .08em;
    margin-bottom: 17px;
  }
  .hero h1 {
    font-size: clamp(36px, 11.2vw, 54px);
    letter-spacing: -.055em;
    line-height: .96;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .hero h1 .scribble {
    display: block;
    max-width: 100%;
    width: fit-content;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.45;
    max-width: 100%;
  }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
    margin-top: 25px;
    max-width: 100%;
  }
  .hero-actions .button,
  .hero-actions .text-link {
    justify-content: center;
    max-width: calc(100vw - 36px);
    min-width: 0;
    padding-inline: 14px;
    text-align: center;
    width: 100%;
  }
  .hero-actions .button {
    box-shadow: 4px 4px 0 var(--ink);
    min-height: 58px;
  }
  .hero-actions .text-link {
    line-height: 1.25;
    white-space: normal;
  }
  .hero-note {
    margin: 18px 0 0;
    max-width: 100%;
    width: auto;
  }
  .hero-note p { font-size: 16px; }
  .hero-collage {
    height: clamp(330px, 92vw, 390px);
    margin: -6px auto 0;
    max-width: calc(100vw - 36px);
    overflow: visible;
    transform: none;
    width: min(100%, 360px);
  }
  .hero-collage .card-blue {
    height: 74%;
    left: 1%;
    top: 7%;
    width: 60%;
  }
  .hero-collage .card-photo {
    height: 58%;
    padding: 14px;
    right: 0;
    top: 18%;
    width: 58%;
  }
  .hero-collage .photo-shape {
    height: 70%;
  }
  .hero-collage .photo-shape::before {
    height: 58%;
    left: 21%;
    width: 76%;
  }
  .hero-collage .eye { left: 30%; top: 30%; }
  .hero-collage .smile { left: 36%; top: 39%; }
  .hero-collage .card-yellow {
    bottom: 9%;
    height: 37%;
    left: 12%;
    padding: 14px;
    width: 74%;
  }
  .hero-collage .growth-number { font-size: clamp(54px, 18vw, 74px); }
  .hero-collage .sunburst {
    bottom: -17%;
    height: 76%;
    right: -16%;
    width: 76%;
  }
  .hero-collage .sunburst::after {
    height: 38%;
    width: 38%;
  }
  .hero-collage .sunburst span { font-size: 22px; }
  .hero-collage .tape-one {
    left: 22%;
    top: 4%;
    width: 22%;
  }
  .hero-collage .tape-two {
    bottom: 7%;
    right: 12%;
    width: 21%;
  }
  .hero-collage .star-one { right: -2%; top: 10%; }
  .hero-collage .star-two { bottom: 9%; left: 0; }
  .hero-collage .orbit-line {
    height: 24%;
    left: -7%;
    top: 59%;
    width: 15%;
  }
  .hero-collage .hand-caption {
    bottom: 2%;
    right: 7%;
  }
  .ticker { margin-top: 0; }
  .work-heading { margin-bottom: 32px; }

  .work-tabs {
    border-bottom: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 28px;
    overflow: visible;
    padding: 0;
  }

  .work-tabs button {
    align-items: center;
    background: #292821;
    border: 1.5px solid #6d695e;
    border-radius: 2px;
    color: var(--paper);
    display: grid;
    font-size: 11px;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    line-height: 1.2;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0 10px 11px;
    text-align: left;
  }

  .work-tabs button::before {
    background-color: #fff;
    background-image: var(--case-thumb);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    grid-column: 1 / -1;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 -10px 2px;
    width: calc(100% + 20px);
  }

  .work-tabs button::after {
    bottom: 0;
    height: 5px;
  }

  .work-tabs button span {
    color: var(--coral);
    font-size: 13px;
    margin: 0;
  }

  .work-tabs button strong {
    display: block;
    overflow-wrap: anywhere;
  }

  .work-tabs button[aria-selected="true"] {
    border-color: var(--coral);
    box-shadow: 0 0 0 1px var(--coral);
  }

  .case-toggle-icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-family: var(--hand);
    font-size: 15px;
    height: 22px;
    justify-content: center;
    width: 22px;
  }

  .case-study[hidden],
  .case-study.mobile-collapsed { display: none !important; }

  .case-study.mobile-open { display: block; }

  .case-mobile-close {
    align-items: center;
    background: var(--yellow);
    border: 0;
    border-bottom: var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-family: var(--hand);
    font-size: 18px;
    font-weight: 700;
    min-height: 48px;
    padding: 10px 18px;
    position: sticky;
    top: 69px;
    touch-action: manipulation;
    width: 100%;
    z-index: 12;
  }

  .case-copy { padding: 36px 22px; }
  .case-copy h3 { font-size: clamp(41px, 13vw, 58px); }
  .case-intro { font-size: 15px; }
  .case-explanation { gap: 18px; }
  .case-services span { line-height: 1.25; }
  .case-actions { align-items: stretch; flex-direction: column; }

  .case-actions .button,
  .case-actions .case-contact-link {
    justify-content: center;
    max-width: 100%;
    text-align: center;
    width: 100%;
  }

  .case-art { min-height: 570px; padding-left: 14px; padding-right: 14px; }
  .mockup-toolbar > div { max-width: 100%; overflow-x: auto; }
  .mockup-toolbar button { min-height: 40px; min-width: max-content; padding-inline: 10px; touch-action: manipulation; }
  .mockup-stage { min-height: 445px; }

  .case-controls.mobile-collapsed { display: none; }
  .case-controls { gap: 8px; }
  .case-controls button { font-size: 17px; padding-inline: 0; }
  .contact-details a { max-width: 100%; width: fit-content; }
  .footer-top { gap: 38px; padding-bottom: 45px; }
}

@media (max-width: 480px) {
  .hero-collage {
    height: 355px;
    max-width: calc(100vw - 30px);
    width: 330px;
  }
}

@media (max-width: 390px) {
  .section-pad { padding-left: 15px; padding-right: 15px; }
  .site-header { padding-inline: 15px; }
  .nav-links { padding-inline: 15px; }
  .hero { gap: 22px; padding-top: 88px; }
  .hero h1 { font-size: clamp(34px, 11vw, 43px); }
  .hero-actions .button,
  .hero-actions .text-link { max-width: calc(100vw - 30px); }
  .hero-collage {
    height: 330px;
    max-width: calc(100vw - 30px);
    width: 305px;
  }
  .ticker { margin-top: 0; }

  .intro h2,
  .section-heading h2,
  .work-heading h2,
  .process h2,
  .faq h2 { font-size: 41px; }

  .stats-row { grid-template-columns: 1fr; }
  .stats-row > div { border-bottom: var(--line); border-right: 0 !important; }
  .stats-row > div:last-child { border-bottom: 0; }
  .work-tabs { gap: 9px; }
  .work-tabs button { font-size: 10px; padding-inline: 8px; }
  .work-tabs button::before { aspect-ratio: 1 / 1; height: auto; margin-inline: -8px; width: calc(100% + 16px); }
  .case-copy { padding-inline: 18px; }
  .case-explanation { grid-template-columns: 1fr; }
  .case-art { min-height: 535px; padding-inline: 10px; }
  .mockup-stage { min-height: 415px; }
  .mockup-toolbar button { font-size: 9px; padding-inline: 8px; }
  .case-controls button { font-size: 15px; }
  .case-controls span { font-size: 8px; }
  .contact-form { padding-inline: 18px; }
  footer { padding-inline: 18px; }
}

@media (max-width: 340px) {
  .hero h1 { font-size: 32px; }
  .hero-collage {
    height: 305px;
    width: 286px;
  }
}

@media (min-width: 1500px) {
  .section-pad,
  .site-header,
  footer { padding-left: max(7vw, calc((100vw - 1480px) / 2)); padding-right: max(7vw, calc((100vw - 1480px) / 2)); }
  .hero { min-height: 860px; }
}