/* Привітальна сторінка gluoon.com. Кожна картка задає свій --accent інлайном
   із даних застосунку — решта кольорів виводиться з нього. */
:root {
    --hub-bg: #0B0C0E;
    --hub-card: #141518;
    --hub-card-hi: #191A1E;
    --hub-border: #26272C;
    --hub-text: #F4F4F6;
    --hub-sec: #9A9AA3;
    --hub-muted: #63636C;
    --hub-ok: #6BBF8A;
    --hub-dev: #4F9DE0;
    --hub-soon: #8A8A93;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--hub-bg);
    color: var(--hub-text);
    font-family: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

.hub {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 64px 56px;
    overflow: hidden;
    min-height: 100vh;
}

/* ── атмосферне світло ── */
.hub__glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hub__glow--a { width: 1120px; height: 1120px; left: -350px; top: -410px;
    background: radial-gradient(circle, rgba(79, 209, 224, .16) 0%, rgba(79, 209, 224, 0) 70%); }
.hub__glow--b { width: 1040px; height: 1040px; right: -340px; top: -460px;
    background: radial-gradient(circle, rgba(143, 123, 216, .14) 0%, rgba(143, 123, 216, 0) 70%); }
.hub__glow--c { width: 1240px; height: 1240px; left: 140px; bottom: -640px;
    background: radial-gradient(circle, rgba(107, 191, 138, .06) 0%, rgba(107, 191, 138, 0) 70%); }
.hub > *:not(.hub__glow) { position: relative; z-index: 1; }

/* ── шапка ── */
.hub__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hub__brand { display: flex; align-items: center; gap: 12px; }
.hub__brand-logo { width: 34px; height: 34px; }
.hub__brand-text { display: flex; flex-direction: column; gap: 2px; }
.hub__brand-text b { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.hub__brand-text small { font-size: 11px; color: var(--hub-muted); }
.hub__sso {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 20px; border: 1px solid #33343A; border-radius: 20px;
    background: #141518; font-size: 13px; font-weight: 700;
    transition: border-color .16s ease, background .16s ease;
}
.hub__sso:hover { border-color: #4FD1E0; background: #17181D; }
.hub__sso span { color: #4FD1E0; }

/* ── герой ── */
.hub__hero { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 48px; margin: 84px 0 48px; }
.hub__eyebrow {
    display: inline-block; padding: 8px 14px; border-radius: 15px;
    border: 1px solid rgba(79, 209, 224, .35); background: rgba(79, 209, 224, .1);
    color: #7FE3EE; font-size: 11.5px; font-weight: 700;
}
.hub__title { font-size: 54px; font-weight: 800; line-height: 1.14; margin: 22px 0 0;
    letter-spacing: -.02em; }
.hub__title-accent {
    background: linear-gradient(100deg, #4FD1E0 0%, #8F7BD8 55%, #C58BA0 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub__lead { font-size: 15px; color: var(--hub-sec); margin: 18px 0 0; }
.hub__hero-side { flex: none; width: 356px; padding-top: 10px; }
.hub__stats { display: flex; gap: 26px; }
.hub__stat { display: flex; flex-direction: column; gap: 6px; padding-right: 26px;
    border-right: 1px solid #2A2B31; }
.hub__stat:last-child { border-right: 0; }
.hub__stat b { font-size: 34px; font-weight: 800; line-height: 1; }
.hub__stat span { font-size: 11.5px; color: var(--hub-muted); }
.hub__note { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid #222328;
    font-size: 11.5px; color: var(--hub-muted); line-height: 1.5; }

/* ── спільне для карток ── */
.hub__bar {
    position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 0, 0, 0) 80%);
}
.hub__tile {
    position: relative; flex: none; display: inline-flex; align-items: center;
    justify-content: center; width: 56px; height: 56px; border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.hub__tile img { width: 28px; height: 28px; object-fit: contain; }
.hub__tile--lg { width: 76px; height: 76px; border-radius: 18px; }
.hub__tile--lg img { width: 40px; height: 40px; }
.hub__name { font-size: 17px; font-weight: 700; display: block; }
.hub__name--lg { font-size: 26px; font-weight: 800; }
.hub__domain { font-size: 11px; font-weight: 600; color: var(--accent); display: block; margin-top: 4px; }
.hub__desc { font-size: 11.5px; color: #8A8A93; line-height: 1.5; display: block; }
.hub__state {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
    border-radius: 11px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
}
.hub__state i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hub__state--prod { color: var(--hub-ok); background: rgba(107, 191, 138, .12); border: 1px solid rgba(107, 191, 138, .4); }
.hub__state--dev  { color: var(--hub-dev); background: rgba(79, 157, 224, .12); border: 1px solid rgba(79, 157, 224, .4); }
.hub__state--soon { color: var(--hub-soon); background: rgba(138, 138, 147, .12); border: 1px solid rgba(138, 138, 147, .4); }

/* ── картка-флагман ── */
.hub__featured {
    position: relative; display: flex; align-items: center; gap: 24px;
    padding: 32px; margin-bottom: 24px; border-radius: 22px;
    background: var(--hub-card-hi); border: 1px solid #2E3036;
    overflow: hidden; transition: border-color .16s ease, transform .16s ease;
}
.hub__featured::after {
    content: ''; position: absolute; left: -40px; top: -80px; width: 420px; height: 420px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 68%);
    pointer-events: none;
}
.hub__featured > * { position: relative; z-index: 1; }
.hub__featured:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px); }
.hub__featured-body { flex: 1; min-width: 0; }
.hub__featured-body .hub__desc { margin-top: 12px; font-size: 13px; }
.hub__featured-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hub__cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px;
    border-radius: 20px; background: var(--accent); color: #fff;
    font-size: 14px; font-weight: 800;
}

/* ── сітка ── */
.hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub__card {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    padding: 24px; border-radius: 20px; min-height: 186px;
    background: var(--hub-card); border: 1px solid var(--hub-border);
    overflow: hidden; transition: border-color .16s ease, transform .16s ease;
}
.hub__card::after {
    content: ''; position: absolute; left: -20px; top: -60px; width: 260px; height: 260px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 68%);
    pointer-events: none;
}
.hub__card > * { position: relative; z-index: 1; }
.hub__card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
.hub__card-top { display: flex; align-items: center; gap: 16px; }
.hub__card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #232429;
    display: flex; align-items: center; justify-content: space-between; }
.hub__open { font-size: 12px; font-weight: 700; color: var(--accent); }

/* ── підвал ── */
.hub__footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid #212227; }
.hub__footer p { margin: 0 0 6px; font-size: 11.5px; color: var(--hub-muted); }
.hub__copy { color: #4A4A52 !important; }

/* ── адаптив ── */
@media (max-width: 1180px) {
    .hub { padding: 32px 28px 40px; }
    .hub__hero { flex-direction: column; gap: 32px; margin-top: 56px; }
    .hub__hero-side { width: 100%; }
    .hub__title { font-size: 40px; }
    .hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .hub__title { font-size: 30px; }
    .hub__grid { grid-template-columns: 1fr; }
    .hub__featured { flex-direction: column; align-items: flex-start; }
    .hub__featured-side { flex-direction: row; align-items: center; width: 100%;
        justify-content: space-between; }
    .hub__header { flex-direction: column; align-items: flex-start; gap: 16px; }
}