/*
 * Glomnia — bara de sus și mega-meniurile (design primit de la client)
 *
 * Bara e o bandă bleumarin plină, aceeași pe toată lățimea ecranului, iar sub ea
 * coboară panouri albe cu colț rotunjit. Contrastul dintre cele două e tot
 * mecanismul: nu e nevoie de umbre grele ca să se vadă că panoul stă deasupra
 * paginii.
 *
 * Aurul apare de trei ori pe ecran și niciodată în plus: sigla, butonul comercial
 * și sublinierea intrării deschise. E singura culoare care iese din bleumarin,
 * deci fiecare apariție trebuie să însemne ceva.
 *
 * Se încarcă după wireframe.css și îi rescrie regulile de bară. Fără Tailwind,
 * fără webfonts — la fel ca restul zonei publice.
 *
 * @see docs/design/, resources/views/components/glomnia/topbar.blade.php
 */

/* ------------------------------------------------------------------ bara */

.gl-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--gl-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Bara nu se face de sticlă la derulare: designul o ține plină tot timpul, iar
   un fundal care se schimbă sub un panou deschis arată ca o eroare. */
.gl-topbar.is-stuck {
    background: var(--gl-navy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gl-topbar__inner {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* ----------------------------------------------------------------- sigla */

/* Sigla e definită o dată pentru tot site-ul, nu doar pentru bară: apare la fel
   în subsol și pe ecranele de onboarding, care n-au bară. Regulile de aici
   rescriu pătratul rotit din wireframe.css, rămas din prototip. */
.gl-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    text-decoration: none;
}

.gl-brand__mark {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0;
    transform: none;
    color: var(--gl-gold);
    flex: none;
}
.gl-brand:hover .gl-brand__mark { transform: none; }
.gl-brand__mark svg { width: 100%; height: 100%; }

/* Pe bleumarin cuvântul e alb; pe fundal deschis își ia cerneala paginii. */
.gl-topbar .gl-brand,
.gl-sitefooter .gl-brand { color: #fff; }

.gl-brand__text { display: grid; gap: 0.15rem; }

.gl-brand__name {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    /* Cuvântul întins pe litere, ca în siglă. */
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.gl-brand__tagline {
    font-size: 0.5625rem;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
}

/* ------------------------------------------------------------ navigarea */

.gl-topbar__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    font-size: 0.9375rem;
}

.gl-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1.4vw, 1.4rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-nav__item { position: static; }

.gl-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.35rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s var(--ease-calm);
}
.gl-topbar__nav .gl-nav__link:hover { color: #fff; }

/* Sublinierea aurie e singurul semn al panoului deschis — de aceea nu apare
   niciodată la simplă trecere cu mouse-ul. */
.gl-nav__link::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: -0.1rem;
    height: 2px;
    background: var(--gl-gold);
    opacity: 0;
    transition: opacity 0.25s var(--ease-calm);
}
.gl-nav__link { position: relative; }
.gl-nav__link[aria-expanded="true"] { color: var(--gl-gold-2); }
.gl-nav__link[aria-expanded="true"]::after { opacity: 1; }

.gl-nav__caret {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.25s var(--ease-calm);
}
.gl-nav__link[aria-expanded="true"] .gl-nav__caret { transform: rotate(180deg); }

.gl-topbar__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-btn);
    background: none;
    color: #fff;
    cursor: pointer;
}

/* --------------------------------------------------------- dreapta barei */

.gl-topbar__aside {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.4vw, 1.25rem);
    flex: none;
}

.gl-topbar .gl-bell__toggle {
    color: rgba(255, 255, 255, 0.78);
}
.gl-topbar .gl-bell__toggle:hover,
.gl-topbar .gl-bell__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.gl-topbar .gl-bell__toggle .gl-icon { width: 1.15rem; height: 1.15rem; }
.gl-topbar .gl-bell__badge { border-color: var(--gl-navy); }

.gl-topbar .gl-bell__menu {
    top: calc(100% + 0.45rem);
    width: min(22rem, calc(100vw - 2rem));
    background: var(--gl-surface);
    border-color: var(--gl-line-2);
    color: var(--gl-ink);
    box-shadow: 0 22px 55px -24px rgba(6, 16, 32, 0.42), var(--sh-2);
}

