:root { --app-ink:#102b46; --app-blue:#0067a8; --app-blue-soft:#e5f1f7; --app-coral:#de6658; }
.app-page { background:#f8f9f7; color:var(--app-ink); }
.app-page header { border-bottom:1px solid rgba(16,43,70,.08); box-shadow:none; }
.app-page .nav-container { padding-left:24px; padding-right:24px; }
.app-page footer .footer-col h3 { color:#fff; }
.app-shell { width:min(100% - 48px,1180px); margin:0 auto; }
.app-hero { overflow:hidden; min-height:calc(100vh - 70px); padding:70px 0 60px; background-color:#e8f0f2; background-image:linear-gradient(rgba(16,43,70,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,43,70,.055) 1px,transparent 1px); background-size:34px 34px; }
.app-hero-grid { display:grid; grid-template-columns:minmax(0,.98fr) minmax(310px,.72fr); align-items:center; gap:clamp(44px,8vw,120px); min-height:calc(100vh - 200px); }
.app-hero-copy { position:relative; z-index:1; padding:24px 0; }
.app-lockup { display:inline-flex; align-items:center; gap:13px; margin-bottom:52px; color:var(--app-ink); font-size:20px; font-weight:800; }
.app-lockup img { width:54px; height:54px; border-radius:14px; box-shadow:0 8px 18px rgba(0,86,179,.22); }
.app-kicker { margin:0 0 15px; color:var(--app-blue); font-size:11px; font-weight:800; letter-spacing:2px; }
.app-hero h1,.app-page h2,.app-page h3 { color:var(--app-ink); letter-spacing:0; }
.app-hero h1 { max-width:670px; margin:0; font-size:clamp(42px,5.3vw,76px); line-height:1.1; font-weight:800; }
.app-lead { max-width:570px; margin:25px 0 31px; color:#40586b; font-size:18px; line-height:1.85; }
.app-store-row { display:flex; flex-wrap:wrap; gap:11px; }
.store-badge { display:inline-flex; min-width:164px; min-height:54px; align-items:center; gap:10px; padding:7px 15px; border:1px solid #111b24; border-radius:7px; background:#111b24; color:#fff; transition:transform 180ms ease,background-color 180ms ease; }
.store-badge:hover { transform:translateY(-2px); background:#263b4c; }
.store-badge i { width:26px; font-size:28px; text-align:center; }
.store-badge span { display:grid; line-height:1; }
.store-badge small { margin-bottom:4px; font-size:9px; letter-spacing:.5px; }
.store-badge strong { font-size:18px; font-weight:600; }
.app-platform-note { margin:15px 0 0; color:#5e7181; font-size:13px; }
.hero-phone-stage { position:relative; display:grid; justify-items:center; padding:0 12px 42px; }
.hero-phone-stage > img { position:relative; z-index:1; width:min(100%,355px); height:auto; aspect-ratio:800 / 1731; border:9px solid #102b46; border-radius:34px; background:#fff; box-shadow:0 24px 42px rgba(16,43,70,.28); object-fit:fill; }
.hero-phone-shadow { position:absolute; right:0; bottom:76px; width:87%; height:78%; border:1px solid rgba(0,103,168,.26); background:#cadce4; transform:translate(20px,21px); }
.hero-caption { position:relative; z-index:2; align-self:end; margin:14px 0 0; padding:9px 14px; border:1px solid rgba(137,163,177,.45); border-radius:999px; background:rgba(255,255,255,.8); color:#40586b; font-size:12px; font-weight:700; letter-spacing:.35px; }
.hero-caption span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--app-coral); }
.experience-section { padding:110px 0 98px; background:#f8f9f7; }
.section-intro { max-width:690px; margin-bottom:56px; }
.section-intro h2,.app-assurance h2,.download-panel h2 { margin:0; font-size:clamp(30px,3.7vw,52px); line-height:1.18; }
.section-intro > p:last-child { margin:18px 0 0; color:#53697a; font-size:17px; line-height:1.8; }
.feature-list { display:grid; overflow:hidden; border-top:1px solid #c9d9df; border-bottom:1px solid #c9d9df; }
.feature-row { background:#edf5f6; }
.feature-row + .feature-row { border-top:1px solid #c9d9df; }
.feature-row:nth-child(even) { background:#f7f9f7; }
.feature-row-inner { display:grid; width:min(100% - 48px,1180px); grid-template-columns:minmax(0,1fr) minmax(250px,.92fr); gap:40px clamp(38px,7vw,104px); align-items:center; margin:0 auto; padding:54px 0; }
.feature-copy { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:10px 0; }
.feature-number { color:var(--app-coral); font-size:15px; font-weight:800; letter-spacing:1px; }
.feature-copy i { display:grid; width:46px; height:46px; margin-bottom:21px; place-items:center; border:1px solid #cfe0e5; border-radius:13px; background:#eef6f8; color:var(--app-blue); font-size:19px; }
.feature-copy h3 { margin:0 0 12px; font-size:clamp(23px,2.5vw,32px); line-height:1.25; }
.feature-copy p { max-width:470px; margin:0; color:#566b7b; font-size:16px; line-height:1.82; }
.feature-shot { position:relative; justify-self:center; width:min(100%,315px); margin:0; }
.feature-shot::before { position:absolute; z-index:0; top:24px; left:-25px; width:calc(100% + 50px); height:calc(100% - 48px); background:#d9e8ed; content:''; }
.feature-shot img { position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:800 / 1731; border:7px solid #102b46; border-radius:28px; background:#fff; box-shadow:0 18px 32px rgba(16,43,70,.19); object-fit:fill; }
.app-assurance { padding:72px 0; background:#102b46; color:#fff; }
.assurance-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:65px; align-items:center; }
.app-assurance .app-kicker { color:#8fc8dd; }
.app-assurance h2 { color:#fff; }
.app-assurance ul { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.app-assurance li { display:flex; align-items:center; gap:12px; color:#e8f1f4; font-size:16px; }
.app-assurance li i { display:grid; width:24px; height:24px; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:7px; background:var(--app-coral); color:#fff; font-size:11px; }
.download-section { padding:100px 0; background:#edf3f4; }
.download-panel { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; align-items:center; padding:38px clamp(28px,5vw,64px); border:1px solid #c8d9df; background:#fff; box-shadow:0 18px 34px rgba(16,43,70,.08); }
.download-icon { width:72px; height:72px; border-radius:18px; box-shadow:0 10px 21px rgba(0,86,179,.2); }
.download-panel .app-kicker { margin-bottom:8px; }
.download-panel h2 { font-size:clamp(26px,3vw,38px); }
.download-panel p:not(.app-kicker) { margin:10px 0 0; color:#5d7080; }
.download-panel .app-store-row { justify-content:flex-end; }
.download-panel .store-badge { min-width:150px; }
@media screen and (max-width:900px) { .app-hero { min-height:auto; padding:52px 0 64px; } .app-hero-grid,.assurance-grid,.download-panel { grid-template-columns:1fr; } .app-hero-grid { gap:28px; min-height:0; } .app-lockup { margin-bottom:36px; } .hero-phone-stage { order:2; max-width:410px; margin:0 auto; } .assurance-grid { gap:30px; } .download-panel .app-store-row { justify-content:flex-start; } }
@media screen and (max-width:680px) { .app-shell { width:min(100% - 48px,1180px); } .app-hero h1 { font-size:clamp(38px,11vw,53px); } .app-lead { font-size:16px; } .store-badge { flex:1 1 148px; min-width:0; } .hero-phone-stage > img { width:min(100%,300px); border-width:7px; border-radius:28px; } .experience-section,.download-section { padding:76px 0; } .feature-row-inner { width:min(100% - 48px,1180px); grid-template-columns:1fr; gap:26px; padding:38px 0; } .feature-row-reverse .feature-shot { order:1; } .feature-row-reverse .feature-copy { order:0; } .feature-copy { grid-template-columns:38px 1fr; gap:14px; } .feature-shot { width:min(100%,272px); margin:0 auto; } .app-assurance { padding:56px 0; } .download-panel { gap:20px; padding:30px 24px; } .download-icon { width:62px; height:62px; } }