/* Revalio home + bottom navigation. Palette and card language come from the Revalio Mini App prototype; classes are hb-* so nothing else changes. */
.hb { --ink:#101d3c; --soft:#5c6882; --muted:#8d99ad; --blue:#165bf7; --cyan:#27cce8; --hb-shadow:0 9px 30px rgba(28,54,108,.065); max-width: 560px; margin: 0 auto; color: var(--ink); }
.hb-hero { position: relative; overflow: hidden; background: linear-gradient(132deg,#0d2451 0%,#123d91 49%,#126cfb 100%); color: #fff; border-radius: 26px; min-height: 300px; padding: 25px 22px 24px; box-shadow: 0 15px 24px rgba(18,67,143,.18); }
.hb-hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg,rgba(255,255,255,.12),transparent 45%); pointer-events: none; }
.hb-orbit { position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 100%; pointer-events: none; }
.hb-o1 { width: 290px; height: 290px; right: -161px; top: -105px; } .hb-o2 { width: 240px; height: 240px; right: -98px; top: 153px; }
.hb-hero-content { position: relative; z-index: 3; max-width: 290px; }
.hb-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .4px; font-weight: 740; color: #c7eeff; border: 1px solid rgba(255,255,255,.19); background: rgba(255,255,255,.10); padding: 7px 10px; border-radius: 30px; }
.hb-pulse { width: 6px; height: 6px; background: #60f6d2; border-radius: 100%; box-shadow: 0 0 0 3px rgba(96,246,210,.13); }
.hb-h1 { font-size: 29px; line-height: 1.12; letter-spacing: -1.15px; margin: 18px 0 10px; font-weight: 820; color: #fff; }
.hb-h1 span { color: #7ae9fd; }
.hb-hero p { color: #c5d9fa; font-size: 12px; max-width: 215px; line-height: 1.55; margin: 0 0 21px; }
.hb-hero-cta { display: flex; align-items: center; justify-content: space-between; gap: 19px; padding: 12px 15px 12px 17px; border: none; background: #fff; color: #1441a8; border-radius: 13px; font-size: 12px; font-weight: 780; box-shadow: 0 4px 16px rgba(6,21,50,.12); min-width: 152px; min-height: 44px; }
.hb-hero-cta:hover:not(:disabled) { background: #fff; color: #1441a8; }
.hb-mark { position: absolute; right: 16px; bottom: 18px; width: 96px; height: 96px; border-radius: 24px; object-fit: cover; z-index: 2; box-shadow: 0 12px 26px rgba(1,12,39,.35); }
.hb-section { margin: 26px 2px 13px; } .hb-eyebrow { font-size: 9px; font-weight: 830; letter-spacing: 1.4px; color: #3974c8; }
.hb-section h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.6px; margin: 6px 0 0; }
.hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.hb-card { min-height: 170px; background: #fff; border: 1px solid #ecf0f6; border-radius: 21px; padding: 15px; text-align: left; color: var(--ink); box-shadow: var(--hb-shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-weight: 400; transition: transform .18s ease, box-shadow .18s ease; }
button.hb-card:hover:not(:disabled) { border-color: #ecf0f6; color: var(--ink); box-shadow: 0 13px 34px rgba(28,54,108,.09); }
button.hb-card:active { transform: scale(.98); }
.hb-future { background: #fdfdff; opacity: .92; }
.hb-icon { height: 54px; width: 54px; border-radius: 17px; display: grid; place-items: center; flex-shrink: 0; }
.hb-icon svg { height: 31px; width: 31px; }
.hb-blue { color: #1765df; background: linear-gradient(145deg,#e7f6ff,#e3ecff); } .hb-green { color: #0ba974; background: linear-gradient(145deg,#e0fff1,#ddf8f5); }
.hb-violet { color: #6d54df; background: linear-gradient(145deg,#f0edff,#e4ebff); } .hb-orange { color: #ec8621; background: linear-gradient(145deg,#fff4e5,#ffebdf); } .hb-rose { color: #e94983; background: linear-gradient(145deg,#ffedf4,#ffe0e9); }
.hb-name { font-size: 13px; font-weight: 810; letter-spacing: -.3px; margin-top: 7px; } .hb-desc { font-size: 11px; line-height: 1.45; color: #808ca3; min-height: 30px; }
.hb-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; }
.hb-status { color: #13a77a; font-size: 10px; font-weight: 760; } .hb-status i { display: inline-block; height: 5px; width: 5px; border-radius: 10px; background: #10c98c; margin-right: 2px; vertical-align: 2px; }
.hb-soon { display: inline-block; font-size: 10px; font-weight: 760; color: #ad7f4e; background: #fff5e9; border-radius: 30px; padding: 5px 8px; }
.hb-arrow { font-size: 17px; color: #657c9e; width: 26px; height: 26px; border-radius: 50%; background: #f5f7fb; display: grid; place-items: center; }
.hb-notice { background: #eef5ff; border: 1px solid #e0edff; border-radius: 20px; padding: 16px; margin-top: 16px; } .hb-notice strong { font-size: 12px; } .hb-notice p { font-size: 11px; line-height: 1.5; margin: 4px 0 0; color: #60708b; }
.hb-sub { position: relative; border-radius: 24px; padding: 23px 21px; overflow: hidden; background: linear-gradient(122deg,#0f234d,#2448b6 65%,#5a66ef); color: #fff; }
.hb-sub h2 { font-size: 23px; line-height: 1.19; letter-spacing: -.5px; margin: 20px 0 10px; color: #fff; } .hb-sub p { max-width: 280px; font-size: 12px; line-height: 1.5; color: #cad8fa; margin: 0; }
.hb-chip { font-size: 9px; letter-spacing: 1px; font-weight: 800; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.2); border-radius: 30px; padding: 7px 10px; display: inline-block; }
.hb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hb-plan { background: #fff; border: 1px solid #e9eef8; border-radius: 18px; padding: 16px 13px; display: grid; align-content: start; gap: 6px; box-shadow: var(--hb-shadow); }
.hb-plan-name { font-size: 11px; font-weight: 800; color: #2a6edd; text-transform: uppercase; letter-spacing: .5px; } .hb-plan strong { font-size: 12px; } .hb-plan small { font-size: 11px; color: #8290a5; }
.hb-disclosure { padding: 13px 14px; margin: 18px 0; background: #fff8e8; color: #8e6c30; border: 1px solid #f4e7c5; border-radius: 14px; } .hb-disclosure p { font-size: 11px; line-height: 1.5; margin: 0; }
/* bottom navigation */
.hb-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px) + var(--tg-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid #e8edf5; box-shadow: 0 -6px 22px rgba(20,40,80,.035); backdrop-filter: blur(16px); }
.hb-nav[hidden] { display: none; }
.hb-nav-item { background: transparent; border: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #8794ab; font-size: 10px; font-weight: 670; min-height: 52px; padding: 4px; }
.hb-nav-item:hover:not(:disabled) { background: transparent; color: #1b61e9; }
.hb-nav-item svg { height: 22px; width: 22px; } .hb-nav-item.selected { color: #1b61e9; } .hb-nav-item.selected svg { fill: rgba(27,97,233,.13); }
body.has-nav .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--tg-bottom, 0px) + var(--kb, 0px)); }
html.kb-open .hb-nav { display: none; }       /* the keyboard is up: do not float the bar over the input */
@media (max-width: 365px) { .hb-h1 { font-size: 26px; } .hb-card { padding: 12px; } .hb-mark { width: 72px; height: 72px; } }

.hb-fresh { margin-top: 14px; padding: 11px 14px; border-radius: 14px; background: #e9f8f2; color: #0b6b4c; font-size: 12px; line-height: 1.45; }
.hb-fresh-warn { background: #fff5e9; color: #8a5a1f; }