.gl-topbar .gl-bell__head {
    padding: 0.8rem 1rem;
    background: var(--gl-surface);
}
.gl-topbar .gl-bell__title {
    color: var(--gl-ink);
    font-size: 1rem;
    font-weight: 650;
}

.gl-topbar .gl-bell__list { max-height: 19rem; }
.gl-topbar .gl-bell__item {
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    background: var(--gl-surface);
    color: var(--gl-ink);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
    text-align: left;
}
.gl-topbar .gl-bell__item.is-unread { background: var(--gl-accent-soft); }
.gl-topbar .gl-bell__item:hover { background: var(--gl-surface-2); }
.gl-topbar .gl-bell__icon {
    width: 2.15rem;
    height: 2.15rem;
    margin-top: 0.05rem;
}
.gl-topbar .gl-bell__icon .gl-icon { width: 1.15rem; height: 1.15rem; }
.gl-topbar .gl-bell__text {
    flex: 1 1 auto;
    gap: 0.18rem;
    overflow: hidden;
}
.gl-topbar .gl-bell__item-title {
    color: var(--gl-ink);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
}
.gl-topbar .gl-bell__item-body {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--gl-ink-2);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gl-topbar .gl-bell__item-body strong { color: var(--gl-ink); font-weight: 600; }
.gl-topbar .gl-bell__item-time {
    margin-top: 0.05rem;
    color: var(--gl-ink-3);
    font-size: 0.75rem;
    line-height: 1.35;
}
.gl-topbar .gl-bell__item.is-unread .gl-bell__item-time {
    color: var(--gl-accent-deep);
    font-weight: 590;
}
.gl-topbar .gl-bell__empty {
    background: var(--gl-surface);
    color: var(--gl-ink-3);
}
.gl-topbar .gl-bell__more {
    padding: 0.75rem 1rem;
    background: var(--gl-surface);
    color: var(--gl-accent-deep);
    font-size: 0.875rem;
}
.gl-topbar .gl-bell__more:hover { background: var(--gl-surface-2); }

.gl-topbar__account {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--ease-calm);
}
.gl-topbar__account:hover { color: #fff; }
.gl-topbar__account .gl-icon { width: 1.1rem; height: 1.1rem; }

.gl-account-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gl-account-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-calm), color 0.2s var(--ease-calm);
}
.gl-account-menu__toggle:hover,
.gl-account-menu__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.gl-account-menu__toggle .gl-icon {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.2s var(--ease-calm);
}
.gl-account-menu__toggle[aria-expanded="true"] .gl-icon { transform: rotate(180deg); }

.gl-account-menu__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 60;
    min-width: 14rem;
    padding: var(--gl-1);
    background: var(--gl-glass-strong);
    backdrop-filter: var(--gl-blur);
    -webkit-backdrop-filter: var(--gl-blur);
    border: 1px solid var(--gl-line);
    border-radius: var(--r);
    box-shadow: var(--sh-2);
    color: var(--gl-ink);
    animation: gl-menu-in 0.22s var(--ease);
    transform-origin: top right;
}
.gl-account-menu__panel[hidden] { display: none; }

.gl-account-menu__item {
    display: flex;
    align-items: center;
    gap: var(--gl-2);
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--gl-ink);
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s var(--ease-calm);
}
.gl-account-menu__item:hover { background: var(--gl-surface-2); }
.gl-account-menu__item .gl-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--gl-accent);
    flex: none;
}

.gl-account-menu__logout {
    margin: var(--gl-1) 0 0;
    padding-top: var(--gl-1);
    border-top: 1px solid var(--gl-line);
}

/* Selectorul de limbă e moștenit din wireframe.css, unde e desenat pentru fundal
   deschis; pe bleumarin îi schimbăm doar culorile, nu forma. */
.gl-topbar .gl-locale__toggle {
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
}
.gl-topbar .gl-locale__toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------- mega-meniuri */

