/* Fidelity and motion fixes for Salguri prototype V3. Loaded after site.css. */
:root { --navy: #0d2440; --blue:#0000ff; --pale:#eaf9fc; }
.loading { min-height:100vh; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:radial-gradient(ellipse at center,#fff 0%,#f4f8ff 100%); }
.loading-brand { display:flex; align-items:center; gap:10px; color:var(--navy); font-size:1.05rem; font-weight:800; letter-spacing:.06em; }
.loading-brand img { width:38px; height:42px; object-fit:contain; }
.loading-progress { width:136px; height:3px; overflow:hidden; border-radius:3px; background:#dfe7f3; }
.loading-progress span { display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0000ff,#6c8cff); animation:loading-progress 1.25s ease-in-out infinite; }
.loading p { margin:0; color:#718096; font-size:.82rem; font-weight:500; letter-spacing:.01em; }
@keyframes loading-progress { 0% { transform:translateX(-110%); } 100% { transform:translateX(340%); } }
.hero { padding-block: 93px 105px; }
.hero-layout { gap: 72px; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(2.75rem, 4.8vw, 4rem); font-weight: 800; line-height: 1.17; letter-spacing: -.045em; margin-bottom: 23px; }
.hero .lead { font-size: 1.06rem; max-width: 520px; line-height: 1.73; }
.launch-tag { display:inline-flex; align-items:center; gap:7px; font-size:.73rem; padding:8px 13px; }
.launch-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); display:inline-block; }
.download-section { margin-top: 19px; }
.download-section .eyebrow { font-size:.71rem; letter-spacing:.075em; margin-bottom:9px; }
.store-buttons { display:flex; align-items:stretch; gap:11px; flex-wrap:wrap; }
.store-btn, .store-buttons.compact .store-btn { flex: 0 0 151px; min-width:151px; min-height:63px; height:63px; padding:10px 12px; display:flex; align-items:center; justify-content:flex-start; gap:11px; border-radius:9px; background:var(--navy); border:1px solid var(--navy); color:white; line-height:1.06; cursor:pointer; box-shadow: 0 2px 2px #10273e0b; transition:transform .18s ease,box-shadow .18s ease; }
.store-btn:hover { transform:translateY(-2px); box-shadow:0 6px 14px #10273e24; }
.store-buttons.light .store-btn { background:#fff; color:var(--navy); border:1px solid #d8e0ea; }
.store-buttons.compact { display:flex; grid-template-columns:none; gap:9px; }
.store-buttons.compact .store-btn { flex-basis:140px; min-width:140px; }
.store-btn .store-icon { flex:none; display:block; height:34px; width:32px; font-size:inherit; }
.store-btn .store-icon.apple { height:36px; width:34px; }
.store-text { display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.05; }
.store-btn small { margin:0 0 4px; font-size:.59rem; line-height:1.06; white-space:normal; opacity:.8; }
.store-btn strong { font-size:.92rem; line-height:1.04; font-weight:750; letter-spacing:-.035em; white-space:nowrap; }
.hero-visual { isolation:isolate; }
.hero-phone-wrap { position:relative; }
.hero-phone { animation:phone-float 6.6s ease-in-out infinite; will-change:transform; }
.floating-stat { animation:float-note 6s ease-in-out infinite; z-index:3; }
.floating-stat.bottom { animation-delay:-2s; }
.hero-phone-wrap .floating-stat.top { right:-18px; }
.hero-phone-wrap .floating-stat.bottom { left:-18px; }
@keyframes phone-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes float-note {0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.stats-section { padding:38px 0 40px; }
.stats-grid { gap:25px; }
.stats-grid .stat-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:93px; }
.stats-grid .stat-item strong { font-family:var(--head); font-size:clamp(2.2rem,3.7vw,3.15rem); font-weight:800; line-height:1.16; letter-spacing:-.045em; color:#fff; font-variant-numeric:tabular-nums; }
.stats-grid .stat-item span { color:#e3e7ff; font-weight:500; font-size:.88rem; }
.apps-section { padding-block:93px 96px; }
.apps-section .section-heading { margin-bottom:51px; }
.app-card { box-shadow:0 0 0 transparent; transform:translateY(0) scale(1); transform-origin:center; transition:transform .32s cubic-bezier(.21,.81,.38,1),box-shadow .32s ease,border-color .32s ease; }
.app-card:is(:hover,:focus-within,:focus-visible) { transform:translateY(-7px) scale(1.012); box-shadow:0 24px 47px #0d24401e; border-color:#cfdcf0; }
.app-card>img { height:225px; width:100%; object-fit:cover; }
.app-card-content { padding:26px 30px 28px; }
.app-card .eyebrow { font-size:.71rem; letter-spacing:.065em; line-height:1.2; }
.app-card h3 { font-size:1.53rem; letter-spacing:-.035em; margin:0 0 20px; }
.app-feature-list, .app-card ul.app-feature-list { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
.app-feature-list li,.app-card .app-feature-list li { display:flex; gap:10px; align-items:center; font-size:.86rem; padding:0; line-height:1.45; }
.app-check { width:18px; height:18px; flex:0 0 18px; background:#e8eaff; color:var(--blue); border-radius:50%; display:inline-flex; justify-content:center; align-items:center; font-weight:800; font-size:.76rem; }
.app-card.dark .app-check { background:#24425d; color:#b5e0ff; }
.app-card .learn-link { display:inline-flex; align-items:center; gap:6px; text-decoration:none; line-height:1.35; transform-origin:left center; transition: transform .24s ease,color .24s ease, text-shadow .24s ease; }
.app-card .learn-link:is(:hover,:focus-visible) { transform:scale(1.085); text-shadow:0 0 .45px currentColor; text-decoration:none; }
.learn-arrow { display:inline-block; transition:transform .24s cubic-bezier(.2,.8,.3,1); }
.learn-link:is(:hover,:focus-visible) .learn-arrow { transform:translateX(6px); }
.how-section { padding-block:94px 105px; }
.how-section .section-heading { margin-bottom:50px; }
.feature-grid.steps-grid { gap:24px; }
.steps-grid .feature-card { padding:32px; border-radius:15px; min-height:269px; }
.steps-grid .feature-number { font-size:3.3rem; color:#dedfff; margin-bottom:18px; }
.steps-grid .step-icon { display:block; color:var(--blue); width:32px; height:32px; margin-bottom:17px; }
.steps-grid .feature-card h3 { font-size:1.18rem; margin-bottom:13px; }
.steps-grid .feature-card p { font-size:.875rem; line-height:1.75; }
html.motion-ready .steps-grid .reveal-stagger:not(.is-visible) { opacity:0; transform:translateY(44px); }
html.motion-ready .steps-grid .reveal-stagger { transition:opacity .72s ease, transform .72s cubic-bezier(.2,.73,.26,1); transition-delay:calc(var(--reveal-order,0) * 160ms); }
.featured-listing-section { padding-block:96px 100px; }
.listing-head { display:flex; justify-content:space-between; align-items:flex-end; gap:22px; margin-bottom:33px; }
.listing-head h2 { font-size:clamp(1.85rem,3vw,2.6rem); margin-bottom:9px; }
.listing-head p { margin:0; }
.listing-controls { display:flex; gap:10px; padding-bottom:5px; }
.listing-controls button { width:44px; height:44px; background:white; border:1px solid #d5dce6; color:var(--navy); border-radius:50%; display:grid; place-items:center; transition:transform .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease; }
.listing-controls button:hover { color:var(--blue); border-color:var(--blue); transform:scale(1.08); box-shadow:0 6px 15px #001eff16; }
.listing-controls svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.listing-viewport { overflow:hidden; width:100%; touch-action:pan-y; padding-bottom:5px; }
.listing-track { display:flex; gap:22px; position:relative; width:100%; will-change:transform; }
.listing-track .listing-card { flex:0 0 calc((100% - 44px)/3); min-width:0; background:white; border:1px solid #e4e9f1; border-radius:15px; transition: box-shadow .28s ease,transform .28s ease; }
.listing-card:hover { box-shadow:0 13px 30px #0d244018; }
.listing-image img { height:207px; object-fit:cover; }
.listing-image span { font-size:.75rem; padding:5px 11px; }
.listing-body { padding:17px 18px 19px; }
.listing-body h3 { font-size:1.04rem; }
.carousel-dots { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; }
.carousel-dots .carousel-dot { border:0; border-radius:30px; background:#d3dae6; width:9px; height:9px; padding:0; min-width:9px; min-height:9px; transition:width .3s ease,background .3s ease; }
.carousel-dot.active { background:var(--blue); width:28px; }
.carousel-dot:hover:not(.active) { background:#8a96bd; }
.testimonials-section { padding-block:94px 103px; }
.testimonials-section .section-heading { margin-bottom:48px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.testimonial-card { background:#fff; border:1px solid #e8eef4; border-radius:15px; padding:28px 27px 26px; display:flex; flex-direction:column; min-height:228px; transition:transform .3s ease,box-shadow .3s ease; }
.testimonial-card:hover { transform:translateY(-5px); box-shadow:0 13px 30px #0d244015; }
.testimonial-card .stars { color:var(--blue); font-size:1.1rem; letter-spacing:.13em; margin-bottom:19px; line-height:1.1; }
.testimonial-card blockquote { border:0; margin:0 0 27px; color:#526178; font-size:.88rem; line-height:1.7; flex:1; }
.testimonial-person { display:flex; align-items:center; gap:12px; min-width:0; }
.testimonial-avatar { display:flex; align-items:center; justify-content:center; width:43px; height:43px; flex:0 0 43px; border-radius:50%; background:var(--blue); color:#fff; font-size:.79rem; font-weight:800; }
.testimonial-identity { min-width:0; display:grid; line-height:1.35; }
.testimonial-identity strong { display:block; font-size:.82rem; color:var(--navy); }
.testimonial-identity small { display:block; margin-top:3px; font-size:.75rem; color:#8796a8; }
.site-footer { background:#0d2440; padding-top:60px; }
.site-header { background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background-color .2s ease; }
.back-to-top { position:fixed; right:24px; bottom:24px; z-index:50; display:grid; place-items:center; width:52px; height:52px; border:1px solid #ffffff80; border-radius:50%; background:linear-gradient(145deg,#2828ff 0%,#0000d6 100%); color:#fff; box-shadow:0 8px 24px #0000ff45,0 2px 6px #0d244026; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.back-to-top:hover { transform:translateY(-3px); box-shadow:0 12px 28px #0000ff55,0 3px 8px #0d244033; filter:brightness(1.08); }
.back-to-top:active { transform:translateY(-1px) scale(.96); }
.back-to-top:focus-visible { outline:3px solid #8da8ff; outline-offset:4px; }
.back-to-top[hidden] { display:none; }
.back-to-top svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:37px; }
.site-footer h4 { margin:0 0 22px; font-size:.8rem; letter-spacing:.085em; font-weight:800; color:#a9d2ff; }
.site-footer p,.site-footer a { font-size:.88rem; line-height:1.65; color:#c5d4e5; }
.site-footer p { max-width:220px; margin:0 0 13px; }
.site-footer a { margin:0 0 9px; transition:color .18s ease; }
.site-footer a:hover { color:#fff; }
.footer-arrow { display:inline-block; transition:transform .24s ease; }
.site-footer a:hover .footer-arrow { transform:translateX(4px); }
.footer-social { display:flex; align-items:center; gap:12px; }
.social-icon { display:grid; place-items:center; border-radius:50%; width:37px; height:37px; flex:0 0 37px; background:#ffffff20; color:#fff; opacity:.87; }
.social-icon svg { width:17px; height:17px; }
.footer-bottom { margin-top:43px; padding-block:28px 34px; }
.footer-bottom .brand { display:flex; flex-direction:row; align-items:center; gap:10px; font-size:.8rem; }
.footer-bottom .brand img { width:27px; height:31px; object-fit:contain; }
.footer-bottom span:not(.brand-mark) { font-size:.8rem; color:#adbfd2; }
.footer-bottom .footer-copyright { white-space:nowrap; }
h1:focus { outline:none; }
@media(max-width:960px) {
 .hero-layout { gap:30px; }
 .footer-grid { gap:24px; }
 .hero .hero-phone { width:234px; height:462px; }
 .store-btn { flex-basis:145px; min-width:145px; }
 .testimonials-section .testimonial-grid { gap:14px; }
 .testimonial-card { padding:24px 20px; }
}
@media(max-width:760px) {
 .hero { padding-block:62px 72px; }
 .hero h1 { font-size:clamp(2.4rem,8vw,3.5rem); }
 .hero-layout { gap:35px; }
 .app-card-grid { grid-template-columns:1fr; }
 .apps-section,.how-section,.featured-listing-section,.testimonials-section { padding-block:68px; }
 .feature-grid.steps-grid { grid-template-columns:1fr; }
 .steps-grid .feature-card { min-height:0; }
 .listing-track .listing-card { flex-basis:calc((100% - 22px)/2); }
 .testimonial-grid { grid-template-columns:1fr; }
 .testimonials-section .testimonial-grid { gap:18px; }
 .testimonial-card { min-height:0; }
 .footer-grid { grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media(max-width:560px) {
 .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
 .stats-grid .stat-item { min-height:75px; }
 .stats-grid .stat-item strong { font-size:clamp(1.55rem,6vw,2.4rem); }
 .stats-grid .stat-item span { font-size:.68rem; max-width:105px; line-height:1.3; }
 .listing-track .listing-card { flex-basis:100%; }
 .listing-head { align-items:center; }
 .listing-head h2 { font-size:1.8rem; }
 .listing-controls button { width:39px; height:39px; }
 .footer-grid { grid-template-columns:1fr 1fr; gap:29px 18px; }
 .footer-grid p,.footer-grid a { font-size:.8rem; }
 .footer-bottom { flex-direction:column; align-items:flex-start; }
 .back-to-top { right:16px; bottom:16px; }
 .store-btn { flex-basis:calc(50% - 6px); min-width:0; }
 .store-btn .store-icon { width:25px; height:30px; }
 .store-btn .store-icon.apple { width:29px; height:31px; }
 .store-btn strong { font-size:.82rem; }
 .store-btn small { font-size:.52rem; }
}
@media(max-width:365px) {
 .store-btn { flex-basis:100%; }
 .footer-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .loading-progress span { animation:none; width:100%; }
 .site-header,.back-to-top { transition:none; }
 .hero-phone,.floating-stat { animation:none!important; }
 .app-card,.testimonial-card,.learn-link,.learn-arrow,.listing-track,.steps-grid .reveal-stagger { animation:none!important; transition:none!important; transform:none!important; opacity:1!important; }
}