html{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout concept: quiet and spacious. One idea per section, large serif headlines, hairlines instead of boxes, a single blue accent. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#111214; --muted:#5F6368; --line:#E6E7EA;
  --accent:#2347F5; --on-accent:#FFFFFF; --accent-soft:#EDF1FF; --tint:#F1F1F3;
  --deep:#111214; --on-deep:#F3F5F9; --deep-muted:#A3ACBD; --accent-on-deep:#8FA4FF;
  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gap:clamp(72px,11vw,136px);
}
 *{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-0.015em;text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:clamp(2.6rem,7vw,5rem);line-height:1.02}
h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08}
h1 em,h2 em{color:var(--accent)}
h3{font-size:1.1rem;font-weight:600;line-height:1.35;letter-spacing:-0.01em}
.label{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.lead{font-size:1.15rem;color:var(--muted);max-width:52ch}
.sample{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);padding:1px 7px;border-radius:4px;vertical-align:middle}
.notice{border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem}
.notice .wrap{padding-block:9px}

.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:26px}
.brand{font-family:var(--display);font-size:1.6rem;text-decoration:none;line-height:1}
.nav ul{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:.92rem;font-weight:500}
.nav ul a{text-decoration:none;color:var(--muted);padding-block:4px;border-bottom:1.5px solid transparent}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.btn{display:inline-block;font:600 .95rem var(--body);padding:14px 26px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost:hover{border-color:var(--ink);filter:none}
.more{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px;white-space:nowrap}

.sec{padding-top:var(--gap)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 32px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head div{display:flex;flex-direction:column;gap:14px;max-width:22em}
.page-head{padding-top:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:18px;max-width:46em}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:center;padding-top:clamp(24px,5vw,64px)}
.hero-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start;min-width:0}
.status{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--muted)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.portrait{position:relative;justify-self:end;width:100%;max-width:400px}
.portrait .frame{aspect-ratio:4/5;max-width:100%;border-radius:6px;background:var(--tint);overflow:hidden;}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait .sample{position:absolute;top:14px;left:14px}

.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 40px;padding-block:28px;border-block:1px solid var(--line);margin-top:var(--gap)}
.logos span.l{font-weight:700;font-size:1rem;color:var(--muted);opacity:.7;letter-spacing:-0.01em}

/* services list */
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,80px)}
.svc-list li{display:flex;flex-direction:column;gap:6px;padding-block:26px;border-top:1px solid var(--line);min-width:0}
.svc-list p{color:var(--muted);font-size:.97rem}
.svc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(32px,6vw,80px);padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.svc-row h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.svc-row .d{display:flex;flex-direction:column;gap:20px;min-width:0}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:.95rem;font-weight:500}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

/* work */
.filters{display:flex;flex-wrap:wrap;gap:6px 26px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.filters button{font:500 .95rem var(--body);padding:0 0 12px;border:0;border-bottom:1.5px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,64px) clamp(24px,4vw,40px)}
.card{display:flex;flex-direction:column;gap:8px;min-width:0}
.thumb{aspect-ratio:4/3;max-width:100%;border-radius:6px;position:relative;overflow:hidden;background:var(--tint);margin-bottom:12px}
.thumb.b{background:var(--accent-soft)}
.thumb.c{background:var(--deep)}
.thumb .win{position:absolute;left:14%;right:14%;top:20%;bottom:-6%;background:var(--surface);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:22px;display:flex;flex-direction:column;gap:10px}
.thumb .win i{display:block;height:8px;border-radius:4px;background:var(--line)}
.thumb .win i:first-child{width:48%;height:12px;background:var(--ink)}
.thumb .win i:nth-child(2){width:72%}
.thumb .win i:nth-child(3){width:26%;height:22px;border-radius:11px;background:var(--accent);margin-top:6px}
.card h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.15;letter-spacing:-0.01em}
.card p{color:var(--muted);font-size:.97rem}
.card .res{color:var(--ink);font-weight:600}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:36px}
.nums b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px}
.nums span{font-size:.92rem;color:var(--muted)}

