@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

html { scroll-snap-type: none; }
.rockflow-page { --rockflow-artboard-scale: 1; }
.rockflow-shell { overflow: clip; }
.rockflow-hero-image, .product-experience-bg, .product-experience-hero img, .rockflow-app-showcase img, .rockflow-product-experience-p14 img { max-width: 100%; }

.rockflow-hero { position: relative; width: 100%; height: 100svh; min-height: 0; background: #000; overflow: hidden; }
.rockflow-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rockflow-hero-copy { position: absolute; z-index: 2; left: var(--page-pad); bottom: 60px; width: min(823px, 60vw); }
.rockflow-tags { margin: 0 0 24px; color: var(--lime); font-size: 18px; line-height: 1.2; letter-spacing: .02em; font-weight: 700; }
.rockflow-hero h1 { margin: 0; font-size: clamp(96px, 9.45vw, 136px); line-height: 1; letter-spacing: .02em; font-weight: 900; }
html[lang="zh-CN"] .rockflow-hero .rockflow-latin-title { font-family: "Satoshi","Avenir Next",Avenir,Helvetica,Arial,sans-serif; font-weight: 900; }
.rockflow-summary { margin: 29px 0 0; color: #c6bdff; font-size: 24px; line-height: 1.4; letter-spacing: .02em; text-transform: capitalize; }

.project-intro { display: grid; grid-template-columns: 196px 997px; justify-content: space-between; width: 100%; min-height: 1238px; margin-top: 79px; padding: 80px var(--page-pad) 40px; background: #000; }
.project-facts { position: sticky; top: 110px; align-self: start; }
.project-facts dl { display: flex; flex-direction: column; gap: 80px; margin: 0; }
.project-facts dl > div { display: flex; flex-direction: column; gap: 20px; }
.project-facts dt { color: var(--lime); font-size: 16px; line-height: 1; letter-spacing: .02em; }
.project-facts dd { margin: 0; font-size: 18px; line-height: 1; letter-spacing: .02em; font-weight: 700; white-space: nowrap; }
.project-narrative { width: 997px; }
.project-narrative h2 { margin: 0 0 32px; font-size: 36px; line-height: 42px; letter-spacing: .02em; font-weight: 900; }
.project-narrative h3 { margin: 0 0 16px; color: var(--lime); font-size: 24px; line-height: 1.8; letter-spacing: .02em; }
.project-narrative p, .project-narrative li { font-size: 18px; line-height: 1.8; letter-spacing: .02em; }
.project-narrative p { margin: 0 0 10px; }
.project-narrative strong { font-weight: 900; }
.overview-block > p:first-of-type { margin-bottom: 16px; }
.overview-block h3:nth-of-type(2) { margin-top: 6px; }
.scope-title { margin-bottom: 0 !important; }
.project-narrative ul { margin: 0; padding-left: 24px; }
.challenge-block { margin-top: 60px; }

.rockflow-statement { --statement-reveal: 100%; --statement-shift: 48px; position: relative; height: 448px; margin-top: 150px; padding: 31px 44px; overflow: hidden; background: var(--lime); color: #000; clip-path: inset(var(--statement-reveal) 0 0 0); transform: translateY(var(--statement-shift)); transform-origin: center bottom; will-change: clip-path, transform; }
.rockflow-statement img { position: absolute; top: 110px; right: -50px; width: 712px; height: 708px; opacity: .45; }
.rockflow-statement h2 { position: relative; z-index: 1; margin: 0; font-size: 52px; line-height: 1.2; letter-spacing: .02em; font-weight: 900; }
.rockflow-statement p { position: absolute; z-index: 1; left: 44px; bottom: 24px; margin: 0; color: #697225; font-size: 25px; line-height: 1.2; letter-spacing: .02em; }

.design-strategy { min-height: 1075px; margin-top: 100px; padding: 80px var(--page-pad); background: #000; }
.design-strategy > h2 { margin: 0 0 48px; font-size: 72px; line-height: 1; letter-spacing: .02em; font-weight: 900; }
.strategy-tabs { display: flex; gap: 20px; margin-bottom: 20px; }
.strategy-tabs button { width: 205px; height: 48px; padding: 8px 16px; border: 1px solid #b4b4b4; border-radius: 60px; background: transparent; color: #b4b4b4; font: 400 18px/1.8 "Satoshi", Arial, sans-serif; letter-spacing: .02em; cursor: pointer; }
.strategy-tabs button.is-active { border-color: var(--lime); background: var(--lime); color: #000; font-weight: 700; }
.strategy-board { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1340 / 727; overflow: hidden; border-radius: 20px; background-color: #000; }
.strategy-slide { position: absolute; inset: 0; will-change: transform, opacity; }
.strategy-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strategy-board.is-system .strategy-slide > img { filter: brightness(.985) contrast(1.035); }
.strategy-axis { position: absolute; z-index: 2; left: 24.18%; top: 0; width: 9.7%; height: 100%; background: transparent; pointer-events: none; }
.axis-line { position: absolute; left: 52.3%; width: 1px; height: 24.76%; background: var(--lime); }
.axis-line-top { top: 8.12%; }
.axis-line-bottom { top: 67.68%; }
.axis-arrow { position: absolute; left: 50%; top: 50%; width: 54.62%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.axis-arrow::before { content: ""; position: absolute; left: 0; top: 46%; width: 100%; height: 8%; border-radius: 999px; background: var(--lime); }
.axis-arrow::after { content: ""; position: absolute; right: 3%; top: 24%; width: 44%; height: 44%; border-top: max(3px, .42vw) solid var(--lime); border-right: max(3px, .42vw) solid var(--lime); transform: rotate(45deg); transform-origin: center; }
.strategy-board-copy { position: absolute; inset: 0; pointer-events: none; }
.strategy-state { position: absolute; top: 3.03%; display: flex; flex-direction: column; gap: 0; }
.strategy-state-from { left: 3.88%; color: #fff; }
.strategy-state-to { left: 36.57%; color: var(--lime); }
.strategy-state strong { font-size: clamp(7px, 4.44vw, 64px); line-height: 1.8; letter-spacing: .02em; font-weight: 900; }
.strategy-state span { margin-top: -2.2%; font-size: clamp(6px, 1.25vw, 18px); line-height: 1.8; letter-spacing: .02em; font-weight: 700; }
.strategy-note { position: absolute; top: 7.43%; right: 3.5%; width: 43.58%; display: flex; flex-direction: column; color: var(--lime); font-size: clamp(6px, 1.11vw, 16px); line-height: 1.6; letter-spacing: .02em; text-align: right; }
.strategy-note-title { display: flex; align-items: center; justify-content: flex-end; gap: clamp(3px, .55vw, 8px); }
.strategy-note-title img { display: block; width: clamp(7px, 1.11vw, 16px); height: clamp(7px, 1.11vw, 16px); object-fit: contain; }
.strategy-note-title b { font-weight: 400; }
.product-experience-panel { --product-reveal: 100%; --product-shift: 48px; position: relative; width: 100%; height: 448px; overflow: hidden; background: #000; clip-path: inset(var(--product-reveal) 0 0); transform: translateY(var(--product-shift)); transform-origin: center bottom; will-change: clip-path, transform; }
.product-experience-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.product-experience-shade { position: absolute; inset: 0; background: rgba(0,0,0,.59); }
.product-experience-panel h2 { position: absolute; z-index: 2; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); color: var(--lime); font-size: 80px; line-height: 136px; letter-spacing: .02em; font-weight: 900; white-space: nowrap; }
.product-local-nav { position: fixed; z-index: 80; left: max(39px, calc((100vw - 1920px) / 2 + 39px)); top: 108px; width: 198px; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transform: translateX(-12px); pointer-events: none; transition: opacity .32s ease,transform .32s ease,visibility 0s linear .32s; }
.product-local-nav.is-visible { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; transition-delay: 0s; }
.product-local-heading { display: flex; align-items: center; gap: 5px; width: 198px; color: var(--lime); font-size: 16px; line-height: 16px; letter-spacing: .02em; white-space: nowrap; }
.product-local-heading img { display: block; width: 20px; height: 20px; }
.product-local-nav > a, .product-local-nav > span { display: flex; align-items: center; gap: 10px; min-height: 18px; color: #a4a4a4; font-size: 14px; line-height: 18px; letter-spacing: .02em; font-weight: 700; white-space: nowrap; }
.product-local-nav > a.is-current { color: #fff; }
.product-local-nav > a img { display: none; width: 11px; height: 11px; }
.product-local-nav > a.is-current img { display: block; }
.product-experience-hero { width: 100%; overflow: hidden; background: #000; }
.product-experience-hero img { display: block; width: 100%; height: auto; }
.rockflow-app-intro { position: relative; width: 100%; height: 707px; display: flex; align-items: center; justify-content: center; background: #0a070f; }
.app-intro-meta { position: absolute; left: 18.33%; right: 18.33%; top: 28px; display: grid; grid-template-columns: 1fr 1fr; }
.app-intro-meta > div { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 16px; line-height: 1.2; letter-spacing: .02em; }
.app-intro-meta > div:last-child { justify-self: end; width: 305px; }
.app-intro-meta span { color: #5b588a; }
.app-intro-meta strong { color: #fff; font-weight: 300; white-space: nowrap; }
.rockflow-app-intro p { width: min(82.57%, 1189px); margin: 0; color: #5b588a; font-size: 42px; line-height: 1.5; letter-spacing: .02em; font-weight: 300; text-align: center; }
.rockflow-app-intro strong { color: #fff; font-weight: 300; }
html[lang="zh-CN"] .rockflow-app-intro > p,
html[lang="zh-CN"] .rockflow-app-intro > p strong {
  font-family: "PingFang SC","PingFangSC-Light","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-weight: 300;
}
.app-inline-icon { position: relative; display: inline-block; width: 48px; height: 48px; margin: 0 7px; vertical-align: -.24em; }
.app-inline-icon > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.app-hand-icon { margin-left: 10px; }
.app-hand-icon .hand-symbol { inset: 8px 13px; width: 21px; height: 32px; }

[data-zh-title]::after { display: none; }
.major-bilingual-title {
  position: relative;
  font-family: "Satoshi","Avenir Next",Avenir,Helvetica,Arial,sans-serif !important;
}
html[lang="zh-CN"] .major-bilingual-title::after {
  content: attr(data-zh-title);
  position: absolute;
  top: calc(-1.5em - 10px);
  left: 0;
  right: auto;
  display: block;
  color: #5b588a;
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size: clamp(20px,2.083vw,30px);
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
.rockflow-problem-solution { position: relative; width: 100%; height: 1321px; overflow: hidden; padding: 0; background: #0a070f; }
@media (min-width: 821px) {
  html[lang="zh-CN"] .rockflow-problem-solution {
    height: 1376px;
    padding-top: 55px;
  }
}
.problem-solution-header { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1440px); margin: 0 auto; padding: 0 162px; }
.problem-solution-header h2 { width: 551px; margin: 0; color: #fff; font-size: 80px; line-height: 1.1; letter-spacing: 1.6px; font-weight: 700; }
.problem-solution-header h2 span { color: #5b588a; }
.problem-solution-header h2 b { display: inline-block; padding-left: 92px; font-weight: 700; }
.problem-solution-header > p { width: 498px; margin: 0; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: .36px; }
.problem-solution-stage { position: relative; width: 1139.45px; height: 1055px; margin: 32px auto 0; }
.experience-orbit { position: absolute; z-index: 0; left: 221px; top: 202.09px; width: 698px; height: 698px; }
.experience-card { position: absolute; z-index: 2; box-sizing: border-box; width: 507px; overflow: hidden; border-radius: 30px; color: #fff; }
.solution-card { left: 0; top: 586.09px; padding: 40px; background: #16102c; }
.problem-card { left: 588px; top: 57.1px; padding: 60px 40px; background: linear-gradient(131.346deg, #6f00ff 2.7548%, #966ef5 97.371%); transform: rotate(14.58deg); transform-origin: center; }
.experience-card-heading { display: flex; align-items: center; gap: 20px; }
.experience-card-icon { display: block; flex: 0 0 auto; width: 48px; height: 48px; }
.problem-card .experience-card-icon { width: 47.622px; height: 47.622px; }
.experience-card h3 { margin: 0; color: #fff; font-size: 54px; line-height: 54px; letter-spacing: 1.08px; font-weight: 700; }
.experience-card-copy { width: 455px; margin-top: 20px; padding: 10px; margin-left: -10px; }
.experience-card-copy strong, .experience-card-copy p { display: block; margin: 0; color: #fff; font-size: 22px; letter-spacing: .44px; }
.experience-card-copy strong { margin-bottom: 6px; line-height: 1.6; font-weight: 700; }
.experience-card-copy p { line-height: 1.6; font-weight: 400; }
.problem-card .experience-card-copy strong, .problem-card .experience-card-copy p { line-height: 1.5; }
.rockflow-app-showcase { width: 100%; overflow: hidden; background: #0a070f; }
.rockflow-app-showcase img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; }
.rockflow-user-persona { width: 100%; overflow: hidden; background: #0a070f; }
.user-persona-canvas { position: relative; width: min(100%, 1440px); height: 1573px; margin: 0 auto; background: #0a070f; }
.user-persona-header { position: absolute; z-index: 3; left: 0; top: 120px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 162px; }
.user-persona-header h2 { width: 551px; margin: 0; color: #fff; font-size: 80px; line-height: 1.1; letter-spacing: 1.6px; font-weight: 700; }
.user-persona-header h2 span { color: #5b588a; }
.user-persona-header h2 b { display: inline-block; padding-left: 92px; font-weight: 700; }
.user-persona-header p { width: 498px; margin: 0; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: .36px; }
.persona-glow { position: absolute; z-index: 0; left: 114.58px; top: 165.08px; width: 1507.31px; height: 1508.86px; }
.persona-profile-card, .persona-info-card { position: absolute; z-index: 2; box-sizing: border-box; border-radius: 30px; color: #fff; }
.persona-profile-card { left: 175px; top: 466px; width: 527px; height: 471px; padding-top: 83px; background: #16102c; text-align: center; }
.persona-avatar { position: absolute; left: 209px; top: -54px; width: 108px; height: 108px; border-radius: 50%; object-fit: cover; }
.persona-profile-card h3 { margin: 0; font-size: 24px; line-height: 36px; letter-spacing: .48px; font-weight: 700; }
.persona-role { margin: 0; color: #9794cb; font-size: 18px; line-height: 27px; letter-spacing: .36px; }
.persona-facts { display: grid; grid-template-columns: repeat(3, 1fr); width: 443px; margin: 59px auto 0; text-align: center; }
.persona-facts div { display: flex; flex-direction: column; gap: 9px; }
.persona-facts dd, .persona-facts dt { margin: 0; font-size: 18px; line-height: 27px; letter-spacing: .36px; }
.persona-facts dd { color: #fff; font-weight: 700; }
.persona-facts dt { color: #9794cb; font-weight: 400; }
.persona-divider { display: block; width: 443px; height: 2px; margin: 62px auto 14px; }
.persona-profile-card blockquote { margin: 0 auto; width: 458px; font-size: 24px; line-height: 1.5; letter-spacing: .48px; }
.persona-info-card { padding: 0 39px; }
.persona-info-card h3 { margin: 0; font-size: 54px; line-height: 1.5; letter-spacing: 1.08px; font-weight: 700; }
.persona-info-card ul { margin: 28px 0 0; padding-left: 0; list-style-position: inside; }
.persona-info-card li { margin-bottom: 8px; font-size: 20px; line-height: 1.5; letter-spacing: .4px; }
.persona-info-card li:last-child { margin-bottom: 0; }
.persona-goal-card { left: 739px; top: 466px; width: 527px; height: 471px; padding-top: 15.84px; background: linear-gradient(91.297deg, #6f00ff .604%, #966ef5 97.297%); }
.persona-needs-card { left: 451px; top: 975px; width: 538px; height: 475px; padding-top: 18px; border: 2px solid #925bff; background: #16102c; }
.rockflow-footer { margin-top: 0; scroll-snap-align: none; }

/* Reusable frosted-glass card */
.glass-card { box-sizing: border-box; border: 1px solid transparent; border-radius: 24px; background: rgba(100,86,190,.21); box-shadow: 0 18px 40px rgba(36,20,115,.28), inset 0 1px 12px rgba(255,255,255,.16); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); color: #fff; }
.glass-card::before { content: ""; position: absolute; z-index: 2; inset: -1px; padding: 1px; border-radius: 24px; background: linear-gradient(135deg, #ddd5fa 0%, rgba(125,138,153,.2) 100%); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass-card__title { margin: 0; color: #fff; font-size: 20px; line-height: 31px; letter-spacing: .375px; font-weight: 700; }
.glass-card__copy { margin: 18px 0 0; color: #d9cffb; font-size: 18px; line-height: 1.6; letter-spacing: .36px; font-weight: 400; }
.rockflow-product-principles { position: relative; z-index: 1; width: 100%; overflow: visible; background: #0a070f; }
.product-principles-canvas { position: relative; width: min(100%, 1440px); height: 1151px; margin: 0 auto; overflow: visible; background: #0a070f; }
.product-principles-glow { position: absolute; z-index: 0; left: -968.58px; top: -123.54px; width: 1707.15px; height: 1709.09px; }
.product-principles-visual { position: absolute; z-index: 1; left: 374px; top: 74px; width: 842px; height: 1017px; object-fit: contain; }
.product-principle-card { position: absolute; z-index: 2; width: 330px; height: 169px; padding: 30px 27px; }
.confidence-card { left: 134px; top: 608px; padding-left: 28px; }
.clarity-card { left: 942px; top: 362px; }
.rockflow-product-promo { width: 100%; overflow: hidden; background: #0a070f; }
.product-promo-canvas { position: relative; width: min(100%, 1440px); height: 637px; margin: 0 auto; background: #0a070f; }
.product-promo-visual { position: absolute; left: 174px; top: 0; width: 1092px; height: 522px; border-radius: 30px; object-fit: cover; }
.rockflow-design-system { width: 100%; overflow: hidden; background: #0a070f; }
.design-system-canvas { position: relative; width: min(100%, 1440px); height: 1565px; margin: 0 auto; background: #0a070f; }
.design-system-heading { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 296px; padding: 60px 162px; }
.design-system-heading h2 { display: flex; flex-direction: column; justify-content: center; width: 551px; margin: 0; font-size: 80px; line-height: 1.1; letter-spacing: 1.6px; font-weight: 700; white-space: nowrap; }
.design-system-heading h2 span { color: #5b588a; font: inherit; }
.design-system-heading h2 strong { padding-left: 50px; color: #fff; font: inherit; }
.design-system-heading p { width: 498px; margin: 0 10px; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: .36px; }
html[lang="zh-CN"] .problem-solution-header > p,
html[lang="zh-CN"] .user-persona-header > p,
html[lang="zh-CN"] .design-system-heading > p {
  width: 371px;
}
.design-system-visual { position: absolute; left: 115.5px; top: 356px; width: 1209px; height: 1209px; object-fit: cover; }
.rockflow-color-modes { width: 100%; overflow: hidden; background: #0a070f; }
.color-modes-canvas { position: relative; width: min(100%, 1440px); height: 950px; margin: 0 auto; background: #0a070f; }
.color-modes-canvas > h2 { position: absolute; left: 0; top: 70px; width: 100%; margin: 0; background: linear-gradient(95deg, #ddd4ff 27.5%, #a2c2ff 103%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 1.5; letter-spacing: .96px; font-weight: 400; text-align: center; }
.color-palette { position: absolute; left: 174px; top: 206px; width: 754px; height: 664px; }
.palette-mode { position: absolute; left: 0; width: 754px; height: 299px; }
.palette-dark { top: 0; }
.palette-light { top: 365px; }
.palette-mode h3 { margin: 0; color: #d9cffb; font-size: 18px; line-height: 37px; letter-spacing: .36px; font-weight: 400; }
.palette-primary, .palette-secondary { position: absolute; left: 0; display: flex; justify-content: space-between; width: 754px; }
.palette-primary { top: 54px; height: 154px; }
.palette-secondary { top: 223px; height: 76px; }
.color-swatch { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 13px 20px; border-radius: 30px; font-size: 12px; line-height: 1.5; letter-spacing: .24px; }
.color-swatch span, .color-swatch strong { display: block; font: inherit; }
.color-swatch strong { font-weight: 700; }
.palette-primary .color-swatch:nth-child(1), .palette-primary .color-swatch:nth-child(3) { width: 238.105px; }
.palette-primary .color-swatch:nth-child(2) { width: 235.053px; }
.palette-secondary .color-swatch { width: 117.526px; padding: 10px; border-radius: 19px; }
.palette-secondary .color-swatch:nth-child(5) { width: 116px; }
.swatch-dark-action { background: #886aff; color: #fff; }
.swatch-dark-surface { background: #1b1533; color: #fff; }
.swatch-dark-bg { border: 1px solid #353535; background: #000; color: #fff; }
.swatch-dark-type { background: #fff; color: #000; }
.swatch-dark-secondary { background: #949494; color: #fff; }
.swatch-dark-disabled { background: #727272; color: #fff; }
.swatch-dark-divider { background: #242424; color: #fff; }
.swatch-dark-positive { background: #0ef8c0; color: #0a070f; }
.swatch-dark-negative { background: #ff38a3; color: #0a070f; }
.swatch-light-action { background: #6f00ff; color: #fff; }
.swatch-light-surface { background: #f3f1ff; color: #000; }
.swatch-light-bg { background: #fff; color: #000; }
.swatch-light-type { background: #000; color: #fff; }
.swatch-light-secondary { background: #717275; color: #fff; }
.swatch-light-disabled { background: #c2c2c2; color: #fff; }
.swatch-light-divider { background: #ececec; color: #000; }
.swatch-light-positive { background: #09ca4f; color: #0a070f; }
.swatch-light-negative { background: #ff3d00; color: #0a070f; }
.color-mode-stage { position: absolute; left: 984px; top: 259px; width: 282px; height: 611px; overflow: hidden; border: 1px solid #5b588a; border-radius: 30px; background: #110f15; }
.color-mode-image { position: absolute; inset: -1px 0 0 -1px; display: block; width: 282px; height: 612px; object-fit: cover; opacity: 0; transform: scale(1.008); transition: opacity .65s ease, transform .85s ease; }
.color-mode-image.is-active { opacity: 1; transform: scale(1); }
.color-mode-toggle { position: absolute; left: 1067px; top: 184px; display: grid; grid-template-columns: 56px 56px; width: 116px; height: 48px; padding: 4px; border: 1px solid #ddd5fa; border-radius: 74px; background: rgba(100,86,190,.21); box-shadow: inset 0 1px 12px rgba(255,255,255,.16), 0 18px 40px rgba(36,20,115,.28); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); }
.color-mode-toggle__thumb { position: absolute; left: 59px; top: 3px; width: 53px; height: 40px; border-radius: 40px; background: #fff; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.color-mode-stage[data-mode="dark"] ~ .color-mode-toggle .color-mode-toggle__thumb { transform: translateX(-56px); }
.color-mode-toggle button { position: relative; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.color-mode-toggle button img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.color-mode-toggle button::after { content: ""; display: block; width: 26px; height: 26px; background: #ddd4ff; transition: background-color .3s ease; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.color-mode-toggle button[data-mode="dark"]::after { -webkit-mask-image: url("images/rockflow/color-mode-moon.svg"); mask-image: url("images/rockflow/color-mode-moon.svg"); }
.color-mode-toggle button[data-mode="light"]::after { width: 24.11px; height: 24.11px; -webkit-mask-image: url("images/rockflow/color-mode-sun.svg"); mask-image: url("images/rockflow/color-mode-sun.svg"); }
.color-mode-toggle button.is-active::after { background: #000; }
.rockflow-icon-sets { width: 100%; overflow: hidden; background: #0a070f; }
.icon-sets-canvas { position: relative; width: min(100%, 1440px); height: 575px; margin: 0 auto; background: #0a070f; }
.icon-sets-canvas h2 { position: absolute; left: 0; top: 70px; width: 100%; margin: 0; background: linear-gradient(94deg, #ddd4ff 28%, #a2c2ff 134%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 1.5; letter-spacing: .96px; font-weight: 400; text-align: center; }
.icon-sets-canvas img { position: absolute; left: 176.5px; top: 207px; display: block; width: 1087px; height: 288px; object-fit: fill; }
.rockflow-illustration-system { width: 100%; overflow: hidden; background: #0a070f; }
.illustration-system-canvas { position: relative; isolation: isolate; width: min(100%, 1440px); height: 1566px; margin: 0 auto; background: #0a070f; }
.illustration-system-canvas h2 { position: absolute; left: 0; top: 70px; width: 100%; margin: 0; background: linear-gradient(94deg, #ddd4ff 28%, #a2c2ff 134%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 1.5; letter-spacing: .96px; font-weight: 400; text-align: center; }
.illustration-system-grid { position: absolute; left: 154px; top: 203px; display: block; width: 1132px; height: 548px; object-fit: fill; }
.illustration-system-glow { position: absolute; z-index: 1; left: calc(50% + 100px); top: 506px; display: block; width: 1707.15px; height: 1709.09px; transform: translateX(-50%); pointer-events: none; }
.illustration-carousel { position: absolute; z-index: 2; inset: 835px 0 auto; height: 651px; }
.illustration-carousel-stage { position: absolute; left: 406.5px; top: 0; width: 627px; height: 651px; overflow: hidden; border: 1px solid #5b588a; border-radius: 80px; background: #030105; }
.illustration-carousel-track { display: flex; width: 100%; height: 100%; will-change: transform; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.illustration-carousel-track img { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.illustration-carousel-button { position: absolute; top: 286px; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 1px solid #5b588a; border-radius: 50%; background: rgba(91, 88, 138, .05); color: #5b588a; cursor: pointer; transition: border-color .25s ease, color .25s ease, background-color .25s ease; }
.illustration-carousel-button:hover { border-color: #ddd4ff; color: #ddd4ff; background: rgba(91, 88, 138, .16); }
.illustration-prev { left: 173.5px; }
.illustration-next { right: 173.5px; }
.illustration-carousel-button span { display: block; width: 12px; height: 12px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.illustration-prev span { transform: translateX(2px) rotate(-135deg); }
.illustration-next span { transform: translateX(-2px) rotate(45deg); }
.rockflow-asset-system { width: 100%; overflow: hidden; background: #0a070f; }
.asset-system-canvas { position: relative; width: min(100%, 1440px); height: 885px; margin: 0 auto; background: #0a070f; }
.asset-system-canvas h2 { position: absolute; left: 0; top: 70px; width: 100%; margin: 0; background: linear-gradient(100deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 1.5; letter-spacing: .96px; font-weight: 400; text-align: center; }
.asset-system-canvas img { position: absolute; left: 248.3125px; top: 214px; display: block; width: 943.375px; height: 591px; object-fit: fill; }
.rockflow-product-experience-p14 { width: 100%; overflow: hidden; background: #0a070f; }
.rockflow-product-experience-p14 img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; }
.rockflow-onboarding { width: 100%; overflow: hidden; background: #0a070f; }
.onboarding-canvas { position: relative; width: min(100%, 1440px); height: 1182px; margin: 0 auto; background: #0a070f; }
.onboarding-header { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 296px; padding: 60px 162px; }
.onboarding-header h2 { display: flex; flex-direction: column; justify-content: center; width: 573px; margin: 0; font-size: 80px; line-height: 1.1; letter-spacing: 1.6px; font-weight: 700; white-space: nowrap; }
.onboarding-header h2 span { color: #5b588a; font: inherit; }
.onboarding-header h2 strong { padding-left: 12px; color: #fff; font: inherit; }
.onboarding-header p { width: 371px; margin: 0; padding: 10px; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: .36px; }
.onboarding-canvas > h3 { position: absolute; left: 0; top: 326px; width: 100%; margin: 0; background: linear-gradient(100deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.onboarding-carousel { position: absolute; left: 0; top: 448px; width: 100%; height: 674px; overflow: hidden; }
.onboarding-track { position: absolute; left: 50%; top: 18px; display: flex; gap: 40px; height: 638px; margin-left: -147px; will-change: transform; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.onboarding-track img { display: block; flex: 0 0 294px; width: 294px; height: 638px; border-radius: 46px; object-fit: cover; opacity: .3; transition: opacity .5s ease; }
.onboarding-track img.is-active { opacity: 1; }
.onboarding-phone { position: absolute; z-index: 2; left: 554.512px; top: 0; display: block; width: 330.976px; height: 674px; object-fit: fill; pointer-events: none; }
.onboarding-control { position: absolute; z-index: 4; top: 307px; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 1px solid rgba(221,212,255,.72); border-radius: 50%; background: rgba(26,19,47,.72); box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.onboarding-control:hover { border-color: #fff; background: rgba(91,88,138,.82); transform: scale(1.06); }
.onboarding-control:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.onboarding-prev { left: 466px; }
.onboarding-next { right: 466px; }
.onboarding-control span { display: block; width: 15px; height: 15px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.onboarding-prev span { margin-left: 5px; transform: rotate(-135deg); }
.onboarding-next span { margin-right: 5px; transform: rotate(45deg); }
.rockflow-exploring { width: 100%; overflow: hidden; background: #0a070f; }
.exploring-canvas { position: relative; width: min(100%, 1440px); height: 866px; margin: 0 auto; background: #0a070f; }
.exploring-canvas > h2 { position: absolute; left: 0; top: 10px; width: 100%; margin: 0; background: linear-gradient(98deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.exploring-copy { left: 191px; top: auto; bottom: 60px; height: auto; min-height: 0; padding: 24px 27px; }
.exploring-copy .glass-card__copy { margin-top: 8px; }
.exploring-phone { position: absolute; left: 558px; top: 132px; width: 330.976px; height: 674px; }
.exploring-screen { position: absolute; z-index: 0; left: 18.488px; top: 19px; width: 294px; height: 638px; overflow: hidden; border-radius: 46px; background: #000; }
.exploring-screen img { display: block; width: 294px; height: auto; transform: translate3d(0, 0, 0); will-change: transform; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.exploring-phone-frame { position: absolute; z-index: 1; inset: 0; display: block; width: 330.976px; height: 674px; pointer-events: none; }
.exploring-controls { position: absolute; left: 929px; top: 392px; display: flex; flex-direction: column; gap: 34px; width: 60px; }
.exploring-controls button { position: relative; display: block; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: opacity .25s ease, transform .25s ease; }
.exploring-controls button:hover:not(:disabled) { transform: scale(1.06); }
.exploring-controls button:disabled { opacity: .35; cursor: default; }
.exploring-controls img { position: absolute; inset: 0; display: block; width: 60px; height: 60px; transition: opacity .2s ease; }
.exploring-controls .arrow-hover { opacity: 0; }
.exploring-controls button:hover:not(:disabled) .arrow-default { opacity: 0; }
.exploring-controls button:hover:not(:disabled) .arrow-hover { opacity: 1; }
.exploring-up img { transform: rotate(90deg); }
.exploring-down img { transform: rotate(-90deg); }
.rockflow-stocks-trading { position: relative; z-index: 3; width: 100%; overflow: visible; background: #0a070f; }
.stocks-trading-canvas { position: relative; isolation: isolate; width: min(100%, 1440px); height: 1645px; margin: 0 auto; background: #0a070f; }
.stocks-trading-canvas > h2 { position: absolute; left: 0; top: 50px; width: 100%; margin: 0; background: linear-gradient(101deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.stocks-trading-glow { position: absolute; z-index: 0; left: calc(50% + 100px); top: 374px; display: block; width: 1707.15px; height: 1709.09px; transform: translateX(-50%); pointer-events: none; }
.stocks-trading-visual { position: absolute; z-index: 1; left: 175.527px; top: 212px; width: 1088.945px; height: 1353px; overflow: visible; }
.stocks-trading-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.stocks-trading-copy { position: absolute; z-index: 3; left: 787.472px; top: 212px; width: 477px; min-height: 135px; padding: 24px 20px; }
.stocks-trading-copy p { position: relative; z-index: 3; width: 437px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-copy-trading { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.copy-trading-canvas { position: relative; width: min(100%, 1440px); height: 1191px; margin: 0 auto; background: #0a070f; }
.copy-trading-canvas > h2 { position: absolute; left: 0; top: 50px; width: 100%; margin: 0; background: linear-gradient(101deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.copy-trading-visual { position: absolute; left: 316px; top: 152px; width: 808px; height: 931px; }
.copy-trading-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.copy-trading-copy { position: absolute; z-index: 3; left: 864px; top: 834px; width: 377px; min-height: 193px; padding: 24px 20px; }
.copy-trading-copy p { position: relative; z-index: 3; width: 325px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-ai-strategy { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.ai-strategy-canvas { position: relative; width: min(100%, 1440px); height: 992px; margin: 0 auto; background: #0a070f; }
.ai-strategy-canvas > h2 { position: absolute; left: 0; top: 50px; width: 100%; margin: 0; background: linear-gradient(99deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.ai-strategy-visual { position: absolute; left: 172px; top: 192px; width: 719px; height: 703.789px; }
.ai-strategy-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.ai-strategy-copy { position: absolute; z-index: 3; left: 891px; top: 447.394px; width: 377px; min-height: 193px; padding: 24px 20px; }
.ai-strategy-copy p { position: relative; z-index: 3; width: 325px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-options-trading { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.options-trading-canvas { position: relative; width: min(100%, 1440px); height: 1270px; margin: 0 auto; background: #0a070f; }
.options-trading-canvas > h2 { position: absolute; left: 0; top: 50.436px; width: 100%; margin: 0; background: linear-gradient(107deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.options-trading-visual { position: absolute; left: 167.214px; top: 192.436px; width: 1105.572px; height: 1019.564px; }
.options-trading-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.options-trading-copy { position: absolute; z-index: 3; left: 240px; top: 956px; width: 377px; min-height: 164px; padding: 24px 20px; }
.options-trading-copy p { position: relative; z-index: 3; width: 325px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-asset-profile { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.asset-profile-canvas { position: relative; width: min(100%, 1440px); height: 1270px; margin: 0 auto; background: #0a070f; }
.asset-profile-canvas > h2 { position: absolute; left: 0; top: 50.436px; width: 100%; margin: 0; background: linear-gradient(102deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.asset-profile-visual { position: absolute; left: 316px; top: 160.436px; width: 808px; height: 931px; }
.asset-profile-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.asset-profile-copy { position: absolute; z-index: 3; left: 887px; top: 875px; width: 377px; min-height: 193px; padding: 24px 20px; }
.asset-profile-copy p { position: relative; z-index: 3; width: 325px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-astrology-strategy { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.astrology-strategy-canvas { position: relative; width: min(100%, 1440px); height: 985px; margin: 0 auto; background: #0a070f; }
.astrology-strategy-canvas > h2 { position: absolute; left: 0; top: 40.436px; width: 100%; margin: 0; background: linear-gradient(103.52deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; }
.astrology-strategy-visual { position: absolute; left: 272px; top: 192.436px; width: 896.197px; height: 686.424px; }
.astrology-strategy-visual img { display: block; width: 100%; height: 100%; object-fit: fill; }
.astrology-strategy-copy { position: absolute; z-index: 3; left: 988px; top: 212.436px; width: 377px; min-height: 193px; padding: 24px 20px; }
.astrology-strategy-copy p { position: relative; z-index: 3; width: 325px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
.rockflow-crypto-etfs { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.crypto-etfs-canvas { position: relative; width: min(100%, 1440px); height: 1077px; margin: 0 auto; background: #0a070f; }
.crypto-etfs-canvas > h2 { position: absolute; left: 0; top: 40.436px; width: 100%; margin: 0; background: linear-gradient(99.67deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; animation: crypto-etfs-figma-presence 2s linear infinite; }
.crypto-etfs-copy { position: absolute; z-index: 3; left: 333px; top: 162.436px; width: 774px; min-height: 58px; text-align: center; }
.crypto-etfs-copy p { width: 774px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
html:not([lang="zh-CN"]) .crypto-etfs-copy { left: 50%; width: 920px; transform: translateX(-50%); }
html:not([lang="zh-CN"]) .crypto-etfs-copy p { width: 100%; }
.crypto-etfs-visual { position: absolute; left: 142.5px; top: 220.436px; width: 1155px; height: 770px; }
.crypto-etfs-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rockflow-social-media { position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; }
.social-media-canvas { position: relative; width: min(100%, 1440px); height: 1021px; margin: 0 auto; background: #0a070f; }
.social-media-canvas > h2 { position: absolute; left: 0; top: 40.436px; width: 100%; margin: 0; background: linear-gradient(100.272deg, #ddd4ff 27.63%, #a2c2ff 131.32%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 48px; line-height: 72px; letter-spacing: .96px; font-weight: 400; text-align: center; animation: social-media-figma-presence 2s linear infinite; }
.social-media-copy { position: absolute; z-index: 3; left: 333px; top: 162.436px; width: 774px; min-height: 58px; text-align: center; }
.social-media-copy p { width: 774px; margin: 0; color: #d9cffb; font-size: 18px; line-height: 1.8; letter-spacing: .36px; font-weight: 400; }
html:not([lang="zh-CN"]) .social-media-copy { left: 50%; width: 920px; transform: translateX(-50%); }
html:not([lang="zh-CN"]) .social-media-copy p { width: 100%; }
.social-media-visual { position: absolute; left: 118.5px; top: 280.436px; width: 1203px; height: 741px; overflow: hidden; }
.social-media-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rockflow-product-gallery { --gallery-reveal: 100%; --gallery-shift: 48px; position: relative; z-index: 2; width: 100%; overflow: hidden; background: #0a070f; clip-path: inset(var(--gallery-reveal) 0 0); transform: translateY(var(--gallery-shift)); transform-origin: center bottom; will-change: clip-path, transform; }
.rockflow-product-gallery img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; }

.bobby-ai-hero { width: 100%; overflow: hidden; scroll-margin-top: 70px; background: #000; }
.bobby-ai-hero img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; }
.bobby-ai-intro { position: relative; width: 100%; height: 689px; display: flex; align-items: center; justify-content: center; background: #000; font-family: "Geist", "Avenir Next", Arial, sans-serif; }
.bobby-ai-meta { position: absolute; left: 18.54%; right: 10.42%; top: 24px; display: grid; grid-template-columns: 1fr 302px; }
.bobby-ai-meta > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0; color: #fff; font-size: clamp(14px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; }
.bobby-ai-meta > div:last-child { justify-self: end; width: 302px; }
.bobby-ai-meta span { color: #898989; }
.bobby-ai-meta strong { color: #fff; font-weight: 400; }
.bobby-ai-intro > p { width: min(81.46%, 1173px); margin: 0; color: #969696; font-family: "Geist", "Avenir Next", Arial, sans-serif; font-size: clamp(27px,2.917vw,42px); line-height: 1.5; letter-spacing: .02em; font-weight: 300; text-align: center; }
.bobby-ai-intro > p strong { color: #fff; font-weight: inherit; }
.bobby-ai-hero::after { content: "Bobby AI"; position: absolute; width: 1px; height: 1px; overflow: hidden; font-family: "Playfair Display", Georgia, serif; }
.bobby-ai-showcase { width: 100%; overflow: hidden; background: #000; }
.bobby-ai-showcase img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; }
.bobby-ai-features, .bobby-ai-moodboard { width: 100%; overflow: hidden; background: #000; color: #fff; }
.bobby-ai-features { height: 1408px; }
.bobby-ai-moodboard { height: 1368px; }
.bobby-ai-content-canvas { width: 1440px; height: 100%; margin: 0 auto; padding: 100px 200px; }
.bobby-ai-features h2, .bobby-ai-moodboard h2, .bobby-feature-card h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.bobby-ai-features h2 { font-size: clamp(42px,4.167vw,60px); line-height: 1.5; letter-spacing: .02em; }
.bobby-feature-grid { display: grid; grid-template-columns: repeat(2, 476px); column-gap: 88px; row-gap: 63px; margin-top: 130px; }
.bobby-feature-card { display: flex; min-height: 392px; flex-direction: column; align-items: flex-start; gap: 48px; }
.bobby-feature-card > img { display: block; width: 156px; height: 156px; border-radius: 28px; object-fit: cover; }
.bobby-feature-card h3 { margin-bottom: 16px; font-size: clamp(24px,2.222vw,32px); line-height: 1.6; letter-spacing: .02em; }
.bobby-feature-card h4, .bobby-feature-card p { margin: 0; font-family: "Geist", "Avenir Next", Arial, sans-serif; letter-spacing: .02em; }
.bobby-feature-card h4 { margin-bottom: 6px; font-size: clamp(17px,1.389vw,20px); line-height: 1.6; font-weight: 700; }
.bobby-feature-card p { font-size: clamp(15px,1.25vw,18px); line-height: 1.6; font-weight: 400; }
.bobby-ai-moodboard header { width: 856px; }
.bobby-ai-moodboard h2 { font-size: clamp(42px,4.167vw,60px); line-height: 1; letter-spacing: .02em; }
.bobby-ai-moodboard header p { margin: 36px 0 0; font-family: "Geist", "Avenir Next", Arial, sans-serif; font-size: clamp(27px,2.917vw,42px); line-height: 1.5; letter-spacing: .02em; font-weight: 300; }
.bobby-moodboard-stage { position: relative; width: 1040px; height: 783px; margin-top: 100px; }
.bobby-moodboard-stage > img { display: block; width: 1040px; height: 783px; object-fit: cover; }
.bobby-moodboard-keyword { position: absolute; display: flex; width: 160px; height: 36px; align-items: center; justify-content: center; color: #fff; font-family: "Geist", "Avenir Next", Arial, sans-serif; font-size: clamp(14px,1.667vw,24px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; }
.keyword-intelligent { left: 488px; top: 99px; }
.keyword-personal { left: 891px; top: 349px; }
.keyword-inspiring { left: 375px; top: 598px; }
.bobby-ai-design-system,.bobby-ai-typography,.bobby-ai-colors { width: 100%; overflow: hidden; background: #000; color: #fff; font-family: "Geist",Arial,sans-serif; }
.bobby-ai-design-system { height: 1628px; }.bobby-ai-typography { height: 1173px; }.bobby-ai-colors { height: 1449px; }
.bobby-design-canvas { width: 1440px; height: 100%; margin: 0 auto; padding: 100px 200px; }
.bobby-ai-design-system .bobby-design-canvas { padding-top: 60px; }
.bobby-design-heading { width: 864px; }.bobby-design-heading h2 { margin: 0; font-family: "Playfair Display",Georgia,serif; font-size: clamp(42px,4.167vw,60px); line-height: 1; font-weight: 600; letter-spacing: .02em; }.bobby-design-heading p { width: 856px; margin: 36px 0 0; font-size: clamp(27px,2.917vw,42px); line-height: 1.5; font-weight: 300; letter-spacing: .02em; }
.bobby-section-pill { position: relative; z-index: 2; display: inline-flex; width: fit-content; max-width: 100%; min-height: 62px; align-items: center; gap: 7px; padding: 10px 26px; border: 0; border-radius: 58px; background: linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); box-shadow: 0 2px 12px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: clamp(17px,1.667vw,24px); line-height: 1.2; letter-spacing: .02em; white-space: normal; overflow-wrap: anywhere; }.bobby-section-pill::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg,#fff 0%,#545454 100%); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }.bobby-section-pill strong { font-weight: 600; }.bobby-section-pill span { font-weight: 300; }
.bobby-logo-block { position: relative; width: 1040px; height: 674px; margin-top: 141px; }.bobby-logo-block > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.bobby-logo-block .bobby-section-pill { position: absolute; left: 0; top: 0; }.bobby-logo-block > p { position: absolute; left: 0; bottom: 0; width: 468px; margin: 0; font-size: clamp(15px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; overflow-wrap: anywhere; }.bobby-logo-guide { display: block; width: 1105px; height: 373px; margin: 35px 0 0 -32.5px; object-fit: cover; }
.bobby-ai-typography .bobby-section-pill { margin-bottom: 64px; }.bobby-type-row { display: grid; grid-template-columns: 675px 241px; justify-content: space-between; }.bobby-type-row h2 { margin: 0; font-size: clamp(48px,6.25vw,90px); line-height: 1; letter-spacing: .02em; }.bobby-type-row div > p { margin: 60px 0 0; font-size: clamp(22px,2.222vw,32px); line-height: 1.5; letter-spacing: .02em; white-space: normal; overflow-wrap: anywhere; }.bobby-type-row aside { font-size: clamp(14px,1.111vw,16px); line-height: 1.5; letter-spacing: .02em; }.bobby-type-row aside b { font-weight: 700; }.is-playfair h2,.is-playfair div > p { font-family: "Playfair Display",Georgia,serif; font-weight: 600; }.is-geist { position: relative; margin-top: 164px; }.is-geist::before { content: ""; position: absolute; right: 0; top: -84px; width: 603px; border-top: 1px solid #777; }.is-geist h2 { font-weight: 600; }.bobby-type-weights { margin: 71px 0 0; text-align: right; font-size: clamp(14px,1.111vw,16px); }.bobby-type-weights b { font-weight: 400; }.bobby-type-weights strong { font-weight: 500; }.bobby-type-weights em { font-style: normal; font-weight: 600; }

/* Preserve the type specimens in both languages. Only their explanatory copy
   is localized; the family names and alphabet samples keep the source fonts. */
html[lang="zh-CN"] .bobby-ai-typography .is-playfair h2,
html[lang="zh-CN"] .bobby-ai-typography .is-playfair div > p {
  font-family: "Playfair Display",Georgia,serif;
  font-weight: 600;
}
html[lang="zh-CN"] .bobby-ai-typography .is-geist h2,
html[lang="zh-CN"] .bobby-ai-typography .is-geist div > p {
  font-family: "Geist","Avenir Next",Arial,sans-serif;
}

/* Bobby's Playfair-led display headlines use a bold Song typeface in Chinese. */
html[lang="zh-CN"] .bobby-ai-features > .bobby-ai-content-canvas > h2,
html[lang="zh-CN"] .bobby-ai-moodboard header > h2,
html[lang="zh-CN"] .bobby-design-heading > h2,
html[lang="zh-CN"] .bobby-welcome-copy > h2,
html[lang="zh-CN"] .bobby-story-copy h2 em,
html[lang="zh-CN"] .bobby-finale-copy > h2 {
  font-family: "Songti SC","STSong","SimSun",serif;
  font-weight: 700;
  font-style: normal;
}
html[lang="zh-CN"] .bobby-ai-features .bobby-latin-display {
  font-family: "Playfair Display",Georgia,serif;
  font-weight: 600;
}
.bobby-ai-colors .bobby-section-pill { width: 264px; margin-bottom: 60px; justify-content: center; }.bobby-color-hero { display: flex; width: 1040px; height: 538px; justify-content: space-between; align-items: flex-start; }.bobby-color-hero figure { margin: 0; }.bobby-color-hero figure:first-child { width: 411px; }.bobby-color-hero figure:last-child { width: 455px; }.bobby-color-hero img { display: block; width: 100%; object-fit: cover; }.bobby-color-hero figure:first-child img { height: 416px; border-radius: 40px; }.bobby-color-hero figure:last-child img { height: 455px; }.bobby-color-hero figcaption { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; font-size: clamp(14px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; }.bobby-color-hero figcaption b { font-size: clamp(16px,1.389vw,20px); font-weight: 600; }.balance-caption { flex-direction: row !important; justify-content: center; gap: 82px !important; }.balance-caption span { display: flex; width: 73px; flex-direction: column; gap: 8px; }.balance-caption b { font-size: clamp(16px,1.389vw,20px); }
.bobby-neutral { width: 1040px; margin-top: 60px; }.bobby-neutral h2 { margin: 0 0 32px; font-size: clamp(24px,2.222vw,32px); line-height: 1; font-weight: 300; letter-spacing: .02em; }.neutral-bars,.neutral-names { display: grid; grid-template-columns: 148.445px 143.624px 143.972px 143.862px 143.652px 144.11px 143.999px; justify-content: space-between; }.neutral-bars { height: 28px; }.neutral-bars i { background: var(--c); border-right: 3px solid #000; }.neutral-bars i:first-child { border-radius: 14px 0 0 14px; }.neutral-bars i:last-child { border: 1px solid #434343; border-radius: 0 14px 14px 0; }.neutral-names { margin-top: 20px; }.neutral-names > span { width: 123px; font-size: clamp(14px,1.25vw,18px); line-height: 1.5; font-weight: 600; letter-spacing: .02em; }.neutral-names small { display: block; margin-top: 7px; color: #969696; font-size: clamp(12px,.972vw,14px); line-height: 1.5; font-weight: 400; }
.bobby-status { width: 1040px; height: 264.188px; margin-top: 60px; padding-top: 0; }.bobby-status > div { display: grid; grid-template-columns: repeat(3,332.156px); justify-content: space-between; }.bobby-status figure { margin: 0; }.bobby-status figcaption { display: flex; height: 65.812px; align-items: flex-start; justify-content: space-between; padding: 0 19px; font-size: clamp(14px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; }.bobby-status figcaption > span { display: flex; width: 123px; flex-direction: column; }.bobby-status figcaption > span:last-child { align-items: flex-end; text-align: right; }.bobby-status figcaption b { font-weight: 600; }.bobby-status figcaption small { font-size: clamp(12px,.972vw,14px); font-weight: 400; }.bobby-status i { display: block; width: 332.156px; height: 134.377px; border-radius: 28px; }.bobby-status .positive { background: linear-gradient(to bottom,#20c76a 0%,#000 100%) left/50% 100% no-repeat,linear-gradient(to bottom,#e5f8ed 0%,#000 100%) right/50% 100% no-repeat; }.bobby-status .negative { background: linear-gradient(to bottom,#e9252b 0%,#000 100%) left/50% 100% no-repeat,linear-gradient(to bottom,#fdebec 0%,#000 100%) right/50% 100% no-repeat; }.bobby-status .alert { background: linear-gradient(to bottom,#f05033 0%,#000 100%) left/50% 100% no-repeat,linear-gradient(to bottom,#fff0ec 0%,#000 100%) right/50% 100% no-repeat; }

@keyframes crypto-etfs-figma-presence { from { opacity: 1; } to { opacity: 1; } }
@keyframes social-media-figma-presence { from { opacity: 1; } to { opacity: 1; } }

@keyframes astrology-strategy-figma-presence { from { opacity: 1; } to { opacity: 1; } }
.astrology-strategy-canvas > h2,
.astrology-strategy-visual { animation: astrology-strategy-figma-presence 2s linear infinite; }

@media (max-width: 1439px) {
  .rockflow-statement img { width: min(712px, 64vw); height: auto; }
  .rockflow-user-persona { height: calc(100vw * 1.092361); }
  .user-persona-canvas { width: 1440px; height: 1573px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-product-principles { height: calc(100vw * .799306); }
  .product-principles-canvas { width: 1440px; height: 1151px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-product-promo { height: calc(100vw * .442361); }
  .product-promo-canvas { width: 1440px; height: 637px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-design-system { height: calc(100vw * 1.086806); }
  .design-system-canvas { width: 1440px; height: 1565px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-color-modes { height: calc(100vw * .659722); }
  .color-modes-canvas { width: 1440px; height: 950px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-icon-sets { height: calc(100vw * .399306); }
  .icon-sets-canvas { width: 1440px; height: 575px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-illustration-system { height: calc(100vw * 1.0875); }
  .illustration-system-canvas { width: 1440px; height: 1566px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-asset-system { height: calc(100vw * .614583); }
  .asset-system-canvas { width: 1440px; height: 885px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-onboarding { height: calc(100vw * .820833); }
  .onboarding-canvas { width: 1440px; height: 1182px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-exploring { height: calc(100vw * .601389); }
  .exploring-canvas { width: 1440px; height: 866px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-stocks-trading { height: calc(100vw * 1.142361); }
  .stocks-trading-canvas { width: 1440px; height: 1645px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-copy-trading { height: calc(100vw * .827083); }
  .copy-trading-canvas { width: 1440px; height: 1191px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-ai-strategy { height: calc(100vw * .688889); }
  .ai-strategy-canvas { width: 1440px; height: 992px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-options-trading { height: calc(100vw * .881944); }
  .options-trading-canvas { width: 1440px; height: 1270px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-asset-profile { height: calc(100vw * .881944); }
  .asset-profile-canvas { width: 1440px; height: 1270px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-astrology-strategy { height: calc(100vw * .684028); }
  .astrology-strategy-canvas { width: 1440px; height: 985px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-crypto-etfs { height: calc(100vw * .747917); }
  .crypto-etfs-canvas { width: 1440px; height: 1077px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .rockflow-social-media { height: calc(100vw * .709028); }
  .social-media-canvas { width: 1440px; height: 1021px; margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .bobby-ai-features { height: calc(100vw * .977778); }
  .bobby-ai-moodboard { height: calc(100vw * .95); }
  .bobby-ai-content-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .bobby-ai-design-system { height: calc(100vw * 1.130556); }
  .bobby-ai-typography { height: calc(100vw * .814583); }
  .bobby-ai-colors { height: calc(100vw * 1.00625); }
  .bobby-design-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
}

/* b-07 frame alignment refinements */
.bobby-color-hero figure { display: flex; height: 538px; flex-direction: column; justify-content: space-between; }
.bobby-color-hero figcaption { margin-top: 0; }
.neutral-names > span { display: flex; height: 93px; flex-direction: column; }
.neutral-names > span small { margin-top: auto; }
.bobby-status figure { position: relative; }
.bobby-status figure::before,
.bobby-status figure::after { content: ""; position: absolute; top: 5px; width: 6px; height: 36px; }
.bobby-status figure::before { left: 0; }
.bobby-status figure::after { right: 0; }
.bobby-status figure:nth-child(1)::before { background: #19a055; }
.bobby-status figure:nth-child(1)::after { background: #e5f8ed; }
.bobby-status figure:nth-child(2)::before { background: #e9252b; }
.bobby-status figure:nth-child(2)::after { background: #fdebec; }
.bobby-status figure:nth-child(3)::before { background: #f05033; }
.bobby-status figure:nth-child(3)::after { background: #fff0ec; }
.bobby-ai-illustrations { width: 100%; height: 1845px; overflow: hidden; background: #000; color: #fff; font-family: "Geist",Arial,sans-serif; }
.bobby-illustrations-canvas { width: 1440px; height: 1845px; margin: 0 auto; padding: 100px 200px; }
.bobby-ai-illustrations .bobby-section-pill { width: 247px; justify-content: center; }
.bobby-illustrations-content { display: flex; width: 1040px; flex-direction: column; gap: 100px; margin-top: 60px; }
.bobby-illustrations-overview { display: flex; flex-direction: column; gap: 60px; }
.bobby-illustrations-stage { position: relative; width: 1040px; height: 824px; overflow: hidden; background: #000; perspective: 1200px; }
.bobby-illustrations-phone { position: absolute; inset: 0; display: block; width: 1040px; height: 824px; object-fit: cover; opacity: 0; transition: opacity .75s ease; }
.bobby-illustration-tiles { position: absolute; left: 61.83%; top: 0; display: grid; grid-template-columns: repeat(2,34.442%); grid-auto-rows: 27.063%; gap: 3.641% 8.806%; width: 49.135%; height: 100%; }
.bobby-illustration-tiles img { display: block; width: 100%; height: 100%; border-radius: 25px; object-fit: cover; opacity: 0; transform: perspective(900px) rotateY(-88deg) scale(.94); transform-origin: left center; backface-visibility: hidden; transition: opacity .36s ease,transform 1.36s cubic-bezier(.2,.75,.2,1); }
.bobby-illustrations-stage.is-visible .bobby-illustrations-phone { opacity: 1; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img { opacity: 1; transform: perspective(900px) rotateY(0) scale(1); }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(1) { transition-delay: .72s; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(2) { transition-delay: 1.04s; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(3) { transition-delay: 1.36s; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(4) { transition-delay: 1.68s; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(5) { transition-delay: 2s; }
.bobby-illustrations-stage.is-visible .bobby-illustration-tiles img:nth-child(6) { transition-delay: 2.32s; }
.bobby-illustrations-copy { width: 883px; font-size: clamp(15px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; overflow-wrap: anywhere; }
.bobby-illustrations-copy p { margin: 0 0 10px; }
.bobby-illustrations-copy p:last-child { margin-bottom: 0; }
.bobby-illustration-cards { position: relative; width: 1040px; height: 457px; overflow: visible; perspective: 1400px; transform: scale(.8); transform-origin: center center; }
.bobby-illustration-cards img { position: absolute; top: 5.033%; display: block; width: 33.654%; height: 90.372%; border-radius: 24px; object-fit: cover; opacity: 0; backface-visibility: hidden; transform-origin: center bottom; transition: opacity .4s ease,transform 1.56s cubic-bezier(.2,.75,.2,1); }
.bobby-illustration-cards img:nth-child(1) { left: 5.865%; --card-angle: -14deg; transform: rotateZ(var(--card-angle)) rotateY(-92deg) scale(.94); }
.bobby-illustration-cards img:nth-child(2) { left: 33.173%; top: 0; --card-angle: 0deg; transform: rotateZ(var(--card-angle)) rotateY(-92deg) scale(.94); }
.bobby-illustration-cards img:nth-child(3) { left: 60.481%; --card-angle: 14deg; transform: rotateZ(var(--card-angle)) rotateY(-92deg) scale(.94); }
.bobby-illustration-cards img:nth-child(2),
.bobby-illustration-cards img:nth-child(3) { filter: drop-shadow(-34px 32px 30px rgba(0,0,0,.78)) drop-shadow(-12px 12px 14px rgba(0,0,0,.56)); }
.bobby-illustration-cards.is-visible img { opacity: 1; transform: rotateZ(var(--card-angle)) rotateY(0) scale(1); }
.bobby-illustration-cards.is-visible img:nth-child(1) { transition-delay: 0s; }
.bobby-illustration-cards.is-visible img:nth-child(2) { transition-delay: .36s; }
.bobby-illustration-cards.is-visible img:nth-child(3) { transition-delay: .72s; }

.bobby-ai-welcome { position: relative; width: 100%; height: 1024px; overflow: hidden; background: #000; }
.bobby-welcome-canvas { position: relative; width: 1440px; height: 1024px; margin: 0 auto; overflow: hidden; }
.bobby-welcome-background { position: absolute; inset: 0; width: 1440px; height: 1024px; object-fit: cover; }
.bobby-welcome-phone { position: absolute; left: 509px; top: 81px; width: 423px; height: 861px; }
.bobby-welcome-screen { position: absolute; z-index: 1; left: 27px; top: 29px; width: 370px; height: 804px; overflow: hidden; border-radius: 52px; background: #000; }
.bobby-welcome-demo { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.bobby-welcome-video,.bobby-welcome-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bobby-welcome-video { z-index: 1; opacity: 1; transition: opacity .5s ease,transform .6s ease; }
.bobby-welcome-art { z-index: 0; opacity: 0; transition: opacity .16s linear, transform .55s cubic-bezier(.2,.75,.25,1), filter .3s linear; }
.bobby-welcome-phone.video-finished .bobby-welcome-video { opacity: 0; transform: scale(1.035); }
.bobby-welcome-phone.video-finished .bobby-welcome-art { opacity: 1; }
.bobby-welcome-phone.is-switching .bobby-welcome-art { opacity: .18; transform: scale(1.035) translateX(5px); filter: saturate(1.35) contrast(1.18) hue-rotate(18deg); }
.bobby-welcome-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.98) 0%,rgba(0,0,0,.72) 25%,rgba(0,0,0,.22) 56%,transparent 82%); pointer-events: none; }
.bobby-welcome-copy { position: absolute; z-index: 2; left: 31px; right: 31px; bottom: 42px; color: #fff; }
.bobby-welcome-copy h2 { margin: 0 0 16px; font-family: "Playfair Display",Georgia,serif; font-size: clamp(34px,3.542vw,51px); line-height: 1; letter-spacing: 0; font-weight: 600; text-shadow: 0 12px 30px rgba(0,0,0,.45); overflow-wrap: anywhere; }
.bobby-welcome-copy h2 span { display: block; margin-top: 8px; font-size: clamp(28px,2.917vw,42px); line-height: 1.02; }
.bobby-welcome-copy p { width: 260px; max-width: 100%; margin: 0 0 28px; color: rgba(255,255,255,.76); font-family: "Geist",Arial,sans-serif; font-size: clamp(13px,.972vw,14px); line-height: 1.45; letter-spacing: .02em; font-weight: 300; overflow-wrap: anywhere; }
.bobby-welcome-button { width: 100%; height: 58px; border: 1px solid rgba(255,255,255,.36); border-radius: 30px; background: linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09) 48%,rgba(255,255,255,.17)); box-shadow: inset 0 1px rgba(255,255,255,.5),0 12px 28px rgba(0,0,0,.28); color: #fff; font-family: "Geist",Arial,sans-serif; font-size: clamp(14px,1.111vw,16px); font-weight: 600; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); cursor: pointer; transition: transform .2s ease,background .2s ease; }
.bobby-welcome-button:hover { background: linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.12) 48%,rgba(255,255,255,.22)); }
.bobby-welcome-button:active { transform: scale(.975); }
.bobby-welcome-device { position: absolute; z-index: 3; inset: 0; width: 423px; height: 861px; object-fit: fill; pointer-events: none; }

.bobby-story-frame { width: 100%; overflow: hidden; background: #000; color: #fff; }
.bobby-story-b10 { height: 1313px; }
.bobby-story-b11,.bobby-story-b12,.bobby-story-b13,.bobby-story-b14 { height: 937px; }
.bobby-story-canvas { position: relative; width: 1440px; height: 100%; margin: 0 auto; overflow: hidden; }
.bobby-story-canvas > img { position: absolute; inset: 0; display: block; width: 1440px; height: 100%; object-fit: cover; }
.bobby-story-copy { position: absolute; z-index: 2; font-family: "Geist",Arial,sans-serif; }
.bobby-story-copy h2 { margin: 0; color: #fff; font-family: "Geist",Arial,sans-serif; font-size: clamp(28px,2.917vw,42px); line-height: 1.4; letter-spacing: .02em; font-weight: 400; text-transform: capitalize; white-space: normal; overflow-wrap: anywhere; }
.bobby-story-copy h2 em { font-family: "Playfair Display",Georgia,serif; font-weight: 600; font-style: italic; }
.bobby-story-title-line { display: block; white-space: nowrap; }
.bobby-story-copy p { margin: 20px 0 0; color: #fff; font-family: "Geist",Arial,sans-serif; font-size: clamp(15px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; overflow-wrap: anywhere; }
.bobby-story-b10 .bobby-story-copy { left: 50%; top: 94px; width: 397px; transform: translateX(-50%); text-align: center; }
.bobby-story-b10 .bobby-story-copy h2 { font-size: clamp(26px,2.917vw,42px); }
.bobby-story-b10 .bobby-story-copy p { width: 377px; margin: 20px auto 0; line-height: 1.5; font-weight: 300; }
.bobby-story-b11 .bobby-story-copy { left: 200px; top: 668px; width: 383px; }
.bobby-story-b11 .bobby-story-copy p { width: 336px; }
.bobby-story-b12 .bobby-story-copy { left: 757px; top: 686px; width: 421px; }
.bobby-story-b12 .bobby-story-copy p { width: 421px; }
.bobby-story-b13 .bobby-story-copy { left: 200px; top: 157px; width: 453px; }
.bobby-story-b13 .bobby-story-copy p { width: 453px; }
.bobby-finale-copy { position: absolute; z-index: 2; left: 50%; top: 610px; width: 1419px; transform: translateX(-50%); color: #fff; text-align: center; }
.bobby-finale-copy h2 { margin: 0; font-family: "Playfair Display",Georgia,serif; font-size: clamp(54px,7.083vw,102px); line-height: 1.2; letter-spacing: .02em; font-weight: 600; text-transform: capitalize; overflow-wrap: anywhere; }
.bobby-finale-copy p { width: 583px; max-width: 100%; margin: 22px auto 0; font-family: "Geist",Arial,sans-serif; font-size: clamp(15px,1.25vw,18px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; overflow-wrap: anywhere; }
html[lang="zh-CN"] .bobby-finale-copy p {
  width: max-content !important;
  max-width: none !important;
  font-size: clamp(10px,1.15vw,18px);
  white-space: nowrap !important;
  overflow-wrap: normal;
}
@media (max-width: 1439px) and (min-width: 821px) {
  .bobby-ai-illustrations { height: calc(100vw * 1.28125); }
  .bobby-illustrations-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .bobby-ai-welcome { height: calc(100vw * .711111); }
  .bobby-welcome-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
  .bobby-story-b10 { height: calc(100vw * .911806); }
  .bobby-story-b11,.bobby-story-b12,.bobby-story-b13,.bobby-story-b14 { height: calc(100vw * .650694); }
  .bobby-story-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
}
@media (max-width: 820px) {
  .bobby-ai-illustrations { height: auto; overflow: visible; }
  .bobby-illustrations-canvas { width: 100%; height: auto; padding: 86px 24px; }
  .bobby-illustrations-content { width: 100%; gap: 72px; margin-top: 60px; }
  .bobby-illustrations-overview { gap: 40px; }
  .bobby-illustrations-stage { width: 100%; height: auto; aspect-ratio: 1040 / 824; }
  .bobby-illustrations-phone { width: 100%; height: 100%; }
  .bobby-illustration-tiles img { border-radius: clamp(8px,2.4vw,25px); }
  .bobby-illustration-cards { width: 100%; height: auto; aspect-ratio: 1040 / 457; }
  .bobby-illustration-cards img { border-radius: clamp(8px,2.3vw,24px); }
  .bobby-illustrations-copy { width: 100%; font-size: clamp(15px,4vw,18px); }
  .bobby-ai-welcome { height: min(1024px, 142.22vw); min-height: 600px; }
  .bobby-welcome-canvas { left: 50%; width: 1440px; margin: 0; transform: translateX(-50%) scale(max(.7, calc(100vw / 1440))); transform-origin: center top; }
  .bobby-story-b10 { height: calc(100vw * .911806); }
  .bobby-story-b11,.bobby-story-b12,.bobby-story-b13,.bobby-story-b14 { height: calc(100vw * .650694); }
  .bobby-story-canvas { margin: 0; transform: scale(var(--rockflow-artboard-scale)); transform-origin: left top; }
}

/* Keep the copy over the artwork on smaller screens, but reserve enough
   height and lift it clear of the frame edge so every line remains visible. */
@media (max-width: 1439px) {
  .bobby-story-b11,
  .bobby-story-b12,
  .bobby-story-b13,
  .bobby-story-b14 {
    height: calc(100vw * .650694);
    min-height: 0;
    overflow: hidden;
  }

  .bobby-story-b11 .bobby-story-canvas,
  .bobby-story-b12 .bobby-story-canvas,
  .bobby-story-b13 .bobby-story-canvas,
  .bobby-story-b14 .bobby-story-canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    transform: none;
  }

  .bobby-story-b11 .bobby-story-canvas > img,
  .bobby-story-b12 .bobby-story-canvas > img,
  .bobby-story-b13 .bobby-story-canvas > img,
  .bobby-story-b14 .bobby-story-canvas > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bobby-story-b11 .bobby-story-copy,
  .bobby-story-b12 .bobby-story-copy,
  .bobby-story-b13 .bobby-story-copy {
    position: absolute;
    top: auto;
    bottom: clamp(56px, 6vw, 92px);
    padding: 0;
  }

  .bobby-story-b11 .bobby-story-copy {
    left: clamp(40px, 13.889vw, 200px);
    width: min(31vw, 430px);
  }

  .bobby-story-b12 .bobby-story-copy {
    left: 52.57vw;
    width: min(34vw, 470px);
  }

  .bobby-story-b13 .bobby-story-copy {
    left: clamp(40px, 13.889vw, 200px);
    width: min(34vw, 470px);
    transform: translateY(-300px);
  }

  .bobby-story-b11 .bobby-story-copy h2,
  .bobby-story-b12 .bobby-story-copy h2,
  .bobby-story-b13 .bobby-story-copy h2 {
    font-size: clamp(30px, 2.917vw, 42px);
    line-height: 1.18;
  }

  .bobby-story-b11 .bobby-story-copy h2 {
    font-size: clamp(28px, 3vw, 42px);
  }

  .bobby-story-b11 .bobby-story-copy p,
  .bobby-story-b12 .bobby-story-copy p,
  .bobby-story-b13 .bobby-story-copy p {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.5;
  }

  .bobby-story-b14 .bobby-finale-copy {
    left: 50%;
    top: auto;
    bottom: clamp(48px, 5vw, 82px);
    width: calc(100% - clamp(48px, 10vw, 144px));
    transform: translateX(-50%);
  }

  .bobby-story-b14 .bobby-finale-copy h2 {
    font-size: clamp(48px, 7.083vw, 102px);
    line-height: 1.08;
  }

  .bobby-story-b14 .bobby-finale-copy p {
    width: min(100%, 583px);
    font-size: clamp(15px, 1.25vw, 18px);
  }
}

@media (max-width: 900px) {
  .bobby-story-b11,
  .bobby-story-b12,
  .bobby-story-b13,
  .bobby-story-b14 {
    height: clamp(540px, 118vw, 680px);
    min-height: 540px;
  }

  .bobby-story-b11 .bobby-story-canvas::after,
  .bobby-story-b12 .bobby-story-canvas::after,
  .bobby-story-b13 .bobby-story-canvas::after,
  .bobby-story-b14 .bobby-story-canvas::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 36% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.48) 38%, rgba(0,0,0,.92));
    pointer-events: none;
  }

  .bobby-story-b11 .bobby-story-canvas > img { object-position: 61% center; }
  .bobby-story-b12 .bobby-story-canvas > img { object-position: 42% center; }
  .bobby-story-b13 .bobby-story-canvas > img { object-position: 68% center; }
  .bobby-story-b14 .bobby-story-canvas > img { object-position: center; }

  .bobby-story-b11 .bobby-story-copy,
  .bobby-story-b12 .bobby-story-copy,
  .bobby-story-b13 .bobby-story-copy {
    left: clamp(24px, 7vw, 48px);
    right: clamp(24px, 7vw, 48px);
    bottom: clamp(64px, 11vw, 92px);
    width: auto;
    max-width: 520px;
  }

  .bobby-story-b11 .bobby-story-copy h2,
  .bobby-story-b12 .bobby-story-copy h2,
  .bobby-story-b13 .bobby-story-copy h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  .bobby-story-b11 .bobby-story-copy h2 {
    font-size: clamp(28px, 7.5vw, 44px);
  }

  .bobby-story-b11 .bobby-story-copy p,
  .bobby-story-b12 .bobby-story-copy p,
  .bobby-story-b13 .bobby-story-copy p {
    max-width: 430px;
    font-size: clamp(16px, 4.2vw, 19px);
  }

  .bobby-story-b14 .bobby-finale-copy {
    bottom: clamp(64px, 11vw, 92px);
    width: calc(100% - clamp(48px, 14vw, 96px));
  }

  .bobby-story-b14 .bobby-finale-copy h2 {
    font-size: clamp(42px, 11vw, 64px);
    line-height: 1.05;
  }

  .bobby-story-b14 .bobby-finale-copy p {
    margin-top: 16px;
    font-size: clamp(16px, 4.2vw, 19px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .astrology-strategy-canvas > h2,
  .astrology-strategy-visual,
  .crypto-etfs-canvas > h2,
  .social-media-canvas > h2 { animation: none; }
  .rockflow-product-gallery { --gallery-reveal: 0%; --gallery-shift: 0px; clip-path: none; transform: none; }
  .bobby-welcome-video,.bobby-welcome-art { transition: none; }
  .bobby-illustrations-phone,
  .bobby-illustration-tiles img,
  .bobby-illustration-cards img { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1200px) {
  .project-intro { grid-template-columns: 190px minmax(0, 1fr); gap: 60px; }
  .project-narrative { width: auto; }
  .rockflow-statement h2 { font-size: clamp(38px, 3.6vw, 52px); }
}
@media (max-width: 820px) {
  .rockflow-hero { height: 100svh; min-height: 0; }
  .rockflow-hero-image { object-position: 56% center; }
  .rockflow-hero-copy { left: 24px; right: 24px; bottom: 48px; width: auto; }
  .rockflow-tags { font-size: 15px; }
  .rockflow-hero h1 { font-size: clamp(70px, 17vw, 108px); }
  .rockflow-summary { max-width: 620px; font-size: 18px; }
  .project-intro { display: block; min-height: 0; margin-top: 54px; padding: 70px 24px 50px; }
  .project-facts { position: static; }
  .project-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; margin-bottom: 90px; }
  .project-narrative p, .project-narrative li { font-size: 16px; }
  .rockflow-statement { height: auto; min-height: 420px; margin-top: 90px; padding: 35px 24px 90px; }
  .rockflow-statement h2 { font-size: clamp(31px, 7vw, 48px); }
  .rockflow-statement h2 br { display: none; }
  .rockflow-statement p { left: 24px; right: 24px; bottom: 28px; font-size: 20px; }
  .design-strategy { min-height: 0; margin-top: 55px; padding: 70px 24px 110px; }
  .design-strategy > h2 { font-size: clamp(48px, 10vw, 72px); }
  .strategy-tabs { overflow-x: auto; scrollbar-width: none; }
  .strategy-tabs::-webkit-scrollbar { display: none; }
  .strategy-tabs button { flex: 0 0 190px; }
  .strategy-board { border-radius: 12px; }
  .product-experience-panel { height: 360px; }
  .product-experience-bg { width: 150%; max-width: none; left: -25%; }
  .product-experience-panel h2 { font-size: clamp(40px, 10vw, 80px); line-height: 1; }
  .product-local-nav { display: none; }
  .bobby-ai-intro { height: auto; min-height: 560px; padding: 104px 24px 80px; }
  .bobby-ai-meta { left: 24px; right: 24px; top: 28px; grid-template-columns: 1fr 1fr; gap: 28px; }
  .bobby-ai-meta > div:last-child { justify-self: start; width: auto; }
  .bobby-ai-intro > p { width: 100%; font-size: clamp(27px, 5.5vw, 42px); }
  .bobby-ai-features, .bobby-ai-moodboard { height: auto; overflow: visible; }
  .bobby-ai-content-canvas { width: 100%; height: auto; padding: 86px 24px; transform: none; }
  .bobby-ai-features h2, .bobby-ai-moodboard h2 { font-size: clamp(42px, 10vw, 60px); }
  .bobby-feature-grid { grid-template-columns: 1fr; gap: 72px; margin-top: 90px; }
  .bobby-feature-card { min-height: 0; }
  .bobby-feature-card h3 { font-size: clamp(24px,6vw,28px); }
  .bobby-feature-card h4 { font-size: clamp(17px,4.5vw,18px); }
  .bobby-feature-card p { font-size: clamp(15px,4.2vw,17px); }
  .bobby-ai-moodboard header { width: 100%; }
  .bobby-ai-moodboard header p { font-size: clamp(28px, 5.5vw, 42px); }
  .bobby-moodboard-stage { width: 100%; height: auto; margin-top: 72px; }
  .bobby-moodboard-stage > img { width: 100%; height: auto; }
  .bobby-ai-design-system,.bobby-ai-typography,.bobby-ai-colors { height: auto; overflow: visible; }
  .bobby-design-canvas { width: 100%; height: auto; padding: 86px 24px; transform: none; }
  .bobby-ai-design-system .bobby-design-canvas { padding-top: 86px; }
  .bobby-design-heading,.bobby-design-heading p { width: 100%; }.bobby-design-heading h2 { font-size: clamp(42px,10vw,60px); }.bobby-design-heading p { font-size: clamp(28px,5.5vw,42px); }
  .bobby-logo-block { width: 100%; height: auto; margin-top: 90px; padding-top: 92px; }.bobby-logo-block > img { position: static; width: 100%; height: auto; }.bobby-logo-block > p { position: static; width: 100%; margin-top: 40px; }.bobby-logo-guide { width: 100%; height: auto; margin: 60px 0 0; }
  .bobby-section-pill { min-height: 52px; padding: 8px 20px; font-size: clamp(17px,4.8vw,20px); }
  .bobby-type-row { grid-template-columns: 1fr; gap: 40px; }.bobby-type-row h2 { font-size: clamp(52px,12vw,90px); }.bobby-type-row div > p { font-size: clamp(20px,4vw,32px); white-space: normal; }.bobby-type-row aside { width: min(100%,420px); }.is-geist { margin-top: 120px; }.is-geist::before { top: -60px; width: 70%; }.bobby-type-weights { margin-top: 60px; text-align: left; }
  .bobby-color-hero { flex-direction: column; gap: 72px; }.bobby-color-hero figure:first-child,.bobby-color-hero figure:last-child { width: min(100%,455px); }.bobby-neutral { overflow-x: auto; }.neutral-bars,.neutral-names { width: 900px; }.bobby-status > div { grid-template-columns: 1fr; gap: 36px; }
  .bobby-moodboard-keyword { width: 15.38%; height: auto; font-size: clamp(10px, 2.3vw, 24px); }
  .keyword-intelligent { left: 46.92%; top: 12.64%; }
  .keyword-personal { left: 85.67%; top: 44.57%; }
  .keyword-inspiring { left: 36.06%; top: 76.37%; }
  .rockflow-app-intro { height: auto; min-height: 560px; padding: 90px 24px; }
  .app-intro-meta { left: 24px; right: 24px; top: 28px; gap: 28px; }
  .app-intro-meta > div:last-child { justify-self: start; width: auto; }
  .app-intro-meta strong { white-space: normal; }
  .rockflow-app-intro p { width: 100%; font-size: clamp(28px, 5.5vw, 42px); }
  .app-inline-icon { width: 38px; height: 38px; }
  .app-hand-icon .hand-symbol { inset: 6px 10px; width: 18px; height: 26px; }
  .rockflow-problem-solution { height: auto; min-height: 1320px; padding: 80px 24px; }
  .problem-solution-header { display: block; padding: 0; }
  .problem-solution-header h2 { width: auto; font-size: clamp(50px, 11vw, 80px); }
  .problem-solution-header h2 b { padding-left: 0; }
  .problem-solution-header > p { width: min(100%, 498px); margin-top: 32px; }
  .problem-solution-stage { width: 100%; height: 980px; margin-top: 60px; }
  .experience-orbit { left: 50%; top: 220px; width: min(82vw, 560px); height: min(82vw, 560px); transform: translateX(-50%); }
  .experience-card { width: min(82vw, 507px); border-radius: 24px; }
  .problem-card { left: auto; right: 0; top: 60px; padding: 42px 30px; transform: rotate(8deg); }
  .solution-card { left: 0; top: 570px; padding: 30px; }
  .experience-card h3 { font-size: 44px; line-height: 1; }
  .experience-card-copy { width: 100%; }
  .experience-card-copy strong, .experience-card-copy p { font-size: 18px; }
}
@media (max-width: 520px) {
  .rockflow-hero-copy { left: 20px; right: 20px; }
  .rockflow-summary br { display: none; }
  .project-intro { padding-left: 20px; padding-right: 20px; }
  .project-facts dd { font-size: 15px; white-space: normal; }
  .project-narrative h2 { font-size: 32px; }
  .design-strategy { padding-left: 20px; padding-right: 20px; }
  .bobby-ai-intro { padding-left: 20px; padding-right: 20px; }
  .bobby-ai-meta { left: 20px; right: 20px; }
  .bobby-ai-content-canvas { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rockflow-statement { --statement-reveal: 0%; --statement-shift: 0px; clip-path: none; transform: none; }
  .product-experience-panel { --product-reveal: 0%; --product-shift: 0px; clip-path: none; transform: none; }
}

/* RockFlow website and web platform — Figma frames w-01 through w-10 */
.web-platform-intro,.web-long-page,.web-feature,.web-trading-platform,.web-bobby-desktop,.web-screen-stories { width: 100%; background: #000; color: #fff; font-family: "Satoshi",Arial,sans-serif; }
.web-platform-hero { position: relative; width: min(100%,1440px); margin: 0 auto; aspect-ratio: 1440/868; overflow: hidden; }
.web-platform-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.web-platform-overview { position: relative; display: flex; width: min(100%,1440px); height: 632px; align-items: center; justify-content: center; margin: 0 auto; padding: 112px 9.17% 60px; }
.web-platform-meta { position: absolute; left: 18.33%; right: 18.33%; top: 28px; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.web-platform-meta > div { display: flex; flex-direction: column; gap: 7px; }
.web-platform-meta > div:last-child { justify-self: end; width: 305px; }
.web-platform-meta dt,.web-platform-meta dd { margin: 0; color: #fff; font-size: clamp(12px,1.111vw,16px); line-height: 1.2; letter-spacing: .02em; font-weight: 400; }
.web-platform-overview > p { width: min(82.57vw,1189px); margin: 0; color: #5b588a; font-family: "Satoshi",Arial,sans-serif; font-size: clamp(26px,2.917vw,42px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; text-align: center; }
.web-platform-overview > p span { color: #fff; font-weight: 400; }
.web-long-page { position: relative; display: flex; flex-direction: column; gap: 125px; align-items: center; overflow: hidden; padding: 100px 0; }
.web-section-heading { display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; text-align: center; }
.web-section-heading h2 { margin: 0; color: #fff; font-size: clamp(38px,5vw,72px); line-height: 1; letter-spacing: .02em; font-weight: 700; text-transform: uppercase; }
.web-section-heading p { width: min(80vw,710px); margin: 0; color: #fff; font-size: clamp(15px,1.389vw,20px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; }
.web-long-page-canvas { position: relative; width: min(49.72vw,716px); margin: 0 auto; }
.web-long-page-canvas > img { position: relative; z-index: 2; display: block; width: 100%; height: auto; border: .75px solid #787878; border-radius: 30px; }
.web-long-glow { position: absolute; z-index: 1; left: 50%; width: min(1200px,84vw); height: 560px; border-radius: 50%; background: radial-gradient(ellipse,rgba(123,35,255,.68) 0%,rgba(104,20,235,.28) 35%,rgba(91,9,207,0) 72%); filter: blur(42px); transform: translate(-50%,-50%); pointer-events: none; }
.web-long-glow.glow-one { top: 8.75%; }.web-long-glow.glow-two { top: 33.68%; }.web-long-glow.glow-three { top: 49.81%; }.web-long-glow.glow-four { top: 69.37%; }
.web-feature { height: min(48.82vw,704px); overflow: hidden; }
.web-feature-canvas { display: grid; grid-template-columns: min(58.89vw,848px) min(21.67vw,312px); gap: min(2.778vw,40px); width: min(100%,1440px); height: 100%; align-items: center; margin: 0 auto; }
.web-feature-canvas > img { display: block; width: min(58.89vw,848px); height: min(48.82vw,703px); object-fit: cover; }
.web-feature-copy { width: min(21.67vw,312px); margin: 0; }
.web-feature-copy h2 { margin: 0 0 clamp(7px,.694vw,10px); color: #fff; font-family: "Satoshi",Arial,sans-serif; font-size: clamp(18px,1.528vw,22px); line-height: 1.364; letter-spacing: .02em; font-weight: 700; }
.web-feature-copy p { margin: 0; color: #fff; font-size: clamp(15px,1.25vw,18px); line-height: 1.667; letter-spacing: .02em; font-weight: 400; }
html[lang="zh-CN"] .web-feature-guide .web-feature-canvas { grid-template-columns: min(58.89vw,848px) min(24.306vw,350px); }
html[lang="zh-CN"] .web-feature-guide .web-feature-copy { width: min(24.306vw,350px); }
.web-feature-strategy { height: min(44.583vw,642px); }
.web-feature-strategy .web-feature-canvas { grid-template-columns: min(21.67vw,312px) min(59.375vw,855px); gap: min(2.778vw,40px); justify-content: end; }
.web-feature-strategy .web-feature-canvas > img { width: min(59.375vw,855px); height: min(44.583vw,642px); }
.web-banner { width: 100%; overflow: hidden; background: #000; }
.web-banner > img { display: block; width: min(100%,1440px); height: auto; margin: 0 auto; }
.web-trading-platform { padding: 100px 0; }
.web-trading-platform header { display: flex; flex-direction: column; gap: 40px; width: min(100% - 48px,1040px); margin: 0 auto 100px; text-align: center; }
.web-trading-platform h2 { margin: 0; color: #fff; font-size: clamp(38px,5vw,72px); line-height: 1.1; letter-spacing: .02em; font-weight: 700; text-transform: uppercase; }
.web-trading-platform header p { width: min(80vw,710px); max-width: 100%; margin: 0 auto; color: #fff; font-size: clamp(15px,1.389vw,20px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; }
.web-trading-gallery { display: grid; grid-template-columns: repeat(2,min(34.722vw,500px)); column-gap: min(2.778vw,40px); row-gap: min(6.944vw,100px); width: min(72.222vw,1040px); margin: 0 auto; align-items: start; }
.web-trading-gallery img { display: block; width: min(34.722vw,500px); height: auto; overflow: hidden; border: .75px solid #27223d; border-radius: clamp(10px,1.111vw,16px); box-shadow: 0 0 clamp(16px,1.667vw,24px) rgba(136,106,255,.3); }
.web-trading-gallery img:first-child { grid-column: 1/-1; justify-self: center; }
.web-bobby-desktop { padding-bottom: 144px; text-align: center; }
.web-bobby-desktop > img { display: block; width: min(100%,1440px); height: auto; margin: 0 auto; }
.web-bobby-desktop > p { width: min(79.72vw,1148px); margin: min(5.347vw,77px) auto 0; color: #969696; font-family: "Satoshi",Arial,sans-serif; font-size: clamp(26px,2.917vw,42px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; }
.web-bobby-desktop > p span { color: #fff; font-weight: 400; }
.web-screen-stories { padding: 132px 0 160px; }
.web-screen-stories figure { width: min(calc(100% - 48px),1040px); margin: 0 auto 128px; }
.web-screen-stories figure:last-child { margin-bottom: 0; }
.web-screen-stories img { display: block; width: 100%; height: auto; }
.web-screen-stories figcaption { width: min(80%,730px); margin: 0 auto; padding-top: 0; color: #fff; font-size: clamp(15px,1.389vw,20px); line-height: 1.5; letter-spacing: .02em; font-weight: 400; text-align: center; }
.web-screen-stories-w08 { padding-top: 0; }
.web-screen-stories-last { padding-bottom: 180px; }

@media (max-width: 900px) {
  .web-platform-hero h2 { left: 6%; top: 35%; width: 45%; font-size: clamp(34px,7.5vw,68px); }
  .web-platform-overview { height: auto; min-height: 560px; padding: 120px 24px 72px; }
  .web-platform-meta { left: 24px; right: 24px; }.web-platform-meta > div:last-child { width: auto; }
  .web-platform-overview > p { width: 100%; font-size: clamp(27px,5.5vw,42px); }
  .web-long-page { padding: 80px 0 110px; }.web-long-page-canvas { width: min(74vw,716px); }
  .web-feature { height: auto; }.web-feature-canvas,.web-feature-strategy .web-feature-canvas { display: flex; flex-direction: column; padding: 80px 24px 100px; }
  .web-feature-strategy .web-feature-copy { order: 2; }.web-feature-strategy img { order: 1; }
  .web-feature-canvas > img,.web-feature-strategy .web-feature-canvas > img { width: min(100%,680px); height: auto; }.web-feature-copy { width: min(100%,620px); margin-top: 52px; text-align: center; }
  .web-feature-copy h2 { font-size: clamp(18px,2.444vw,22px); }.web-feature-copy p { font-size: clamp(15px,2vw,18px); }
  .web-trading-platform { padding: 90px 24px 110px; }.web-trading-platform h2 { font-size: clamp(38px,8vw,60px); }
  .web-trading-gallery { grid-template-columns: 1fr; gap: 100px; width: min(100%,600px); }.web-trading-gallery img,.web-trading-gallery img:first-child { grid-column: auto; width: 100%; }
  .web-bobby-desktop { padding-bottom: 100px; }.web-bobby-desktop > p { width: calc(100% - 48px); margin-top: 72px; font-size: clamp(27px,5.5vw,42px); }
  .web-screen-stories { padding: 90px 0 110px; }.web-screen-stories-w08 { padding-top: 0; }.web-screen-stories figure { margin-bottom: 90px; }.web-screen-stories figcaption { width: 88%; margin-top: 0; font-size: clamp(15px,2vw,18px); }
}