.hero{background:#edf4f5}
.hero-grid{grid-template-columns:1fr 1.08fr;gap:56px;padding-top:48px;padding-bottom:48px}
.hero .visual{display:block;height:515px;min-height:0}
.hero .visual:before{display:none}
.hero-photo-frame{position:absolute;inset:0 0 30px 28px;overflow:hidden;border-radius:110px 12px 110px 12px;background:#d0dedc}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:50% center;animation:photo-breathe 18s ease-in-out infinite alternate}
.hero .phone{position:absolute;left:-12px;bottom:5px;width:235px;padding:15px 18px 20px;border-width:5px;border-radius:28px;transform:rotate(-5deg);animation:wallet-float 7s ease-in-out infinite;box-shadow:0 18px 48px #102e4030}
.hero .phone-top,.hero .movement-title,.hero .movement{display:none}
.hero .balance-label{margin-top:12px}
.hero .balance{font-size:29px;margin-bottom:14px}
.hero .app-name{font-size:16px}
.hero .visual-label{left:0;right:0;bottom:-34px;font-size:10px;margin:0}
.hero .photo-label{position:absolute;right:18px;top:24px;background:#fffffff2;padding:9px 14px;border-radius:25px;font-size:12px;font-weight:650;color:#164a4a;box-shadow:0 4px 25px #102e4010;animation:label-float 8s ease-in-out infinite}
.photo-label:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#008174}
.motion-control{margin-top:20px;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #a7bcc5;border-radius:20px;color:#315363;padding:7px 12px;font-size:11px;cursor:pointer;min-height:36px}
.motion-control:hover{background:#ddebed}
.hero.motion-paused .hero-photo,.hero.motion-paused .phone,.hero.motion-paused .photo-label{animation-play-state:paused}
.lifestyle-figure{margin:0;min-width:0;position:relative}
.lifestyle-figure img{display:block;width:100%;height:390px;object-fit:cover;border-radius:10px}
.lifestyle-figure figcaption{font-size:12px;color:var(--muted);padding-top:12px}
.lifestyle-figure .image-kicker{position:absolute;left:20px;top:20px;background:#ffffffed;color:#174552;font-size:11px;font-weight:700;letter-spacing:1px;padding:9px 13px;border-radius:4px}
.app-section .lifestyle-figure img{height:390px;border-radius:10px 75px 10px 10px}
.app-section .lifestyle-figure figcaption{color:#bed2dc}
@keyframes photo-breathe{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes wallet-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes label-float{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-width:1000px) and (min-width:761px){.hero-grid{gap:30px}.hero .visual{height:470px}.hero .phone{left:0;width:205px}.hero-photo-frame{left:20px}.hero .photo-label{right:7px;font-size:10px}}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr;gap:27px;padding-top:36px;padding-bottom:62px}.hero .visual{height:420px;max-width:430px;margin:0 auto}.hero-photo-frame{inset:0 0 28px 20px;border-radius:70px 10px 70px 10px}.hero .phone{width:205px;left:0;bottom:0;padding:12px 15px 15px}.hero .balance{font-size:25px}.hero .visual-label{bottom:-27px}.hero .photo-label{font-size:10px;right:12px;top:18px}.lifestyle-figure img,.app-section .lifestyle-figure img{height:auto;aspect-ratio:4/3}.hero .actions .btn{font-size:14px}.motion-control{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.hero .hero-photo,.hero .phone,.hero .photo-label{animation:none}.motion-control{display:none}}

/* Unikris brand background, with dark text for legibility. */
:root{--brand:#12a9d9;--muted:#102e40;--teal:#07506a;--paper:#d9f3fc;--line:#08799d}
body,.hero{background:var(--brand)}
.draft{background:#083e59;color:#e4f7fd}
.header{background:#e4f7fd;border-bottom-color:#92d8ef}
.menu{background:#e4f7fd;border-color:#769da9}
.hero h1 em{color:#063b56}
.hero .eyebrow,.eyebrow{color:#102e40}
.hero .btn.outline{border-color:#174b60;background:#ffffff1a}
.hero .btn.outline:hover{background:#ffffff40}
.motion-control{color:#102e40;border-color:#17607c;background:#ffffff18}
.motion-control:hover{background:#ffffff40}
.hero .visual-label{color:#102e40}
.strip{background:#083e59;color:#e4f7fd;border-bottom-color:#083e59}
.strip span:before{color:#8ce5ff}
.tinted,.faq{background:#d9f3fc}
.feature{border-top-color:#08799d}
.feature .icon,.help-grid .icon{background:#bdeefa;color:#083e59}
.agent{background:#bceafa}
.agent-label{border-color:#5d98ac;color:#163f50}
.agent .conditions{border-left-color:#5d98ac}
.app-section{background:#102e40}
.app-section .eyebrow{color:#8ce5ff}
.app-section .btn.light{background:#8ce5ff;color:#102e40}
footer{background:#d9f3fc}
.phone{--muted:#496271;--teal:#007f82}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#102e40}
.app-section a:focus-visible{outline-color:#8ce5ff}

.text-link{color:#102e40}
.product-gallery{background:#d9f3fc}
.product-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.product-shots figure{margin:0;min-width:0}
.screenshot-button{display:block;width:100%;padding:0;background:#102e40;border:5px solid #102e40;border-radius:19px;overflow:hidden;cursor:zoom-in;box-shadow:0 12px 25px #102e4020}
.screenshot-button img{display:block;width:100%;height:auto}
.product-shots figcaption{text-align:center;font-size:13px;margin-top:12px}
.product-dialog{max-width:min(540px,calc(100vw - 24px));max-height:90vh;border:0;border-radius:12px;padding:20px;background:#f1f8fb;color:#102e40}
.product-dialog::backdrop{background:#061f2ebd}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:15px}
.dialog-bar h2{font-size:21px;margin:0;letter-spacing:-.4px}
.close-shot{min-height:44px;padding:8px 15px;background:#064d78;color:white;border:0;border-radius:5px;cursor:pointer}
.product-dialog p{font-size:12px;margin:12px 0}
.expanded-shot{display:block;max-width:100%;width:360px;height:auto;margin:auto}
.text-link{display:inline-flex;align-items:center;min-height:28px}
.navlinks a,.login,footer a{min-height:28px}
.menu,.motion-control,.parallax-toggle{min-height:44px}
.skip:focus{position:fixed}
:target{scroll-margin-top:110px}
.hero.motion-offscreen .hero-photo,.hero.motion-offscreen .phone,.hero.motion-offscreen .photo-label{animation-play-state:paused}
@media(max-width:380px){.nav{gap:8px}.nav .brand{font-size:21px;gap:5px}.nav .brand img{width:29px;height:29px}.account .btn{padding:8px 10px}.hero .actions{flex-direction:column}.hero .actions .btn{width:100%}h1{font-size:42px}.features{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero .photo-label{max-width:150px}.parallax-bottom{flex-wrap:wrap}}

/* Device silhouette and a unified set of outline icons. */
.ui-icon{width:22px;height:22px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon .ui-icon{width:25px;height:25px}
.text-link .ui-icon{width:16px;height:16px;margin-left:3px}
.hero .phone{width:208px;height:398px;padding:16px 14px 25px;border:6px solid #153346;border-radius:33px;background:#fff;bottom:-2px;left:-10px;overflow:hidden;box-shadow:inset 0 0 0 2px #d8e1e5,0 18px 40px #102e4038}
.hero .phone:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:65px;height:17px;background:#153346;border-radius:14px}
.hero .phone:after{content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:65px;height:4px;background:#153346;border-radius:4px}
.hero .phone-top{display:flex;margin:0 0 18px;font-size:9px;align-items:center}
.phone-top .ui-icon{width:17px;height:12px}
.hero .app-name{font-size:15px}
.app-name .ui-icon{width:17px;height:17px}
.hero .balance-label{font-size:10px;margin-top:16px}
.hero .balance{font-size:28px;margin-bottom:14px}
.hero .app-actions{font-size:9px}
.app-actions b{display:grid;place-items:center}
.app-actions .ui-icon{width:17px;height:17px}
.hero .movement-title{display:block;margin:18px 0 2px;font-size:11px}
.hero .movement{display:flex;padding:9px 0;font-size:9px}
.hero .movement strong{font-size:9px}
.hero .movement small{font-size:8px}
.hero .movement:last-of-type{display:none}
.movement .ui-icon{width:13px;height:13px}
.motion-control .ui-icon,.parallax-toggle .ui-icon{width:13px;height:13px}
.hero .phone{animation-name:device-float}
@keyframes device-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(-2deg)}}
.parallax-story{position:relative;isolation:isolate;min-height:520px;overflow:hidden;background:#102e40;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:80px 0}
.parallax-image{position:absolute;z-index:-2;left:0;top:-60px;width:100%;height:calc(100% + 120px);object-fit:cover;object-position:65% center;transform:translateY(var(--parallax-offset,0px))}
.parallax-story:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,31,46,.93),rgba(6,31,46,.78) 38%,rgba(6,31,46,.08) 80%)}
.parallax-content h2{font-size:clamp(34px,4vw,52px);max-width:550px}
.parallax-content p{font-size:18px;color:#e6f6fc}
.parallax-content .eyebrow{font-size:12px;color:#93e5ff}
.parallax-content .btn{margin-top:12px}
.parallax-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:42px;font-size:11px;color:#e6f6fc}
.parallax-toggle{display:inline-flex;align-items:center;gap:6px;color:#fff;background:#102e40;border:1px solid #a5d9ed;border-radius:18px;padding:8px 12px;cursor:pointer;font-size:11px}
.parallax-story a:focus-visible,.parallax-toggle:focus-visible{outline-color:#93e5ff}
@media(max-width:1000px) and (min-width:761px){.hero .phone{width:190px;height:380px;left:0;padding-left:12px;padding-right:12px}.hero .balance{font-size:25px}}
@media(max-width:760px){.hero .visual{height:455px}.hero .phone{width:180px;height:360px;left:0;bottom:0;padding:14px 12px 22px;border-radius:29px}.hero .phone-top{margin-bottom:14px}.hero .balance-label{margin-top:10px}.hero .balance{font-size:24px;margin-bottom:10px}.hero .app-actions b{width:30px;height:30px}.hero .movement-title{margin-top:14px}.hero .movement{gap:5px;padding:8px 0}.hero .movement i{width:23px;height:23px}.hero .photo-label{right:8px}.parallax-story{min-height:490px;padding:55px 0}.parallax-image{object-position:68% center}.parallax-story:after{background:linear-gradient(90deg,rgba(6,31,46,.88),rgba(6,31,46,.57))}.parallax-content h2{font-size:34px}.parallax-content p{font-size:16px}.parallax-bottom{gap:12px;align-items:flex-start}.parallax-bottom>span{max-width:150px}}
@media(prefers-reduced-motion:reduce){.hero .phone{animation:none}.parallax-image{transform:none!important}.parallax-toggle{display:none}}
.hero .phone{padding:25px 5px 14px}
.real-app-screen{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px;background:#f1f5fb}
.hero .phone:before{width:52px;height:12px;top:6px}
@media(max-width:760px){.product-shots{gap:14px}.hero .phone{padding:23px 4px 13px}.product-gallery .split{gap:25px}}

/* Deeper brand surfaces keep white headings and body copy readable. */
.brand-surface{background:linear-gradient(115deg,#063c60 0%,#075775 55%,#087495 100%);color:#fff}
.brand-surface h1,.brand-surface h1 em,.brand-surface h2,.brand-surface h3{color:#fff}
.brand-surface p,.brand-surface .lead,.brand-surface .small,.brand-surface figcaption,.brand-surface .visual-label{color:#f0faff}
.brand-surface .eyebrow{color:#c6edfc}
.brand-surface .text-link,.brand-surface .hero-note a{color:#fff}
.brand-surface .btn{background:#fff;color:#063c60;border-color:#fff}
.brand-surface .btn:hover{background:#d9f3fc;border-color:#d9f3fc}
.brand-surface .btn.outline{background:transparent;color:#fff;border-color:#bceafa}
.brand-surface .btn.outline:hover{background:#ffffff18}
.brand-surface .feature{border-top-color:#78b5cc}
.brand-surface .motion-control{color:#fff;border-color:#9fd8ed;background:#ffffff08}
.brand-surface .motion-control:hover{background:#ffffff18}
.brand-surface a:focus-visible,.brand-surface button:focus-visible{outline-color:#fff}
.product-shots{grid-template-columns:minmax(0,240px);justify-content:center}
@media(max-width:760px){.product-shots{grid-template-columns:minmax(0,230px)}}

/* Requested white headings on the photo and app sections. */
#parallax-title, #app.app-section h2 { color: #fff; }