@import url("/vendor/fonts/instrument-sans/wght.css");
@import url("/vendor/fonts/unbounded/wght.css");

:root {
  --void: #08070c;
  --void-2: #101019;
  --paper: #f4f4ef;
  --paper-2: #e9e9e3;
  --ink: #111117;
  --muted: #6f7079;
  --line: rgba(17,17,23,.13);
  --glass: rgba(16,16,25,.68);
  --cyan: #87f5ff;
  --purple: #9f7cff;
  --coral: #ff795f;
  --lime: #c9ff63;
  --white: #fff;
  --radius: 22px;
  font-family: "Instrument Sans Variable", "Instrument Sans", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: auto; background: var(--void); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: inherit; letter-spacing: -.015em; }
body.is-loading { overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p { text-wrap: pretty; }
pre, code, .service-example, .quick-code, .response-panel pre { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important; }

/* CINEMATIC OPENING */
.experience-loader { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto; padding: 26px 30px; overflow: hidden; color: #f8f8f3; background: #07070b; transition: clip-path 1.05s cubic-bezier(.76,0,.24,1), visibility 1.05s; clip-path: inset(0 0 0 0); }
.experience-loader::before { content: ""; position: absolute; inset: 0; opacity: .28; background: repeating-linear-gradient(90deg, transparent 0 calc(8.333vw - 1px), rgba(255,255,255,.08) calc(8.333vw - 1px) 8.333vw); }
.experience-loader.done { visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); }
.experience-loader { inset: 0 auto auto 0; width: 100%; height: 100%; max-width: 100vw; }
.loader-meta { position: relative; display: flex; justify-content: space-between; color: #898994; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .16em; }
.loader-center { position: relative; display: grid; place-items: center; align-content: center; gap: 24px; }
.loader-center p { margin: 0; color: #777783; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .17em; }
.loader-mark { position: relative; display: grid; width: 180px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(135,245,255,.24); border-radius: 50%; animation: loader-orbit 4s linear infinite; }
.loader-mark::before, .loader-mark::after { content: ""; position: absolute; border-radius: inherit; border: 1px solid rgba(159,124,255,.28); }
.loader-mark::before { inset: 20px -15px; transform: rotate(54deg); }
.loader-mark::after { inset: -12px 40px; border-color: rgba(255,121,95,.36); transform: rotate(-35deg); }
.loader-mark strong { font-family: "Unbounded Variable", sans-serif; font-size: 48px; font-weight: 410; letter-spacing: -.09em; animation: loader-orbit 4s linear infinite reverse; }
.loader-progress { position: relative; width: 100%; height: 2px; overflow: hidden; background: rgba(255,255,255,.12); }
.loader-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--purple),var(--coral)); transform: scaleX(0); transform-origin: left; }
@keyframes loader-orbit { to { transform: rotate(360deg); } }

/* GLOBAL EXPERIENCE LAYERS */
#api-core-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.api-core-fallback { display: none; contain: layout; }
.experience-noise { position: fixed; inset: 0; z-index: 4; max-width: 100vw; contain: strict; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.setup-page { overflow-x: hidden; }
.marketing-page main, .setup-page main, .marketing-page footer, .setup-page footer { position: relative; z-index: 2; }
.ambient { display: none; }
.scene-failed #api-core-canvas { display: none; }
.scene-failed::before { content: ""; position: fixed; z-index: 0; inset: -30%; pointer-events: none; background: conic-gradient(from 45deg at 68% 43%,transparent,rgba(135,245,255,.09),transparent 24%,rgba(159,124,255,.11),transparent 56%); animation: failed-signal 12s linear infinite; }
.signal-cursor { position: fixed; z-index: 1900; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); transform: translate(-50%,-50%); mix-blend-mode: screen; }
.signal-cursor::after { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(135,245,255,.5); border-radius: 50%; transition: transform .25s, opacity .25s; }
.signal-cursor.active::after { opacity: .35; transform: scale(1.8); }