/* testimonial */
.quote{max-width:46em}
.quote blockquote{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.2;letter-spacing:-0.01em}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:.95rem;font-weight:600}
.quote figcaption span{display:block;color:var(--muted);font-weight:400}
.avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--tint);color:var(--muted);display:grid;place-items:center;font-weight:600;font-size:.82rem}
.pager{display:flex;align-items:center;gap:12px;margin-top:36px}
.pager button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer}
.pager button:hover{border-color:var(--ink)}
.pager span{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,80px);align-items:start;padding-top:clamp(40px,6vw,72px)}
.about .story{display:flex;flex-direction:column;gap:20px;max-width:34em}
.about .story p:first-child{font-size:1.2rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px)}
.two > div{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ink);padding-top:22px;min-width:0}
.two ul{margin-top:14px}
.two li{padding-block:11px;border-top:1px solid var(--line);font-size:.97rem;font-weight:500}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--accent)}
.steps p{color:var(--muted);font-size:.95rem}

/* experience */
.tl li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 40px;padding-block:clamp(32px,4vw,44px);border-top:1px solid var(--line)}
.tl .when{font-size:.9rem;font-weight:500;color:var(--muted);padding-top:8px;font-variant-numeric:tabular-nums}
.tl .what{display:flex;flex-direction:column;gap:6px}
.tl h3{font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1.15}
.tl .org{font-weight:600;font-size:.95rem}
.tl p{color:var(--muted);max-width:38em;margin-top:6px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);padding-top:clamp(40px,6vw,72px);align-items:start}
.contact .side{display:flex;flex-direction:column;gap:28px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font-family:var(--display);font-size:1.5rem;user-select:all;overflow-wrap:anywhere}
.mail button{font:600 .8rem var(--body);padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.side dl div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:12px;font-size:.95rem}
.side dt{color:var(--muted)}
.side dd{font-weight:500}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
form label{display:flex;flex-direction:column;gap:8px;font-size:.85rem;font-weight:600}
form .full{grid-column:1/-1}
input,select,textarea{font:400 1rem var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:13px 14px;width:100%}
textarea{min-height:150px;resize:vertical}
#form-note{font-size:.9rem;color:var(--muted)}

.cta-band{background:var(--deep);color:var(--on-deep);border-radius:8px;padding:clamp(40px,7vw,88px);margin-top:var(--gap);display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.cta-band h2{max-width:14em}
.cta-band p{color:var(--deep-muted);max-width:40ch}
footer .wrap{padding-block:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:.85rem;color:var(--muted)}

@media (max-width:860px){
  .hero,.about,.contact,.svc-row{grid-template-columns:minmax(0,1fr)}
  .portrait{justify-self:start;max-width:280px}
  .nums,.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .tl li{grid-template-columns:minmax(0,1fr)}
  .nav ul{gap:4px 20px}
}
@media (max-width:560px){
  .svc-list,.work-grid,.two,.ticks,form{grid-template-columns:minmax(0,1fr)}
  .logos{justify-content:flex-start}
}

.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.case{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);padding-bottom:var(--gap)}
.case img{display:block;width:100%;border-radius:6px}
.case-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(32px,6vw,80px)}
.case-body .t{display:flex;flex-direction:column;gap:14px}
.case-body .d{display:flex;flex-direction:column;gap:20px;min-width:0}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,40px)}
.gallery figure{display:flex;flex-direction:column;gap:10px;min-width:0}
.gallery img{aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-size:.9rem;color:var(--muted)}
@media (max-width:860px){.case-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.gallery{grid-template-columns:minmax(0,1fr)}}

.stats{background:var(--deep);color:var(--on-deep);border-radius:6px;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.stats .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-muted)}
.stats ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.stats li{border-top:1px solid var(--deep-muted);padding-top:20px;min-width:0}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stats li:last-child b{color:var(--accent-on-deep)}
.stats span{font-size:.95rem;color:var(--deep-muted)}
.thumb .mini{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8%;color:var(--on-deep)}
.thumb .mini b{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1}
.thumb .mini span{font-size:.9rem;color:var(--deep-muted)}
@media (max-width:700px){.stats ul{grid-template-columns:minmax(0,1fr)}}