.gl-mega {
    position: absolute;
    top: 100%;
    left: clamp(1rem, 3vw, 2.5rem);
    right: clamp(1rem, 3vw, 2.5rem);
    z-index: 50;
    padding-top: 0.5rem;
    color: var(--gl-ink);
}
.gl-mega[hidden] { display: none; }

.gl-mega__inner {
    background: var(--gl-surface);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 70px -25px rgba(6, 16, 32, 0.45), 0 2px 8px rgba(6, 16, 32, 0.12);
    overflow: hidden;
    animation: gl-mega-in 0.28s var(--ease) both;
}

@keyframes gl-mega-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-mega__inner,
    .gl-account-menu__panel { animation: none; }
}

/* --- rândurile din panou ------------------------------------------------ */

.gl-mega__list { display: grid; gap: 0.15rem; }

.gl-mega__link {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: start;
    gap: 0.9rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s var(--ease-calm);
}
.gl-mega__link:hover { background: var(--gl-surface-2); }

.gl-mega__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gl-ink);
    padding-top: 0.1rem;
}
.gl-mega__link-icon .gl-icon { width: 1.4rem; height: 1.4rem; }
.gl-mega__link:hover .gl-mega__link-icon { color: var(--gl-gold-deep); }

.gl-mega__link-text { display: grid; gap: 0.1rem; }
.gl-mega__link-label { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.gl-mega__link-note { font-size: 0.8125rem; color: var(--gl-ink-3); line-height: 1.4; }

/* --- panoul „listă + promo" -------------------------------------------- */

.gl-mega__split {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) 1fr;
    gap: clamp(1.5rem, 3vw, 3.5rem);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.gl-mega__promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--gl-5);
    border-left: 1px solid var(--gl-line);
    padding-left: clamp(1.5rem, 3vw, 3rem);
}

.gl-mega__promo-body { display: grid; gap: var(--gl-4); align-content: start; }

.gl-mega__promo-title {
    font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 650;
    margin: 0;
    max-width: 22ch;
}

.gl-mega__promo-text { color: var(--gl-ink-2); font-size: 0.9375rem; max-width: 44ch; margin: 0; }

.gl-mega__features { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.gl-mega__features li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.75rem; align-items: start; }
.gl-mega__features strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.gl-mega__features span span { display: block; font-size: 0.8125rem; color: var(--gl-ink-3); }
.gl-mega__feature-icon { width: 1.35rem; height: 1.35rem; color: var(--gl-gold-deep); }

.gl-mega__promo-actions { display: flex; align-items: center; gap: var(--gl-4); flex-wrap: wrap; }

.gl-mega__promo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gl-accent);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.gl-mega__promo-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.gl-mega__promo-link .gl-icon { width: 1.1rem; height: 1.1rem; }

.gl-mega__art { color: var(--gl-ink); opacity: 0.9; }
.gl-mega__art svg { width: 100%; height: auto; }
.gl-mega__art--network svg,
.gl-mega__art--facade svg { color: var(--gl-accent); opacity: 0.55; }

/* --- panoul pe coloane -------------------------------------------------- */

.gl-mega__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 3rem);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.gl-mega__column { display: grid; gap: var(--gl-3); align-content: start; }
.gl-mega__column + .gl-mega__column { border-left: 1px solid var(--gl-line); padding-left: clamp(1.25rem, 2.6vw, 3rem); }

.gl-mega__column-title {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--gl-accent);
    margin: 0 0 0.25rem;
}

.gl-mega__search {
    margin-top: var(--gl-3);
    padding: var(--gl-4);
    background: var(--gl-surface-2);
    border-radius: var(--r);
    display: grid;
    gap: 0.35rem;
}
.gl-mega__search-title { font-weight: 650; font-size: 0.9375rem; margin: 0; }
.gl-mega__search-note { font-size: 0.8125rem; color: var(--gl-ink-3); margin: 0 0 var(--gl-2); }

/* --- panoul de prețuri -------------------------------------------------- */

.gl-mega__plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.gl-mega__plans-title {
    font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 650;
    margin: 0 0 var(--gl-5);
    max-width: 16ch;
}