/* NAV */
.marketing-page, .setup-page { color: #f6f6f1; background: var(--void); }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.topbar { position: sticky; top: 14px; z-index: 100; width: min(1220px, calc(100% - 28px)); height: 58px; margin: 14px auto 0; padding: 7px 10px 7px 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #f7f7f2; background: rgba(10,9,15,.76); box-shadow: 0 18px 60px rgba(0,0,0,.18); backdrop-filter: blur(18px) saturate(145%); }
.brand { gap: 9px; color: inherit; font-size: 13px; font-weight: 670; letter-spacing: -.035em; text-decoration: none; }
.brand em { color: var(--cyan); font-style: normal; font-weight: 560; }
.brand-mark { width: 27px; height: 27px; border-radius: 8px; background: #f6f6f1; box-shadow: 0 0 0 1px rgba(255,255,255,.1); transform: rotate(-4deg); }
.brand-mark i:nth-child(1) { background: #7960ff; }.brand-mark i:nth-child(2) { background: #ff755f; }.brand-mark i:nth-child(3) { background: #41dbea; }
.desktop-nav { gap: 4px; }
.desktop-nav a, .text-button { padding: 10px 12px; border-radius: 999px; color: #9898a4; font-size: 11px; font-weight: 590; text-decoration: none; transition: color .25s, background .25s; }
.desktop-nav a:hover, .text-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.top-actions { gap: 4px; }
.button { position: relative; min-height: 44px; padding: 0 18px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 720; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #0b0b0f; background: var(--cyan); box-shadow: 0 10px 34px rgba(65,219,234,.16); }
.button-primary::after { content: ""; position: absolute; inset: -30% auto -30% -45%; width: 26%; background: rgba(255,255,255,.58); filter: blur(7px); transform: skewX(-20deg); animation: button-scan 3.4s 1s infinite; }
.button-ghost { border-color: rgba(255,255,255,.15); color: #ededeb; background: rgba(255,255,255,.035); }
.button-light { color: #0d0d12; background: #fff; }
.button-small { min-height: 42px; padding-inline: 16px; }
@keyframes button-scan { 0%,58% { left: -45%; } 88%,100% { left: 130%; } }
@keyframes failed-signal { to { transform: rotate(360deg) scale(1.08); } }

/* HERO */
.marketing-page .hero, .setup-page .setup-hero { position: relative; min-height: calc(100svh - 86px); display: grid; grid-template-columns: minmax(0,1.04fr) minmax(380px,.96fr); align-items: center; gap: 54px; padding-block: 80px 72px; }
.hero-copy, .setup-hero > div:first-child { position: relative; z-index: 3; max-width: 650px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; color: #898994; font: 650 9px/1 ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { padding: 9px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(13,12,20,.5); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(135,245,255,.08), 0 0 16px var(--cyan); animation: live-pulse 1.5s ease-in-out infinite; }
@keyframes live-pulse { 50% { transform: scale(.65); opacity: .58; } }
.marketing-page .hero h1, .setup-page .setup-hero h1 { max-width: 720px; margin: 24px 0 22px; color: #f5f5f1; font-size: clamp(50px,5.8vw,82px); font-weight: 560; line-height: .94; letter-spacing: -.065em; }
.marketing-page .hero h1 span, .setup-page .setup-hero h1 span { color: transparent; background: linear-gradient(105deg,var(--cyan),#e3e1ff 42%,var(--purple)); -webkit-background-clip: text; background-clip: text; }
.hero-lead, .setup-page .setup-hero > div:first-child > p { max-width: 550px; color: #9999a4; font-size: 16px; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 29px; }
.hero-proof { width: fit-content; display: flex; gap: 0; margin-top: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(12,11,18,.5); backdrop-filter: blur(12px); }
.hero-proof div { min-width: 120px; padding: 12px 14px; border-right: 1px solid rgba(255,255,255,.09); }
.hero-proof div:last-child { border: 0; }
.hero-proof strong { display: block; color: #f5f5f1; font-family: "Unbounded Variable", sans-serif; font-size: 17px; font-weight: 430; }
.hero-proof span { display: block; margin-top: 3px; color: #92929e; font-size: 9px; }

.code-stage { position: relative; z-index: 3; width: min(470px,100%); justify-self: end; perspective: 1100px; }
.code-glow { position: absolute; inset: 15% 5%; border-radius: 50%; background: #6253ff; filter: blur(70px); opacity: .22; }
.code-window { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: #d7dae2; background: rgba(13,12,21,.82); box-shadow: 0 38px 100px rgba(0,0,0,.45); backdrop-filter: blur(18px); transform: rotateY(-6deg) rotateX(3deg); }
.code-titlebar { min-height: 45px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.09); color: #7f7f8a; font: 600 9px/1 ui-monospace, monospace; }
.code-titlebar i { width: 6px; height: 6px; }.code-titlebar b { color: var(--cyan); }
.code-tabs { padding: 7px; gap: 4px; }.code-tabs button { padding: 6px 11px; border-radius: 999px; color: #898994; font-size: 9px; }.code-tabs button.active { color: #0d0d12; background: var(--cyan); }
.code-window pre { max-height: 340px; padding: 18px 20px 22px; font-size: 10px; line-height: 1.72; }
.code-window .blue { color: #8deaff; }.code-window .green { color: #b8fb87; }.code-window .violet { color: #b6a3ff; }.code-window .amber { color: #ffb49f; }
.float-chip { position: absolute; z-index: 5; min-width: 180px; padding: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #efefed; background: rgba(12,11,18,.88); box-shadow: 0 20px 55px rgba(0,0,0,.3); backdrop-filter: blur(16px); }
.float-chip > span { width: 28px; height: 28px; border-radius: 9px; color: #111; background: var(--cyan); }.float-chip b { font-size: 10px; }.float-chip small { color: #777782; font-size: 8px; }
.chip-one { top: -34px; right: -24px; }.chip-two { bottom: -38px; left: -40px; }

/* PRODUCT-SPECIFIC RESOLVER HERO */
.marketing-page .hero { grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); gap: 28px; }
.marketing-page .hero-copy { max-width: 575px; }
.marketing-page .hero h1 { max-width: 640px; font-size: clamp(54px,5.15vw,76px); }
.resolver-stage { position: relative; z-index: 3; width: min(590px,100%); height: 570px; justify-self: end; pointer-events: none; perspective: 1100px; }
.resolver-stage::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 49%; width: 230px; height: 150px; border: 1px solid rgba(135,245,255,.13); border-radius: 24px; background: radial-gradient(circle at 50% 45%,rgba(135,245,255,.1),rgba(13,12,21,.15) 55%,transparent); box-shadow: 0 0 90px rgba(113,91,255,.12), inset 0 0 30px rgba(135,245,255,.04); transform: translate(-50%,-50%); }
.resolver-kicker, .ticket-index, .core-caption span { font: 650 8px/1 ui-monospace,monospace; letter-spacing: .14em; text-transform: uppercase; }
.resolver-kicker { position: absolute; top: 30px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #8d8e9a; background: rgba(10,9,15,.72); backdrop-filter: blur(15px); }
.resolver-kicker > span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); animation: live-pulse 1.35s ease-in-out infinite; }
.resolver-kicker b { color: var(--lime); font-weight: 700; }
.source-stack { position: absolute; top: 88px; left: 0; display: grid; gap: 7px; }
.source-pill { display: flex; width: fit-content; min-width: 116px; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #a3a3ad; background: rgba(12,11,18,.68); box-shadow: 0 12px 35px rgba(0,0,0,.2); backdrop-filter: blur(14px); font-size: 9px; font-weight: 620; opacity: .66; }
.source-pill i, .service-ribbon > span { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 8px; color: #fff; }
.source-pill i svg { width: 12px; height: 12px; fill: currentColor; }
.source-instagram i { background: radial-gradient(circle at 30% 100%,#f9ce34 0 18%,#ee2a7b 48%,#6228d7 100%); }
.source-tiktok i { color: #fff; background: #0f1014; box-shadow: inset 2px 0 #25f4ee,inset -2px 0 #fe2c55; }
.source-telegram i { background: #26a5e4; }
.request-ticket, .result-ticket, .json-ticket { position: absolute; border: 1px solid rgba(255,255,255,.13); color: #ececf0; background: rgba(10,10,16,.78); box-shadow: 0 22px 65px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(135%); }
.request-ticket { top: 190px; left: 5px; width: 205px; padding: 13px; border-radius: 15px; }
.ticket-index { display: block; margin-bottom: 11px; color: #696a77; }
.request-ticket > div { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 9px; border-radius: 9px; background: rgba(255,255,255,.055); }
.request-ticket > div i { color: var(--cyan); font-style: normal; }
.request-ticket code { max-width: 145px; overflow: hidden; color: #d7d7dd; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.request-ticket small { display: block; margin-top: 8px; color: #6f707c; font-size: 8px; }
.core-caption { position: absolute; top: 346px; left: 220px; display: grid; width: 150px; justify-items: center; gap: 5px; color: #777784; text-align: center; transform-origin: center; }
.core-caption span { color: var(--cyan); }
.core-caption b { color: #c6c6cc; font-size: 8px; font-weight: 560; }
.core-caption i { width: 72px; height: 2px; margin-top: 4px; overflow: hidden; background: rgba(255,255,255,.1); }
.core-caption i::after { content: ""; display: block; width: 35%; height: 100%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: resolver-scan 1.2s ease-in-out infinite; }
.result-ticket { top: 174px; right: -3px; display: grid; width: 190px; grid-template-columns: 62px 1fr; gap: 10px; padding: 11px; border-radius: 16px; }
.result-ticket .ticket-index { grid-column: 1/-1; margin-bottom: 0; }
.media-preview { position: relative; display: grid; height: 72px; place-items: center; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 65% 25%,rgba(255,255,255,.2),transparent 22%),linear-gradient(145deg,#765bff,#1dcedd 58%,#101019); }
.media-preview::before { content: ""; position: absolute; inset: -40%; border: 1px solid rgba(255,255,255,.28); border-radius: 44%; transform: rotate(25deg); animation: media-orbit 5s linear infinite; }
.play-triangle { position: relative; z-index: 2; width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid white; filter: drop-shadow(0 0 8px rgba(255,255,255,.65)); }
.media-preview > i { position: absolute; right: 5px; bottom: 5px; padding: 3px 4px; border-radius: 4px; color: white; background: rgba(0,0,0,.45); font: 600 6px/1 ui-monospace,monospace; }
.media-meta { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.media-meta b { font-size: 10px; }.media-meta > span { margin-top: 4px; color: #72737f; font-size: 7px; }
.media-meta small { display: flex; align-items: center; gap: 4px; margin-top: 11px; color: var(--lime); font: 700 7px/1 ui-monospace,monospace; }
.media-meta small i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.json-ticket { right: 24px; bottom: 86px; display: flex; align-items: center; gap: 9px; min-width: 180px; padding: 10px 12px; border-radius: 12px; }
.json-ticket span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #111; background: var(--purple); font: 800 8px/1 ui-monospace,monospace; }
.json-ticket code { color: #b9b9c2; font-size: 8px; }.json-ticket b { margin-left: auto; color: var(--lime); font-size: 7px; }
.service-ribbon { position: absolute; bottom: 20px; left: 50%; display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(10,9,15,.72); box-shadow: 0 20px 50px rgba(0,0,0,.26); backdrop-filter: blur(15px); transform: translateX(-50%); }
.service-ribbon > span { position: relative; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045); }
.service-ribbon > span:nth-child(2)::after, .service-ribbon > span:nth-child(3)::after { content: "S"; position: absolute; right: -3px; bottom: -3px; display: grid; width: 12px; height: 12px; place-items: center; border: 2px solid #09090e; border-radius: 50%; color: #09090e; background: var(--purple); font: 800 6px/1 sans-serif; }
.service-ribbon > span:nth-child(3)::after { content: "H"; background: var(--cyan); }
.service-ribbon svg { width: 13px; height: 13px; fill: currentColor; }
.service-ribbon > span:nth-child(-n+3) { color: #fff; background: radial-gradient(circle at 30% 100%,#f9ce34 0 13%,#ee2a7b 48%,#6228d7 100%); }
.service-ribbon > span:nth-child(4) { color: #fff; box-shadow: inset 2px 0 #25f4ee,inset -2px 0 #fe2c55; }
.service-ribbon > span:nth-child(5) { color: #fff; }.service-ribbon > span:nth-child(6) { color: #fff; background: #bd081c; }.service-ribbon > span:nth-child(7) { color: #fff; background: #26a5e4; }
.platform-glyph { display: block; width: 1em; height: 1em; fill: currentColor; }
.service-icon.platform-icon, .addon-check.platform-icon { display: grid; place-items: center; color: #fff; }
.service-icon.platform-icon svg { width: 18px; height: 18px; }
.platform-instagram { background: radial-gradient(circle at 30% 100%,#f9ce34 0 16%,#ee2a7b 48%,#6228d7 100%) !important; }
.platform-tiktok { background: #101116 !important; box-shadow: inset 2px 0 #25f4ee,inset -2px 0 #fe2c55 !important; }
.platform-telegram { background: #26a5e4 !important; }.platform-pinterest { background: #bd081c !important; }.platform-x { background: #111 !important; }
.preview-platforms i { display: grid; place-items: center; }
.preview-platforms i svg { width: 14px; height: 14px; fill: currentColor; }
.preview-platforms i:nth-child(1) { background: radial-gradient(circle at 30% 100%,#f9ce34,#ee2a7b 48%,#6228d7); }.preview-platforms i:nth-child(2) { color: white; background: #101116; }.preview-platforms i:nth-child(3) { color: white; background: #26a5e4; }
.service-filters button { display: inline-flex; align-items: center; gap: 6px; }
.service-filters button i { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; color: currentColor; }
.service-filters button i + i { margin-left: -3px; }.service-filters button svg { width: 10px; height: 10px; fill: currentColor; }
.service-card .service-icon.platform-icon { width: 42px; height: 42px; border-radius: 13px; }
.service-card .service-icon.platform-icon svg { width: 20px; height: 20px; }
.table-service { display: inline-flex; align-items: center; gap: 9px; text-transform: capitalize; }
.table-service .service-icon { width: 29px; height: 29px; flex: 0 0 auto; border-radius: 9px; }
.table-service .service-icon svg { width: 14px; height: 14px; }
.service-select-wrap { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; }
.service-select-wrap .service-icon { z-index: 1; grid-area: 1/1; width: 28px; height: 28px; margin-left: 7px; border-radius: 8px; }
.service-select-wrap .service-icon svg { width: 13px; height: 13px; }.service-select-wrap select { grid-area: 1/1/2/3; padding-left: 45px !important; }
.enterprise-form .check-grid label { display: flex; align-items: center; gap: 7px; }.enterprise-form .check-grid label > i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #fff; background: rgba(255,255,255,.08); }.enterprise-form .check-grid label > i svg { width: 11px; height: 11px; fill: currentColor; }.catalog-glyph { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #111; background: var(--cyan); }
@keyframes resolver-scan { 0% { transform: translateX(-5%); } 50% { transform: translateX(185%); } 100% { transform: translateX(-5%); } }
@keyframes media-orbit { to { transform: rotate(385deg); } }

/* MARKETING SECTIONS */
.trust-strip { position: relative; z-index: 3; min-height: 66px; border-block: 1px solid rgba(255,255,255,.09); color: #d3d3d7; background: rgba(8,7,12,.86); backdrop-filter: blur(16px); }
.trust-strip > span { color: #858590; }
.trust-strip div { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
.section { padding-block: 105px; }
.section-heading { margin-bottom: 44px; }
.section-heading h2 { margin-top: 14px; color: inherit; font-size: clamp(38px,4.5vw,64px); font-weight: 560; line-height: 1.02; letter-spacing: -.055em; }
.section-heading p { max-width: 510px; color: #696a73; font-size: 15px; line-height: 1.65; }
.split-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; }

#services { color: var(--ink); background: var(--paper); }
.service-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 25px; border: 0; }
.service-filters button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #62636b; background: transparent; font-size: 10px; }
.service-filters button.active { color: #fff; background: #15151c; box-shadow: none; }
.service-grid { grid-template-columns: repeat(3,1fr); gap: 10px; border: 0; }
.service-card { position: relative; min-height: 230px; display:flex; flex-direction:column; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.52); box-shadow: none; transition: transform .35s cubic-bezier(.2,.75,.2,1), color .35s, background .35s; }
.service-card::after { content: "↗"; position: absolute; right: 18px; bottom: 16px; opacity: 0; transform: translate(-6px,6px); transition: .3s; }
.service-card:hover { color: #fff; background: #15151d; transform: translateY(-7px) rotate(-.6deg); }
.service-card:hover::after { opacity: 1; transform: translate(0); }
.service-icon { width: 38px; height: 38px; border-radius: 12px; color: #0c0c10; box-shadow: none; }
.service-card h3 { margin: 20px 0 7px; font-size: 17px; }.service-card p { color: #686972; font-size: 12px; line-height: 1.55; }.service-card:hover p { color: #a9a9b3; }
.service-seo-link { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:15px; color:#6b6c76; font-size:10px; font-weight:700; text-decoration:none; }.service-card:hover .service-seo-link{color:var(--cyan)}
.multiplier { padding: 5px 8px; border-radius: 999px; color: #55565f; background: #e5e5df; font-size: 9px; }.service-example { color: #777882; font-size: 9px; }
.catalog-note { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: #5d5e67; background: transparent; }

.workflow-section { position: relative; color: #f5f5f1; background: rgba(8,7,12,.88); backdrop-filter: blur(8px); }
.workflow-section .section { padding-block: 115px; }.workflow-section .section-heading p { color: #898994; }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 0; gap: 10px; background: transparent; }
.workflow-grid article { position: relative; min-height: 270px; padding: 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 18px; background: rgba(255,255,255,.025); transition: transform .35s, background .35s; }
.workflow-grid article:hover { background: rgba(135,245,255,.07); transform: translateY(-7px); }
.workflow-grid article > b { right: 22px; top: 17px; color: rgba(255,255,255,.12); font: 430 34px/1 "Unbounded Variable", sans-serif; }
.workflow-icon { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; color: var(--cyan); background: transparent; }
.workflow-grid h3 { margin: 66px 0 9px; font-size: 18px; }.workflow-grid p { color: #858590; font-size: 13px; }

#pricing { color: var(--ink); background: #ecebf4; }
.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; border: 0; }
.price-card { min-height: 420px; padding: 22px; border: 1px solid rgba(17,17,23,.12) !important; border-radius: 18px; background: rgba(255,255,255,.52); box-shadow: none; transition: transform .35s; }
.price-card:hover { transform: translateY(-7px); }.price-card.popular { color: #fff; background: #15151d; transform: translateY(-9px); }.price-card.popular:hover { transform: translateY(-14px); }
.price-card h3 { margin-top: 18px; font-size: 18px; }.price-card .price { font-size: 34px; font-weight: 600; letter-spacing: -.06em; }.price-card > p, .price-card li { color: #666770; }.price-card.popular > p, .price-card.popular li { color: #a4a4af; }
.price-card .button-ghost { border-color: rgba(17,17,23,.18); color: #111; }.price-card.popular .button-ghost { border-color: rgba(255,255,255,.16); color: #fff; }
.pricing-footnotes { color: #5d5e67; }

.build-teaser { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; width: min(1180px,calc(100% - 48px)); margin: 90px auto; padding: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; color: #f6f6f2; background: linear-gradient(135deg,rgba(31,25,62,.94),rgba(12,12,19,.96)); box-shadow: 0 34px 100px rgba(0,0,0,.3); }
.build-teaser h2 { margin: 14px 0; font-size: clamp(35px,4vw,54px); font-weight: 560; line-height: 1.03; letter-spacing: -.055em; }.build-teaser p { color: #aaa9b7; }
.build-teaser-plans { gap: 8px; }.build-teaser-plans > div { min-height: 135px; padding: 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.035); }.build-teaser-plans .featured { border-color: var(--cyan); transform: translateY(-5px); }.build-teaser-plans strong { color: var(--cyan); font-size: 25px; }

.enterprise { padding: 52px; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; color: #f5f5f1; background: rgba(12,11,18,.9); }.enterprise h2 { font-size: clamp(35px,4vw,55px); font-weight: 560; letter-spacing: -.055em; }.enterprise-copy > p, .enterprise li { color: #9595a0; }.enterprise-rates > div, .enterprise-form { border-color: rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.025); }.enterprise-form input, .enterprise-form select, .enterprise-form textarea { border-color: rgba(255,255,255,.12); border-radius: 10px; color: #fff; background: #14131c; }
.faq { color: var(--ink); background: var(--paper); }.faq-grid { gap: 0; }.faq details { padding: 22px 6px; border-color: var(--line); }.faq summary { font-size: 15px; }.faq details p { color: #6b6c75; }
.final-cta { margin-block: 70px; padding: 46px; border-radius: 25px; color: #f7f7f2; background: linear-gradient(120deg,#513ef0,#9f62ff 55%,#ff7663); }.final-cta h2 { margin: 10px 0; font-size: clamp(32px,4vw,53px); letter-spacing: -.055em; }
footer { color: #d8d8dd; background: #09080d; border-color: rgba(255,255,255,.09); }.footer-main { padding-block: 48px; }.footer-main p, .footer-main a:not(.brand), .footer-bottom { color: #7c7c87; }.footer-main h3, .footer-main h4 { color: #d7d7dc; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }.status-pill { color: #6ce3bd; }

/* WEBSITE SETUP */
.setup-preview { position: relative; z-index: 3; width: min(500px,100%); justify-self: end; }.preview-browser { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(15,14,23,.83); box-shadow: 0 35px 90px rgba(0,0,0,.35); backdrop-filter: blur(18px); }.preview-bar { border-color: rgba(255,255,255,.09); color: #7d7d88; }.preview-body { padding: 46px 32px; background: radial-gradient(circle at 70% 20%,rgba(135,245,255,.16),transparent 35%); }.preview-pill { color: var(--cyan); background: rgba(135,245,255,.1); }.preview-body h2 { color: #fff; font-size: 28px; }.preview-input { border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #73737e; background: rgba(255,255,255,.04); }.preview-input b { border-radius: 9px; color: #111; background: var(--cyan); }.preview-note { left: -30px; bottom: -38px; border-color: rgba(255,255,255,.13); border-radius: 13px; color: #fff; background: rgba(13,12,20,.88); }.preview-note span { color: #80808b; }
.setup-proof { position: relative; z-index: 3; border-color: rgba(255,255,255,.09); color: #8f8f9a; background: rgba(8,7,12,.88); }.setup-proof b { color: #fff; }
.setup-proof .shell > span { color: #92939e; }
.preview-bar span { color: #56657a; }
.setup-page #packages, .setup-order-section { color: var(--ink); background: var(--paper); }.setup-package-grid { grid-template-columns: repeat(4,1fr); gap: 10px; border: 0; }.setup-pack { min-height: 405px; padding: 22px; border: 1px solid var(--line) !important; border-radius: 18px; background: rgba(255,255,255,.55); }.setup-pack.popular { color: #fff; background: #171620; transform: translateY(-8px); }.setup-pack-price { font-size: 34px; }.scope-note { border-radius: 14px; }
.setup-included { color: #f5f5f1; background: #0b0a10; }.setup-included .section-heading p, .included-grid p { color: #8d8d98; }.included-grid { gap: 10px; }.included-grid article { min-height: 220px; padding: 23px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.025); }.included-grid article b { color: var(--cyan); }.included-grid h3 { font-size: 17px; }
.setup-order-section { align-items: start; }.order-copy h2 { font-size: clamp(38px,4.2vw,58px); }.setup-order-form { border: 1px solid var(--line); border-radius: 22px; box-shadow: 10px 10px 0 #171620; }.setup-order-form fieldset { border-color: var(--line); }.package-picks label, .setup-service-picks label, .setup-addon-pick { border-radius: 13px; }.package-picks label:has(input:checked), .setup-service-picks label:has(input:checked), .setup-addon-pick:has(input:checked) { border-color: #6a51ff; background: #efecff; box-shadow: 0 0 0 1px #6a51ff; }.setup-order-form input, .setup-order-form textarea { border-radius: 12px; }.checkout-summary { border-radius: 15px; background: #15151d; }

/* DOCS / AUTH / APP */
.docs-page { color: var(--ink); background: var(--paper); }.docs-page .topbar { color: #f7f7f2; }.docs-layout { width: min(1180px,calc(100% - 48px)); grid-template-columns: 210px minmax(0,850px); gap: 70px; }.docs-nav, .docs-content { min-width: 0; }.docs-nav { border-color: var(--line); }.docs-nav a { border-radius: 8px; color: #71727b; }.docs-nav a:hover, .docs-nav a.active { color: #111; background: #e5e4ef; }.docs-content h1 { font-size: clamp(44px,6vw,74px); font-weight: 570; letter-spacing: -.06em; }.docs-content h2 { border-color: var(--line); }.docs-content p { color: #62636c; }.code-block, .response-panel pre { border-radius: 16px; background: #111019; }.endpoint { border-radius: 13px; }.param-table { border-radius: 14px; }
.auth-page { min-height: 100svh; color: var(--ink); background: var(--paper); }.auth-side { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 25% 25%,rgba(159,124,255,.26),transparent 32%),#0b0a10; }.auth-side::after { content: ""; position: absolute; width: 430px; aspect-ratio: 1; right: -150px; bottom: -160px; border: 1px solid rgba(135,245,255,.3); border-radius: 50%; box-shadow: 0 0 0 45px rgba(135,245,255,.04),0 0 0 90px rgba(159,124,255,.035); animation: auth-orbit 8s linear infinite; }.auth-side-content { position: absolute; z-index: 2; left: 55px; right: 55px; bottom: 70px; }.auth-side h1 { max-width: 600px; font-size: clamp(44px,5vw,72px); font-weight: 560; line-height: .98; letter-spacing: -.06em; }.auth-side p { color: #9696a3; }.auth-benefits span { border-radius: 999px; color: #a9a9b4; background: rgba(255,255,255,.05); }.auth-main { background: #f1f1ec; }.auth-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 25px 70px rgba(17,17,23,.08); }.auth-card input { border-radius: 11px; }
.auth-wrap > a, .auth-subtitle, .auth-switch { color: #62636c; }
.auth-link, .auth-switch a { color: #0b58d5; }
.verify-card { width:min(470px,100%); text-align:center; }.verify-card h2 { margin:24px 0 10px; font-size:clamp(34px,4vw,48px); line-height:1; letter-spacing:-.055em; }.verify-card .auth-subtitle { max-width:440px; margin:0 auto 24px; font-size:15px; line-height:1.7; }.verify-card .auth-subtitle strong { color:#17171d; }.verify-kicker { color:#6c6d77; font:700 9px/1 ui-monospace,monospace; letter-spacing:.14em; }.mail-orb { position:relative; display:grid; width:108px; height:108px; place-items:center; margin:0 auto 28px; border:1px solid rgba(17,17,23,.14); border-radius:50%; background:#fff; box-shadow:0 22px 60px rgba(17,17,23,.1); }.mail-orb span { position:relative; z-index:2; display:grid; width:54px; height:54px; place-items:center; border-radius:16px; color:#101017; background:var(--cyan); font-size:24px; transform:rotate(-4deg); }.mail-orb i { position:absolute; inset:-10px 24px; border:1px solid rgba(159,124,255,.35); border-radius:50%; transform:rotate(55deg); animation:auth-orbit 7s linear infinite; }.mail-orb i:nth-of-type(2){inset:20px -13px;border-color:rgba(135,245,255,.5);transform:rotate(-28deg);animation-direction:reverse}.mail-orb i:nth-of-type(3){inset:-4px 37px;border-color:rgba(255,121,95,.42);transform:rotate(20deg)}.verify-actions { display:grid; gap:9px; margin-top:22px; }.verify-secondary { border:1px solid rgba(17,17,23,.16); color:#292932; background:transparent; }.verify-help { display:flex; justify-content:center; gap:18px; margin-top:22px; color:#71727b; font-size:11px; }.verify-help span::before { content:"✓"; margin-right:5px; color:#17876a; }.verify-change { margin-top:26px; border:0; color:#575864; background:transparent; cursor:pointer; font-size:11px; text-decoration:underline; text-underline-offset:3px; }.verify-card .notice { margin:18px 0 0; text-align:left; }.verify-loading { opacity:.7; }
@keyframes auth-orbit { to { transform: rotate(360deg); } }
.app-page { color: var(--ink); background: #efefea; }.app-shell { grid-template-columns: 245px 1fr; }.sidebar { border-right: 1px solid rgba(255,255,255,.08); color: #fff; background: #0c0b11; }.side-nav button, .side-nav a { border-radius: 10px; color: #8c8c98; }.side-nav button:hover, .side-nav a:hover, .side-nav button.active { color: #fff; background: rgba(135,245,255,.08); }.side-nav button.active { box-shadow: inset 3px 0 var(--cyan); }.credit-mini, .profile-mini { border-color: rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.03); }.app-main { background: #efefea; }.app-top { border-color: var(--line); }.app-top h1 { font-size: 29px; letter-spacing: -.045em; }.metric-card, .panel, .playground-form, .response-panel, .usage-table-wrap, .admin-table-wrap { border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.7); box-shadow: none; }.metric-card strong, .balance-orb strong { font-family: "Unbounded Variable", sans-serif; font-weight: 450; }.balance-orb { color: #fff; background: #15151d; }.view input, .view select, .view textarea { border-radius: 10px; }
.legal-shell { width: min(820px,calc(100% - 40px)); }.legal-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: none; }.not-found { min-height: 100svh; color: #fff; background: radial-gradient(circle at center,rgba(159,124,255,.22),transparent 32%),#08070c; }.not-found strong { color: var(--cyan); }

/* REVEALS */
[data-cine-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .75s ease, transform .9s cubic-bezier(.2,.75,.2,1); }
[data-cine-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }
@keyframes mobile-signal { 0% { transform: translate3d(-50%,-8%,0) rotate(0); } 100% { transform: translate3d(-50%,8%,0) rotate(360deg); } }

@media (max-width: 1050px) {
  .marketing-page .hero, .setup-page .setup-hero { grid-template-columns: 1fr; padding-top: 100px; }
  .code-stage, .resolver-stage, .setup-preview { justify-self: center; margin-top: 80px; }
  .service-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid, .setup-package-grid { grid-template-columns: repeat(2,1fr); }
  .build-teaser { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .shell, .docs-layout { width: min(1180px,calc(100% - 28px)); }
  .experience-loader { padding: 20px 16px; transition-duration: .65s; }.loader-mark { width: 138px; }.loader-mark strong { font-size: 38px; }
  .experience-noise { display: none; }
  .signal-cursor { display: none; }
  #api-core-canvas { display: none; }
  .api-core-fallback { position: absolute; z-index: 1; top: 470px; left: 50%; display: block; width: 250px; aspect-ratio: 1; border: 1px solid rgba(135,245,255,.28); border-radius: 50%; background: radial-gradient(circle,rgba(135,245,255,.18),rgba(159,124,255,.08) 40%,transparent 68%); transform: translateX(-50%); animation: mobile-signal 8s linear infinite; }
  .api-core-fallback::before, .api-core-fallback::after { content: ""; position: absolute; inset: 25px -22px; border: 1px solid rgba(159,124,255,.35); border-radius: 50%; transform: rotate(48deg); }.api-core-fallback::after { inset: -20px 58px; border-color: rgba(255,121,95,.38); transform: rotate(-28deg); }
  .api-core-fallback i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: live-pulse 1.2s ease-in-out infinite; }.api-core-fallback i:nth-child(1) { top: 10px; left: 50%; }.api-core-fallback i:nth-child(2) { right: -23px; top: 47%; background: var(--purple); }.api-core-fallback i:nth-child(3) { bottom: 20px; left: 15%; background: var(--coral); }.api-core-fallback i:nth-child(4) { left: -12px; top: 30%; background: var(--lime); }
  .marketing-page .api-core-fallback { top: 520px; width: 220px; height: 142px; aspect-ratio: auto; border-color: rgba(135,245,255,.34); border-radius: 25px; background: radial-gradient(circle at 50% 44%,rgba(135,245,255,.25),transparent 28%),linear-gradient(145deg,rgba(17,17,29,.96),rgba(10,10,16,.72)); box-shadow: 0 0 55px rgba(135,245,255,.12),inset 0 0 24px rgba(159,124,255,.08); animation: mobile-resolver 4.2s ease-in-out infinite; }
  .marketing-page .api-core-fallback::before { content: "URL   →   RESOLVE   →   MP4"; inset: auto; top: 15px; left: 50%; width: max-content; border: 0; border-radius: 0; color: #8b8c98; transform: translateX(-50%); font: 650 7px/1 ui-monospace,monospace; letter-spacing: .1em; }
  .marketing-page .api-core-fallback::after { content: "▶"; inset: auto; top: 48px; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(135,245,255,.5); border-radius: 50%; color: #e9ffff; background: rgba(135,245,255,.08); box-shadow: 0 0 28px rgba(135,245,255,.25); transform: translateX(-50%); font-size: 14px; }
  .marketing-page .api-core-fallback i:nth-child(1) { top: 68px; left: -4px; }.marketing-page .api-core-fallback i:nth-child(2) { top: 68px; right: -4px; }.marketing-page .api-core-fallback i:nth-child(3) { bottom: 10px; left: 28px; }.marketing-page .api-core-fallback i:nth-child(4) { bottom: 10px; left: auto; right: 28px; }
  .topbar { top: 7px; height: 56px; margin-top: 7px; padding-left: 12px; border-radius: 16px; }.brand > span:last-child { font-size: 12px; }.top-actions .text-button { display: none; }.top-actions .button { min-height: 38px; padding-inline: 12px; font-size: 10px; }
  .mobile-menu { border-radius: 11px; background: rgba(255,255,255,.08); }.mobile-menu span { background: #fff; }.menu-open .desktop-nav { top: 64px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(11,10,16,.98); }
  .marketing-page .hero, .setup-page .setup-hero { min-height: auto; gap: 0; padding-block: 82px 68px; }
  .trust-strip { max-width: 100vw; overflow-x: hidden; }
  .marketing-page .hero h1, .setup-page .setup-hero h1 { font-size: clamp(43px,12vw,58px); }
  .hero-lead, .setup-page .setup-hero > div:first-child > p { font-size: 14px; }
  .hero-proof { width: 100%; }.hero-proof div { min-width: 0; flex: 1; padding: 10px; }.hero-proof span { font-size: 7px; }
  .code-stage, .setup-preview { width: 100%; margin-top: 220px; }.code-window { transform: none; }.chip-one { right: -5px; }.chip-two { left: -5px; }.float-chip { min-width: 155px; }
  .resolver-stage { width: 100%; height: 500px; margin-top: 75px; }.resolver-kicker { top: 0; right: 0; }.source-stack { top: 52px; left: 0; }.request-ticket { top: 190px; left: 0; width: 180px; }.result-ticket { top: 175px; right: 0; width: 175px; }.core-caption { top: 335px; left: 50%; transform: translateX(-50%); }.json-ticket { right: 0; bottom: 62px; }.service-ribbon { bottom: 5px; }
  .section { padding-block: 78px; }.section-heading { margin-bottom: 30px; }.section-heading h2 { font-size: 36px; }.split-heading { grid-template-columns: 1fr; gap: 18px; }
  .service-grid, .pricing-grid, .setup-package-grid, .workflow-grid { grid-template-columns: 1fr; }.service-card { min-height: 170px; }.price-card, .setup-pack { min-height: 380px; }.price-card.popular, .setup-pack.popular { transform: none; }
  .build-teaser { width: calc(100% - 28px); margin-block: 65px; padding: 28px 20px; border-radius: 20px; }.build-teaser-plans { grid-template-columns: 1fr 1fr; }.enterprise { padding: 28px 19px; border-radius: 20px; }
  .final-cta { padding: 31px 22px; border-radius: 20px; }.footer-main { gap: 30px; }
  .setup-page .api-core-fallback { top: 500px; }.preview-note { left: -4px; }.setup-page #packages, .setup-order-section, .setup-page .faq { padding-inline: 14px; }.setup-order-form { border-radius: 17px; box-shadow: 6px 6px 0 #171620; }
  .docs-layout { grid-template-columns: minmax(0,1fr); gap: 25px; }.docs-nav, .docs-content { width: 100%; min-width: 0; max-width: 100%; }.docs-content h1 { font-size: 43px; }.docs-content .param-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }.docs-content .code-block, .docs-content .code-block pre { width: 100%; max-width: 100%; }.docs-content code:not(pre code) { overflow-wrap: anywhere; }
  .auth-side h1 { font-size: 43px; }.auth-page { grid-template-columns: 1fr; }.auth-side { min-height: 44svh; }.auth-side-content { position: static; margin-top: 70px; }.auth-main { padding: 24px 15px; }.app-main { padding: 20px 14px 50px; }
}

@media (max-width: 470px) {
  .brand > span:last-child { max-width: 125px; overflow: hidden; white-space: nowrap; }.marketing-page .hero h1, .setup-page .setup-hero h1 { font-size: 42px; }.build-teaser-plans { grid-template-columns: 1fr; }.hero-actions .button { width: 100%; }.float-chip { display: none; }
  .resolver-stage { height: 510px; }.source-stack { grid-template-columns: repeat(3,1fr); width: 100%; }.source-pill { min-width: 0; padding-right: 7px; font-size: 7px; }.source-pill i { width: 21px; height: 21px; }.request-ticket { top: 142px; width: 168px; }.result-ticket { top: 278px; width: 176px; }.core-caption { top: 237px; }.json-ticket { bottom: 58px; }.service-ribbon { gap: 4px; }.service-ribbon > span { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@keyframes mobile-resolver { 0%,100% { transform: translateX(-50%) translateY(-5px) rotate(-1deg); } 50% { transform: translateX(-50%) translateY(5px) rotate(1deg); } }