:root {
  --ink: #0B0F14;
  --brand: #0066FF;
  --brand2: #004DCC;
  --accent: #FFB020;
  --bg: #F3F5F8;
  --shadow: 0 16px 48px rgba(11, 15, 20, .09);
}

.topbar,
.public-header {
  min-height: 78px;
  height: auto;
  background: #0B0F14;
  border-bottom: 2px solid rgba(255, 176, 32, .85);
  color: #FFF;
}

.brand,
.escone-brand,
.brand-lockup {
  display: inline-flex;
  align-items: center;
}

.brand-lockup { gap: 14px; }
.public-brand-lockup { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.public-company-mark { width: auto; max-width: 160px; height: 48px; object-fit: contain; background: transparent; border: 0; padding: 0; }
.public-company-name { max-width: 220px; color: #FFF; font-size: 13px; font-weight: 800; text-align: right; }
.brand { letter-spacing: 0; }
.escone-brand { gap: 10px; }
.escone-brand > img { width: 42px; height: 42px; object-fit: contain; }
.escone-wordmark { display: grid; line-height: 1; color: #FFF; }
.escone-wordmark > span { font-size: 21px; font-weight: 300; letter-spacing: .05em; white-space: nowrap; }
.escone-wordmark strong { font-weight: 900; }
.escone-wordmark small { margin-top: 6px; font-size: 7px; font-weight: 800; letter-spacing: .32em; white-space: nowrap; }
.escone-wordmark i { color: #FFB020; font-style: normal; }

.topbar nav { color: rgba(255,255,255,.82); }
.topbar nav > a:hover { color: #FFF; }
.topbar .org { color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.2); }
.topbar .link { color: #FFB020; }
.topbar .button.small { background: #FFB020; border-color: #FFB020; color: #0B0F14; }
.topbar .button.small:hover { background: #FFC65C; border-color: #FFC65C; }
.company-mark { width: auto; max-width: 120px; height: 38px; object-fit: contain; background: transparent; border: 0; border-radius: 0; padding: 0; }

.eyebrow { color: #0066FF; }
.page-heading .eyebrow::before,
.hero .eyebrow::before { content: ''; display: inline-block; width: 24px; height: 3px; margin: 0 9px 3px 0; background: #FFB020; border-radius: 2px; }
.button.primary { background: #0066FF; border-color: #0066FF; }
.button.primary:hover { background: #004DCC; border-color: #004DCC; }
input:focus,
select:focus,
textarea:focus { outline: 3px solid rgba(0,102,255,.16); border-color: #0066FF; }

.public-page { background: radial-gradient(circle at 50% 8%, rgba(0,102,255,.25), transparent 32%), linear-gradient(180deg, #0B0F14 0, #111A28 34%, #F3F5F8 76%); background-attachment: fixed; }
.auth-card { overflow: hidden; border-top: 4px solid #0066FF; }
.login-brands { position: relative; min-height: 116px; margin: -40px -40px 28px; padding: 26px 32px; background: #0B0F14; overflow: hidden; }
.login-brands .escone-brand { position: relative; z-index: 1; flex: 1 1 58%; }
.login-brands:not(.has-company) .escone-brand { flex: 0 0 auto; }
.login-brands .escone-brand > img { width: 64px; height: 64px; }
.login-brands .escone-wordmark > span { color: #FFF; font-size: 29px; }
.login-brands .escone-wordmark small { color: #FFF; font-size: 8px; }
.login-brands > img { position: relative; z-index: 1; flex: 0 1 38%; width: auto; height: 58px; max-width: 38%; object-fit: contain; background: transparent; padding: 0; border: 0; border-radius: 0; }
.brand-divider { display: none; }

.module-card.active { position: relative; overflow: hidden; }
.module-card.active::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#0066FF 0 70%, #FFB020 70%); }
.module-card.active:hover { border-color: rgba(0,102,255,.45); }
.maintenance-banner { background: #FFF6E3; border-color: rgba(255,176,32,.55); color: #5C4105; }
.download-gate { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start; border-top: 4px solid #0066FF; }
.download-gate h2 { margin: 5px 0 10px; }
.download-gate p { color: #64748B; line-height: 1.6; }
.download-gate form { margin: 22px 0 12px; }
.download-gate .button.primary { width: 100%; min-height: 54px; }
.download-gate .button.danger { margin-top: 16px; }
.download-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 16px; background: #0B0F14; color: #FFF; border-bottom: 5px solid #FFB020; font-size: 16px; font-weight: 900; letter-spacing: .08em; }
.download-confirmation { max-width: 760px; margin: 0 auto 16px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 12px; background: #E7F8F0; color: #0F6B4B; }
.download-confirmation span { font-size: 13px; }
.sign-company { margin: 5px 0 12px; color: #64748B; }
.sign-company strong { color: #0B0F14; }

footer { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; background: #0B0F14; color: rgba(255,255,255,.72); border-top: 2px solid #0066FF; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-brand strong { color: #FFF; letter-spacing: .06em; }
.footer-brand span { color: #FFB020; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.footer-brand small { width: 100%; }
.creator-credit { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.2); font-size: 10px; letter-spacing: .05em; color: rgba(255,255,255,.52); }
.creator-credit b { display: block; margin-top: 4px; color: #FFF; font-size: 11px; letter-spacing: .08em; }

@media(max-width: 760px) {
  .topbar, .public-header { min-height: 68px; }
  .escone-brand > img { width: 36px; height: 36px; }
  .escone-wordmark > span { font-size: 18px; }
  .escone-wordmark small { display: none; }
  .login-brands .escone-wordmark small { display: block; }
  .company-mark { width: auto; max-width: 92px; height: 34px; }
  .public-brand-lockup { gap: 12px; }
  .public-company-mark { max-width: 112px; height: 38px; }
  .public-company-name { max-width: 120px; font-size: 11px; }
  .login-brands { min-height: 104px; margin: -22px -22px 24px; padding: 22px 18px; gap: 10px; }
  .login-brands .escone-brand > img { width: 56px; height: 56px; }
  .login-brands .escone-wordmark > span { font-size: 25px; }
  .login-brands > img { width: auto; height: 54px; max-width: 37%; }
  .download-gate { grid-template-columns: 1fr; text-align: center; }
  .download-icon { margin: 0 auto; }
  .download-confirmation { display: grid; text-align: center; }
  footer { gap: 14px; }
  .creator-credit { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }
}