.mp,.thumb.mpt{background-color:#000;background-image:repeating-linear-gradient(-56deg,transparent 0 78px,rgba(255,255,255,.09) 78px 79px);color:#fff;position:relative;overflow:hidden}
.mp::after,.thumb.mpt::after{content:"";position:absolute;right:0;bottom:0;background:#F8D24B;clip-path:polygon(100% 0,100% 100%,0 100%)}
.mp{padding-bottom:clamp(96px,13vw,168px)}
.mp::after{width:36%;height:clamp(84px,12vw,150px)}
.mp .top{align-items:center;color:#B5B5B5}
.mp-logo{height:clamp(26px,3.4vw,38px);width:auto;display:block}
.case .mp .mp-logo{width:auto;max-width:60%;border-radius:0;flex:none}
.mp li{border-top-color:rgba(255,255,255,.28)}
.mp span{color:#B5B5B5}
.mp li:last-child b{color:#F8D24B}
.thumb.mpt::after{width:46%;height:42%}
.thumb.mpt .mp-logo{position:absolute;top:9%;left:8%;height:clamp(18px,2.6vw,28px);width:auto;border-radius:0}
.thumb.mpt .mini{max-width:66%;color:#fff;z-index:1}
.thumb.mpt .mini b{color:#F8D24B}
.thumb.mpt .mini span{color:#B5B5B5}

.hero{align-items:center;padding-top:clamp(48px,7vw,96px);grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px)}
.hero .portrait{max-width:420px;justify-self:end;aspect-ratio:4/5}
.hero .portrait::before{content:"";position:absolute;inset:0;border-radius:6px;background:radial-gradient(95% 75% at 50% 105%,rgba(35,71,245,.6),transparent 70%),var(--deep)}
.hero .portrait .frame{position:absolute;inset:0;aspect-ratio:auto;background:none;border-radius:0;overflow:visible;clip-path:inset(-25% 0 0 0 round 0 0 6px 6px)}
.hero .portrait img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:122%;width:auto;max-width:none;object-fit:contain}
.hero .chip{white-space:nowrap;position:absolute;left:-32px;bottom:36px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 18px;box-shadow:0 14px 34px rgba(11,18,32,.14);font-size:.82rem;color:var(--muted);line-height:1.35}
.hero .chip b{display:block;font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1.1;color:var(--ink)}
.empty{padding-block:48px var(--gap);color:var(--muted);font-size:1.05rem}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .portrait{justify-self:start;width:100%;max-width:320px;margin-top:56px}
  .hero .chip{left:auto;right:-16px;bottom:24px}
}

.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(32px,6vw,80px)}
.groups > div{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.groups .stack{font-size:.82rem;color:var(--accent);font-weight:600}
.groups ul{margin-top:10px;display:flex;flex-direction:column;gap:8px;font-size:.95rem;color:var(--muted)}
.groups li{padding-left:16px;position:relative}
.groups li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1.5px;background:var(--muted)}
.techs{display:flex;flex-wrap:wrap;gap:8px}
.techs li{font-size:.85rem;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:5px 13px}
@media (max-width:700px){.groups{grid-template-columns:minmax(0,1fr)}}

.stage{background:var(--tint);border-radius:6px;padding:clamp(28px,5vw,60px) clamp(16px,4vw,56px) 0;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.stage i{display:block;font-style:normal}
.browser{flex:0 1 660px;min-width:0;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 24px 60px rgba(11,18,32,.10);transition:opacity .4s ease}
.browser .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.browser .bar span{flex:0 1 220px;height:16px;border-radius:8px;background:var(--tint);margin-left:10px}
.browser .page{padding:clamp(14px,2.4vw,24px);display:flex;flex-direction:column;gap:clamp(12px,2vw,20px)}
.w-nav{display:flex;align-items:center;gap:12px}
.w-nav i{height:7px;width:34px;border-radius:4px;background:var(--line)}
.w-nav i:first-child{width:64px;height:10px;background:var(--ink);margin-right:auto}
.w-nav i:last-child{width:58px;height:20px;border-radius:10px;background:var(--accent)}
.w-head i{height:8px;width:36%;border-radius:4px;background:var(--line);margin-top:8px}
.w-head i:first-child{height:14px;width:58%;background:var(--ink);margin-top:0}
.w-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,14px)}
.w-cards div{border:1px solid var(--line);border-radius:8px;overflow:hidden;padding-bottom:12px}
.w-cards i{height:6px;border-radius:3px;background:var(--line);margin:8px 10px 0;width:50%}
.w-cards i:first-child{height:auto;aspect-ratio:16/10;width:auto;margin:0 0 4px;border-radius:0;background:var(--accent-soft)}
.w-cards i:nth-child(2){width:70%;background:var(--muted)}
.phone{flex:0 0 clamp(104px,20%,180px);margin-left:-7%;aspect-ratio:9/16.5;background:var(--surface);border:6px solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 24px 60px rgba(11,18,32,.22);overflow:hidden;position:relative;z-index:1;display:flex;flex-direction:column;transform-origin:bottom center;transition:transform .4s ease,opacity .4s ease}
.phone .map{flex:1;background:var(--accent-soft);position:relative}
.phone .map i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.55}
.phone .map i.pin{width:14px;height:14px;background:var(--accent);opacity:1;animation:pin 2.2s ease-out infinite}
.phone .sheet{background:var(--surface);border-radius:14px 14px 0 0;margin-top:-14px;position:relative;padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px}
.phone .sheet i{height:6px;border-radius:3px;background:var(--line);width:60%}
.phone .sheet i:first-child{width:28px;height:4px;align-self:center;margin-bottom:2px}
.phone .sheet i:nth-child(2){height:10px;width:74%;background:var(--ink)}
.phone .sheet i:last-child{width:100%;height:24px;border-radius:12px;background:var(--accent);margin-top:4px}
@keyframes pin{0%{box-shadow:0 0 0 0 rgba(35,71,245,.45)}100%{box-shadow:0 0 0 18px rgba(35,71,245,0)}}
.stage[data-focus="mobile"] .phone{transform:scale(1.14)}
.stage[data-focus="mobile"] .browser{opacity:.5}
.stage-note{font-size:.8rem;color:var(--muted);margin-top:-12px}
.areas-nav{display:flex;flex-wrap:wrap;gap:6px 26px;border-bottom:1px solid var(--line)}
.areas-nav button{font:500 .95rem var(--body);padding:0 0 12px;border:0;border-bottom:1.5px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);cursor:pointer}
.areas-nav button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(32px,6vw,80px);padding-top:8px}
.area .stack{font-size:.85rem;color:var(--accent);font-weight:600;margin-top:8px}
.area ul{display:flex;flex-direction:column}
.area li{padding-block:13px;border-bottom:1px solid var(--line);font-size:.97rem}
.area li:first-child{padding-top:0}
.thumb .ph{position:absolute;right:9%;bottom:-10%;width:19%;aspect-ratio:9/16;background:var(--surface);border:4px solid var(--ink);border-radius:14px}
@media (max-width:860px){.area{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.phone .map i.pin{animation:none}.phone,.browser{transition:none}}

.term{flex:0 1 430px;min-width:0;margin-right:-6%;position:relative;z-index:2;background:#0B1220;color:#D7DEEA;border-radius:10px 10px 0 0;box-shadow:0 24px 60px rgba(11,18,32,.28);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(.66rem,1.2vw,.82rem);line-height:1.75}
.term .tbar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid #1E2740;color:#8B95A8;font-size:.92em}
.term .tbar i{width:8px;height:8px;border-radius:50%;background:#2A3350}
.term .tbar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term .tbody{padding:14px 16px 18px;min-height:12.6em;white-space:nowrap;overflow:hidden}
.term .tl{display:block}
.term .p{color:#8FA4FF}
.term .ok{color:#5BD6A3}
.term .dim{color:#8B95A8}
.term .cur{display:inline-block;width:.55em;height:1.05em;background:#D7DEEA;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stage .browser{flex:0 1 520px}
.stage[data-focus="api"] .browser,.stage[data-focus="quality"] .browser{opacity:.5}
@media (max-width:560px){.stage .browser{display:none}.term{flex:1 1 0;margin-right:10px}.term .tbody{padding:12px 12px 16px}.phone{flex:0 0 88px;margin-left:0}}
@media (prefers-reduced-motion:reduce){.term .cur{animation:none}}

.stage .browser .page{height:clamp(190px,23vw,270px);overflow:hidden;padding-left:clamp(36px,5vw,60px);padding-right:clamp(48px,8vw,104px)}
.term{margin-right:-3%}
.scene{display:flex;flex-direction:column;gap:clamp(8px,1.3vw,14px)}
.ui{font-family:var(--body);font-size:clamp(.56rem,1vw,.74rem);line-height:1.4;color:var(--ink)}
.ui p{margin:0}
.ui .r{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.ui .mut{color:var(--muted)}
.ui .pill{background:var(--accent);color:var(--on-accent);border-radius:99px;padding:3px 11px;font-weight:600}
.ui .chip{border:1px solid var(--line);border-radius:99px;padding:1px 9px;color:var(--muted);white-space:nowrap}
.ui .good{color:#1FA67A;font-weight:600}
.ui .big{font-family:var(--display);font-size:2em;line-height:1.1}
.ui .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ui .box{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.ui .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ui .cards > div{display:flex;flex-direction:column;gap:4px}
.ui .img{aspect-ratio:16/9;border-radius:6px;background:linear-gradient(135deg,var(--accent-soft),var(--accent))}
.ui .img.b{background:linear-gradient(135deg,#F7D24A,#F08A4B)}
.ui .img.c{background:linear-gradient(135deg,#5BD6A3,#1E7566)}
.ui .rows > div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.ui .link{color:var(--accent);font-weight:600;font-size:1.15em}
.ui .flow{display:flex;align-items:center;gap:8px}
.ui .flow .box{flex:1;min-width:0}
.ui .flow .ar{color:var(--muted)}
.stage .b1,.stage .b2,.stage .b3,.stage .b4{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.stage:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .b1,
.stage:is([data-step="2"],[data-step="3"],[data-step="4"]) .b2,
.stage:is([data-step="3"],[data-step="4"]) .b3,
.stage[data-step="4"] .b4{opacity:1;transform:none}
.pscreen{flex:1;min-height:0;display:flex;flex-direction:column;font-size:clamp(.44rem,.78vw,.6rem)}
.pscreen.pad{padding:12px 10px;gap:8px}
.pscreen .map{min-height:40%}
.pscreen .sheet{gap:6px}
.pscreen .pill{text-align:center;padding:5px 8px}
.stage[data-focus="mobile"] .browser,.stage[data-focus="email"] .browser{opacity:1}
.stage[data-focus="mobile"] .browser{opacity:.5}
.area + .area{border-top:1px solid var(--line);padding-top:28px;margin-top:4px}
.area ul{gap:8px}
.area li,.area li:first-child{padding:0;border:0;color:var(--muted)}
.area h3{transition:color .3s ease}
.area.on h3{color:var(--accent)}
.thumb.code{background:#0B1220;color:#C9D2E3;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.thumb.code .cbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #1E2740;font-size:clamp(.55rem,.9vw,.68rem);color:#8B95A8}
.thumb.code .cbar i{width:8px;height:8px;border-radius:50%;background:#2A3350}
.thumb.code .cbar span{margin-left:8px;color:#D7DEEA;border-bottom:1.5px solid #8FA4FF;padding-bottom:2px}
.thumb.code .cbar em{font-style:normal;margin-left:12px}
.thumb.code pre{margin:0;padding:12px 14px;font:inherit;font-size:clamp(.5rem,.92vw,.68rem);line-height:1.62;white-space:pre;overflow:hidden;counter-reset:ln}
.thumb.code pre span.ln{display:block}
.thumb.code pre span.ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:1.6em;margin-right:1.2em;text-align:right;color:#46506B}
.thumb.code .k{color:#8FA4FF}.thumb.code .s{color:#5BD6A3}.thumb.code .d{color:#F4D35E}.thumb.code .t{color:#F08A8A}
.thumb.code::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#0B1220)}
@media (prefers-reduced-motion:reduce){.stage .b1,.stage .b2,.stage .b3,.stage .b4{transition:none}}

.hero .portrait .frame{clip-path:none;overflow:hidden;border-radius:6px}
.hero .portrait img{position:static;transform:none;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center bottom}
.about .portrait{max-width:380px}
.about .portrait .frame{aspect-ratio:5/8}
.about .portrait img{object-position:center bottom}

/* photo blended into the page: no box, soft glow behind, edges dissolve */
.hero{align-items:end;padding-top:clamp(8px,2vw,24px);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0}
.hero-copy{align-self:center;padding-block:clamp(24px,4vw,56px);position:relative;z-index:2}
.hero .lead{max-width:37ch}
.hero .portrait{max-width:none;width:112%;margin-left:-12%;justify-self:end;align-self:end;aspect-ratio:auto;margin-top:0}
.hero .portrait::before,.about .portrait::before{content:"";position:absolute;inset:4% 2% 6% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(17,18,20,.09),rgba(17,18,20,.03) 62%,transparent);z-index:0}
.hero .portrait .frame,.about .portrait .frame{position:relative;inset:auto;z-index:1;aspect-ratio:auto;background:none;overflow:visible;border-radius:0;clip-path:none}
.hero .portrait img,.about .portrait img{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;max-width:100%;object-fit:contain;display:block;transform:none}
.logos{margin-top:0}
.about{align-items:end}
.about .portrait{max-width:440px;border-bottom:1px solid var(--line)}
.about .story{align-self:center;padding-bottom:24px}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding-block:24px 0}
  .hero .lead{max-width:52ch}
  .hero .portrait{width:100%;max-width:400px;margin-left:0;justify-self:center;margin-top:8px}
  .about .portrait{max-width:340px}
}

.stats.fit ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.case .note{font-size:.95rem;color:var(--muted)}
@media (max-width:700px){.stats.fit ul{grid-template-columns:minmax(0,1fr)}}

.nums em,.stats li em,.thumb .mini em{display:block;font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nums em{color:var(--accent);margin-bottom:12px}
.stats li em{color:var(--deep-muted);margin-bottom:12px}
.thumb .mini em{color:var(--deep-muted);margin-bottom:6px}
.stats.words b{font-size:clamp(2rem,4.4vw,3.4rem)}
.stats .who{display:inline-flex;align-items:center;gap:12px}
.stats .who img{width:34px;height:34px;border-radius:9px;display:block}
.thumb .logo{position:absolute;top:8%;left:8%;width:46px;height:46px;border-radius:12px}
.contact .side .btn{align-self:flex-start}
.contact .brief{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:6px}
.contact .brief ul{margin-top:10px}
.contact .brief li{padding-block:12px;border-top:1px solid var(--line);font-size:.97rem}
footer a{color:inherit}
.side dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.btn[disabled]{opacity:.6;cursor:default}
.case.stagecase{padding-bottom:clamp(48px,7vw,88px)}

.beliefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.beliefs li{border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.beliefs p{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.28;letter-spacing:-0.01em}
.proofline{font-size:.93rem;border-left:2px solid var(--accent);padding-left:14px}
.proofline a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.tl-head{font-size:clamp(1.6rem,3vw,2.1rem);margin:clamp(56px,8vw,96px) 0 12px}
.case .note a{color:var(--accent);font-weight:600;text-decoration:none}
@media (max-width:860px){.beliefs{grid-template-columns:minmax(0,1fr)}}