@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root {
  --paper: #fff;
  --paper-deep: #f7f7fb;
  --ink: #171822;
  --muted: #696b78;
  --orange: #705ce3;
  --lime: #eeeafd;
  --line: #e8e8ef;
  --serif: Figtree, "Segoe UI", Arial, sans-serif;
  --sans: Figtree, "Segoe UI", Arial, sans-serif;
  --mono: Figtree, "Segoe UI", Arial, sans-serif;
  --shell: min(1120px, calc(100vw - 64px));
}

body { background: #fff; color: var(--ink); font-family: var(--sans); line-height: 1.65; }
::selection { background: #dcd4ff; color: #171822; }
.section-shell { width: var(--shell); }
.site-header { position: sticky; max-width: none; height: 78px; min-height: 78px; padding: 0 max(32px, calc((100vw - 1180px)/2)); background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(232,232,239,.82); backdrop-filter: blur(18px); transition: height .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { min-height: 68px; height: 68px; box-shadow: 0 12px 38px rgba(31,26,61,.05); }
.brand { font-size: 15px; font-weight: 650; }
.brand-mark { width: 32px; height: 32px; background: var(--ink); color: #fff; font-size: 9px; }
.site-nav { gap: 28px; }
.site-nav a { color: #4e5060; font-size: 13px; font-weight: 550; }
.site-nav a::after { background: var(--orange); }
.eyebrow, .hero-kicker { margin: 0 0 18px; color: var(--orange); font: 650 10px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 5px rgba(112,92,227,.1); }

.hero { min-height: 0; padding: 92px 0 96px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.55fr); gap: clamp(50px,8vw,120px); align-items: end; overflow: visible; }
.hero-title { max-width: 790px; margin: 0; font: 650 clamp(48px,6vw,76px)/1.05 var(--sans); letter-spacing: -.052em; }
.hero-emphasis { display: inline; margin: 0; color: var(--orange); font-style: normal; }
.hero-intro { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; letter-spacing: -.01em; }
.hero-actions, .feature-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.hero-aside { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#fff,#f8f7fc); }
.hero-aside > p { margin: 0 0 28px; color: var(--muted); font-size: 12px; }
.hero-aside ul { margin: 0; padding: 0; list-style: none; }
.hero-aside li { padding: 13px 0; display: flex; gap: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.hero-aside li span { color: #a29eb8; font-size: 10px; }
.button-link { padding: 12px 17px; border: 1px solid #dcd7f7; border-radius: 9px; background: #fff; color: var(--orange); font: 650 12px var(--sans); letter-spacing: 0; text-transform: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button-link:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 26px rgba(73,53,161,.12); }
.button-primary { border-color: var(--orange); background: var(--orange); color: #fff; }
.button-primary:hover { background: #5f4bce; color: #fff; }
.text-link { color: var(--ink); border-color: #c9c9d3; font: 600 12px var(--sans); letter-spacing: 0; text-transform: none; }
.text-link span { color: var(--orange); }

.work { padding: 96px 0 110px; border-top: 1px solid var(--line); }
.section-heading, .approach .section-heading { margin-bottom: 48px; display: grid; grid-template-columns: .75fr 1.55fr .8fr; gap: 45px; align-items: start; }
.section-heading .eyebrow { margin-top: 9px; }
.section-heading h2 { margin: 0; font: 650 clamp(34px,4vw,50px)/1.12 var(--sans); letter-spacing: -.04em; }
.section-heading > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.feature-card { min-height: 0; display: grid; grid-template-columns: .76fr 1.24fr; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 20px 70px rgba(41,35,73,.07); transition: transform .3s ease, box-shadow .3s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 28px 84px rgba(41,35,73,.1); }
.feature-copy { order: 1; padding: clamp(32px,4vw,54px); justify-content: center; gap: 30px; }
.project-meta { color: #8c8d9a; opacity: 1; font: 600 9px var(--sans); letter-spacing: .09em; }
.project-label { margin-bottom: 12px; color: var(--orange); font: 650 11px var(--sans); letter-spacing: .08em; }
.feature-copy h3 { margin: 0 0 18px; font: 650 clamp(30px,3.8vw,48px)/1.08 var(--sans); letter-spacing: -.045em; }
.feature-copy p:not(.project-label) { margin: 0; color: var(--muted); font-size: 15px; }
.tag-row span { padding: 7px 10px; border: 0; border-radius: 100px; background: #f3f1fc; color: #69627f; font: 550 10px var(--sans); letter-spacing: 0; text-transform: none; }
.feature-actions { margin-top: 0; }
.feature-visual { order: 2; min-height: 880px; padding: 46px 34px 30px; display: grid; grid-template-columns: minmax(260px,390px) minmax(140px,1fr); gap: 28px; align-items: center; justify-content: center; background: radial-gradient(circle at 78% 18%,#fff 0 5%,transparent 22%),linear-gradient(145deg,#f3f0ff,#faf9ff); color: var(--ink); }
.demo-device { width: min(100%,390px); aspect-ratio: 1/2; margin-inline: auto; padding: 10px; border: 1px solid #dcd9e8; border-radius: 42px; background: #181822; box-shadow: 0 28px 60px rgba(35,27,76,.2); transition: transform .35s ease; }
.feature-card:hover .demo-device { transform: translateY(-3px) rotate(-.25deg); }
.device-top { height: 24px; display: grid; place-items: start center; }
.device-top span { display: block; width: 86px; height: 6px; border-radius: 20px; background: #383742; }
.demo-frame-wrap { position: relative; width: 100%; height: calc(100% - 24px); overflow: hidden; border-radius: 31px; background: #f6f3ff; }
.demo-frame-wrap iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .35s ease; }
.is-loaded .demo-frame-wrap iframe { opacity: 1; }
.demo-launch-panel { position: absolute; inset: 0; z-index: 2; padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; background: linear-gradient(165deg,#faf9ff,#ece7ff); transition: opacity .35s ease, visibility .35s ease; }
.is-loaded .demo-launch-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.demo-orbit { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(112,92,227,.14); border-radius: 50%; }
.demo-orbit::before, .demo-orbit::after { content: ""; position: absolute; inset: 34px; border: 1px solid rgba(112,92,227,.12); border-radius: 50%; }
.demo-orbit::after { inset: 72px; background: rgba(255,255,255,.6); }
.demo-logo, .demo-launch-panel > p, .demo-launch-panel > strong, .demo-launch, .demo-status { position: relative; z-index: 1; }
.demo-logo { width: min(190px,72%); height: auto; object-fit: contain; margin-bottom: 24px; }
.demo-overline { margin: 0 0 10px !important; color: var(--orange) !important; font-size: 9px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demo-launch-panel strong { font-size: 24px; letter-spacing: -.03em; }
.demo-launch-panel > p:not(.demo-overline) { max-width: 250px; margin: 10px 0 24px; color: var(--muted); font-size: 13px; }
.demo-launch { padding: 12px 15px; border: 0; border-radius: 9px; background: var(--orange); color: #fff; font: 650 11px var(--sans); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.demo-launch:hover { transform: translateY(-2px); background: #5f4bce; }
.demo-launch:disabled { opacity: .7; cursor: wait; }
.demo-status { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.demo-disclosure { align-self: end; padding: 18px; border: 1px solid rgba(112,92,227,.15); border-radius: 14px; background: rgba(255,255,255,.65); }
.demo-disclosure span { color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.demo-disclosure p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.approach, .about { padding: 100px 0; border-top: 1px solid var(--line); }
.process-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 0; }
.process-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 25px; border: 1px solid var(--line); border-radius: 15px; transition: transform .2s ease, border-color .2s ease; }
.process-list li:hover { transform: translateY(-3px); border-color: #d7d1f5; }
.process-list li::after { display: none; }
.process-number { color: var(--orange); font: 650 10px var(--sans); }
.process-list h3 { margin: 0 0 8px; font: 650 18px var(--sans); }
.process-list p { margin: 0; color: var(--muted); font-size: 14px; }
.about-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; }
.about-title-wrap h2 { margin: 0; font: 650 clamp(34px,4vw,50px)/1.13 var(--sans); letter-spacing: -.04em; }
.about-copy p { color: var(--muted); font-size: 15px; }
.about-copy .about-lead { color: var(--ink); font: 600 22px/1.5 var(--sans); letter-spacing: -.02em; }
.facts-grid { margin-top: 64px; border-color: var(--line); }
.fact-label { color: var(--orange); font: 650 10px var(--sans); letter-spacing: .08em; }
.facts-grid p { font-size: 13px; }
.contact { border-top: 1px solid #e8e4f7; background: #f7f5fd; color: var(--ink); }
.contact-inner { padding: 84px 0 28px; text-align: center; }
.contact .eyebrow { justify-content: center; color: var(--orange); }
.contact h2 { max-width: 760px; margin: 0 auto 30px; font: 650 clamp(38px,5vw,62px)/1.08 var(--sans); letter-spacing: -.045em; }
.contact-email { color: var(--orange); border: 0; font-size: clamp(17px,2vw,22px); }
.contact-footer { margin-top: 70px; border-color: #e2deef; color: #8f8b9d; font: 500 10px var(--sans); letter-spacing: 0; text-transform: none; }

.case-hero { padding: 54px 0 68px; }
.back-link { margin-bottom: 54px; color: var(--muted); font: 600 11px var(--sans); letter-spacing: 0; text-transform: none; }
.case-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.case-title { margin: 0; font: 700 clamp(58px,8vw,94px)/.95 var(--sans); letter-spacing: -.065em; }
.case-title span { color: var(--orange); font-style: normal; }
.case-deck { margin: 0 0 6px; color: var(--muted); font: 500 clamp(20px,2.3vw,28px)/1.45 var(--sans); letter-spacing: -.025em; }
.case-facts { margin-top: 54px; padding: 22px 0; border-color: var(--line); }
.case-facts span { font-family: var(--sans); }
.case-demo-section { padding: 86px 0; border-top: 1px solid var(--line); background: #f8f7fc; }
.case-demo-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(320px,1.2fr); gap: clamp(50px,9vw,130px); align-items: center; }
.case-demo-copy h2, .case-section h2 { margin: 0; font: 650 clamp(34px,4.2vw,52px)/1.1 var(--sans); letter-spacing: -.045em; }
.case-demo-copy > p:not(.eyebrow) { margin: 22px 0; color: var(--muted); }
.case-note { margin: 28px 0; padding: 18px; display: block; border: 1px solid #e1ddf2; border-left: 3px solid var(--orange); border-radius: 10px; background: #fff; }
.case-note strong { font: 700 10px var(--sans); letter-spacing: .08em; }
.case-note p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.case-demo-visual { display: grid; place-items: center; }
.demo-device-case { max-width: 390px; }
.case-section { padding: 94px 0; border-color: var(--line); }
.case-section-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; }
.case-section-copy > p:first-child { font: 600 22px/1.55 var(--sans); letter-spacing: -.02em; }
.case-section-copy p { color: var(--muted); }
.case-section-tinted { background: #fbfaff; }
.principle-list { margin-top: 30px; }
.principle-list article { padding: 22px 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; border-top: 1px solid var(--line); }
.principle-list span { grid-row: 1/3; color: var(--orange); font-size: 10px; font-weight: 700; }
.principle-list h3 { margin: 0; font-size: 17px; }
.principle-list p { margin: 5px 0 0; font-size: 13px; }
.case-outro { padding: 88px 0; background: var(--ink); color: #fff; }
.case-outro h2 { max-width: 760px; margin: 0 0 34px; font: 650 clamp(38px,5vw,62px)/1.08 var(--sans); letter-spacing: -.045em; }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --shell: calc(100vw - 40px); }
  .site-header { padding-inline: 20px; }
  .hero { grid-template-columns: 1fr; gap: 46px; padding: 76px 0; }
  .hero-aside { max-width: 520px; }
  .section-heading, .approach .section-heading { grid-template-columns: 1fr; gap: 8px; }
  .section-heading > p:last-child { max-width: 560px; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-visual { min-height: 840px; }
  .case-hero-grid, .case-demo-grid, .case-section-grid { grid-template-columns: 1fr; gap: 42px; }
  .case-deck { max-width: 650px; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100vw - 32px); }
  .site-header { height: 68px; min-height: 68px; gap: 14px; }
  .brand-mark { display: none; }
  .brand-name { display: block; font-size: 13px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 11px; }
  .site-nav a:nth-child(2) { display: none; }
  .hero { padding: 62px 0 68px; }
  .hero-title { font-size: 43px; }
  .hero-intro { font-size: 16px; }
  .hero-actions, .feature-actions { align-items: flex-start; flex-direction: column; }
  .work, .approach, .about { padding: 72px 0; }
  .section-heading h2 { font-size: 34px; }
  .feature-card { border-radius: 20px; }
  .feature-copy { padding: 30px 24px; }
  .feature-visual { min-height: 770px; padding: 28px 16px; grid-template-columns: 1fr; }
  .demo-disclosure { width: min(100%,390px); margin-inline: auto; }
  .process-list { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .facts-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 46px; }
  .contact h2 { font-size: 38px; }
  .contact-footer { gap: 4px; flex-direction: column; }
  .case-hero { padding-top: 42px; }
  .case-facts { grid-template-columns: 1fr 1fr; gap: 22px; }
  .case-demo-section, .case-section, .case-outro { padding: 68px 0; }
  .case-demo-copy h2, .case-section h2 { font-size: 35px; }
}

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

[id] { scroll-margin-top: 88px; }

/* The supplied prototype already includes its own phone. Show it only once. */
.demo-device,.demo-device-case{width:100%;max-width:466px;aspect-ratio:auto;padding:0;border:0;border-radius:18px;background:transparent;box-shadow:none;transform:none!important}
.device-top{display:none}
.demo-frame-wrap{height:938px;border-radius:16px;background:#f8f9fc}
.demo-frame-wrap iframe{width:466px;height:938px;max-width:none;transform-origin:top left;background:#faf9f5}
.demo-launch-panel{padding:30px 24px}
.demo-launch{max-width:100%;white-space:normal}

.demo-launch-panel.has-poster{padding:0;display:block;overflow:hidden;background:#f6f5fa}
.demo-poster{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.demo-poster-action{position:absolute;bottom:0;left:0;right:0;padding:60px 20px 24px;text-align:center;background:linear-gradient(transparent,#f7f6fc 40%)}
.demo-poster-action p{font-size:12px;margin:10px 0 0;color:#55566a}
.demo-poster-action .demo-launch{margin:auto}

@media(min-width:901px){.demo-device,.demo-device-case{max-width:min(466px,calc((100svh - 130px)*0.4968))}.feature-visual{min-height:650px}}


/* Shared controls use one scale on the homepage and case. */
.button-link,.demo-launch,.hero-actions .text-link,.feature-actions .text-link,.case-demo-copy>.text-link{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:13px 22px;border-radius:14px;
  font:600 15px/1.35 var(--sans);letter-spacing:0;text-decoration:none;white-space:normal;cursor:pointer;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;border:1px solid #ddd9ef;
}
.hero-actions .text-link,.feature-actions .text-link,.case-demo-copy>.text-link{background:#fff;color:#343144}
.hero-actions .text-link:hover,.feature-actions .text-link:hover,.case-demo-copy>.text-link:hover{background:#f5f2ff;border-color:#ad9eeb;transform:translateY(-2px)}
.button-link span,.text-link span,.demo-launch span{font-size:19px;line-height:1;flex-shrink:0}
.button-primary,.demo-launch{background:#6553d9;border-color:#6553d9;color:#fff;box-shadow:0 5px 15px #6553d919}
.button-primary:hover,.demo-launch:hover{background:#5140c4;border-color:#5140c4;box-shadow:0 8px 22px #6553d929}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #9a89eb;outline-offset:5px}
.hero-actions,.feature-actions{gap:12px}
.site-nav a{min-height:42px;display:inline-flex;align-items:center}
.demo-frame-wrap{overflow:hidden;contain:layout paint}
.demo-frame-wrap iframe{display:block;border:0}
.case-note{padding:16px 18px}
.case-note p{margin:0;font-size:14px}
.case-note strong{font-size:12px}
.case-hero{padding-bottom:48px}
.case-demo-section,.case-section{padding-block:64px}
.case-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.journey-stop{padding:24px;background:white;border:1px solid var(--line);border-radius:18px}
.journey-stop svg{width:28px;height:28px;stroke:#6b54d7;fill:none;stroke-width:1.7;margin-bottom:18px}
.journey-stop h3{font-size:20px;margin:0 0 8px;letter-spacing:-.025em}
.journey-stop p{font-size:15px;color:var(--muted);margin:0}
@media(max-width:700px){.case-journey{grid-template-columns:1fr 1fr}.journey-stop{padding:20px}.hero-actions,.feature-actions{align-items:stretch}.hero-actions>a,.feature-actions>a{width:100%}.case-demo-copy>.text-link{max-width:100%}}
@media(prefers-reduced-motion:reduce){.button-link,.demo-launch,.hero-actions .text-link,.feature-actions .text-link{transition:none}}

.screen-capture{position:absolute;left:6.866%;top:3.412%;width:86.266%;height:93.177%;overflow:hidden;border-radius:12% / 5.5%;z-index:1;box-shadow:0 15px 45px #302d501f;pointer-events:none}
.screen-capture img{position:absolute;width:190.099%;height:127.397%;left:-42.079%;top:-14.384%;max-width:none;object-fit:fill}
.portfolio-demo.is-loaded .screen-capture{opacity:0;visibility:hidden}
.demo-poster-action{z-index:2}
.demo-launch-panel.has-poster{background:linear-gradient(155deg,#edf0f9,#f8f7ff)}
.demo-launch-panel.has-poster .screen-capture{z-index:0}

.site-header .site-nav a{font-size:14px}.eyebrow,.hero-kicker{font-size:11px;letter-spacing:.11em}.brand-name{font-size:16px}.tag-row span{font-size:12px}.case-facts span,.fact-label{font-size:11px}
@media(max-width:620px){.site-header .site-nav a{font-size:12px}.brand-name{font-size:13px}}


:root{--shell:min(1120px,calc(100% - 64px))}
@media(max-width:900px){:root{--shell:calc(100% - 40px)}}
@media(max-width:620px){:root{--shell:calc(100% - 32px)}.site-header .site-nav a:nth-child(2){display:inline-flex}.site-header{padding-inline:16px}.site-nav{align-items:center}}


.direct-contact{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:24px}
.direct-contact>a{color:#e1dcff;font-size:18px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.direct-contact button{background:#ffffff12;border:1px solid #ffffff40;border-radius:10px;padding:10px 15px;min-height:44px;color:#fff;font:500 14px var(--sans);cursor:pointer}
.direct-contact button:hover{background:#ffffff24}
.direct-contact [role=status]{color:#b8eddb;font-size:14px}
@media(max-width:620px){.direct-contact>a{font-size:16px;width:100%}}

.about-grid{grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:center;gap:clamp(36px,7vw,100px)}
.portrait-card{margin:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#faf9ff;box-shadow:0 20px 50px #2821440d}
.portrait-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.portrait-card figcaption{padding:19px 22px;font-size:18px;font-weight:600;line-height:1.5}
.portrait-card figcaption span{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:400}
.about-copy h2{font:600 clamp(36px,4vw,54px)/1.12 var(--sans);letter-spacing:-.04em;margin:0 0 24px}
@media(max-width:700px){.about-grid{grid-template-columns:1fr;gap:32px}.portrait-card{max-width:340px;margin-inline:auto}.about-copy{max-width:none}}