@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/plus-jakarta-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --paper: #f8f7f2;
  --surface: #fbfaf6;
  --ink: #11110f;
  --soft: #77766f;
  --muted: #9b9a93;
  --line: rgba(17,17,15,.12);
  --line-soft: rgba(17,17,15,.07);
  --violet: #5536ff;
  --pink: #ec2b95;
  --orange: #ef6b24;
  --yellow: #f2bd1e;
  --green: #1bae91;
  --blue: #2889e3;
  color: var(--ink);
  background: var(--paper);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
::selection { background: rgba(85,54,255,.14); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 500; top: 10px; left: 10px; padding: 9px 13px; background: var(--ink); color: #fff; font-size: 12px; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.mobile-bar { display: none; }
.site-rail { position: fixed; z-index: 100; inset: 0 auto 0 80px; width: 160px; padding: 48px 0 44px; background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--violet); font-size: 14px; font-weight: 520; letter-spacing: -.02em; }
.brand img { width: 15px; height: 15px; object-fit: contain; }
.site-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; margin-top: 31px; font-size: 14px; letter-spacing: -.018em; }
.site-nav a { transition: color .18s ease; }
.site-nav a:hover,.site-nav a.is-active { color: var(--violet); }

.site-main { margin-left: 240px; }
.hero,.pool-section,.site-footer { width: min(726px,calc(100% - 32px)); margin: 0; }
.hero { padding: 48px 0 0; }
.hero-kicker { margin: 0 0 20px; color: var(--violet); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 790px; margin: 0; font-size: clamp(44px,5.1vw,68px); font-weight: 430; letter-spacing: -.06em; line-height: .98; }
.hero-copy { max-width: 520px; margin: 27px 0 0; color: var(--soft); font-size: 14px; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 15px; border: 1px solid var(--line); background: transparent; font-size: 10px; transition: border-color .18s ease,background .18s ease,color .18s ease; }
.button:hover { border-color: rgba(85,54,255,.42); color: var(--violet); }
.button-primary { border-color: var(--violet); background: var(--violet); color: #fff; }
.button-primary:hover { border-color: #3f23e8; background: #3f23e8; color: #fff; }
.button span,.section-link span,.destination-card p span { transition: transform .18s ease; }
.button:hover span,.section-link:hover span,.destination-card:hover p span { transform: translateX(3px); }

.product-stage { height: 520px; margin-top: 84px; padding: 39px 38px 27px; border: 1px solid var(--line); background-color: #efeee9; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(17,17,15,.025) 0 1px,transparent 1px 4px); }
.app-window { position: relative; height: 100%; overflow: hidden; border: 1px solid rgba(17,17,15,.17); border-radius: 12px; background: #fff; box-shadow: 0 18px 42px rgba(35,31,25,.11); }
.demo-progress { position: absolute; z-index: 20; top: 39px; left: 0; width: 100%; height: 1px; background: var(--violet); opacity: .65; pointer-events: none; transform: scaleX(0); transform-origin: left center; }
.demo-progress.is-running { animation: demo-progress var(--demo-duration,5s) linear forwards; }
@keyframes demo-progress { to { transform: scaleX(1); } }
.window-bar { position: relative; height: 40px; display: grid; place-items: center; border-bottom: 1px solid #e7e4e9; color: #97929c; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 7px; }
.window-bar small { position: absolute; right: 15px; color: #aaa6ad; font-size: 6px; font-weight: 450; text-transform: uppercase; }
.traffic-lights { position: absolute; left: 14px; display: flex; gap: 5px; }
.traffic-lights i { width: 8px; height: 8px; border-radius: 50%; }
.traffic-lights i:nth-child(1) { background: #ff5f57; }.traffic-lights i:nth-child(2) { background: #febc2e; }.traffic-lights i:nth-child(3) { background: #28c840; }
.real-app-grid { height: calc(100% - 40px); display: grid; grid-template-columns: minmax(0,0fr) minmax(0,1fr); background: #fff; transition: grid-template-columns 1.15s cubic-bezier(.65,0,.2,1); }
.app-window[data-mode="browser"] .real-app-grid,.app-window[data-mode="work"] .real-app-grid { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); }
.real-workspace { position: relative; order: 2; min-width: 0; overflow: hidden; background: #fff; }
.demo-back { position: absolute; z-index: 5; top: 12px; right: 14px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #e7e4e9; border-radius: 50%; color: #817b87; font-size: 15px; }
.app-window[data-mode="browser"] .demo-back,.app-window[data-mode="work"] .demo-back { right: auto; left: 14px; }
.demo-home-state { position: absolute; inset: 38px 0 87px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; opacity: 1; transition: opacity .35s ease .2s,transform .6s ease .2s; }
.app-window[data-mode="browser"] .demo-home-state,.app-window[data-mode="work"] .demo-home-state { opacity: 0; transform: translateY(-12px); pointer-events: none; transition-delay: 0s; }
.demo-orb { position: relative; width: 62px; height: 62px; animation: orb-turn 22s linear infinite; }
.demo-orb i { --x:0px; --y:-22px; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 2px 5px rgba(24,20,20,.2); transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))); }
.demo-orb i:nth-child(1){--dot:var(--orange);--x:0px;--y:-23px}.demo-orb i:nth-child(2){--dot:var(--yellow);--x:20px;--y:-11px}.demo-orb i:nth-child(3){--dot:var(--green);--x:20px;--y:12px}.demo-orb i:nth-child(4){--dot:var(--blue);--x:0px;--y:23px}.demo-orb i:nth-child(5){--dot:var(--violet);--x:-20px;--y:12px}.demo-orb i:nth-child(6){--dot:var(--pink);--x:-20px;--y:-11px}
@keyframes orb-turn { to { transform: rotate(360deg); } }
.demo-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.demo-prompts span { padding: 7px 11px; border: 1px solid #e1dfe3; border-radius: 999px; color: #6b6770; font-size: 7px; font-weight: 600; }
.demo-work-state { position: absolute; inset: 46px 8% 96px; overflow: hidden; opacity: 0; transform: translateY(14px); transition: opacity .2s ease,transform .35s ease; }
.app-window[data-mode="browser"] .demo-work-state,.app-window[data-mode="work"] .demo-work-state { opacity: 1; transform: translateY(0); transition-delay: .17s; }
.demo-prior-answer { padding: 8px 0 13px; border-bottom: 1px solid #ece9ee; }
.demo-prior-answer p { margin: 0; color: #514c55; font-size: 7px; line-height: 1.55; }.demo-prior-answer small { display: block; margin-top: 5px; color: #aaa5ad; font-size: 5px; }
.demo-user-message { width: max-content; max-width: 72%; margin: 20px 0 23px auto; padding: 9px 11px; border: 1px solid #e1dde5; border-radius: 9px; background: #f6f4f7; color: #4b4750; font-size: 7px; line-height: 1.45; }
.demo-answer small { color: #98939b; font-size: 5px; }.demo-answer p { margin: 8px 0 0; color: #38353b; font-size: 8px; line-height: 1.58; }
.real-composer { position: absolute; right: 8%; bottom: 18px; left: 8%; min-height: 68px; padding: 12px 13px 8px; border: 1px solid #ddd6e8; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 13px 34px rgba(69,55,96,.1); }
.real-composer > p { margin: 0; color: #b1adb4; font-size: 8px; }.real-composer > div { display: flex; align-items: center; margin-top: 11px; color: #7d7881; }
.composer-chat { display: flex; align-items: center; gap: 5px; font-size: 9px; }.composer-chat b { font-size: 6px; }
.composer-model { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }.composer-model img { width: 17px; height: 17px; object-fit: contain; }.composer-model b { font-size: 6px; }
.real-composer > div > i { width: 24px; height: 24px; display: grid; place-items: center; margin-left: 7px; border-radius: 50%; background: #242229; color: #fff; font-size: 11px; font-style: normal; }
.real-browser-pane { order: 1; min-width: 0; overflow: hidden; border-right: 1px solid #e2dfe5; background: #fff; opacity: 0; transform: translateX(-20px); transition: opacity .5s ease,transform .85s cubic-bezier(.2,.7,.2,1); }
.app-window[data-mode="browser"] .real-browser-pane,.app-window[data-mode="work"] .real-browser-pane { opacity: 1; transform: translateX(0); }
.browser-toolbar { height: 43px; min-width: 350px; display: grid; grid-template-columns: 19px 19px 1fr 19px 19px; align-items: center; gap: 3px; padding: 0 10px; border-bottom: 1px solid #e5e2e7; color: #96919b; font-size: 10px; }
.browser-address { height: 25px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #d9d1e4; border-radius: 999px; }.browser-address i { width: 6px; height: 6px; border: 1px solid #aaa5af; border-radius: 50%; }.browser-address small { color: #aaa6af; font-size: 6px; }
.browser-tabs { height: 28px; min-width: 350px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid #e7e4e9; color: #918c95; font-size: 6px; }.browser-tabs > span { width: 72px; display: flex; justify-content: space-between; padding: 5px 7px; border: 1px solid #e3e0e5; border-radius: 5px 5px 0 0; }.browser-tabs em { max-width: 48px; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.browser-tabs i { font-size: 10px; font-style: normal; }
.browser-canvas { position: relative; height: calc(100% - 71px); min-width: 350px; overflow: hidden; background: #fff; }
.browser-site { position: absolute; inset: 0; visibility: hidden; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .15s ease,transform .25s ease,visibility 0s linear .17s; }
.app-window[data-site="google"] .browser-site-google,.app-window[data-site="cursor"] .browser-site-cursor,.app-window[data-site="doordash"] .browser-site-doordash,.app-window[data-site="github"] .browser-site-github,.app-window[data-site="youtube"] .browser-site-youtube { visibility: visible; opacity: 1; transform: none; transition-delay: .16s; }
.browser-site img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: translateY(0) scale(1.005); transition: transform 5.2s cubic-bezier(.22,.72,.18,1); }
.app-window[data-phase="search"] .browser-site-google img { transform: translateY(-1.25%) scale(1.01); }
.app-window[data-phase="review"] .browser-site-cursor img { transform: translateY(-2.25%) scale(1.01); }
.app-window[data-phase="verify"] .browser-site-github img { transform: translateY(-3.5%) scale(1.01); }
.browser-cursor { position: absolute; z-index: 5; top: 61%; left: 50%; width: 11px; height: 16px; background: #171619; opacity: 0; clip-path: polygon(0 0,0 100%,28% 72%,47% 100%,59% 93%,41% 66%,77% 66%); filter: drop-shadow(0 1px 1px rgba(255,255,255,.75)); }
.app-window[data-phase="search"] .browser-cursor { animation: cursor-search 5.4s cubic-bezier(.22,.72,.18,1) forwards; }
.app-window[data-phase="review"] .browser-cursor { animation: cursor-review 6.2s cubic-bezier(.22,.72,.18,1) forwards; }
.app-window[data-phase="verify"] .browser-cursor { animation: cursor-verify 6.2s cubic-bezier(.22,.72,.18,1) forwards; }
@keyframes cursor-search { 0%,10% { opacity:0; transform:translate(85px,70px); } 24% { opacity:1; } 60%,88% { opacity:1; transform:translate(-14px,-48px); } 100% { opacity:0; transform:translate(-14px,-48px); } }
@keyframes cursor-review { 0%,10% { opacity:0; transform:translate(95px,88px); } 22% { opacity:1; } 62%,90% { opacity:1; transform:translate(-72px,-42px); } 100% { opacity:0; transform:translate(-72px,-42px); } }
@keyframes cursor-verify { 0%,12% { opacity:0; transform:translate(110px,78px); } 24% { opacity:1; } 64%,90% { opacity:1; transform:translate(-46px,34px); } 100% { opacity:0; transform:translate(-46px,34px); } }
.app-window[data-phase="handoff"] .real-composer { border-color: rgba(91,61,245,.46); box-shadow: 0 14px 38px rgba(91,61,245,.14); }
.app-window[data-phase="handoff"] .composer-model img { animation: model-handoff .7s cubic-bezier(.2,.8,.2,1) both; }
.app-window[data-phase="complete"] .window-bar small { color: #168660; }
@keyframes model-handoff { 0% { opacity:0; transform:scale(.78) rotate(-8deg); } 100% { opacity:1; transform:none; } }

.pool-section { padding-top: 116px; }
.intelligence-section { padding-top: 180px; }
.destinations-section { padding-top: 172px; }
.pool-section h2 { max-width: 650px; margin: 0 0 61px; color: var(--soft); font-size: clamp(22px,2.15vw,28px); font-weight: 390; letter-spacing: -.04em; line-height: 1.31; }
.pool-section h2 strong { color: var(--ink); font-weight: 480; }
.intelligence-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.intelligence-card { min-height: 466px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.constellation,.provider-list { position: relative; height: 286px; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.constellation { display: grid; place-items: center; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(17,17,15,.07); border-radius: 50%; transform: translate(-50%,-50%); }.orbit-one { width: 250px; height: 130px; transform: translate(-50%,-50%) rotate(18deg); }.orbit-two { width: 176px; height: 248px; transform: translate(-50%,-50%) rotate(-34deg); }.orbit-three { width: 116px; height: 116px; border-color: rgba(85,54,255,.12); }
.constellation-core { position: absolute; z-index: 3; width: 32px; height: 32px; }
.constellation > img:not(.constellation-core) { position: absolute; z-index: 2; width: 25px; height: 25px; padding: 5px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); object-fit: contain; }
.constellation > img:nth-of-type(2) { top: 46px; left: 85px; }.constellation > img:nth-of-type(3) { top: 53px; right: 90px; }.constellation > img:nth-of-type(4) { right: 55px; bottom: 55px; }.constellation > img:nth-of-type(5) { bottom: 40px; left: 118px; }.constellation > img:nth-of-type(6) { bottom: 89px; left: 50px; }
.provider-list { padding: 35px 44px; }.provider-list-head { height: 30px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }.provider-list-head small { color: var(--green); font-size: 6px; }
.model-row { min-height: 38px; display: grid; grid-template-columns: 24px 1fr 10px; align-items: center; gap: 10px; padding: 0 9px; border-bottom: 1px solid var(--line-soft); opacity: .55; transition: opacity .25s ease,background .25s ease; }.model-row.selected { background: rgba(85,54,255,.045); opacity: 1; }.model-row > img { width: 20px; height: 20px; object-fit: contain; }.model-row > span { display: grid; gap: 1px; }.model-row strong { font-size: 8px; }.model-row small { color: var(--muted); font-size: 6px; }.model-row > i { width: 9px; height: 9px; border: 1px solid var(--line); border-radius: 50%; }.model-row.selected > i { border-color: var(--violet); background: var(--violet); box-shadow: inset 0 0 0 3px var(--surface); }
.card-copy { min-height: 180px; display: flex; flex-direction: column; padding: 27px 31px 24px; }.card-copy h3 { margin: 0; font-size: 22px; font-weight: 430; letter-spacing: -.04em; }.card-copy h3 span { display: inline-block; margin-left: 5px; padding: 3px 5px; border: 1px solid rgba(85,54,255,.2); color: var(--violet); font-size: 7px; font-weight: 550; letter-spacing: 0; vertical-align: 4px; }.card-copy p { max-width: 370px; margin: 12px 0 0; color: var(--soft); font-size: 11px; line-height: 1.55; }.card-copy small { margin-top: auto; color: var(--muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 6px; letter-spacing: .04em; }
.section-link { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding: 13px 0; border-top: 1px solid var(--violet); color: var(--violet); font-size: 11px; }

.editorial-feature { min-height: 257px; display: grid; grid-template-columns: 44% 56%; border: 1px solid var(--line); }
.record-art { display: grid; place-items: center; min-height: 255px; overflow: hidden; border-right: 1px solid var(--line); background-image: linear-gradient(rgba(17,17,15,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.024) 1px,transparent 1px); background-size: 20px 20px; }
.record-card { width: 258px; border: 1px solid rgba(17,17,15,.15); background: var(--surface); box-shadow: 0 16px 35px rgba(35,31,26,.08); }.record-card header { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 8px; }.record-card header small { color: var(--muted); font-size: 6px; }.record-card ol { margin: 0; padding: 0; list-style: none; }.record-card li { height: 38px; display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 7px; }.record-card li:last-child { border-bottom: 0; }.record-card li i { font-style: normal; font-size: 6px; }.record-card li span { color: var(--ink); font-weight: 520; }.record-card li b { color: var(--green); font-weight: 500; }.record-card li.active { background: rgba(85,54,255,.045); }.record-card li.active i,.record-card li.active b { color: var(--violet); }
.editorial-feature-copy { display: flex; justify-content: center; flex-direction: column; padding: 44px 47px; }.editorial-feature-copy h3 { margin: 0; font-size: 25px; font-weight: 430; letter-spacing: -.04em; }.editorial-feature-copy p { max-width: 480px; margin: 28px 0 0; color: var(--soft); font-size: 11px; line-height: 1.62; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-left: 1px solid var(--line); }
.article-grid article { min-height: 270px; display: flex; flex-direction: column; padding: 27px 24px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.article-grid time { color: var(--muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 7px; letter-spacing: .05em; }.article-grid h3 { max-width: 245px; margin: 22px 0 0; font-size: 20px; font-weight: 430; letter-spacing: -.04em; line-height: 1.25; }.article-grid p { max-width: 250px; margin: auto 0 0; color: var(--soft); font-size: 9px; line-height: 1.55; }

.destination-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.destination-card { min-height: 520px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .22s ease; }.destination-card:hover { background: rgba(255,255,255,.24); }.destination-art { position: relative; height: 332px; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.destination-card > div:last-child { min-height: 188px; display: flex; flex-direction: column; padding: 27px 31px 24px; }.destination-card h3 { max-width: 250px; margin: 0; color: var(--soft); font-size: 22px; font-weight: 390; letter-spacing: -.045em; line-height: 1.38; }.destination-card p { margin: auto 0 0; color: var(--soft); font-size: 8px; }.destination-card p span { display: inline-block; }
.cloud-art { background-image: repeating-radial-gradient(ellipse at 22% 62%,transparent 0 29px,rgba(17,17,15,.07) 30px 31px,transparent 32px 59px); }.cloud-art i { position: absolute; width: 8px; height: 8px; background: var(--violet); }.cloud-art i:nth-child(1){top:29%;left:18%}.cloud-art i:nth-child(2){top:53%;left:46%}.cloud-art i:nth-child(3){top:39%;right:16%}.cloud-art i:nth-child(4){bottom:18%;left:25%}.cloud-art i:nth-child(5){bottom:12%;right:23%}.cloud-art i:nth-child(6){top:18%;left:57%;background:var(--green)}
.desktop-art { display: grid; place-items: center; }.desktop-art > span { position: relative; width: 230px; height: 154px; border: 1px solid rgba(17,17,15,.16); background: rgba(255,255,255,.13); }.desktop-art > span::before { position: absolute; top: 25px; right: 0; left: 0; height: 1px; background: var(--line); content: ""; }.desktop-art > span i { position: absolute; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(17,17,15,.16); }.desktop-art > span i:nth-child(1){left:10px}.desktop-art > span i:nth-child(2){left:21px}.desktop-art > span i:nth-child(3){left:32px}.desktop-art > span b { position: absolute; top: 55px; right: 30px; bottom: 27px; left: 30px; border: 1px solid rgba(17,17,15,.08); }.desktop-art::after { position: absolute; bottom: 72px; width: 270px; height: 1px; background: rgba(17,17,15,.09); content: ""; }
.systems-art { display: grid; place-items: center; }.systems-art > span { width: 78px; height: 78px; border: 1px solid rgba(17,17,15,.17); border-radius: 50%; }.systems-art::before,.systems-art::after { position: absolute; background: rgba(17,17,15,.1); content: ""; }.systems-art::before { width: 230px; height: 1px; }.systems-art::after { width: 1px; height: 230px; }.systems-art i { position: absolute; width: 19px; height: 19px; border: 1px solid rgba(17,17,15,.16); background: var(--paper); transform: rotate(45deg); }.systems-art i:nth-child(2){top:57px;left:calc(50% - 10px)}.systems-art i:nth-child(3){right:49px;bottom:72px}.systems-art i:nth-child(4){bottom:72px;left:49px}.systems-art i:nth-child(2)::after,.systems-art i:nth-child(3)::after,.systems-art i:nth-child(4)::after { position: absolute; inset: 5px; background: var(--violet); content: ""; }.systems-art i:nth-child(3)::after { background: var(--green); }.systems-art i:nth-child(4)::after { background: var(--orange); }

.site-footer { padding: 210px 0 0; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; color: var(--soft); font-size: 8px; }.footer-links > div { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }.footer-links > span { grid-column: 1 / -1; margin-top: 14px; color: var(--muted); }
.footer-wordmark { min-height: 280px; display: flex; align-items: flex-end; overflow: hidden; }.footer-wordmark span { display: block; margin-left: -.045em; color: transparent; background-image: repeating-linear-gradient(to bottom,rgba(17,17,15,.14) 0 1px,transparent 1px 4px); background-clip: text; -webkit-background-clip: text; font-size: clamp(90px,14vw,180px); font-weight: 520; letter-spacing: -.095em; line-height: .77; white-space: nowrap; transition: filter .3s ease; }.footer-wordmark:hover span { filter: contrast(1.8); }

a:focus-visible,button:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.js .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1); }.js .reveal-item.is-visible { opacity: 1; transform: none; }.js .reveal-item[data-reveal-delay="1"] { transition-delay: .06s; }.js .reveal-item[data-reveal-delay="2"] { transition-delay: .12s; }

@media (max-width: 1060px) {
  .site-rail { left: 32px; width: 140px; padding-left: 0; }
  .site-main { margin-left: 192px; }
  .hero,.pool-section,.site-footer { width: min(726px,calc(100% - 32px)); }
  .product-stage { height: 500px; }
}

@media (max-width: 760px) {
  body.menu-open { overflow: hidden; }
  .mobile-bar { position: fixed; z-index: 300; inset: 0 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); background: rgba(248,247,242,.94); backdrop-filter: blur(14px); }
  .menu-toggle { width: 34px; height: 34px; display: grid; place-content: center; gap: 6px; border: 0; background: transparent; }.menu-toggle > span { width: 18px; height: 1px; display: block; background: var(--ink); }.menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .site-rail { z-index: 250; top: 60px; right: 0; width: 100%; height: auto; padding: 24px; border-bottom: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity .18s ease,transform .18s ease; }.site-rail > .brand { display: none; }.site-nav { margin: 0; gap: 0; font-size: 17px; }.site-nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); }.menu-open .site-rail { opacity: 1; pointer-events: auto; transform: none; }
  .site-main { margin-left: 0; padding-top: 60px; }
  .hero,.pool-section,.site-footer { width: calc(100% - 28px); }
  .hero { padding: 88px 0 120px; }.hero h1 { font-size: 29px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }
  .product-stage { height: 600px; padding: 18px 10px 10px; }.app-window { border-radius: 9px; }.real-app-grid { grid-template-columns: 0 1fr; }.app-window[data-mode="browser"] .real-app-grid,.app-window[data-mode="work"] .real-app-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }.browser-toolbar,.browser-tabs,.browser-canvas { min-width: 290px; }.real-composer { right: 5%; left: 5%; }
  .pool-section { padding-top: 120px; }.pool-section h2 { margin-bottom: 42px; font-size: 24px; }.intelligence-grid,.article-grid,.destination-grid { grid-template-columns: 1fr; }.intelligence-card { min-height: 450px; }.editorial-feature { grid-template-columns: 1fr; }.record-art { border-right: 0; border-bottom: 1px solid var(--line); }.editorial-feature-copy { min-height: 245px; padding: 34px 28px; }.article-grid article { min-height: 235px; }.destination-card { min-height: 500px; }.destination-art { height: 315px; }.destination-card > div:last-child { min-height: 185px; }
  .site-footer { padding-top: 130px; }.footer-wordmark { min-height: 180px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 27px; }.product-stage { height: 550px; }.app-window[data-mode="browser"] .real-app-grid,.app-window[data-mode="work"] .real-app-grid { grid-template-columns: 0 1fr; }.real-browser-pane { opacity: 0 !important; }.window-bar small { display: none; }.composer-model b { display: none; }.constellation > img:nth-of-type(2){left:55px}.constellation > img:nth-of-type(3){right:60px}.constellation > img:nth-of-type(4){right:42px}.constellation > img:nth-of-type(5){left:95px}.constellation > img:nth-of-type(6){left:40px}.provider-list { padding-inline: 24px; }.footer-wordmark span { font-size: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Poolside restraint × Shopify clarity */
:root {
  --paper: #f5f3ed;
  --surface: #fffefa;
  --ink: #161613;
  --soft: #68675f;
  --muted: #96948a;
  --line: rgba(22,22,19,.14);
  --line-soft: rgba(22,22,19,.075);
  --violet: #5738f5;
}

body { background: var(--paper); }
.page-shell { width: min(1180px,calc(100% - 48px)); margin-right: auto; margin-left: auto; }
.site-main { margin-left: 0; }

.site-header { position: sticky; z-index: 300; top: 0; border-bottom: 1px solid var(--line); background: rgba(245,243,237,.92); backdrop-filter: blur(16px); transition: background .2s ease,box-shadow .2s ease; }
.site-header.is-scrolled { background: rgba(255,254,250,.96); box-shadow: 0 8px 28px rgba(22,22,19,.035); }
.nav-shell { width: min(1180px,calc(100% - 48px)); height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 auto; }
.brand { gap: 11px; color: var(--ink); font-size: 15px; font-weight: 620; }
.brand img { width: 18px; height: 18px; }
.site-nav { display: flex; align-items: center; flex-direction: row; gap: 30px; margin: 0; font-size: 12px; }
.site-nav a { color: var(--soft); }
.site-nav a:hover,.site-nav a.is-active { color: var(--ink); }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-size: 12px; }
.nav-actions > a:first-child { color: var(--soft); }
.nav-download { min-height: 38px; display: inline-flex; align-items: center; gap: 34px; padding: 0 15px; border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: background .18s ease,transform .18s ease; }
.nav-download:hover { background: var(--violet); transform: translateY(-1px); }
.menu-toggle { display: none; }

.hero { width: min(1180px,calc(100% - 48px)); padding: 110px 0 0; }
.hero-copy-block { max-width: 850px; }
.eyebrow { margin: 0; color: var(--violet); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; font-weight: 520; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.hero h1 { max-width: none; margin: 27px 0 0; font-size: clamp(72px,8vw,118px); font-weight: 430; letter-spacing: -.078em; line-height: .88; }
.hero h1 span { color: var(--violet); }
.hero-copy { max-width: 590px; margin-top: 38px; color: var(--soft); font-size: 17px; line-height: 1.62; }
.hero-actions { gap: 12px; margin-top: 38px; }
.button { min-height: 49px; gap: 46px; padding: 0 19px; font-size: 12px; font-weight: 560; }
.button-primary { border-color: var(--ink); background: var(--ink); }
.button-primary:hover { border-color: var(--violet); background: var(--violet); }
.button-secondary { background: rgba(255,255,255,.25); }

.product-stage { position: relative; width: 100%; height: 720px; margin-top: 108px; padding: 52px 48px 42px; background-color: #e9e7e0; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.48) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(22,22,19,.03) 0 1px,transparent 1px 4px); }
.stage-label { position: absolute; top: 17px; right: 19px; left: 19px; display: flex; justify-content: space-between; color: var(--muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.app-window { border-radius: 13px; }

.section { padding-top: 180px; }
.section-heading { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 48px 80px; align-items: start; margin-bottom: 72px; }
.section-heading .eyebrow { padding-top: 12px; }
.section-heading h2 { grid-column: 2; margin: 0; font-size: clamp(44px,5vw,68px); font-weight: 430; letter-spacing: -.058em; line-height: 1.02; }
.section-heading > p:last-child { grid-column: 2; max-width: 600px; margin: -20px 0 0; color: var(--soft); font-size: 15px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.feature-card { min-height: 680px; display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.feature-art { min-height: 430px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background-color: #eeece6; background-image: linear-gradient(rgba(22,22,19,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(22,22,19,.025) 1px,transparent 1px); background-size: 20px 20px; }
.provider-list { width: min(390px,calc(100% - 64px)); padding: 22px 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 22px 54px rgba(31,27,23,.09); }
.provider-list-head { height: 40px; font-size: 8px; }
.model-row { min-height: 52px; grid-template-columns: 30px 1fr 12px; gap: 12px; padding: 0 12px; }
.model-row > img { width: 23px; height: 23px; }
.model-row strong { font-size: 10px; }.model-row small { font-size: 7px; }
.feature-copy { min-height: 250px; display: flex; flex-direction: column; padding: 34px 36px 38px; }
.feature-copy h3 { max-width: 440px; margin: 23px 0 0; font-size: 33px; font-weight: 430; letter-spacing: -.05em; line-height: 1.08; }
.feature-copy > p:last-child { max-width: 430px; margin: auto 0 0; color: var(--soft); font-size: 13px; line-height: 1.6; }
.record-art { min-height: 430px; border-right: 0; }
.record-card { width: min(390px,calc(100% - 64px)); box-shadow: 0 22px 54px rgba(31,27,23,.09); }
.record-card header { height: 58px; padding: 0 20px; font-size: 10px; }.record-card header small { font-size: 7px; }
.record-card li { height: 54px; grid-template-columns: 38px 1fr 26px; padding: 0 18px; font-size: 9px; }.record-card li i { font-size: 7px; }
.record-card li.current { background: rgba(87,56,245,.055); }.record-card li.current i,.record-card li.current b { color: var(--violet); }

.continuity-band { margin-top: 180px; padding: 122px 0 86px; overflow: hidden; background: var(--ink); color: #f7f5ef; }
.continuity-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 54px 80px; }
.continuity-grid .eyebrow { padding-top: 13px; color: #a996ff; }
.continuity-grid h2 { margin: 0; font-size: clamp(54px,6.6vw,86px); font-weight: 420; letter-spacing: -.067em; line-height: .96; }
.continuity-copy { grid-column: 2; max-width: 610px; }
.continuity-copy p { margin: 0; color: rgba(247,245,239,.68); font-size: 16px; line-height: 1.7; }
.continuity-copy a { display: inline-flex; gap: 24px; margin-top: 34px; padding-bottom: 8px; border-bottom: 1px solid rgba(247,245,239,.45); font-size: 12px; }
.handoff-line { grid-column: 1 / -1; display: grid; grid-template-columns: 190px 1fr repeat(4,64px); gap: 16px; align-items: center; margin-top: 48px; }
.handoff-line > i { height: 1px; background: linear-gradient(90deg,var(--violet),rgba(255,255,255,.18)); }
.handoff-line > span { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.045); }
.handoff-line > span img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); }
.handoff-line .handoff-job { width: 190px; display: flex; gap: 12px; padding: 0 18px; background: var(--violet); }
.handoff-line .handoff-job img { width: 23px; filter: none; }
.handoff-line .handoff-job b { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; letter-spacing: .08em; }

.compact-heading { grid-template-columns: .72fr 1.28fr; margin-bottom: 62px; }
.compact-heading h2 { grid-column: 2; }
.process-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; }
.process-step { min-height: 250px; display: grid; grid-template-columns: 52px 1fr; gap: 26px; padding: 31px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step > span { color: var(--violet); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; }
.process-step h3 { margin: 0; font-size: 28px; font-weight: 430; letter-spacing: -.045em; }
.process-step p { max-width: 330px; margin: 78px 0 0; color: var(--soft); font-size: 13px; line-height: 1.6; }

.ways-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.way-card { min-height: 660px; display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); background: var(--surface); transition: transform .25s ease,box-shadow .25s ease; }
.way-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(31,27,23,.07); }
.way-art { min-height: 410px; display: grid; place-items: center; border-bottom: 1px solid var(--line); background: #eeece6; }
.way-card > div:last-child { min-height: 250px; display: flex; flex-direction: column; padding: 34px 36px; }
.way-card h3 { max-width: 440px; margin: 23px 0 0; font-size: 34px; font-weight: 430; letter-spacing: -.052em; line-height: 1.12; }
.way-card > div:last-child > span { margin-top: auto; color: var(--soft); font-size: 11px; }
.mini-window { position: relative; width: 340px; height: 230px; border: 1px solid rgba(22,22,19,.18); background: var(--surface); box-shadow: 0 22px 50px rgba(31,27,23,.09); }
.mini-window::after { position: absolute; top: 32px; right: 0; left: 0; height: 1px; background: var(--line); content: ""; }
.mini-window > i { position: absolute; z-index: 2; top: 12px; width: 8px; height: 8px; border-radius: 50%; }.mini-window > i:nth-child(1){left:13px;background:#ff5f57}.mini-window > i:nth-child(2){left:26px;background:#febc2e}.mini-window > i:nth-child(3){left:39px;background:#28c840}
.mini-window b { position: absolute; inset: 70px 45px 38px; display: grid; place-items: center; border: 1px solid var(--line-soft); }.mini-window b img { width: 44px; }
.mini-phone { position: relative; width: 190px; height: 340px; border: 1px solid rgba(22,22,19,.2); border-radius: 28px; background: var(--surface); box-shadow: 0 22px 50px rgba(31,27,23,.09); }
.mini-phone::before { position: absolute; top: 10px; left: 50%; width: 50px; height: 5px; border-radius: 999px; background: rgba(22,22,19,.14); content: ""; transform: translateX(-50%); }
.mini-phone b { position: absolute; inset: 80px 24px 58px; display: grid; place-items: center; border: 1px solid var(--line-soft); }.mini-phone b img { width: 44px; }
.mini-phone i { position: absolute; bottom: 20px; left: 50%; width: 36px; height: 3px; border-radius: 999px; background: rgba(22,22,19,.18); transform: translateX(-50%); }

.closing-cta { margin-top: 180px; padding: 128px 0 136px; background: #ded8ff; }
.closing-cta h2 { max-width: 930px; margin: 31px 0 0; font-size: clamp(58px,7.5vw,98px); font-weight: 430; letter-spacing: -.073em; line-height: .92; }
.closing-cta h2 span { color: var(--violet); }
.closing-cta .hero-actions { margin-top: 50px; }

.site-footer { width: min(1180px,calc(100% - 48px)); padding: 86px 0 0; }
.footer-top { display: flex; justify-content: space-between; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.footer-links { display: grid; grid-template-columns: repeat(2,140px); gap: 30px; color: var(--soft); font-size: 11px; }
.footer-links > div { gap: 12px; }.footer-links > span { display: none; }
.footer-meta { display: flex; justify-content: space-between; padding: 18px 0; color: var(--muted); font-size: 9px; }
.footer-wordmark { min-height: 290px; }
.footer-wordmark span { font-size: clamp(112px,15vw,205px); }

@media (max-width: 900px) {
  .page-shell,.nav-shell,.hero,.site-footer { width: min(100% - 32px,720px); }
  .nav-shell { height: 64px; grid-template-columns: 1fr auto; }
  .menu-toggle { width: 36px; height: 36px; display: grid; place-content: center; gap: 6px; border: 0; background: transparent; }.menu-toggle > span { width: 19px; height: 1px; background: var(--ink); transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; z-index: 290; top: 64px; right: 0; left: 0; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 14px 16px 26px; border-bottom: 1px solid var(--line); background: var(--surface); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .18s ease,transform .18s ease; }
  .site-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .menu-open .site-nav { opacity: 1; pointer-events: auto; transform: none; }
  .nav-actions { display: none; }
  .hero { padding-top: 82px; }.hero h1 { font-size: clamp(60px,10vw,82px); }
  .product-stage { height: 620px; margin-top: 82px; padding: 48px 18px 24px; }
  .section { padding-top: 130px; }.section-heading,.continuity-grid,.compact-heading { grid-template-columns: 1fr; gap: 28px; }.section-heading .eyebrow,.continuity-grid .eyebrow { padding-top: 0; }.section-heading h2,.section-heading > p:last-child,.compact-heading h2,.continuity-copy { grid-column: 1; }.section-heading > p:last-child { margin-top: 0; }
  .feature-grid,.ways-grid { grid-template-columns: 1fr; }.feature-card,.way-card { min-height: 620px; }.feature-art,.way-art { min-height: 390px; }
  .continuity-band { margin-top: 130px; padding: 92px 0 70px; }.continuity-grid h2 { font-size: clamp(50px,9vw,72px); }.handoff-line { grid-template-columns: 165px 1fr repeat(4,50px); gap: 10px; }.handoff-line > span { width: 50px; height: 50px; }.handoff-line .handoff-job { width: 165px; }
  .process-step p { margin-top: 54px; }
  .closing-cta { margin-top: 130px; padding: 95px 0 105px; }
}

@media (max-width: 620px) {
  .page-shell,.nav-shell,.hero,.site-footer { width: calc(100% - 28px); }
  .hero { padding-top: 72px; }.hero h1 { font-size: clamp(48px,15vw,68px); }.hero-copy { margin-top: 28px; font-size: 15px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }
  .product-stage { height: 550px; margin-top: 68px; padding: 43px 10px 12px; }.stage-label { top: 14px; }
  .section-heading h2 { font-size: 42px; }.feature-card,.way-card { min-height: 560px; }.feature-art,.way-art { min-height: 340px; }.feature-copy,.way-card > div:last-child { min-height: 220px; padding: 28px 24px; }.feature-copy h3,.way-card h3 { font-size: 29px; }
  .provider-list,.record-card { width: calc(100% - 32px); }.provider-list { padding: 16px; }.model-row { min-height: 46px; }
  .continuity-band { padding-top: 78px; }.continuity-grid h2 { font-size: 48px; }.continuity-copy p { font-size: 14px; }.handoff-line { grid-template-columns: repeat(4,1fr); }.handoff-line .handoff-job { grid-column: 1 / -1; width: 100%; height: 58px; }.handoff-line > i { display: none; }.handoff-line > span { width: 100%; height: 58px; }
  .process-list { grid-template-columns: 1fr; }.process-step { min-height: 210px; padding: 27px 24px; }.process-step p { margin-top: 42px; }
  .mini-window { width: 280px; height: 190px; }.mini-phone { width: 160px; height: 290px; }
  .closing-cta h2 { font-size: 50px; }
  .footer-top { gap: 56px; flex-direction: column; }.footer-links { grid-template-columns: repeat(2,1fr); }.footer-wordmark { min-height: 190px; }.footer-wordmark span { font-size: 84px; }
}

.oc-announcement { display:flex; align-items:center; gap:14px; margin-bottom:44px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.oc-announcement strong { padding:4px 7px; background:var(--ink); color:#fff; font-size:9px; font-weight:500; }
.oc-announcement span { color:var(--soft); }.oc-announcement em { color:var(--muted); font-style:normal; }
.quick-download { max-width:720px; margin-top:42px; border:1px solid var(--line); background:rgba(255,255,255,.28); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.quick-download > div { height:52px; display:flex; align-items:stretch; gap:34px; padding:0 20px; border-bottom:1px solid var(--line); }
.quick-download > div a { display:flex; align-items:center; border-bottom:2px solid transparent; color:var(--muted); font-size:11px; }.quick-download > div a.active { border-color:var(--ink); color:var(--ink); }
.quick-download-action { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:13px; }.quick-download-action b { font-size:17px; font-weight:400; }
@media (max-width:620px) { .oc-announcement { align-items:flex-start; flex-wrap:wrap; }.oc-announcement em { width:100%; padding-left:0; }.quick-download > div { gap:22px; } }

/* OpenCode directness × Poolside restraint × PolySwap identity */
:root {
  --paper: #f7f5ef;
  --surface: #fdfcf8;
  --ink: #121210;
  --soft: #64635c;
  --muted: #929087;
  --line: rgba(18,18,16,.14);
  --line-soft: rgba(18,18,16,.075);
  --violet: #5738f5;
}

body { background: #eeece6; }
.site-main { margin-left: 0; }
.page-shell,
.nav-shell,
.site-footer { width: min(1080px,calc(100% - 32px)); margin-right: auto; margin-left: auto; }
.page-shell { border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }

.site-header { border-bottom: 1px solid var(--line); background: rgba(247,245,239,.94); }
.site-header.is-scrolled { background: rgba(253,252,248,.96); }
.nav-shell { height: 76px; grid-template-columns: 1fr auto 1fr; padding: 0 28px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand { color: var(--ink); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 13px; font-weight: 600; letter-spacing: -.035em; }
.brand img { width: 18px; height: 18px; }
.site-header .brand-mark { position: relative; width: 38px; height: 38px; flex: 0 0 auto; transform-origin: 50% 50%; animation: brand-quick-spin 30s linear infinite; }
.site-header .brand-orb { position: absolute; top: 50%; left: 50%; width: 8.5px; height: 8.5px; border-radius: 50%; box-shadow: 0 1px 2px rgba(31,31,42,.16); transform: translate(-50%,-50%) translate(var(--x),var(--y)); animation: brand-orbit 9.2s cubic-bezier(.45,0,.2,1) infinite,brand-wander 48s linear infinite,brand-spin-life 30s linear infinite; animation-delay: 0s,var(--life-delay),0s; }
.brand-orb-pink { --x:-11px; --y:-7px; --far-x:-13px; --far-y:-9px; --orbit-x:-12px; --orbit-y:-13px; --life-x:-5px; --life-y:-3px; --life-back-x:1px; --life-back-y:1px; --life-delay:0s; --spin-x:-2px; --spin-y:-1px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ff9dd1 15%,#f12d91 46%,#bd0766 100%); }
.brand-orb-orange { --x:0px; --y:-13px; --far-x:0px; --far-y:-15px; --orbit-x:5px; --orbit-y:-13px; --life-x:0px; --life-y:-5px; --life-back-x:0px; --life-back-y:1px; --life-delay:-8s; --spin-x:0px; --spin-y:-2px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ffb27d 15%,#ff6a16 46%,#df3700 100%); }
.brand-orb-yellow { --x:11px; --y:-7px; --far-x:13px; --far-y:-9px; --orbit-x:14px; --orbit-y:-3px; --life-x:5px; --life-y:-3px; --life-back-x:-1px; --life-back-y:1px; --life-delay:-16s; --spin-x:2px; --spin-y:-1px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ffe999 15%,#ffc51c 46%,#e59b00 100%); }
.brand-orb-green { --x:11px; --y:7px; --far-x:13px; --far-y:8px; --orbit-x:10px; --orbit-y:13px; --life-x:5px; --life-y:3px; --life-back-x:-1px; --life-back-y:-1px; --life-delay:-24s; --spin-x:2px; --spin-y:1px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#8ef6dc 15%,#19c7a2 46%,#079276 100%); }
.brand-orb-blue { --x:0px; --y:13px; --far-x:0px; --far-y:15px; --orbit-x:-5px; --orbit-y:13px; --life-x:0px; --life-y:5px; --life-back-x:0px; --life-back-y:-1px; --life-delay:-32s; --spin-x:0px; --spin-y:2px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#96d5ff 15%,#1689ef 46%,#0755be 100%); }
.brand-orb-purple { --x:-11px; --y:7px; --far-x:-13px; --far-y:8px; --orbit-x:-14px; --orbit-y:0px; --life-x:-5px; --life-y:3px; --life-back-x:1px; --life-back-y:-1px; --life-delay:-40s; --spin-x:-2px; --spin-y:1px; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#bd9dff 15%,#7043e8 46%,#4320ad 100%); }
@keyframes brand-orbit { 0%,20%,82%,100% { transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1); } 40% { transform:translate(-50%,-50%) translate(var(--far-x),var(--far-y)) scale(.96); } 56% { transform:translate(-50%,-50%) translate(var(--orbit-x),var(--orbit-y)) scale(1.03); } 70% { transform:translate(-50%,-50%) translate(var(--far-x),var(--far-y)) scale(.98); } }
@keyframes brand-wander { 0%,45%,55%,100% { translate:0 0; } 48% { translate:var(--life-x) var(--life-y); } 51% { translate:var(--life-back-x) var(--life-back-y); } 53% { translate:0 0; } }
@keyframes brand-spin-life { 0%,68%,78%,100% { margin:0; scale:1; filter:saturate(1) brightness(1); } 70% { margin:0; scale:.97; filter:saturate(1.02) brightness(1); animation-timing-function:cubic-bezier(.2,.8,.2,1); } 73% { margin-left:var(--spin-x); margin-top:var(--spin-y); scale:1.07; filter:saturate(1.1) brightness(1.04); animation-timing-function:cubic-bezier(.2,.8,.2,1); } 76% { margin:0; scale:1; filter:saturate(1) brightness(1); } }
@keyframes brand-quick-spin { 0%,68% { transform:rotate(0deg) scale(1); } 69% { transform:rotate(-7deg) scale(.99); animation-timing-function:cubic-bezier(.45,0,.2,1); } 73% { transform:rotate(215deg) scale(1.018); animation-timing-function:cubic-bezier(.16,.8,.28,1); } 76%,100% { transform:rotate(360deg) scale(1); } }
.site-nav { gap: 29px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.nav-actions { gap: 21px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.nav-download { min-height: 36px; gap: 28px; padding: 0 14px; }

.hero { width: min(1080px,calc(100% - 32px)); padding: 76px 64px 0; }
.oc-announcement { min-height: 38px; width: fit-content; max-width: 100%; gap: 12px; margin-bottom: 66px; padding-right: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.22); }
.oc-announcement strong { align-self: stretch; display: flex; align-items: center; padding: 0 10px; }
.oc-announcement span { font-size: 10px; }
.oc-announcement em { margin-left: 5px; font-size: 9px; }
.hero-copy-block { max-width: 850px; }
.hero .eyebrow { color: var(--muted); }
.hero h1 { max-width: 820px; margin: 25px 0 0; font-size: clamp(50px,6vw,72px); font-weight: 520; letter-spacing: -.064em; line-height: .96; }
.hero-copy { max-width: 650px; margin-top: 27px; color: var(--soft); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 13px; line-height: 1.65; }

.quick-download { max-width: 720px; margin-top: 38px; background: rgba(255,255,255,.3); }
.quick-download > div { height: 48px; }
.quick-download-action { min-height: 64px; }
.quick-download-action:hover { background: var(--ink); color: #fff; }
.quick-download-action b { transition: transform .18s ease; }
.quick-download-action:hover b { transform: translateX(3px); }

.hero .product-stage { width: calc(100% + 128px); height: 650px; margin: 90px 0 0 -64px; padding: 54px 46px 42px; border: 0; background-color: #171714; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); }
.hero .stage-label { color: rgba(255,255,255,.42); }
.hero .app-window { border-color: rgba(255,255,255,.22); box-shadow: 0 28px 70px rgba(0,0,0,.32); }

.oc-section { padding: 108px 64px; border-top: 1px solid var(--line); }
.oc-copy { max-width: 820px; }
.oc-copy h2,
.oc-section-head h2 { max-width: 780px; margin: 25px 0 0; font-size: clamp(38px,4.7vw,56px); font-weight: 500; letter-spacing: -.058em; line-height: 1.02; }
.section-intro,
.oc-section-head > p:last-child { max-width: 660px; margin: 25px 0 0; color: var(--soft); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; line-height: 1.7; }

.feature-checklist { max-width: 850px; margin: 54px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.feature-checklist li { min-height: 74px; display: grid; grid-template-columns: 42px 190px minmax(0,1fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--line); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.feature-checklist li b { color: var(--violet); font-size: 11px; font-weight: 500; }
.feature-checklist li strong { font-size: 12px; font-weight: 560; }
.feature-checklist li span { color: var(--soft); font-size: 11px; line-height: 1.55; }
.oc-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; margin-top: 34px; padding: 0 15px; background: var(--ink); color: #fff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.oc-button:hover { background: var(--violet); }

.oc-section-head { max-width: 820px; }
.intelligence-panel { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 14px; margin-top: 60px; padding: 42px; background-color: #171714; background-image: radial-gradient(circle at 12% 0%,rgba(87,56,245,.18),transparent 37%); }
.intelligence-panel .provider-list { width: 100%; height: auto; min-height: 398px; padding: 22px 24px; border: 0; background: var(--surface); box-shadow: none; }
.intelligence-panel .provider-list-head { height: 46px; align-items: center; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; }
.intelligence-panel .model-row { min-height: 59px; grid-template-columns: 31px 1fr 12px; gap: 12px; padding: 0 12px; }
.intelligence-panel .model-row > img { width: 23px; height: 23px; }
.intelligence-panel .model-row strong { font-size: 10px; }
.intelligence-panel .model-row small { font-size: 7px; }
.intelligence-panel .record-card { width: 100%; min-height: 398px; border: 0; background: var(--surface); box-shadow: none; }
.intelligence-panel .record-card header { height: 68px; padding: 0 22px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.intelligence-panel .record-card li { height: 82px; grid-template-columns: 40px 1fr 28px; padding: 0 22px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; }
.intelligence-panel .record-card li.current { background: rgba(87,56,245,.06); }
.intelligence-panel .record-card li.current i,
.intelligence-panel .record-card li.current b { color: var(--violet); }

.figure-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-left: 1px solid var(--line); }
.figure-grid article { min-height: 230px; display: flex; flex-direction: column; padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figure-grid article > span { color: var(--muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; }
.figure-grid article strong { margin-top: 37px; font-size: 20px; font-weight: 500; letter-spacing: -.035em; }
.figure-grid article p { margin: auto 0 0; color: var(--soft); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; line-height: 1.6; }

.oc-process-list { margin: 55px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.oc-process-list li { min-height: 86px; display: grid; grid-template-columns: 60px 1fr; align-items: center; border-bottom: 1px solid var(--line); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.oc-process-list li > b { color: var(--violet); font-size: 10px; font-weight: 500; }
.oc-process-list li > div { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 24px; }
.oc-process-list strong { font-size: 12px; font-weight: 560; }
.oc-process-list span { color: var(--soft); font-size: 10px; line-height: 1.55; }

.faq-list { margin-top: 56px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 30px; cursor: pointer; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--violet); font-size: 18px; font-weight: 300; transition: transform .18s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 680px; margin: -6px 0 28px; color: var(--soft); font-size: 13px; line-height: 1.65; }

.final-section { min-height: 590px; display: flex; align-items: center; background: #ded8ff; }
.final-section h2 { font-size: clamp(54px,7vw,84px); line-height: .91; }
.final-download { width: min(720px,100%); background: rgba(255,255,255,.3); }

.site-footer { padding: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-grid a { min-height: 72px; display: flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--line); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; }
.footer-grid a:last-child { border-right: 0; }
.footer-grid a:hover { background: var(--ink); color: #fff; }
.footer-meta { min-height: 88px; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; }
.footer-signature { position: relative; height: 282px; display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(105deg,var(--paper) 0 66%,rgba(87,56,245,.065) 100%); }
.signature-meta { position: absolute; z-index: 4; top: 19px; right: 22px; left: 22px; display: flex; justify-content: space-between; color: var(--muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.signature-meta span:last-child { color: var(--ink); transition: color .18s ease,transform .18s ease; }
.footer-signature:hover .signature-meta span:last-child { color: var(--violet); transform: translateY(-2px); }
.signature-orbs { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.signature-orbs i { position: absolute; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 3px 7px rgba(37,32,29,.2),inset -1px -2px 3px rgba(0,0,0,.12); animation: signature-orb-play 16s cubic-bezier(.58,0,.22,1) infinite; }
.signature-orbs i:nth-child(1) { --start:3%;--chase:83%;--ring-x:47%;--ring-y:73px;--swap:70%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ff9dd1 15%,#f12d91 46%,#bd0766 100%); }
.signature-orbs i:nth-child(2) { --start:5%;--chase:69%;--ring-x:51%;--ring-y:64px;--swap:14%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ffb27d 15%,#ff6a16 46%,#df3700 100%); }
.signature-orbs i:nth-child(3) { --start:7%;--chase:55%;--ring-x:55%;--ring-y:76px;--swap:84%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#ffe999 15%,#ffc51c 46%,#e59b00 100%); }
.signature-orbs i:nth-child(4) { --start:9%;--chase:41%;--ring-x:55%;--ring-y:101px;--swap:30%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#8ef6dc 15%,#19c7a2 46%,#079276 100%); }
.signature-orbs i:nth-child(5) { --start:11%;--chase:27%;--ring-x:51%;--ring-y:113px;--swap:57%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#96d5ff 15%,#1689ef 46%,#0755be 100%); }
.signature-orbs i:nth-child(6) { --start:13%;--chase:17%;--ring-x:47%;--ring-y:101px;--swap:43%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#bd9dff 15%,#7043e8 46%,#4320ad 100%); animation-name:signature-orb-late; }
.signature-word { position: absolute; right: 18px; bottom: -10px; left: 18px; display: flex; align-items: flex-end; color: var(--ink); font-size: clamp(102px,14.5vw,174px); font-weight: 560; letter-spacing: -.105em; line-height: .74; white-space: nowrap; }
.signature-word b { font-weight: inherit; }
.signature-word b:last-child { color: var(--violet); }
.footer-signature:hover .signature-word b:last-child { color: #4525e7; }
@keyframes signature-orb-play {
  0%,9%,100% { left:var(--start); top:55px; transform:scale(1); }
  25% { left:var(--chase); top:86px; transform:scale(1.08) rotate(230deg); }
  43%,57% { left:var(--ring-x); top:var(--ring-y); transform:scale(1.05) rotate(360deg); }
  73% { left:var(--swap); top:79px; transform:scale(.96) rotate(540deg); }
  89% { left:var(--start); top:55px; transform:scale(1); }
}
@keyframes signature-orb-late {
  0%,17%,100% { left:var(--start); top:55px; transform:scale(1); }
  27% { left:20%; top:91px; transform:scale(.92) rotate(80deg); }
  35% { left:88%; top:66px; transform:scale(1.12) rotate(290deg); }
  43%,57% { left:var(--ring-x); top:var(--ring-y); transform:scale(1.05) rotate(360deg); }
  73% { left:var(--swap); top:79px; transform:scale(.96) rotate(540deg); }
  89% { left:var(--start); top:55px; transform:scale(1); }
}
.footer-signature:hover .signature-orbs i { animation-duration:11s; }

@media (max-width: 800px) {
  .page-shell,.nav-shell,.hero,.site-footer { width: calc(100% - 20px); }
  .nav-shell { height: 64px; padding: 0 20px; grid-template-columns: 1fr auto; }
  .hero { padding: 58px 24px 0; }
  .oc-announcement { margin-bottom: 48px; }
  .hero h1 { font-size: clamp(46px,10vw,68px); }
  .hero .product-stage { width: calc(100% + 48px); height: 610px; margin: 72px 0 0 -24px; padding: 49px 18px 24px; }
  .oc-section { padding: 78px 24px; }
  .feature-checklist li { grid-template-columns: 34px 155px minmax(0,1fr); }
  .intelligence-panel { grid-template-columns: 1fr; padding: 22px; }
  .figure-grid { grid-template-columns: 1fr; }
  .figure-grid article { min-height: 180px; }
  .oc-process-list li > div { grid-template-columns: 180px 1fr; }
  .final-section { min-height: 520px; }
  .footer-meta { gap: 22px; flex-wrap: wrap; padding: 22px 18px; }
  .footer-signature { height: 250px; }
  .signature-word { font-size: clamp(88px,16vw,132px); }
}

@media (max-width: 520px) {
  .hero { padding-top: 44px; }
  .oc-announcement { width: 100%; align-items: center; gap: 8px; margin-bottom: 40px; padding-right: 9px; }
  .oc-announcement span { flex: 1; min-width: 180px; font-size: 9px; line-height: 1.45; }
  .oc-announcement em { width: auto; margin: 0 0 0 42px; padding: 0 0 8px; }
  .hero-moving-mark { margin-bottom: 24px; }
  .hero h1 { font-size: 41px; line-height: .98; }
  .hero-copy { font-size: 11px; }
  .quick-download > div { gap: 0; justify-content: space-between; padding: 0 14px; }
  .quick-download-action { min-height: 58px; padding: 0 14px; font-size: 11px; }
  .quick-download-action b { font-size: 15px; }
  .hero .product-stage { height: 560px; padding: 43px 10px 12px; }
  .oc-section { padding-top: 66px; padding-bottom: 66px; }
  .oc-copy h2,.oc-section-head h2 { font-size: 38px; }
  .feature-checklist li { grid-template-columns: 31px 1fr; gap: 7px; padding: 18px 0; }
  .feature-checklist li span { grid-column: 2; }
  .intelligence-panel { width: calc(100% + 48px); margin-left: -24px; padding: 10px; }
  .intelligence-panel .provider-list,
  .intelligence-panel .record-card { min-height: 360px; }
  .intelligence-panel .record-card li { height: 72px; }
  .oc-process-list li { grid-template-columns: 40px 1fr; padding: 18px 0; }
  .oc-process-list li > div { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid a { border-bottom: 1px solid var(--line); }
  .footer-grid a:nth-child(2n) { border-right: 0; }
  .footer-signature { height: 188px; }
  .signature-meta { right: 14px; left: 14px; }
  .signature-orbs { inset: 0; }
  .signature-orbs i { width: 10px; height: 10px; }
  .signature-word { right: 10px; bottom: -4px; left: 10px; font-size: 19.4vw; }
}

/* PolySwap light spectrum */
:root {
  --paper: #fbfaff;
  --surface: #ffffff;
  --ink: #282238;
  --soft: #6f687c;
  --muted: #9991a5;
  --line: rgba(64,49,105,.16);
  --line-soft: rgba(64,49,105,.08);
  --violet: #5b3df5;
}
body { background: #f1eef8; }
.site-header { background: rgba(251,250,255,.94); }
.site-header.is-scrolled { background: rgba(255,255,255,.97); }
.page-shell,.site-footer { background: var(--paper); }
.skip-link,.nav-download,.oc-announcement strong,.oc-button { border-color: var(--violet); background: var(--violet); color: #fff; }
.nav-download:hover,.oc-button:hover { background: #4727df; }
.button-primary { border-color: var(--violet); background: var(--violet); }
.real-composer > div > i { background: var(--violet); }
.quick-download-action:hover { background: #eeeaff; color: var(--violet); }
.hero .product-stage { background-color: #eeeaff; background-image: radial-gradient(circle at 10% 14%,rgba(236,43,149,.14),transparent 26%),radial-gradient(circle at 87% 15%,rgba(40,137,227,.14),transparent 28%),radial-gradient(circle at 55% 96%,rgba(242,189,30,.13),transparent 30%),repeating-linear-gradient(0deg,rgba(87,56,245,.04) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(87,56,245,.035) 0 1px,transparent 1px 4px); }
.hero .stage-label { color: rgba(61,48,96,.54); }
.hero .app-window { border-color: rgba(87,56,245,.2); box-shadow: 0 28px 70px rgba(75,55,142,.18); }
.intelligence-panel { background-color: #eeeaff; background-image: radial-gradient(circle at 9% 0%,rgba(236,43,149,.13),transparent 34%),radial-gradient(circle at 100% 100%,rgba(40,137,227,.14),transparent 38%); }
.intelligence-panel .provider-list,.intelligence-panel .record-card { border: 1px solid rgba(87,56,245,.12); box-shadow: 0 18px 42px rgba(75,55,142,.08); }
.footer-grid a:hover { background: #eeeaff; color: var(--violet); }
.signature-word { color: rgba(91,61,245,.18); -webkit-text-stroke: 1px rgba(91,61,245,.34); }
.signature-word b:last-child { color: var(--violet); -webkit-text-stroke: 0; }
.footer-signature { background: linear-gradient(105deg,#fbfaff 0 62%,rgba(91,61,245,.1) 100%); }

/* PolySwap harness mascot */
.hero { padding-top:0; }
.hero-intro { position:relative; min-height:660px; display:block; padding:110px 0 92px; overflow:hidden; color:var(--ink); }
.hero-intro .hero-copy-block { position:relative; z-index:4; max-width:760px; }
.hero-intro h1 { max-width:760px; }
.hero-intro .hero-copy { max-width:590px; }
.hero-intro .quick-download { max-width:590px; }
.hero .product-stage { margin-top:0; }

.harness-hero { position:absolute; z-index:2; top:42px; right:-28px; bottom:26px; width:48%; margin:0; overflow:visible; pointer-events:none; }
.collect-orb { position:absolute; z-index:1; width:22px; height:22px; border:0; border-radius:50%; background:radial-gradient(circle at 31% 27%,#fff 0 8%,var(--orb-hi) 14%,var(--orb) 48%,var(--orb-low) 100%); box-shadow:0 0 0 5px rgba(255,255,255,.58),0 10px 24px color-mix(in srgb,var(--orb) 32%,transparent); transition:opacity .16s ease,transform .26s cubic-bezier(.2,.9,.2,1); animation:collect-orb-float 1.6s ease-in-out infinite alternate; }
.collect-orb::after { position:absolute; inset:-11px; border:1px solid color-mix(in srgb,var(--orb) 38%,transparent); border-radius:50%; content:""; animation:orb-ring 1.8s ease-out infinite; }
.collect-orb.is-collected { opacity:0; transform:scale(1.65); animation:none; }
.collect-orb-pink { top:68%; left:18%; --orb:#f12d91; --orb-hi:#ff9dd1; --orb-low:#bd0766; }
.collect-orb-orange { top:35%; left:32%; --orb:#ff6a16; --orb-hi:#ffb27d; --orb-low:#df3700; animation-delay:-.2s; }
.collect-orb-yellow { top:61%; left:48%; --orb:#ffc51c; --orb-hi:#ffe999; --orb-low:#e59b00; animation-delay:-.4s; }
.collect-orb-green { top:27%; left:64%; --orb:#19c7a2; --orb-hi:#8ef6dc; --orb-low:#079276; animation-delay:-.6s; }
.collect-orb-blue { top:55%; left:80%; --orb:#1689ef; --orb-hi:#96d5ff; --orb-low:#0755be; animation-delay:-.8s; }
.collect-orb-violet { top:76%; left:62%; --orb:#7043e8; --orb-hi:#bd9dff; --orb-low:#4320ad; animation-delay:-1s; }
.mascot-runner { --facing:1; position:absolute; z-index:3; top:68%; left:18%; width:184px; height:184px; display:grid; place-items:center; pointer-events:none; transform:translate(-50%,-50%); transition:top .72s cubic-bezier(.22,1,.36,1),left .72s cubic-bezier(.22,1,.36,1); }
.mascot-runner::after { position:absolute; z-index:-1; right:26px; bottom:8px; left:26px; height:15px; border-radius:50%; background:rgba(49,35,88,.13); filter:blur(7px); content:""; animation:mascot-shadow .24s ease-in-out infinite alternate; }
.mascot-runner img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(50,31,106,.2)); transform-origin:50% 86%; animation:mascot-run .24s ease-in-out infinite alternate; }
.harness-hero[data-complete="true"] .mascot-runner img { filter:drop-shadow(0 16px 26px rgba(87,56,245,.34)); animation:mascot-charge .34s ease-in-out infinite alternate; }

@keyframes collect-orb-float { from { transform:translateY(0); } to { transform:translateY(-7px); } }
@keyframes orb-ring { from { opacity:.55; transform:scale(.72); } to { opacity:0; transform:scale(1.28); } }
@keyframes mascot-run { from { transform:translateY(1px) rotate(-2deg) scaleX(var(--facing)); } to { transform:translateY(-8px) rotate(2deg) scaleX(var(--facing)); } }
@keyframes mascot-shadow { from { opacity:.7; transform:scaleX(1); } to { opacity:.4; transform:scaleX(.72); } }
@keyframes mascot-charge { from { transform:translateY(-2px) scaleX(var(--facing)); } to { transform:translateY(-13px) scaleX(var(--facing)); } }

@media (max-width:800px) {
  .hero-intro { min-height:820px; padding:80px 0 56px; }
  .hero-intro .hero-copy-block { max-width:650px; }
  .harness-hero { top:430px; right:0; bottom:20px; width:100%; }
  .mascot-runner { width:160px; height:160px; }
}

@media (max-width:520px) {
  .hero-intro { min-height:790px; padding-top:62px; }
  .hero-intro h1 { font-size:46px; }
  .hero-intro .hero-copy { font-size:12px; }
  .harness-hero { top:470px; }
  .collect-orb { width:18px; height:18px; }
  .mascot-runner { width:132px; height:132px; }
}

/* Restore the original hero composition with the updated PolySwap message. */
.hero { padding:76px 64px 0; }
.hero .product-stage { margin:90px 0 0 -64px; }

@media (max-width:800px) {
  .hero { padding:58px 24px 0; }
  .hero .product-stage { margin:72px 0 0 -24px; }
}

@media (max-width:520px) {
  .hero { padding-top:44px; }
}

/* Cursor-inspired product choreography: one calm surface, continuous work. */
.hero .hero-product-stage { position:relative; height:700px; padding:54px 46px 38px; overflow:hidden; background:#dcd9d0; background-image:radial-gradient(circle at 8% 18%,rgba(255,255,255,.82),transparent 30%),radial-gradient(circle at 92% 14%,rgba(98,76,181,.16),transparent 34%),radial-gradient(circle at 74% 100%,rgba(65,111,132,.16),transparent 38%),linear-gradient(145deg,#e8e4dc 0%,#d7d4cc 48%,#c9ced0 100%); isolation:isolate; }
.hero .hero-product-stage::before { position:absolute; inset:-18%; background:radial-gradient(ellipse at 30% 74%,rgba(255,255,255,.35),transparent 42%),radial-gradient(ellipse at 78% 28%,rgba(255,255,255,.28),transparent 37%); content:""; opacity:.72; transform:translate3d(-1%,0,0) scale(1.05); animation:hero-ambient 18s ease-in-out infinite alternate; }
.hero-product-stage .stage-label { z-index:4; color:rgba(31,29,35,.47); }
.hero-demo-scene { position:relative; z-index:2; height:100%; }
.hero-demo-window { position:absolute; top:0; right:5%; bottom:33px; left:0; overflow:hidden; border:1px solid rgba(39,36,43,.18); border-radius:13px; background:#f7f7f5; box-shadow:0 28px 70px rgba(43,39,52,.19),0 3px 10px rgba(43,39,52,.07); transform:translateY(0); transition:transform 1.1s cubic-bezier(.22,.75,.18,1),box-shadow 1.1s ease; }
.hero-demo-scene[data-phase="complete"] .hero-demo-window { box-shadow:0 34px 82px rgba(43,39,52,.23),0 3px 10px rgba(43,39,52,.07); transform:translateY(-4px); }
.hero-demo-bar { position:relative; height:42px; display:grid; place-items:center; border-bottom:1px solid #deddd9; background:rgba(250,250,248,.96); color:#77737c; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:7px; }
.hero-demo-bar strong { color:#716d75; font-size:7px; font-weight:500; }
.hero-demo-bar > small { position:absolute; right:14px; display:flex; align-items:center; gap:6px; font-size:6px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.hero-demo-bar > small i { width:6px; height:6px; border-radius:50%; background:#aaa6ae; box-shadow:0 0 0 3px rgba(122,117,129,.08); transition:background .4s ease,box-shadow .4s ease; }
.hero-demo-scene[data-phase="explore"] .hero-demo-bar > small i,.hero-demo-scene[data-phase="build"] .hero-demo-bar > small i,.hero-demo-scene[data-phase="handoff"] .hero-demo-bar > small i { background:#6747ff; box-shadow:0 0 0 3px rgba(103,71,255,.11); }
.hero-demo-scene[data-phase="complete"] .hero-demo-bar > small i { background:#168660; box-shadow:0 0 0 3px rgba(22,134,96,.11); }
.hero-demo-lights { position:absolute; left:14px; display:flex; gap:6px; }
.hero-demo-lights i { width:8px; height:8px; border-radius:50%; background:#d4d2cf; }
.hero-demo-lights i:first-child { background:#ff6b63; }.hero-demo-lights i:nth-child(2) { background:#f0be3e; }.hero-demo-lights i:last-child { background:#48bc68; }
.hero-demo-grid { height:calc(100% - 42px); display:grid; grid-template-columns:178px minmax(0,.94fr) minmax(0,1.18fr); background:#f8f8f6; }

.hero-work-list { min-width:0; border-right:1px solid #dfdedb; background:#efefec; }
.hero-work-list > header { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #dfdedb; color:#7d7980; font-size:7px; letter-spacing:.05em; text-transform:uppercase; }
.hero-work-list > header small { min-width:17px; height:17px; display:grid; place-items:center; border:1px solid #d5d3d0; border-radius:50%; color:#8f8b92; font-size:6px; }
.hero-work-list article { min-height:58px; display:grid; grid-template-columns:10px 1fr; gap:8px; align-items:start; padding:13px 13px 10px; border-bottom:1px solid #dfdedb; color:#8f8b92; transition:background .6s ease,color .6s ease; }
.hero-work-list article.active { background:#f8f8f6; color:#36333a; }
.hero-work-list article > i { width:7px; height:7px; margin-top:2px; border:1px solid #aaa6ad; border-radius:50%; }
.hero-work-list article.active > i { border-color:#6747ff; background:#6747ff; box-shadow:0 0 0 3px rgba(103,71,255,.09); }
.hero-work-list article > div { min-width:0; display:grid; gap:5px; }
.hero-work-list strong { overflow:hidden; font-size:7px; font-weight:560; text-overflow:ellipsis; white-space:nowrap; }
.hero-work-list small { overflow:hidden; color:#9e9aa1; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }

.hero-thread { position:relative; min-width:0; overflow:hidden; border-right:1px solid #e1e0dd; background:#fbfbfa; }
.hero-thread-head { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border-bottom:1px solid #e4e3e0; color:#4e4a52; font-size:7px; }
.hero-thread-head small { color:#a09ca3; font-size:6px; font-weight:450; }
.hero-thread-body { position:absolute; inset:44px 0 78px; overflow:hidden; padding:18px 18px 24px; }
.hero-user-request { max-width:92%; margin:0 0 20px auto; padding:10px 11px; border:1px solid #e1dfdc; border-radius:9px; background:#f2f1ef; color:#4c4850; font-size:7px; line-height:1.5; }
.hero-work-response { opacity:.66; transition:opacity .7s ease; }
.hero-demo-scene:not([data-phase="intake"]) .hero-work-response { opacity:1; }
.hero-work-response small { color:#99959c; font-size:5px; }
.hero-work-response p { min-height:40px; margin:7px 0 0; color:#444047; font-size:7px; line-height:1.58; transition:opacity .35s ease,transform .5s ease; }
.hero-work-steps { display:grid; gap:6px; margin:15px 0 0; padding:0; list-style:none; }
.hero-work-steps li { min-height:28px; display:grid; grid-template-columns:10px 1fr auto; gap:7px; align-items:center; padding:0 8px; border:1px solid #ebe9e6; border-radius:6px; color:#98949b; background:rgba(255,255,255,.54); font-size:6px; transition:border-color .55s ease,background .55s ease,color .55s ease,transform .55s cubic-bezier(.22,.75,.18,1); }
.hero-work-steps li i { width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
.hero-work-steps li b { font-size:5px; font-weight:500; }
.hero-work-steps li.active { border-color:rgba(103,71,255,.26); background:rgba(103,71,255,.045); color:#5d40dc; transform:translateX(2px); }
.hero-work-steps li.complete { color:#4f7d6d; }
.hero-work-steps li.complete i { border-color:#168660; background:#168660; box-shadow:inset 0 0 0 2px #fff; }
.hero-file-changes { display:grid; gap:6px; margin-top:10px; opacity:0; transform:translateY(8px); transition:opacity .65s ease,transform .75s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene[data-phase="build"] .hero-file-changes,.hero-demo-scene[data-phase="handoff"] .hero-file-changes,.hero-demo-scene[data-phase="complete"] .hero-file-changes { opacity:1; transform:none; }
.hero-file-changes span { min-height:26px; display:grid; grid-template-columns:13px 1fr auto; align-items:center; gap:6px; padding:0 8px; border:1px solid #e5e3e0; border-radius:5px; background:#fff; color:#625e65; font-size:6px; }
.hero-file-changes i { color:#a09ca3; font-style:normal; }.hero-file-changes b { font-weight:500; }.hero-file-changes em { color:#168660; font-style:normal; }
.hero-composer { position:absolute; right:13px; bottom:12px; left:13px; min-height:58px; padding:10px 11px 8px; border:1px solid #dad7df; border-radius:11px; background:#fff; box-shadow:0 9px 24px rgba(53,43,80,.08); transition:border-color .5s ease,box-shadow .5s ease,transform .6s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene[data-phase="handoff"] .hero-composer { border-color:rgba(103,71,255,.36); box-shadow:0 12px 30px rgba(75,52,155,.13); transform:translateY(-2px); }
.hero-composer > p { margin:0; color:#a7a3aa; font-size:7px; }
.hero-composer > div { display:flex; align-items:center; justify-content:space-between; margin-top:10px; color:#9b979f; font-size:5px; }
.hero-composer > div i { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#252329; color:#fff; font-size:10px; font-style:normal; }

.hero-preview-pane { min-width:0; overflow:hidden; background:#f4f4f1; }
.hero-preview-toolbar { height:44px; display:grid; grid-template-columns:17px 17px minmax(0,1fr) 17px; align-items:center; gap:4px; padding:0 10px; border-bottom:1px solid #e0dfdc; color:#9b979e; font-size:9px; }
.hero-preview-toolbar > div { height:24px; display:flex; align-items:center; gap:7px; padding:0 9px; border:1px solid #dbd9d6; border-radius:999px; background:#fafaf8; }
.hero-preview-toolbar > div i { width:5px; height:5px; border:1px solid #aaa6ad; border-radius:50%; }
.hero-preview-toolbar small { overflow:hidden; color:#aaa6ad; font-size:5px; text-overflow:ellipsis; white-space:nowrap; }
.hero-preview-canvas { position:relative; height:calc(100% - 44px); overflow:hidden; background:#fbfaf7; }
.preview-site-nav { height:40px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid #ebe9e5; color:#78737b; }
.preview-site-nav b { color:#322f35; font-size:7px; }.preview-site-nav span { margin-left:auto; font-size:5px; }.preview-site-nav i { width:25px; height:9px; margin-left:12px; border-radius:999px; background:#322f35; }
.preview-site-copy { padding:40px 34px 25px; opacity:.42; transform:translateY(11px); transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene:not([data-phase="intake"]) .preview-site-copy { opacity:1; transform:none; }
.preview-site-copy small { color:#6747ff; font-size:5px; letter-spacing:.09em; }.preview-site-copy strong { display:block; margin-top:12px; color:#26232a; font-size:24px; font-weight:520; letter-spacing:-.07em; line-height:.93; }.preview-site-copy p { margin:13px 0 0; color:#918d94; font-size:6px; }.preview-site-copy > span { width:70px; height:20px; display:block; margin-top:18px; border-radius:999px; background:#6747ff; }
.preview-site-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 34px 0; }
.preview-site-grid i { height:58px; border:1px solid #e4e1dc; border-radius:6px; background:linear-gradient(145deg,#fff,#f0eeea); opacity:.45; transform:translateY(12px); transition:opacity .8s ease,transform .9s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene[data-phase="build"] .preview-site-grid i,.hero-demo-scene[data-phase="handoff"] .preview-site-grid i,.hero-demo-scene[data-phase="complete"] .preview-site-grid i { opacity:1; transform:none; }
.preview-site-grid i:nth-child(2) { transition-delay:.08s; }.preview-site-grid i:nth-child(3) { transition-delay:.16s; }
.preview-focus-ring { position:absolute; top:110px; left:30px; width:210px; height:66px; border:1px solid rgba(103,71,255,.58); background:rgba(103,71,255,.035); opacity:0; transform:scale(.96); transition:opacity .4s ease,transform .65s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene[data-phase="build"] .preview-focus-ring { opacity:1; transform:scale(1); }
.hero-demo-scene[data-phase="complete"] .preview-focus-ring { border-color:rgba(22,134,96,.42); opacity:.52; transform:translateY(104px) scale(.76); transform-origin:left top; }
.preview-pointer { position:absolute; z-index:3; top:67%; left:70%; width:11px; height:16px; background:#29262c; opacity:0; clip-path:polygon(0 0,0 100%,28% 72%,47% 100%,59% 93%,41% 66%,77% 66%); filter:drop-shadow(0 1px 1px #fff); }
.hero-demo-scene[data-phase="explore"] .preview-pointer { animation:preview-pointer-explore 5.4s cubic-bezier(.22,.72,.18,1) forwards; }
.hero-demo-scene[data-phase="build"] .preview-pointer { animation:preview-pointer-build 6.2s cubic-bezier(.22,.72,.18,1) forwards; }

.hero-work-log { position:absolute; z-index:4; right:0; bottom:0; width:246px; min-height:142px; overflow:hidden; border:1px solid rgba(43,39,48,.2); border-radius:11px; background:rgba(250,250,248,.97); box-shadow:0 24px 54px rgba(43,39,52,.2); opacity:0; transform:translate3d(22px,24px,0) scale(.96); transition:opacity .65s ease,transform .85s cubic-bezier(.22,.75,.18,1); }
.hero-demo-scene[data-phase="handoff"] .hero-work-log,.hero-demo-scene[data-phase="complete"] .hero-work-log { opacity:1; transform:none; }
.hero-work-log header { height:35px; display:flex; align-items:center; justify-content:space-between; padding:0 11px; border-bottom:1px solid #e3e1dd; color:#514d54; font-size:6px; }
.hero-work-log header small { color:#8d8990; font-size:5px; }
.hero-work-log p { height:32px; display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; margin:0; padding:0 11px; border-bottom:1px solid #eceae6; color:#77737a; font-size:6px; opacity:.28; transition:opacity .5s ease,color .5s ease; }
.hero-work-log p i { width:5px; height:5px; border:1px solid #aaa6ad; border-radius:50%; }
.hero-work-log p b { color:#a09ca3; font-size:5px; font-weight:450; }
.hero-demo-scene[data-phase="handoff"] .hero-work-log p:first-of-type,.hero-demo-scene[data-phase="handoff"] .hero-work-log p:nth-of-type(2),.hero-demo-scene[data-phase="complete"] .hero-work-log p { color:#3f6f5f; opacity:1; }
.hero-demo-scene[data-phase="handoff"] .hero-work-log p:first-of-type i,.hero-demo-scene[data-phase="handoff"] .hero-work-log p:nth-of-type(2) i,.hero-demo-scene[data-phase="complete"] .hero-work-log p i { border-color:#168660; background:#168660; box-shadow:inset 0 0 0 1px #fff; }

@keyframes hero-ambient { from { transform:translate3d(-1%,0,0) scale(1.05); } to { transform:translate3d(2%,-1.5%,0) scale(1.09); } }
@keyframes preview-pointer-explore { 0%,10% { opacity:0; transform:translate(44px,42px); } 24% { opacity:1; } 62%,88% { opacity:1; transform:translate(-55px,-46px); } 100% { opacity:0; transform:translate(-55px,-46px); } }
@keyframes preview-pointer-build { 0%,10% { opacity:0; transform:translate(42px,58px); } 22% { opacity:1; } 62%,88% { opacity:1; transform:translate(-88px,20px); } 100% { opacity:0; transform:translate(-88px,20px); } }

@media (max-width:960px) {
  .hero-demo-grid { grid-template-columns:142px minmax(0,1fr) minmax(0,1fr); }
  .hero .hero-product-stage { height:650px; padding-inline:24px; }
  .hero-demo-window { right:3%; }
  .preview-site-copy { padding-inline:24px; }.preview-site-grid { padding-inline:24px; }
}

@media (max-width:760px) {
  .hero .hero-product-stage { height:620px; padding:49px 18px 24px; }
  .hero-demo-window { right:0; bottom:24px; }
  .hero-demo-grid { grid-template-columns:0 minmax(0,1fr) minmax(0,1fr); }
  .hero-work-list { overflow:hidden; border:0; }
  .hero-work-log { right:8px; width:220px; }
}

@media (max-width:520px) {
  .hero .hero-product-stage { height:570px; padding:43px 10px 14px; }
  .hero-demo-window { bottom:0; }
  .hero-demo-grid { grid-template-columns:0 minmax(0,1fr) 0; }
  .hero-preview-pane { overflow:hidden; border:0; opacity:0; }
  .hero-thread { border-right:0; }
  .hero-work-log { right:6px; bottom:6px; width:210px; }
}

/* Real PolySwap application choreography, refined for the hero. */
.hero-copy-block > h1 { margin-top:0; }
.hero .app-product-stage {
  position:relative;
  height:680px;
  padding:52px 46px 38px;
  overflow:hidden;
  border-color:rgba(67,52,103,.1);
  background-color:#ebe9f0;
  background-image:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.9),transparent 31%),
    radial-gradient(circle at 92% 92%,rgba(94,68,204,.09),transparent 36%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.32) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(53,43,77,.018) 0 1px,transparent 1px 5px);
}
.app-product-stage .stage-label { top:19px; right:23px; left:23px; color:rgba(59,49,82,.44); }
.app-product-stage .app-window {
  border:1px solid rgba(50,42,70,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 34px 84px rgba(45,35,69,.18),0 4px 14px rgba(45,35,69,.06);
  transform:translateZ(0);
  transition:box-shadow .9s ease,transform .9s cubic-bezier(.22,.75,.18,1);
}
.app-product-stage .app-window[data-phase="handoff"] { box-shadow:0 38px 92px rgba(75,52,155,.22),0 4px 14px rgba(45,35,69,.06); transform:translateY(-2px); }
.app-product-stage .app-window[data-phase="complete"] { box-shadow:0 38px 92px rgba(34,101,78,.17),0 4px 14px rgba(45,35,69,.06); transform:translateY(-3px); }
.app-product-stage .window-bar { height:43px; border-bottom-color:#eceaef; background:rgba(252,252,252,.96); color:#8f8a94; }
.app-product-stage .window-bar small { display:flex; align-items:center; gap:6px; }
.app-product-stage .window-bar small::before { width:6px; height:6px; border-radius:50%; background:#aaa6ae; box-shadow:0 0 0 3px rgba(122,117,129,.07); content:""; transition:background .4s ease,box-shadow .4s ease; }
.app-product-stage .app-window[data-phase="search"] .window-bar small::before,
.app-product-stage .app-window[data-phase="review"] .window-bar small::before,
.app-product-stage .app-window[data-phase="handoff"] .window-bar small::before,
.app-product-stage .app-window[data-phase="verify"] .window-bar small::before { background:#6747ff; box-shadow:0 0 0 3px rgba(103,71,255,.1); }
.app-product-stage .app-window[data-phase="complete"] .window-bar small::before { background:#168660; box-shadow:0 0 0 3px rgba(22,134,96,.1); }
.app-product-stage .demo-progress { top:42px; height:1px; opacity:.42; background:linear-gradient(90deg,#6747ff,#9b72ff); }
.app-product-stage .real-app-grid { height:calc(100% - 43px); transition:grid-template-columns 1.25s cubic-bezier(.22,.75,.18,1); }
.app-product-stage .app-window[data-mode="browser"] .real-app-grid,
.app-product-stage .app-window[data-mode="work"] .real-app-grid { grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); }
.app-product-stage .real-workspace { background:linear-gradient(180deg,#fff,#fefefe); }
.app-product-stage .demo-back { top:14px; width:27px; height:27px; border-color:#e7e4eb; background:rgba(255,255,255,.84); box-shadow:0 4px 12px rgba(48,40,64,.04); }
.app-product-stage .demo-home-state { inset:44px 0 98px; gap:27px; transition:opacity .5s ease .18s,transform .75s cubic-bezier(.22,.75,.18,1) .12s; }
.app-product-stage .demo-orb { width:68px; height:68px; animation-duration:28s; filter:drop-shadow(0 8px 12px rgba(60,45,91,.08)); }
.app-product-stage .demo-orb i { width:13px; height:13px; box-shadow:inset 0 1px 1px rgba(255,255,255,.68),0 3px 8px rgba(24,20,20,.18); }
.app-product-stage .demo-prompts { gap:9px; }
.app-product-stage .demo-prompts span { padding:8px 13px; border-color:#e7e4ea; background:#fff; color:#7b7680; font-weight:500; box-shadow:0 4px 12px rgba(48,40,64,.025); }
.app-product-stage .demo-work-state { inset:54px 8% 108px; transition:opacity .42s ease,transform .68s cubic-bezier(.22,.75,.18,1); }
.app-product-stage .demo-prior-answer { padding-bottom:16px; border-bottom-color:#efedf1; }
.app-product-stage .demo-user-message { margin-top:24px; margin-bottom:27px; padding:11px 13px; border-color:#e5e2e8; background:#f5f4f6; border-radius:11px; }
.app-product-stage .demo-answer p { max-width:94%; font-size:8px; line-height:1.65; }
.app-product-stage .real-composer {
  right:9%;
  bottom:21px;
  left:9%;
  min-height:78px;
  padding:14px 15px 10px;
  border-color:#ddd8e5;
  border-radius:17px;
  background:rgba(255,255,255,.985);
  box-shadow:0 16px 42px rgba(62,49,91,.1),0 2px 7px rgba(62,49,91,.04);
  transition:border-color .55s ease,box-shadow .7s ease,transform .75s cubic-bezier(.22,.75,.18,1);
}
.app-product-stage .real-composer > p { min-height:14px; color:#aaa6ae; font-size:8px; transition:opacity .35s ease; }
.app-product-stage .real-composer > div { justify-content:flex-end; margin-top:12px; }
.app-product-stage .composer-context { display:flex; align-items:center; gap:7px; margin-right:auto; color:#96919a; }
.app-product-stage .composer-context i { width:6px; height:6px; border-radius:50%; background:#6747ff; box-shadow:0 0 0 3px rgba(103,71,255,.08); }
.app-product-stage .composer-context b { font-size:6px; font-weight:500; }
.app-product-stage .composer-send { width:26px; height:26px; margin-left:8px; background:#252329; box-shadow:0 5px 12px rgba(37,35,41,.16); }
.app-product-stage .app-window[data-phase="handoff"] .real-composer { border-color:rgba(103,71,255,.4); box-shadow:0 18px 46px rgba(75,52,155,.15); transform:translateY(-2px); }
.app-product-stage .app-window[data-phase="handoff"] .composer-context i { animation:context-pulse 1.5s ease-in-out infinite; }
.app-product-stage .app-window[data-phase="complete"] .composer-context i { background:#168660; box-shadow:0 0 0 3px rgba(22,134,96,.08); }
.app-product-stage .real-browser-pane { border-right-color:#ebe8ee; transition:opacity .65s ease,transform 1.05s cubic-bezier(.22,.75,.18,1); }
.app-product-stage .browser-toolbar { height:46px; border-bottom-color:#ebe9ed; background:#fcfcfc; }
.app-product-stage .browser-tabs { height:30px; border-bottom-color:#ebe9ed; background:#fafafa; }
.app-product-stage .browser-canvas { height:calc(100% - 76px); }
.app-product-stage .browser-site { transition:opacity .3s ease,transform .55s cubic-bezier(.22,.75,.18,1),visibility 0s linear .32s; }
.app-product-stage .browser-site img { transition-duration:6.2s; }

@keyframes context-pulse { 0%,100% { opacity:.6; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } }

@media (max-width:800px) {
  .hero .app-product-stage { height:630px; padding:48px 20px 25px; }
  .app-product-stage .app-window[data-mode="browser"] .real-app-grid,
  .app-product-stage .app-window[data-mode="work"] .real-app-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .app-product-stage .real-composer { right:6%; left:6%; }
}

@media (max-width:520px) {
  .hero .app-product-stage { height:570px; padding:43px 10px 14px; }
  .app-product-stage .app-window { border-radius:13px; }
  .app-product-stage .app-window[data-mode="browser"] .real-app-grid,
  .app-product-stage .app-window[data-mode="work"] .real-app-grid { grid-template-columns:0 minmax(0,1fr); }
  .app-product-stage .real-browser-pane { border:0; opacity:0 !important; }
  .app-product-stage .demo-work-state { right:7%; left:7%; }
  .app-product-stage .real-composer { right:5%; left:5%; }
  .app-product-stage .composer-context b { display:none; }
}

/* PolySwap's real idle surface, animated as brand—not as a fake workflow. */
.site-header .brand-mark-image { width:38px; height:38px; flex:0 0 auto; object-fit:contain; }
.hero .real-product-stage {
  position:relative;
  height:680px;
  padding:34px;
  overflow:hidden;
  background-color:#e8e6ed;
  background-image:
    radial-gradient(circle at 14% 4%,rgba(255,255,255,.82),transparent 30%),
    radial-gradient(circle at 90% 96%,rgba(94,72,178,.08),transparent 35%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.27) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(50,43,67,.018) 0 1px,transparent 1px 5px);
}
.polyswap-app-demo {
  position:relative;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(52,47,64,.13);
  border-radius:20px;
  background:#fff;
  box-shadow:0 36px 90px rgba(45,39,60,.2),0 5px 16px rgba(45,39,60,.06);
  isolation:isolate;
}
.polyswap-app-demo::before {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 48%,rgba(103,71,255,.026),transparent 26%);
  opacity:.35;
  content:"";
  animation:app-surface-breathe 14s ease-in-out infinite;
}
.polyswap-app-chrome { position:absolute; z-index:10; top:13px; left:14px; display:flex; gap:7px; }
.polyswap-app-chrome i { width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08); }
.polyswap-app-chrome i:first-child { background:#ff5f57; }
.polyswap-app-chrome i:nth-child(2) { background:#febc2e; }
.polyswap-app-chrome i:last-child { background:#28c840; }
.app-edge-control {
  position:absolute;
  z-index:9;
  top:43px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #e8e5ec;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:#8b8591;
  box-shadow:0 5px 14px rgba(49,42,64,.05);
  font-size:18px;
  line-height:1;
}
.app-edge-control-left { left:12px; }
.app-edge-control-right { right:12px; }
.brand-motion {
  position:absolute;
  z-index:3;
  top:43%;
  left:50%;
  width:92px;
  height:92px;
  transform:translate(-50%,-50%);
  animation:brand-motion-float 14s cubic-bezier(.45,0,.2,1) infinite;
}
.brand-motion-base,
.brand-motion-piece,
.brand-motion-piece img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.brand-motion-base {
  z-index:2;
  filter:drop-shadow(0 9px 13px rgba(50,39,79,.13));
  animation:brand-base-cycle 14s cubic-bezier(.45,0,.2,1) infinite;
}
.brand-motion-piece {
  z-index:3;
  opacity:0;
  filter:drop-shadow(0 8px 10px rgba(50,39,79,.12));
  animation:brand-piece-cycle 14s cubic-bezier(.45,0,.2,1) infinite;
}
.brand-motion-orange { --x:0px; --y:-16px; --x2:7px; --y2:-14px; --r:3deg; clip-path:circle(14% at 50% 23%); }
.brand-motion-yellow { --x:14px; --y:-8px; --x2:16px; --y2:1px; --r:4deg; clip-path:circle(14% at 71% 39%); }
.brand-motion-green { --x:14px; --y:9px; --x2:8px; --y2:15px; --r:3deg; clip-path:circle(14% at 71% 61%); }
.brand-motion-blue { --x:0px; --y:17px; --x2:-7px; --y2:15px; --r:-3deg; clip-path:circle(14% at 50% 78%); }
.brand-motion-purple { --x:-14px; --y:9px; --x2:-16px; --y2:0px; --r:-4deg; clip-path:circle(14% at 29% 61%); }
.brand-motion-pink { --x:-14px; --y:-8px; --x2:-8px; --y2:-15px; --r:-3deg; clip-path:circle(14% at 29% 39%); }
.brand-motion-halo {
  position:absolute;
  z-index:1;
  inset:-19px;
  border:1px solid rgba(103,71,255,.12);
  border-radius:50%;
  opacity:0;
  transform:scale(.68);
  animation:brand-halo-cycle 14s cubic-bezier(.22,.75,.18,1) infinite;
}
.product-composer {
  position:absolute;
  z-index:6;
  right:18%;
  bottom:26px;
  left:18%;
  min-height:84px;
  padding:15px 16px 11px;
  border:1px solid #ded9e7;
  border-radius:18px;
  background:rgba(255,255,255,.985);
  box-shadow:0 17px 46px rgba(63,50,91,.1),0 2px 8px rgba(63,50,91,.04);
  animation:composer-focus-cycle 14s cubic-bezier(.22,.75,.18,1) infinite;
}
.product-composer p { margin:0; color:#aaa6af; font-size:9px; font-weight:480; }
.product-composer > div { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.product-composer-add,
.product-composer-send { display:grid; place-items:center; font-style:normal; }
.product-composer-add { width:23px; height:23px; border:1px solid #e3dfe7; border-radius:50%; color:#7e7884; font-size:14px; }
.product-composer-send { width:28px; height:28px; border-radius:50%; background:#252329; color:#fff; box-shadow:0 6px 14px rgba(37,35,41,.16); font-size:13px; }
.app-motion-cursor {
  position:absolute;
  z-index:12;
  top:24%;
  left:78%;
  width:13px;
  height:19px;
  background:#222027;
  opacity:0;
  clip-path:polygon(0 0,0 100%,29% 72%,48% 100%,60% 93%,42% 66%,78% 66%);
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.9));
  animation:app-cursor-cycle 14s cubic-bezier(.22,.75,.18,1) infinite;
}

@keyframes app-surface-breathe {
  0%,100% { opacity:.22; transform:scale(.98); }
  48% { opacity:.72; transform:scale(1.08); }
}
@keyframes brand-motion-float {
  0%,16%,84%,100% { transform:translate(-50%,-50%) translateY(0) scale(1); }
  38% { transform:translate(-50%,-50%) translateY(-4px) scale(1.035); }
  62% { transform:translate(-50%,-50%) translateY(2px) scale(1.015); }
}
@keyframes brand-base-cycle {
  0%,17%,83%,100% { opacity:1; transform:scale(1) rotate(0); }
  22% { opacity:0; transform:scale(.96) rotate(-2deg); }
  76% { opacity:0; transform:scale(.96) rotate(2deg); }
  82% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes brand-piece-cycle {
  0%,17% { opacity:0; transform:translate(0,0) rotate(0) scale(.96); }
  21% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  35% { opacity:1; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.02); }
  53% { opacity:1; transform:translate(var(--x2),var(--y2)) rotate(var(--r)) scale(1.035); }
  70% { opacity:1; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.01); }
  79% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  83%,100% { opacity:0; transform:translate(0,0) rotate(0) scale(.97); }
}
@keyframes brand-halo-cycle {
  0%,18%,83%,100% { opacity:0; transform:scale(.68); }
  30% { opacity:.72; transform:scale(1); }
  68% { opacity:.22; transform:scale(1.18); }
  80% { opacity:0; transform:scale(1.26); }
}
@keyframes composer-focus-cycle {
  0%,27%,78%,100% { border-color:#ded9e7; box-shadow:0 17px 46px rgba(63,50,91,.1),0 2px 8px rgba(63,50,91,.04); transform:translateY(0); }
  42%,64% { border-color:rgba(103,71,255,.42); box-shadow:0 20px 54px rgba(79,56,160,.15),0 2px 8px rgba(63,50,91,.04); transform:translateY(-2px); }
}
@keyframes app-cursor-cycle {
  0%,13% { top:24%; left:78%; opacity:0; transform:translate(0,0) scale(1); }
  20% { top:24%; left:78%; opacity:1; }
  42% { top:79%; left:61%; opacity:1; transform:translate(0,0) scale(1); }
  47% { top:79%; left:61%; opacity:1; transform:translate(1px,1px) scale(.88); }
  53% { top:79%; left:61%; opacity:1; transform:translate(0,0) scale(1); }
  66% { top:79%; left:61%; opacity:0; }
  100% { top:24%; left:78%; opacity:0; }
}

@media (max-width:800px) {
  .hero .real-product-stage { height:620px; padding:22px; }
  .product-composer { right:12%; left:12%; }
}

@media (max-width:520px) {
  .site-header .brand-mark-image { width:34px; height:34px; }
  .hero .real-product-stage { height:550px; padding:11px; }
  .polyswap-app-demo { border-radius:15px; }
  .brand-motion { top:42%; width:82px; height:82px; }
  .product-composer { right:5%; bottom:18px; left:5%; }
  .app-motion-cursor { display:none; }
}