:root{--navy:#091f3f;--ink:#102645;--muted:#61738b;--blue:#2455a3;--paper:#fbfcfe;--line:#e0e7f0;--ice:#edf2f9;--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-synthesis:none;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:3px}.frame{width:min(1180px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;top:-100px;left:10px;background:#fff;padding:12px}.skip:focus{top:10px}
.site-header{height:91px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:34px;height:34px}.brand-name{width:160px;height:auto}.site-header nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:580}.site-header nav a:hover,.project-link:hover,.stores a:hover{color:var(--blue)}.site-header nav span{color:var(--blue);margin-left:3px}
.intro{padding:120px 0 91px}.eyebrow{font-size:11px;color:#8091a6;letter-spacing:.16em;font-weight:650;margin:0 0 36px}.eyebrow span{margin:0 11px;color:#a1b1c4}.intro h1{font-size:clamp(74px,9.1vw,136px);font-weight:580;letter-spacing:-.077em;line-height:.99;margin:0;color:#102645}.intro h1 span{color:var(--blue)}.intro-bottom{border-top:1px solid var(--line);margin-top:57px;padding-top:19px;display:flex;justify-content:space-between;align-items:center;gap:20px}.intro-rule{width:56px;border-top:1px solid #aec0d5}.intro-bottom a{font-size:13px;font-weight:610;white-space:nowrap}.intro-bottom a span{margin-left:12px;color:var(--blue)}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin:15px 0 23px}.section-heading h2{font-size:25px;letter-spacing:-.04em;font-weight:620;margin:0}.section-heading span{font-size:12px;color:#8b9bb0;letter-spacing:.12em}
.project-feature{display:grid;grid-template-columns:44% 56%;overflow:hidden;border-radius:24px;background:var(--ice);border:1px solid #e1e9f5;min-height:604px}.project-story{padding:43px 48px 44px;display:flex;flex-direction:column}.project-index{margin:0;font-size:10px;font-weight:670;color:#7285a0;letter-spacing:.15em;display:flex;align-items:center;gap:14px}.project-index .line{width:29px;border-top:1px solid #a8b9d1}.app-identity{display:flex;gap:14px;align-items:center;margin:72px 0 22px}.app-identity img{border-radius:14px;width:54px;height:54px;box-shadow:0 5px 17px rgba(6,25,48,.13)}.app-identity>span{font-size:12px;font-weight:590;color:#6e819d}.app-identity>span span{margin:0 6px}.project-story h3{font-size:clamp(45px,5.2vw,73px);letter-spacing:-.064em;line-height:.99;font-weight:620;margin:0 0 28px;color:var(--navy)}.punctuation{color:var(--blue)}.project-description{font-size:16px;line-height:1.65;color:#586d88;max-width:390px;margin:0 0 30px}.project-link{display:inline-flex;align-items:center;gap:24px;font-size:14px;font-weight:635;border-bottom:1px solid #8ba9d0;align-self:flex-start;padding-bottom:10px;margin-top:auto}.project-link span{font-size:17px;color:var(--blue)}.stores{display:flex;gap:22px;flex-wrap:wrap;margin-top:27px;color:#617690;font-size:12px;font-weight:590}
.screens-panel{position:relative;overflow:hidden;background:#081c37;min-height:604px}.screens-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 49%,#193e68 0%,#0e2a4c 47%,#081c37 80%)}.screenshot-stage{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;gap:22px;padding:68px 24px 0}.screenshot{position:relative;z-index:1;flex:0 0 39%;max-width:235px;min-width:0;height:516px;overflow:hidden;margin:0;border-radius:18px 18px 0 0;border:3px solid rgba(180,206,232,.22);border-bottom:0;background:#07182e;box-shadow:0 20px 45px rgba(0,0,0,.28)}.screenshot-left{height:464px;opacity:.84}.screenshot img{width:100%;height:100%;object-fit:cover;object-position:top}.screens-caption{position:absolute;top:30px;right:33px;color:#a4bad3;font-size:10px;letter-spacing:.1em;text-transform:uppercase;z-index:3}
.next-project{display:flex;align-items:center;gap:35px;margin-top:18px;padding:44px 50px;border:1px solid var(--line);border-radius:20px;background:#fff}.next-number{color:#d9e3ef;font-size:95px;letter-spacing:-.09em;line-height:1;font-weight:570;min-width:124px}.next-body{flex:1}.next-kicker{font-size:10px;color:#8595ab;font-weight:700;letter-spacing:.15em;margin:0 0 13px}.next-body h3{font-size:33px;letter-spacing:-.049em;font-weight:630;margin:0 0 9px}.next-body>p:last-child{font-size:14px;margin:0;color:var(--muted)}.next-status{font-size:13px;color:#8193a9;white-space:nowrap}.next-status span{color:var(--blue);margin-left:8px}
.contact{text-align:center;padding:120px 0 125px}.contact p{color:#7b8ba0;margin:0 0 14px;font-size:14px}.contact a{font-size:clamp(27px,3.6vw,47px);font-weight:580;letter-spacing:-.052em}.contact a span{color:var(--blue);font-size:.65em}.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:27px 0 40px;color:#8291a4;font-size:12px;gap:20px}.footer>div{display:flex;gap:24px}.footer a:hover{color:var(--blue)}
@media(max-width:980px){.frame{width:min(100% - 48px,750px)}.intro{padding:88px 0 74px}.intro h1{font-size:clamp(67px,11vw,105px)}.project-feature{grid-template-columns:1fr}.project-story{padding:35px 35px 44px}.app-identity{margin-top:37px}.project-story h3{font-size:64px}.project-link{margin-top:0}.screens-panel{min-height:440px}.screenshot-stage{padding-top:53px}.screenshot{height:415px;max-width:220px}.screenshot-left{height:364px}.next-project{padding:35px}}
@media(max-width:560px){.frame{width:calc(100% - 36px)}.site-header{height:76px}.brand{gap:8px}.brand-mark{width:31px;height:31px}.brand-name{width:138px}.site-header nav{font-size:12px;gap:17px}.intro{padding:78px 0 64px}.eyebrow{font-size:10px;margin-bottom:33px}.intro h1{font-size:clamp(56px,13.1vw,77px)}.intro-bottom{margin-top:43px}.intro-bottom p{font-size:12px}.intro-bottom a{font-size:12px}.section-heading h2{font-size:23px}.project-feature{border-radius:18px}.project-story{padding:28px 26px 34px}.app-identity{margin-top:36px}.app-identity img{width:48px;height:48px}.project-story h3{font-size:60px}.project-description{font-size:15px}.screens-panel{min-height:340px}.screenshot-stage{gap:12px;padding:49px 13px 0}.screenshot{flex-basis:42%;height:316px;border-radius:14px 14px 0 0;border-width:2px}.screenshot-left{height:278px}.screens-caption{top:16px;right:17px;font-size:9px}.next-project{padding:27px 22px;gap:18px}.next-number{font-size:55px;min-width:63px}.next-body h3{font-size:26px}.next-status{display:none}.contact{padding:94px 0}.footer{flex-wrap:wrap}.footer>div{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Narrow phones: preserve spacing without horizontal page overflow. */
@media(max-width:390px){.intro h1{font-size:clamp(43px,12.7vw,56px)}.contact a{font-size:clamp(21px,6vw,27px);overflow-wrap:anywhere}.next-number{font-size:47px;min-width:57px}.next-body h3{font-size:23px}}

/* Shared, restrained two-column site footer. The tagline belongs in the hero. */
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:23px 30px;font-size:12px;line-height:1.6}
.footer-copyright{white-space:nowrap}
.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:25px;flex-wrap:wrap}
.footer-links a{white-space:nowrap;text-decoration:none;color:#687b95}
.footer-links a:hover{color:var(--blue)}
.footer-links a:focus-visible{outline-offset:4px}
@media(max-width:560px){
  .footer{align-items:flex-start;gap:12px;flex-direction:column;padding-block:21px 29px}
  .footer-links{justify-content:flex-start;gap:15px 23px}
}