.gl-mega__plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gl-4); align-items: start; }

.gl-mega__plans-aside {
    display: grid;
    gap: 0.15rem;
    align-content: start;
    border-left: 1px solid var(--gl-line);
    padding-left: clamp(1.25rem, 2.6vw, 2.5rem);
}

/* --- subsolul panoului și banda de cifre -------------------------------- */

.gl-mega__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--gl-4);
    border-top: 1px solid var(--gl-line);
    color: var(--gl-accent);
    font-weight: 600;
    text-decoration: none;
}
.gl-mega__footer:hover { text-decoration: underline; text-underline-offset: 4px; }
.gl-mega__footer .gl-icon { width: 1.1rem; height: 1.1rem; }

.gl-mega__strip {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
    padding: var(--gl-4) clamp(1.5rem, 2.4vw, 2.25rem);
    border-top: 1px solid var(--gl-line);
    background: var(--gl-surface);
}

.gl-mega__strip-search { flex: 1 1 22rem; }

.gl-mega__figures { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); margin: 0; flex-wrap: wrap; }
.gl-mega__figure { display: flex; align-items: center; gap: 0.65rem; }
.gl-mega__figure + .gl-mega__figure { border-left: 1px solid var(--gl-line); padding-left: clamp(1rem, 2.4vw, 2.25rem); }
.gl-mega__figure .gl-icon { width: 1.5rem; height: 1.5rem; color: var(--gl-ink-2); }
.gl-mega__figure dt { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.gl-mega__figure dd { margin: 0; font-size: 0.8125rem; color: var(--gl-ink-3); }

/* ------------------------------------------------------- câmpul de căutare */

.gl-search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gl-surface);
    border: 1px solid var(--gl-line-2);
    border-radius: var(--r-btn);
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}
.gl-search-field:focus-within { border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-soft); }

.gl-search-field__icon { width: 1.15rem; height: 1.15rem; color: var(--gl-ink-3); flex: none; }

.gl-search-field__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    outline: none;
}
.gl-search-field__input::placeholder { color: var(--gl-ink-3); }
.gl-search-field__input::-webkit-search-cancel-button { display: none; }

.gl-search-field__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    border: 0;
    border-radius: var(--r-btn);
    background: var(--gl-navy-2);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-calm);
}
.gl-search-field__submit:hover { background: var(--gl-navy-3); }

.gl-search-field--lg { padding-left: 0.9rem; }
.gl-search-field--lg .gl-search-field__input { padding-block: 0.65rem; }

/* --------------------------------------------------------------- planuri */

.gl-plan {
    display: flex;
    flex-direction: column;
    gap: var(--gl-4);
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--r);
    padding: var(--gl-5);
    position: relative;
}

/* Planul recomandat nu e mai mare, doar mai apăsat: o bandă în capul cardului
   și o ramă mai închisă. Dacă ar fi și mai mare, ar strica rândul. */
.gl-plan.is-popular { border-color: var(--gl-navy-2); padding-top: calc(var(--gl-5) + 0.9rem); }

.gl-plan__flag {
    position: absolute;
    inset: 0 0 auto;
    background: var(--gl-navy-2);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem;
    border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

.gl-plan__body { display: grid; gap: 0.35rem; }
.gl-plan__name { font-size: 1.125rem; font-weight: 650; margin: 0; letter-spacing: -0.02em; }
.gl-plan__headline { color: var(--gl-gold-deep); font-weight: 600; font-size: 0.9375rem; margin: 0; }
.gl-plan__pitch { color: var(--gl-ink-3); font-size: 0.8125rem; margin: 0 0 var(--gl-3); }

.gl-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0 0 var(--gl-3);
    padding-top: var(--gl-3);
    border-top: 1px solid var(--gl-line);
}
.gl-plan__prefix { font-size: 0.875rem; color: var(--gl-ink-3); }
.gl-plan__amount { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.035em; }
.gl-plan__period { font-size: 0.8125rem; color: var(--gl-ink-3); }

