@font-face {
  font-family: "Noto Sans SC Site";
  src: url("/assets/fonts/noto-sans-sc-site.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #0d2a36;
  --navy-2: #123946;
  --ink: #132f39;
  --muted: #63777d;
  --teal: #1b94a3;
  --teal-dark: #117584;
  --cyan: #62c9df;
  --amber: #f3a64c;
  --cream: #fbf7ef;
  --paper: #fffefd;
  --line: #dce9ea;
  --soft: #eef7f7;
  --white: #fff;
  --shadow: 0 24px 70px rgba(17, 72, 83, .12);
  --text-caption: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-lead: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "Noto Sans SC Site", system-ui, sans-serif; font-size: var(--text-body); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 99; padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--navy); }
.skip-link:focus { top: 12px; }

.site-header { position: sticky; top: 0; z-index: 40; display: flex; width: 100%; max-width: 1240px; align-items: center; justify-content: space-between; margin: 0 auto; padding: 16px 28px; background: rgba(255,254,253,.9); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(220,233,234,.55); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.brand img { border-radius: 13px; box-shadow: 0 8px 22px rgba(27,148,163,.18); }
nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 15px; font-weight: 600; }
nav a:hover { color: var(--teal-dark); }
.nav-download { padding: 10px 18px; border-radius: 12px; color: var(--white); background: var(--navy); }
.nav-download:hover { color: var(--white); background: var(--teal-dark); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: 70px; max-width: 1240px; min-height: 740px; margin: 0 auto; padding: 72px 50px 100px; overflow: hidden; }
.hero-copy, .hero-visual { position: relative; z-index: 2; min-width: 0; }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.hero-orb-one { width: 420px; height: 420px; right: -120px; top: 20px; background: radial-gradient(circle, rgba(98,201,223,.22), rgba(98,201,223,0) 70%); }
.hero-orb-two { width: 360px; height: 360px; left: -180px; bottom: -80px; background: radial-gradient(circle, rgba(243,166,76,.16), rgba(243,166,76,0) 70%); }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--teal-dark); font-size: var(--text-small); font-weight: 800; letter-spacing: .1em; }
.kicker span { width: 26px; height: 3px; border-radius: 99px; background: var(--amber); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(52px, 6.4vw, 82px); line-height: 1.13; letter-spacing: -.055em; }
h1 em { color: var(--teal-dark); font-style: normal; }
.hero-lead { max-width: 690px; margin: 28px 0 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border-radius: 15px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--teal-dark); box-shadow: 0 14px 30px rgba(17,117,132,.22); }
.button-primary:hover { background: #0d6673; box-shadow: 0 18px 34px rgba(17,117,132,.28); }
.button-primary svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-primary span { display: flex; flex-direction: column; line-height: 1.25; }
.button-primary small { opacity: .78; font-size: var(--text-caption); font-weight: 500; }
.button-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.76); }
.button-ghost:hover { border-color: #bcd7da; box-shadow: 0 12px 28px rgba(17,72,83,.08); }
.release-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; color: var(--muted); font-size: var(--text-small); }
.release-meta i { width: 3px; height: 3px; border-radius: 50%; background: #91a4a8; }
.hero-note { margin: 12px 0 0; color: #72868b; font-size: var(--text-small); }

.hero-visual { min-height: 560px; display: grid; place-items: center; }
.phone-frame { width: 330px; padding: 10px; border: 6px solid var(--navy); border-radius: 42px; background: var(--navy); box-shadow: 0 42px 90px rgba(13,42,54,.23); transform: rotate(1.4deg); }
.phone-screen { min-height: 580px; padding: 13px 16px 25px; border-radius: 31px; background: #f9fcfc; overflow: hidden; }
.status-bar { display: flex; justify-content: space-between; padding: 0 5px 16px; font-size: var(--text-caption); font-weight: 800; }
.app-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 16px; }
.app-head div { display: flex; flex-direction: column; }
.app-head small { color: var(--muted); font-size: var(--text-caption); }
.app-head strong { margin-top: 2px; font-size: 16px; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--white); background: var(--navy); font-size: 12px; font-weight: 800; }
.summary-card { padding: 19px; border-radius: 23px; color: var(--white); background: linear-gradient(145deg, #229bab, #116e7b); box-shadow: 0 14px 30px rgba(27,148,163,.22); }
.summary-card > small { opacity: .8; font-size: var(--text-caption); }
.summary-card > strong { display: block; margin: 2px 0 17px; font-size: 25px; letter-spacing: -.02em; }
.summary-card div { display: flex; gap: 48px; font-size: var(--text-caption); opacity: .86; }
.summary-card b { font-size: var(--text-caption); }
.quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.quick-row span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); }
.quick-row i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: var(--teal-dark); background: #e3f5f6; font-size: 12px; font-style: normal; font-weight: 800; }
.quick-row span:nth-child(2) i { color: #af6816; background: #fff0dc; }
.quick-row span:nth-child(3) i { color: var(--navy); background: #e8eef0; }
.quick-row small { font-size: var(--text-caption); }
.list-title { display: flex; align-items: center; justify-content: space-between; margin: 3px 0 5px; }
.list-title strong { font-size: var(--text-small); }.list-title small { color: var(--teal-dark); font-size: var(--text-caption); }
.bill-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eaf1f2; }
.bill-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 12px; color: #ac671e; background: #fff0dc; font-size: var(--text-caption); font-style: normal; font-weight: 800; }
.bill-icon.travel { color: #276987; background: #e6f3f8; }.bill-icon.income { color: #147852; background: #e2f5eb; }
.bill-row span { display: flex; flex-direction: column; }.bill-row span strong { font-size: var(--text-caption); }.bill-row span small { color: #84969a; font-size: var(--text-caption); }
.bill-row > b { font-size: var(--text-caption); }.bill-row > b.positive { color: #147852; }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; min-width: 170px; padding: 13px 15px; border: 1px solid rgba(220,233,234,.85); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.float-card-top { top: 88px; right: -4px; }.float-card-bottom { left: -14px; bottom: 78px; }
.float-card div { display: flex; flex-direction: column; }.float-card strong { font-size: 13px; }.float-card small { color: var(--muted); font-size: var(--text-caption); }
.float-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; color: var(--white); background: var(--teal-dark); font-size: 13px; font-weight: 900; }.float-icon.amber { color: #6e3c05; background: var(--amber); }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1140px; margin: 0 auto; padding: 25px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 18px 50px rgba(17,72,83,.07); }
.trust-strip div { display: flex; flex-direction: column; padding: 0 23px; border-right: 1px solid var(--line); }.trust-strip div:last-child { border-right: 0; }
.trust-strip strong { font-size: var(--text-body); }.trust-strip span { color: var(--muted); font-size: var(--text-small); }

.section { max-width: 1180px; margin: 0 auto; padding: 120px 30px; }
.section-heading { max-width: 700px; }
.section-heading.centered { margin: 0 auto; text-align: center; }.section-heading.centered .kicker { justify-content: center; }
h2 { margin: 0; font-size: clamp(36px, 4.3vw, 54px); line-height: 1.24; letter-spacing: -.04em; }
.section-heading > p:last-child { color: var(--muted); font-size: var(--text-body); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.feature { position: relative; min-height: 320px; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--white); }
.feature-wide { display: grid; grid-template-columns: 1fr 260px; grid-column: 1 / -1; align-items: center; gap: 40px; min-height: 390px; background: linear-gradient(135deg, #f1f9f9, #fffdfa); }
.feature-grid > .feature:nth-child(4) { grid-column: 1 / -1; min-height: 260px; }
.feature-number { color: var(--teal-dark); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.feature h3 { margin: 38px 0 10px; font-size: 24px; letter-spacing: -.02em; }.feature-wide h3 { margin-top: 28px; font-size: 30px; }
.feature p { max-width: 520px; margin: 0; color: var(--muted); font-size: var(--text-body); }
.mini-entry { padding: 25px; border: 1px solid #e3ecec; border-radius: 25px; background: var(--white); box-shadow: var(--shadow); transform: rotate(2deg); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: #eef3f3; text-align: center; font-size: var(--text-caption); }.segmented b { padding: 5px; border-radius: 8px; color: #fff; background: var(--teal-dark); }.segmented span { padding: 5px; }
.mini-entry > strong { display: block; margin: 22px 0; text-align: center; font-size: 29px; }.mini-entry button { width: 100%; padding: 9px; border: 0; border-radius: 10px; color: #fff; background: var(--teal-dark); font: inherit; font-size: var(--text-caption); font-weight: 800; }
.category-dots { display: flex; justify-content: space-between; margin: 0 8px 20px; }.category-dots i { width: 31px; height: 31px; border-radius: 10px; background: #fff0dc; }.category-dots i:nth-child(2){background:#e6f3f8}.category-dots i:nth-child(3){background:#e4f5ed}.category-dots i:nth-child(4){background:#efebfa}
.bars { position: absolute; right: 34px; bottom: 34px; display: flex; align-items: end; gap: 8px; width: 150px; height: 86px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(#60c5d8, #1a8796); }
.bars i:nth-child(1){height:44%}.bars i:nth-child(2){height:70%}.bars i:nth-child(3){height:55%}.bars i:nth-child(4){height:86%}.bars i:nth-child(5){height:66%}.bars i:nth-child(6){height:94%}
.export-chip { position: absolute; left: 34px; bottom: 34px; display: grid; grid-template-columns: 48px 1fr 30px; align-items: center; gap: 12px; width: calc(100% - 68px); padding: 13px; border-radius: 15px; background: var(--soft); }.export-chip b { display:grid;width:48px;height:40px;place-items:center;border-radius:10px;color:#fff;background:var(--navy);font-size:var(--text-caption)}.export-chip span{font-size:var(--text-small)}.export-chip i{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#fff;font-style:normal}
.restore-line { position: absolute; left: 34px; right: 34px; bottom: 42px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--text-small); }.restore-line i{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-style:normal}.restore-line b{padding:9px 12px;border-radius:10px;color:#fff;background:var(--teal-dark)}

.security-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; max-width: 1180px; margin: 20px auto 0; padding: 85px 70px; border-radius: 38px; color: #e9f7f8; background: radial-gradient(circle at 10% 10%, #164a58, transparent 42%), var(--navy); }
.kicker.light { color: #8fd9e2; }.security-copy h2 { color: #fff; }.security-copy > p:not(.kicker) { color: #c5d9dd; font-size: var(--text-body); }.security-copy > a { display: inline-flex; gap: 9px; margin-top: 17px; color: #fff; font-size: 15px; font-weight: 800; }.security-copy > a span { color: var(--amber); }
.security-cards { display: grid; gap: 12px; }.security-cards article { display: grid; grid-template-columns: 40px 1fr; gap: 17px; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); }.security-cards article > span { display:grid;width:36px;height:36px;place-items:center;border-radius:11px;color:var(--navy);background:var(--amber);font-size:var(--text-caption);font-weight:900}.security-cards h3{margin:0;font-size:18px}.security-cards p{margin:4px 0 0;color:#b9ced2;font-size:var(--text-small)}

.install-section { padding-bottom: 90px; }
.install-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 48px 0 32px; padding: 0; list-style: none; }.install-steps li{padding:27px;border:1px solid var(--line);border-radius:22px;background:#fff}.install-steps li>span{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:#fff;background:var(--navy);font-size:var(--text-small);font-weight:800}.install-steps h3{margin:24px 0 8px;font-size:18px}.install-steps p{margin:0;color:var(--muted);font-size:15px}
.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border: 1px solid #cde2e4; border-radius: 26px; background: linear-gradient(130deg, var(--soft), #fff9ee); }.download-brand{display:flex;align-items:center;gap:17px}.download-brand img{border-radius:19px;box-shadow:0 13px 30px rgba(27,148,163,.2)}.download-brand div{display:flex;flex-direction:column}.download-brand small{color:var(--muted);font-size:var(--text-small)}.download-brand strong{font-size:22px}.download-brand span{color:var(--muted);font-size:var(--text-small)}

.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; max-width: 1120px; margin: 0 auto; padding: 70px 30px 125px; }.faq-section h2{font-size:clamp(34px,4vw,48px)}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{cursor:pointer;font-size:var(--text-body);font-weight:800;list-style:none}.faq-list summary::after{content:"+";float:right;color:var(--teal-dark);font-size:22px;font-weight:400}.faq-list details[open] summary::after{content:"−"}.faq-list p{margin:10px 36px 0 0;color:var(--muted);font-size:15px}.faq-list a{color:var(--teal-dark);text-decoration:underline}
.final-cta { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 22px; max-width: 1120px; margin: 0 auto 105px; padding: 40px 44px; border-radius: 30px; color: #fff; background: linear-gradient(120deg, var(--navy), #145665); box-shadow: 0 28px 70px rgba(13,42,54,.22); }.final-cta img{border-radius:18px}.final-cta small{color:#a8d6dc;font-size:var(--text-small)}.final-cta h2{margin:2px 0 0;font-size:31px}.final-cta p{margin:2px 0 0;color:#c6dadd;font-size:var(--text-small)}.button-light{color:var(--navy);background:#fff}.button-light:hover{box-shadow:0 12px 28px rgba(0,0,0,.18)}

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 34px; padding: 46px max(28px, calc((100vw - 1120px)/2)); color: #b7cdd1; background: #0a222c; font-size: var(--text-small); }.footer-brand{display:flex;gap:12px}.footer-brand img{border-radius:12px}.footer-brand div,.footer-company{display:flex;flex-direction:column}.footer-brand strong{color:#fff;font-size:16px}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}.footer-links a:hover,.footer-company a:hover{color:#fff}.footer-company{align-items:flex-end}.footer-company a{color:#d6e8ea}.footer-company small{margin-top:5px;color:#718b91;font-size:var(--text-caption)}

@media (max-width: 980px) {
  nav a:not(.nav-download) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 58px; text-align: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }.hero-actions,.release-meta{justify-content:center}.kicker{justify-content:center}
  .hero-visual { min-height: 590px; }.float-card-top{right:calc(50% - 250px)}.float-card-bottom{left:calc(50% - 250px)}
  .trust-strip { grid-template-columns: repeat(2,1fr); max-width: calc(100% - 46px); }.trust-strip div:nth-child(2){border-right:0}.trust-strip div:nth-child(-n+2){padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
  .security-section { grid-template-columns: 1fr; gap: 45px; margin-left: 23px; margin-right: 23px; }
  .faq-section{grid-template-columns:1fr;gap:30px}.faq-section .kicker{justify-content:flex-start}
  .site-footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.footer-company{align-items:flex-start}
}

@media (max-width: 680px) {
  .site-header { padding: 12px 17px; }.brand{font-size:16px;white-space:nowrap}.brand img{width:38px;height:38px}.site-header nav{flex-shrink:0;gap:0}.nav-download{padding:8px 10px;font-size:var(--text-caption)}
  .hero { min-height: auto; padding: 50px 20px 72px; }.hero h1{font-size:39px;letter-spacing:-.06em}.hero-lead{width:100%;font-size:var(--text-body)}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}.release-meta{font-size:13px}.hero-visual{min-height:520px;margin-top:8px}.phone-frame{width:280px;transform:none}.phone-screen{min-height:500px}.float-card{min-width:145px;padding:10px}.float-card-top{right:-3px;top:60px}.float-card-bottom{left:-3px;bottom:47px}.summary-card div{gap:34px}
  .trust-strip{grid-template-columns:1fr;padding:20px}.trust-strip div,.trust-strip div:nth-child(2){padding:11px 4px;margin:0;border-right:0;border-bottom:1px solid var(--line)}.trust-strip div:last-child{border-bottom:0}
  .section{padding:90px 20px}.section-heading.centered{text-align:left}.section-heading.centered .kicker{justify-content:flex-start}h2{font-size:36px}
  .feature-grid{grid-template-columns:1fr}.feature-wide,.feature-grid > .feature:nth-child(4){grid-template-columns:1fr;grid-column:auto;padding-bottom:28px}.mini-entry{margin-top:10px}.feature{min-height:310px;padding:27px}.feature h3{margin-top:28px}.bars{right:27px;bottom:27px}.export-chip{left:27px;bottom:27px;width:calc(100% - 54px)}.restore-line{left:27px;right:27px}
  .security-section{padding:60px 25px;border-radius:28px}.security-cards article{padding:17px}.security-cards p{font-size:var(--text-small)}
  .install-steps{grid-template-columns:1fr}.download-panel{flex-direction:column;align-items:stretch;padding:24px}.download-brand img{width:60px;height:60px}.download-brand strong{font-size:18px}
  .faq-section{padding:30px 22px 90px}.final-cta{grid-template-columns:56px 1fr;margin:0 20px 80px;padding:28px}.final-cta img{width:56px;height:56px}.final-cta h2{font-size:25px}.final-cta .button{grid-column:1 / -1;margin-top:8px}
  .site-footer{padding:38px 24px}
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }