/* HydraBit Android launch cards — isolated, responsive and theme-aware. */
.hb-app-section { position:relative; z-index:5; background:#0a0a0c; padding:clamp(24px,5vw,56px) 0; isolation:isolate; }
.hb-app-container { width:100%; max-width:1280px; padding:0 24px; margin:0 auto; box-sizing:border-box; }
.hb-app-banner { position:relative; min-height:330px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr); gap:24px; align-items:center; padding:clamp(28px,5vw,70px); overflow:hidden; border:1px solid rgba(120,172,255,.22); border-radius:28px; background:radial-gradient(ellipse 62% 110% at 94% 35%,rgba(36,104,238,.27),transparent 72%),linear-gradient(125deg,#101b30,#0d1322 53%,#0a101b); box-shadow:0 26px 90px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.06); }
.hb-app-banner:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(127,169,244,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(127,169,244,.22) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(90deg,transparent 35%,#000); }
.hb-app-banner__content { position:relative; z-index:2; min-width:0; }
.hb-app-banner__eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 19px; font:700 10px/1.4 'IBM Plex Mono',monospace; letter-spacing:.17em; color:#94c4ff; }
.hb-app-banner__eyebrow-dot,.hb-app-hero-pulse,.hb-dash-app__tag-dot { display:inline-block; flex:none; height:7px; width:7px; border-radius:50%; background:#69abff; box-shadow:0 0 0 4px rgba(64,131,237,.15),0 0 16px rgba(53,130,250,.45); }
.hb-app-banner h2 { max-width:580px; margin:0; font-family:'Cabinet Grotesk','Satoshi',sans-serif; font-size:clamp(29px,3.8vw,50px); font-weight:800; letter-spacing:-.045em; line-height:1.11; color:#f7faff; text-wrap:balance; }
.hb-app-banner__description { max-width:520px; margin:20px 0 0; font-size:15px; line-height:1.72; color:#aabbd4; }
.hb-app-banner__actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:27px; }
.hb-app-banner__download { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:51px; padding:0 21px; border-radius:12px; font-size:13px; font-weight:750; line-height:1.2; white-space:nowrap; color:white; background:linear-gradient(145deg,#3286ff,#1a5ee0); border:1px solid rgba(185,215,255,.28); box-shadow:0 12px 26px rgba(20,93,221,.3); text-decoration:none; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.hb-app-banner__download:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(20,93,221,.44); background:linear-gradient(145deg,#4596ff,#246be8); color:#fff; }
.hb-app-banner__download svg { flex:none; width:19px; height:19px; }
.hb-app-banner__download .hb-app-banner__btn-arrow { width:16px; height:16px; margin-left:4px; opacity:.72; }
.hb-app-banner__meta { font-size:12px; color:#96a8c2; }
.hb-app-banner__safety { display:flex; align-items:center; gap:7px; margin-top:22px; color:#8196b2; font-size:11px; line-height:1.5; }
.hb-app-banner__safety svg { width:15px; height:15px; flex:none; color:#7fb4f6; }
.hb-app-banner__visual { position:relative; height:100%; min-height:290px; display:flex; align-items:flex-end; justify-content:center; }
.hb-app-banner__ambient { position:absolute; width:310px; height:310px; top:8%; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(60,136,255,.35),rgba(35,100,221,.1) 45%,transparent 73%); filter:blur(10px); }
.hb-app-device { position:relative; z-index:1; width:188px; height:308px; padding:7px; margin-bottom:-73px; border-radius:30px 30px 0 0; background:#050b16; border:2px solid #6d8dbb; border-bottom:0; box-shadow:0 0 0 4px rgba(17,40,75,.65),-25px 14px 80px rgba(0,0,0,.4); transform:rotate(8deg); }
.hb-app-device__notch { position:absolute; top:13px; left:50%; z-index:4; transform:translateX(-50%); width:55px; height:11px; border-radius:12px; background:#060a14; }
.hb-app-device__screen { position:relative; height:100%; overflow:hidden; padding:15px 12px 10px; border-radius:23px 23px 0 0; background:linear-gradient(180deg,#101e37,#0b1527); }
.hb-app-device__screen-top { display:flex; justify-content:space-between; color:#d2e2f7; font-size:8px; letter-spacing:.07em; }
.hb-app-device__identity { margin-top:28px; }
.hb-app-device__identity img { display:block; max-width:115px; height:auto; }
.hb-app-device__hello { margin-top:17px; font-size:12px; font-weight:750; color:#c5ddfa; }
.hb-app-device__panel { margin-top:10px; padding:12px; border:1px solid rgba(112,167,255,.2); border-radius:13px; background:linear-gradient(130deg,rgba(60,111,206,.24),rgba(27,51,87,.3)); }
.hb-app-device__panel-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hb-app-device__faint { width:50px; height:5px; border-radius:4px; background:rgba(187,210,240,.35); }
.hb-app-device__spark { width:17px; height:17px; border-radius:6px; background:rgba(81,143,243,.3); }
.hb-app-device__line { width:46%; height:5px; margin-top:7px; border-radius:4px; background:rgba(170,194,233,.17); }
.hb-app-device__line--wide { width:67%; height:9px; background:#d5e6ff; }
.hb-app-device__chart { height:43px; display:flex; align-items:flex-end; gap:7px; padding-top:11px; }
.hb-app-device__chart span { width:9px; background:linear-gradient(180deg,#60a5fa,#2259c0); border-radius:3px 3px 0 0; opacity:.8; }
.hb-app-device__chart span:nth-child(1){height:14px}.hb-app-device__chart span:nth-child(2){height:24px}.hb-app-device__chart span:nth-child(3){height:20px}.hb-app-device__chart span:nth-child(4){height:29px}.hb-app-device__chart span:nth-child(5){height:25px}.hb-app-device__chart span:nth-child(6){height:36px}.hb-app-device__chart span:nth-child(7){height:30px}
.hb-app-device__tiles { display:flex; gap:6px; margin-top:12px; }.hb-app-device__tiles span { flex:1; height:29px; border-radius:8px; background:rgba(80,131,206,.13); border:1px solid rgba(91,143,217,.16); }
.hb-app-device__nav { display:flex; justify-content:space-around; margin-top:15px; }.hb-app-device__nav i { width:10px; height:10px; border-radius:3px; background:rgba(138,177,222,.35); }.hb-app-device__nav i:first-child { background:#6bb1ff; }
.hb-app-banner__floating-pill { position:absolute; z-index:2; top:48px; right:3%; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; color:#dceaff; font-size:12px; font-weight:700; border:1px solid rgba(137,183,255,.32); border-radius:12px; background:rgba(19,42,78,.92); box-shadow:0 12px 32px rgba(0,0,0,.3); transform:rotate(-7deg); }
.hb-app-banner__floating-pill svg { width:18px; height:18px; fill:#82bdff; }
.hb-app-hero-link { display:inline-flex; align-items:center; gap:11px; padding:10px 15px; margin:19px auto 0; border:1px solid rgba(98,166,255,.3); border-radius:100px; background:rgba(42,111,226,.09); color:#b7d9ff; font-weight:650; font-size:12px; text-decoration:none; transition:background .2s ease,border-color .2s ease; }
.hb-app-hero-link:hover { color:#fff; background:rgba(42,111,226,.19); border-color:rgba(131,192,255,.55); }
.hb-app-hero-arrow { font-size:15px; line-height:1; }
/* Dashboard callout */
.page-content .hb-dash-app { display:flex; align-items:center; gap:20px; min-width:0; min-height:104px; padding:18px 22px; overflow:hidden; border-radius:18px; border:1px solid rgba(68,137,243,.28); background:linear-gradient(110deg,rgba(36,89,175,.15),rgba(48,106,202,.065)); box-shadow:inset 0 1px 0 rgba(134,182,254,.04); }
.hb-dash-app__mark { display:grid; flex:none; place-items:center; width:74px; height:74px; border-radius:18px; border:1px solid rgba(105,159,240,.21); background:linear-gradient(150deg,rgba(39,91,172,.3),rgba(21,41,75,.24)); }
.hb-dash-app__mark img { display:block; width:61px; height:auto; }
.hb-dash-app__copy { min-width:0; flex:1; }
.hb-dash-app__tag { display:inline-flex; align-items:center; gap:8px; color:#79b2ff; font-size:9px; font-weight:800; letter-spacing:.16em; }
.hb-dash-app__tag-dot { width:5px; height:5px; }
.hb-dash-app__copy h2 { margin:5px 0 3px; color:var(--text-primary,#f1f6ff); font-size:16px; line-height:1.3; font-weight:750; letter-spacing:-.02em; }
.hb-dash-app__copy p { margin:0; color:var(--text-muted,#8fa5c1); font-size:12px; line-height:1.55; }
.hb-dash-app__actions { flex:none; display:flex; flex-direction:column; align-items:center; gap:7px; }
.hb-dash-app__actions a { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 17px; min-height:42px; border-radius:10px; border:1px solid rgba(159,199,255,.3); background:#2778f1; color:#fff; font-size:12px; font-weight:750; white-space:nowrap; text-decoration:none; transition:background .18s ease,transform .18s ease; }
.hb-dash-app__actions a:hover { color:#fff; background:#3e90ff; transform:translateY(-1px); }
.hb-dash-app__actions small { font-size:10px; color:var(--text-muted,#8fa5c1); }
[data-theme="light"] .hb-dash-app { border-color:rgba(40,105,208,.2); background:linear-gradient(110deg,#eef5ff,#f7faff); }
[data-theme="light"] .hb-dash-app__mark { border-color:#d2e1f8; background:#e6f0fd; }
[data-theme="light"] .hb-dash-app__copy h2 { color:#0c2342; }
[data-theme="light"] .hb-dash-app__copy p,[data-theme="light"] .hb-dash-app__actions small { color:#536b8b; }
@media (min-width:1024px) { .hb-app-hero-link { margin-left:0; } }
@media (max-width:830px) { .hb-app-banner { grid-template-columns:1fr minmax(170px,.55fr); padding:28px 26px; } .hb-app-banner__visual { min-height:240px; } .hb-app-device { transform:rotate(7deg) scale(.82); transform-origin:center bottom; } .hb-app-banner__floating-pill { top:22px; right:1%; } }
@media (max-width:620px) { .hb-app-container { padding:0 16px; } .hb-app-banner { padding:29px 23px 0; display:flex; flex-direction:column; align-items:stretch; gap:0; border-radius:22px; } .hb-app-banner__description { font-size:13px; } .hb-app-banner__actions { gap:12px; } .hb-app-banner__download { width:100%; } .hb-app-banner__meta { width:100%; text-align:center; } .hb-app-banner__safety { margin-top:15px; } .hb-app-banner__visual { min-height:220px; height:220px; margin-top:20px; overflow:hidden; align-items:flex-start; } .hb-app-device { width:166px; transform:rotate(6deg) scale(.83); transform-origin:center top; margin:13px 0 0; align-self:flex-start; } .hb-app-banner__floating-pill { right:10%; top:24px; } .page-content .hb-dash-app { padding:17px; align-items:flex-start; gap:12px; flex-wrap:wrap; } .hb-dash-app__mark { width:48px; height:48px; border-radius:12px; } .hb-dash-app__mark img { width:39px; height:39px; border-radius:8px; } .hb-dash-app__copy { flex:1 1 calc(100% - 65px); } .hb-dash-app__copy h2 { font-size:14px; } .hb-dash-app__actions { flex:1 1 100%; flex-direction:row; justify-content:space-between; } .hb-dash-app__actions a { flex:1; } }
@media (prefers-reduced-motion:reduce) { .hb-app-banner__download,.hb-app-hero-link,.hb-dash-app__actions a { transition:none; } }