.gl-plan__features { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gl-plan__features li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.55rem; align-items: start; font-size: 0.875rem; }
.gl-plan__features .gl-icon { width: 1.05rem; height: 1.05rem; color: var(--gl-gold-deep); margin-top: 0.15rem; }

.gl-plan--compact { padding: var(--gl-4); gap: var(--gl-3); }
.gl-plan--compact.is-popular { padding-top: calc(var(--gl-4) + 0.9rem); }

/* --------------------------------------------------------- roata de relații */

/*
 * Fiecare nod e o cutie cât toată figura, rotită în jurul centrului cu unghiul
 * lui; conținutul stă lipit de marginea de sus, deci raza iese din mărimea
 * figurii, nu din lățimea nodului. Cutia interioară se rotește înapoi cu același
 * unghi, ca textul să rămână orizontal.
 */

.gl-ring {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    /* Cât de departe de marginea de sus începe nodul. */
    --gl-ring-inset: 5%;
}

.gl-ring__nodes,
.gl-ring__spokes {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Unghiul se declară pe elementul care își știe indexul; cutia și eticheta din
   el îl moștenesc deja calculat. */
.gl-ring__spoke,
.gl-ring__node {
    --gl-ring-angle: calc(var(--gl-ring-i) / var(--gl-ring-count) * 360deg);
}

.gl-ring__spoke {
    position: absolute;
    inset: 0;
    transform: rotate(var(--gl-ring-angle));
}

.gl-ring__spoke::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--gl-ring-inset) + 3.5rem);
    bottom: 50%;
    width: 1px;
    translate: -50% 0;
    background: var(--gl-line-2);
}

.gl-ring__edge {
    position: absolute;
    left: 50%;
    top: 24%;
    translate: -50% -50%;
    rotate: calc(var(--gl-ring-angle) * -1);
    background: var(--gl-surface);
    padding: 0.15rem 0.35rem;
    font-size: 0.625rem;
    color: var(--gl-ink-3);
    white-space: nowrap;
}

.gl-ring__node {
    position: absolute;
    inset: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    padding-top: var(--gl-ring-inset);
    transform: rotate(var(--gl-ring-angle));
}

.gl-ring__cell {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    width: 7rem;
    text-align: center;
    rotate: calc(var(--gl-ring-angle) * -1);
}

.gl-ring__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--gl-surface);
    border: 1.5px solid var(--gl-line-2);
    color: var(--gl-ink);
}
.gl-ring__bubble .gl-icon { width: 1.5rem; height: 1.5rem; }

.gl-ring__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gl-ink-2); }

/* Cercul colorat e singurul loc unde paleta se lărgește: rolurile trebuie să se
   distingă între ele dintr-o privire, iar bleumarinul singur nu poate. */
