:root{--blue:#092962;--ink:#112b51;--muted:#526176;--red:#c92332;--green:#087462;--line:#7e8998}
*{box-sizing:border-box}
body{margin:0;padding:calc(32px + env(safe-area-inset-top,0px)) 24px calc(40px + env(safe-area-inset-bottom,0px));background:#f1f4f8;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
.shell{width:min(100%,1200px);margin:0 auto}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 2px 20px}
.brand{font-size:.875rem;font-weight:750;color:var(--blue)}
.brand-rule{display:inline-flex;width:36px;height:12px;gap:3px;margin-right:10px;vertical-align:-1px}
.brand-rule i{flex:1;transform:skew(-18deg);background:var(--blue)}
.brand-rule i:nth-child(2){background:var(--red)}.brand-rule i:nth-child(3){background:var(--green)}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.8fr);align-items:center;gap:24px;min-height:240px;padding:32px 40px;border-radius:24px;background:var(--blue);color:white;box-shadow:0 12px 30px #09296214}
.hero:after{position:absolute;bottom:0;left:40px;width:88px;height:5px;content:"";background:linear-gradient(to right,#d92d3b 50%,#35b49a 50%)}
.hero-copy{position:relative;z-index:1;min-width:0}.hero-label{margin:0 0 10px;font-size:.75rem;font-weight:550;color:#c6d8f2}
h1{margin:0;font-size:clamp(1.6rem,3vw,2.35rem);font-weight:650;letter-spacing:-.035em;line-height:1.2;text-wrap:balance}
h1 span{display:block;margin-top:10px;font-size:1.125rem;font-weight:450;letter-spacing:0;color:#d9e5f8}
.hero-scene{min-width:0;max-width:360px;width:100%;justify-self:end}.hero-scene svg{display:block;width:100%;height:auto}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 2px 16px}
.section-heading h2{margin:0;font-size:1rem;font-weight:650}.section-heading p{margin:0;color:var(--muted);font-size:.75rem}
.app-directory{display:grid;gap:28px}.app-group{min-width:0}.group-heading{display:flex;align-items:center;gap:9px;margin:0 2px 14px;color:var(--ink);font-size:.875rem;font-weight:700;line-height:1.4}.group-heading:before{width:20px;height:3px;border-radius:2px;background:var(--blue);content:""}.app-group[data-scope=tac] .group-heading:before{background:var(--green)}.app-group[data-scope=cofo] .group-heading:before{background:var(--red)}.app-group[data-scope=shared] .group-heading:before{background:linear-gradient(90deg,var(--red),var(--green))}
.apps{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.app-card{--accent:var(--blue);--tint:#e7effb;display:flex;flex-direction:column;min-width:0;min-height:280px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 5px 16px #182e4910;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.app-card[data-app=tomo],.app-card[data-app=pandu],.app-card[data-app=beresin]{--accent:var(--green);--tint:#e3f3ed}
.app-card[data-app=legal],.app-card[data-app=cash],.app-card[data-app=lossfall]{--accent:var(--red);--tint:#f9e9e9}
.scene{height:116px;margin:-4px -4px 14px;border-radius:14px;background:linear-gradient(135deg,var(--tint),#f8fafc);color:var(--accent);overflow:hidden}
.scene svg{display:block;width:100%;height:100%;overflow:visible}
.app-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start}
.app-card h2{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.35;overflow-wrap:anywhere}
.app-detail{display:inline-block;margin-left:5px;color:var(--muted);font-size:.75rem;font-weight:450;letter-spacing:0}
.app-card .scope{margin:8px 0 0;color:var(--accent);font-size:.6875rem;font-weight:700;line-height:1.5}
.description{margin:5px 0 0;color:var(--muted);font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere}
.card-open{display:flex;align-items:center;gap:7px;margin-top:15px;color:var(--accent);font-size:.75rem;font-weight:700;line-height:1.5}
.card-open svg{width:14px;height:14px}
a.app-card:hover,a.app-card:focus-visible{transform:translateY(-4px);border-color:var(--accent);background:linear-gradient(135deg,#fff 0%,#fff 42%,var(--tint) 100%);box-shadow:0 12px 24px #182e491c}
a.app-card:active{transform:translateY(-1px)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.upcoming{--accent:#526176;--tint:#e5eaf0;background:#f6f8fb;box-shadow:none}
.availability{margin:15px 0 0;color:var(--muted);font-size:.75rem;font-weight:650;line-height:1.5}
.migration{display:none;margin-top:20px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);font-size:.8125rem;line-height:1.5}.migration.show{display:block}.migration p{margin:0}.migration a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:650;text-underline-offset:3px}
.footer{margin:24px 0 0;color:var(--muted);font-size:.6875rem;text-align:center}
[data-scene]{--motion-state:paused}[data-scene][data-visible=true]{--motion-state:running}
html[data-motion=paused] [data-scene]{--motion-state:paused}
.animated{animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:var(--motion-state,paused);transform-box:fill-box;transform-origin:center}
.float{animation-name:float}.float-delayed{animation-name:float;animation-delay:-3s}
.scan{animation-name:scan}.check{animation-name:check;stroke-dasharray:50;stroke-dashoffset:0}
.sheet{animation-name:sheet}.stamp{animation-name:stamp}.flow{animation-name:flow;stroke-dasharray:5 9;animation-timing-function:linear}
.sweep{animation-name:sweep;transform-origin:bottom center}.droplet{animation-name:droplet}.needle{animation-name:needle;transform-origin:50% 85%}
.ticket{animation-name:ticket}.bar{animation-name:bar;transform-origin:bottom}.bar.delayed{animation-delay:-1.1s}.bar.last{animation-delay:-2.2s}
.progress{animation-name:progress;transform-origin:left}
@keyframes float{0%,15%,85%,100%{transform:translateY(0)}45%,60%{transform:translateY(-5px)}}
@keyframes scan{0%,12%,85%,100%{transform:translateY(-12px);opacity:0}20%{opacity:1}60%{transform:translateY(30px);opacity:1}75%{transform:translateY(30px);opacity:0}}
@keyframes check{0%,20%{stroke-dashoffset:50;opacity:.2}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:50;opacity:.2}}
@keyframes sheet{0%,15%,85%,100%{transform:translate(0,0)}40%,60%{transform:translate(5px,-4px)}}
@keyframes stamp{0%,20%,85%,100%{transform:translateY(-7px) rotate(-8deg)}45%,60%{transform:translateY(3px) rotate(0)}}
@keyframes flow{0%,15%{stroke-dashoffset:0}75%,100%{stroke-dashoffset:-56}}
@keyframes sweep{0%,20%,85%,100%{transform:rotate(-7deg)}45%,60%{transform:rotate(8deg)}}
@keyframes droplet{0%,20%,85%,100%{transform:translateY(-5px);opacity:.25}45%,60%{transform:translateY(5px);opacity:1}}
@keyframes needle{0%,15%,85%,100%{transform:rotate(-14deg)}45%,60%{transform:rotate(12deg)}}
@keyframes ticket{0%,15%,85%,100%{transform:translateX(-7px)}45%,60%{transform:translateX(7px)}}
@keyframes bar{0%,15%,85%,100%{transform:scaleY(.6)}45%,60%{transform:scaleY(1)}}
@keyframes progress{0%,15%,100%{transform:scaleX(.4)}60%,85%{transform:scaleX(1)}}
@media(min-width:700px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){body{padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px))}.masthead{gap:8px;margin-bottom:14px}.brand{font-size:.75rem}.brand-rule{width:26px;height:10px;margin-right:6px}.hero{grid-template-columns:minmax(0,1fr) 80px;gap:8px;min-height:200px;padding:24px;border-radius:20px}.hero:after{left:24px}.hero-label{font-size:.6875rem}h1{font-size:1.5rem}h1 span{font-size:.9375rem}.hero-scene{align-self:center}.hero-scene svg{width:120px;max-width:100%;height:auto}.section-heading{margin-top:24px}.section-heading h2{font-size:.9375rem}.apps{gap:14px}.app-card{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:12px;min-height:190px;padding:20px;border-radius:18px}.scene{grid-column:2;grid-row:1;height:126px;margin:0 -4px 0 0;border-radius:12px}.scene svg{width:166px;max-width:none;position:relative;left:50%;transform:translateX(-50%)}.app-copy{grid-column:1;grid-row:1}.app-card h2{font-size:1rem}.description{font-size:.75rem}.app-detail{margin-left:0;margin-top:3px;display:block}.card-open,.availability{margin-top:12px}.footer{margin-top:20px}}
@media(max-width:359px){body{padding-inline:12px}.hero{padding:20px;grid-template-columns:minmax(0,1fr) 60px}h1{font-size:1.375rem}.app-card{grid-template-columns:minmax(0,1fr) 84px;padding:16px;gap:8px}.scene svg{width:144px}.section-heading p{font-size:.6875rem}}
@media(max-width:699px){.hero{display:flex;flex-wrap:wrap}.hero-copy{flex:1 1 10rem}.hero-scene{flex:0 0 clamp(60px,20vw,80px)}.app-card{display:flex;flex-direction:row;flex-wrap:wrap}.app-copy{flex:1 1 8rem;order:0}.scene{flex:0 0 104px;order:1}.scene svg{width:100%;height:100%;position:static;transform:none}}
@media(max-width:359px){.scene{flex-basis:84px}}
@media(prefers-reduced-motion:reduce){.animated{animation:none!important}.app-card{transition:none}a.app-card:hover,a.app-card:focus-visible,a.app-card:active{transform:none}}