/* App-first product and portal additions. Kept separate from the established site system. */
.apps-hero { position: relative; overflow: hidden; padding: 170px 0 112px; }
.apps-hero::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 76% 45%, rgba(199,246,74,.16), transparent 28%), linear-gradient(125deg, transparent 52%, rgba(255,255,255,.035)); }
.apps-hero-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.apps-hero-copy h1 { margin: 22px 0 28px; color: var(--cream); font-family: var(--display); font-size: clamp(64px, 7vw, 104px); font-weight: 800; letter-spacing: -.065em; line-height: .86; }
.apps-hero-copy h1 em { color: var(--acid); }
.apps-hero-copy > p:not(.eyebrow) { max-width: 630px; margin: 0; color: #adbbb5; font-size: 18px; line-height: 1.75; }
.apps-hero-facts { display: flex; gap: 34px; margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.apps-hero-facts span { display: flex; flex-direction: column; }
.apps-hero-facts strong { color: var(--cream); font-family: var(--display); font-size: 30px; }
.apps-hero-facts small { color: #81928a; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.app-interface-preview { position: relative; max-width: 610px; min-height: 495px; margin-left: auto; padding: 34px; color: var(--ink); background: var(--cream); border: 1px solid rgba(255,255,255,.3); border-radius: 34px; box-shadow: 0 60px 120px rgba(0,0,0,.38); transform: rotate(1.3deg); }
.app-interface-preview::after { position: absolute; z-index: -1; inset: 24px -28px -30px 32px; content: ""; background: var(--acid); border-radius: 34px; opacity: .82; }
.preview-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.preview-top .brand { color: var(--ink); }
.preview-top small,.app-version,.app-availability,.roadmap-label { font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.preview-status { padding: 28px 0 19px; }
.preview-status > span { color: var(--forest-bright); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.preview-status strong { display: block; margin: 9px 0 5px; font-family: var(--display); font-size: 38px; letter-spacing: -.04em; }
.preview-status p { margin: 0; color: var(--muted); font-size: 13px; }
.preview-location { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; }
.preview-location.selected { color: var(--cream); background: var(--forest); border-color: var(--acid); }
.preview-location > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--cream); background: var(--ink); border-radius: 50%; font-family: var(--mono); font-size: 9px; }
.preview-location div { display: flex; flex-direction: column; }
.preview-location small { margin-top: 3px; opacity: .65; }
.preview-location i { font-family: var(--mono); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.preview-connect { position: absolute; right: 38px; bottom: 32px; display: grid; width: 112px; height: 112px; place-items: center; color: var(--ink); background: var(--acid); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 16px 35px rgba(7,20,17,.2); }
.preview-connect span { margin-bottom: -28px; }
.preview-connect .icon { width: 30px; }
.preview-connect strong { font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
.apps-downloads,.app-flow,.app-network { padding: 120px 0; }
.app-download-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 18px; }
.app-download-card { position: relative; display: flex; min-height: 480px; flex-direction: column; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.app-download-featured { color: var(--cream); background: var(--forest); border-color: transparent; }
.app-card-top { display: flex; align-items: center; justify-content: space-between; }
.platform-glyph { display: grid; min-width: 52px; height: 52px; padding: 0 10px; place-items: center; color: var(--ink); background: var(--acid); border-radius: 15px; font-family: var(--display); font-size: 16px; font-weight: 900; }
.app-availability { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; opacity: .75; }
.app-availability i { width: 6px; height: 6px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 0 5px rgba(199,246,74,.12); }
.app-version { display: block; margin-top: 58px; color: var(--forest-bright); }
.app-download-featured .app-version { color: var(--acid); }
.app-download-card h3 { margin: 9px 0 15px; font-family: var(--display); font-size: 42px; letter-spacing: -.045em; }
.app-download-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.app-download-featured p { color: #b9c8c2; }
.app-download-card ul { display: grid; gap: 10px; margin: 28px 0; padding: 0; list-style: none; font-size: 12px; }
.app-download-card li { display: flex; align-items: center; gap: 9px; }
.app-download-card li .icon { width: 14px; color: var(--acid); }
.app-download-card .button { margin-top: auto; }
.sideload-note { display: block; margin-top: 11px; color: #91a69d; line-height: 1.5; }
.roadmap-label { display: inline-flex; width: fit-content; margin-top: auto; padding: 9px 11px; color: var(--forest); background: rgba(30,96,67,.08); border-radius: 9px; }
.app-flow .centered-heading { margin-bottom: 64px; }
.app-flow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: steps; }
.app-flow-grid article { position: relative; min-height: 300px; padding: 30px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.app-flow-grid article > span { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.app-flow-grid article > div { display: grid; width: 62px; height: 62px; margin: 52px 0 25px; place-items: center; color: var(--acid); background: var(--ink); border-radius: 19px; }
.app-flow-grid article:nth-child(2) > div { color: var(--ink); background: var(--acid); }
.app-flow-grid .icon { width: 28px; }
.app-flow-grid h3 { margin: 0 0 10px; font-family: var(--display); font-size: 28px; letter-spacing: -.04em; }
.app-flow-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.app-network { position: relative; }
.live-node-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.live-node-card { min-height: 300px; padding: 27px; color: var(--cream); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); }
.live-node-card.online { background: rgba(199,246,74,.08); border-color: rgba(199,246,74,.3); }
.live-node-head { display: flex; align-items: center; gap: 9px; }
.live-node-head > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ink); background: var(--cream); border-radius: 50%; font-family: var(--mono); font-size: 9px; font-weight: 800; }
.live-node-head i { width: 7px; height: 7px; margin-left: auto; background: #74877f; border-radius: 50%; }
.live-node-card.online .live-node-head i { background: var(--acid); box-shadow: 0 0 0 6px rgba(199,246,74,.12); }
.live-node-head small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.live-node-card h3 { margin: 70px 0 4px; font-family: var(--display); font-size: 42px; letter-spacing: -.05em; }
.live-node-card > p { margin: 0; color: #91a49b; font-size: 13px; }
.live-node-card > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.live-node-card > div:last-child span { display: flex; flex-direction: column; }
.live-node-card > div:last-child small { color: #7d9187; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.live-node-card > div:last-child strong { margin-top: 4px; font-size: 13px; }
.future-node { display: flex; flex-direction: column; border-style: dashed; }
.future-node h3 { margin-top: 70px; }
.future-node > a { margin-top: auto; color: var(--acid); font-weight: 800; }
.account-alert-live { border-color: rgba(49,178,103,.3); background: rgba(49,178,103,.09); }
.account-alert-live .alert-pulse { background: #31b267; box-shadow: 0 0 0 7px rgba(49,178,103,.12); }
.status-light-online { background: #31b267; box-shadow: 0 0 0 12px rgba(49,178,103,.12), 0 0 38px rgba(49,178,103,.35); }
.portal-node-list { display: grid; gap: 7px; margin: 24px 0; }
.portal-node-list > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.portal-node-list p { display: flex; margin: 0; flex-direction: column; }
.portal-node-list small { margin-top: 2px; color: var(--muted); }
.portal-node-list b { font-family: var(--mono); font-size: 9px; }
.location-status-dot.online { background: #31b267; box-shadow: 0 0 0 5px rgba(49,178,103,.12); }
.managed-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--forest); font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.managed-chip .icon { width: 15px; }
.app-setup-list { display: grid; gap: 5px; margin: 24px 0; padding: 0; list-style: none; }
.app-setup-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.app-setup-list li > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: var(--acid); background: var(--ink); border-radius: 50%; font-family: var(--mono); font-size: 8px; }
.app-setup-list p { display: flex; margin: 0; flex-direction: column; }
.app-setup-list small { margin-top: 3px; color: var(--muted); }
@media (max-width: 1050px) { .apps-hero-grid { grid-template-columns: 1fr; } .app-interface-preview { width: min(100%,620px); margin: 0 auto; } .app-download-grid { grid-template-columns: 1fr 1fr; } .app-download-featured { grid-row: span 2; } }
@media (max-width: 760px) { .apps-hero { padding: 125px 0 80px; } .apps-hero-copy h1 { font-size: 58px; } .apps-hero-grid { gap: 58px; } .apps-hero-facts { gap: 19px; } .app-interface-preview { min-height: 460px; padding: 22px; } .preview-connect { width: 90px; height: 90px; right: 24px; } .apps-downloads,.app-flow,.app-network { padding: 80px 0; } .app-download-grid,.app-flow-grid,.live-node-grid { grid-template-columns: 1fr; } .app-download-featured { grid-row: auto; } .app-download-card { min-height: 420px; } }