.gl-ring__node--blue .gl-ring__bubble { border-color: #3d7fd0; color: #2f6bbd; }
.gl-ring__node--cyan .gl-ring__bubble { border-color: #3aa6bd; color: #2b8ba1; }
.gl-ring__node--green .gl-ring__bubble { border-color: #46986a; color: #37855a; }
.gl-ring__node--violet .gl-ring__bubble { border-color: #7d6bc4; color: #6858b0; }
.gl-ring__node--orange .gl-ring__bubble { border-color: #d18a45; color: #b8722f; }
.gl-ring__node--gold .gl-ring__bubble { border-color: var(--gl-gold); color: var(--gl-gold-deep); }

.gl-ring__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.3rem;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gl-navy);
    color: #fff;
    text-align: center;
    padding: 0.5rem;
}
.gl-ring__hub .gl-icon { width: 1.6rem; height: 1.6rem; }
.gl-ring__hub span { font-size: 0.75rem; font-weight: 650; line-height: 1.15; }

/* ------------------------------------------------------------ pe telefon */

@media (max-width: 1180px) {
    .gl-brand__tagline { display: none; }
}

@media (max-width: 1023px) {
    .gl-topbar__burger { display: inline-flex; }
    .gl-topbar__nav { flex: none; }
    .gl-topbar__inner { justify-content: space-between; }

    /* Sub un ecran de tabletă meniul devine o coloană care coboară din bară, iar
       panourile devin acordeon în interiorul ei: aceleași butoane, altă așezare. */
    .gl-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100dvh - var(--topbar-h));
        overflow-y: auto;
        background: var(--gl-surface);
        color: var(--gl-ink);
        box-shadow: var(--sh-2);
    }
    .gl-nav.is-open { display: flex; }

    .gl-nav__item { border-bottom: 1px solid var(--gl-line); }

    .gl-topbar__nav .gl-nav__link {
        width: 100%;
        justify-content: space-between;
        padding: var(--gl-4) clamp(1rem, 3vw, 2.5rem);
        color: var(--gl-ink);
        font-size: 1rem;
    }
    .gl-topbar__nav .gl-nav__link:hover { color: var(--gl-ink); }
    .gl-nav__link[aria-expanded="true"] { color: var(--gl-accent); }
    .gl-nav__link::after { display: none; }

    .gl-mega {
        position: static;
        padding: 0 clamp(1rem, 3vw, 2.5rem) var(--gl-4);
    }
    .gl-mega__inner { box-shadow: none; border-radius: var(--r); border: 1px solid var(--gl-line); animation: none; }

    .gl-mega__split,
    .gl-mega__columns,
    .gl-mega__plans { grid-template-columns: minmax(0, 1fr); gap: var(--gl-5); padding: var(--gl-4); }

    .gl-mega__promo,
    .gl-mega__plans-aside,
    .gl-mega__column + .gl-mega__column {
        border-left: 0;
        border-top: 1px solid var(--gl-line);
        padding-left: 0;
        padding-top: var(--gl-5);
    }

    .gl-mega__promo { grid-template-columns: minmax(0, 1fr); }
    .gl-mega__art { display: none; }
    .gl-mega__plan-cards { grid-template-columns: minmax(0, 1fr); }
    .gl-mega__strip { padding-inline: var(--gl-4); }
    .gl-mega__figures { gap: var(--gl-4); }
    .gl-mega__figure + .gl-mega__figure { border-left: 0; padding-left: 0; }
}

/* Eticheta scurtă există doar sub pragul telefonului; până acolo e cea lungă. */
.gl-topbar__label-short { display: none; }

@media (max-width: 700px) {
    .gl-topbar__inner { gap: 0.5rem; padding-inline: 0.75rem; }
    .gl-topbar__aside { gap: 0.25rem; }
    .gl-topbar__aside .gl-btn { font-size: 0.8125rem; padding-inline: 0.75rem; }
    .gl-brand__name { font-size: 1.15rem; letter-spacing: 0.1em; }

    .gl-topbar .gl-bell__menu {
        position: fixed;
        top: calc(var(--topbar-h) + 0.5rem);
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .gl-topbar__account .gl-topbar__label,
    .gl-btn .gl-topbar__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .gl-topbar__label-short { display: inline; }
}

@media (max-width: 480px) {
    .gl-topbar .gl-brand__text { display: none; }
}

/* ---------------------------------------------------------------- subsol */

.gl-sitefooter {
    background: var(--gl-navy);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
}

.gl-sitefooter__inner {
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 18rem) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
}

.gl-sitefooter__brand { display: grid; gap: var(--gl-4); align-content: start; }
.gl-sitefooter__brand p { max-width: 30ch; line-height: 1.6; margin: 0; }

.gl-sitefooter__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.gl-sitefooter__column h2 {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gl-gold-2);
    margin: 0 0 var(--gl-3);
}
.gl-sitefooter__column ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.gl-sitefooter__column a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.gl-sitefooter__column a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.gl-sitefooter__legal {
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--gl-4) clamp(1rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gl-4);
    font-size: 0.8125rem;
}
.gl-sitefooter__legal p { margin: 0; }
.gl-sitefooter__legal ul { display: flex; gap: var(--gl-4); margin: 0; padding: 0; list-style: none; }
.gl-sitefooter__legal a { color: inherit; text-decoration: none; }
.gl-sitefooter__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
    .gl-sitefooter__inner { grid-template-columns: minmax(0, 1fr); }
}