/* =============================================================
   Modern Glass Landing Theme
   Scoped under .gl-theme so it never leaks into other pages.
   ============================================================= */

/*
 * Cairo is already shipped with the project, so the landing page self-hosts it rather than
 * adding a blocking third-party font request. A render-blocking external stylesheet also
 * delays the icon webfont, which is why nothing here depends on Google Fonts.
 */
 @font-face {
    font-family: 'GlassSans';
    src: url(../fonts/Cairo-Medium.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GlassSans';
    src: url(../fonts/Cairo-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.gl-theme {
    /* Brand tokens are shared by both colour modes so the identity never shifts. */
    --gl-brand: #24d366;
    --gl-brand-2: #0bd5ae;
    --gl-brand-3: #22d3ee;
    --gl-deep: #035e54;
    --gl-on-brand: #04120a;

    /* Brand tones used as *text* need more weight on a pale canvas than on a dark one. */
    --gl-brand-ink: #24d366;
    --gl-brand-ink-2: #22d3ee;

    /* Dark mode is the default surface set. */
    --gl-bg: #04070b;
    --gl-surface: rgba(255, 255, 255, 0.045);
    --gl-surface-2: rgba(255, 255, 255, 0.075);
    --gl-border: rgba(255, 255, 255, 0.1);
    --gl-border-strong: rgba(255, 255, 255, 0.2);
    --gl-text: #eaf4f1;
    --gl-text-soft: rgba(234, 244, 241, 0.82);
    --gl-muted: rgba(234, 244, 241, 0.62);
    --gl-faint: rgba(234, 244, 241, 0.45);
    --gl-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    --gl-shadow-float: 0 18px 44px rgba(0, 0, 0, 0.5);
    --gl-grid: rgba(255, 255, 255, 0.028);
    --gl-orb-opacity: 0.5;
    --gl-nav-bg: rgba(4, 7, 11, 0.72);
    --gl-panel-bg: rgba(8, 14, 20, 0.96);
    --gl-backdrop: rgba(2, 5, 8, 0.7);
    --gl-chip-bg: rgba(10, 17, 24, 0.72);
    --gl-footer-bg: rgba(4, 7, 11, 0.6);
    --gl-spot: rgba(36, 211, 102, 0.16);
    --gl-shine-edge: #ffffff;
    --gl-logo-glow: 0 0 18px rgba(36, 211, 102, 0.55);
    --gl-mock-bg: linear-gradient(180deg, rgba(9, 16, 23, 0.95), rgba(6, 11, 16, 0.95));
    --gl-featured-bg: linear-gradient(165deg, rgba(36, 211, 102, 0.11), rgba(255, 255, 255, 0.03));

    --gl-radius: 24px;
    --gl-radius-sm: 16px;
    --gl-container: 1240px;
    --gl-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    background: var(--gl-bg);
    color: var(--gl-text);
    font-family: 'GlassSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.45s ease, color 0.45s ease;
}

/*
 * Light mode only re-points the surface tokens. Every rule below consumes those tokens, so no
 * component needs a light-specific override and the two modes can never drift apart.
 */
.gl-theme[data-gl-mode='light'] {
    --gl-brand-ink: #0a9d55;
    --gl-brand-ink-2: #0587a8;

    --gl-bg: #f2f7f6;
    --gl-surface: rgba(255, 255, 255, 0.7);
    --gl-surface-2: rgba(255, 255, 255, 0.92);
    --gl-border: rgba(3, 94, 84, 0.13);
    --gl-border-strong: rgba(3, 94, 84, 0.24);
    --gl-text: #062b25;
    --gl-text-soft: rgba(6, 43, 37, 0.85);
    --gl-muted: rgba(6, 43, 37, 0.66);
    --gl-faint: rgba(6, 43, 37, 0.48);
    --gl-shadow: 0 24px 60px rgba(3, 94, 84, 0.14);
    --gl-shadow-float: 0 16px 38px rgba(3, 94, 84, 0.18);
    --gl-grid: rgba(3, 94, 84, 0.055);
    --gl-orb-opacity: 0.34;
    --gl-nav-bg: rgba(255, 255, 255, 0.8);
    --gl-panel-bg: rgba(255, 255, 255, 0.97);
    --gl-backdrop: rgba(6, 43, 37, 0.32);
    --gl-chip-bg: rgba(255, 255, 255, 0.88);
    --gl-footer-bg: rgba(255, 255, 255, 0.66);
    --gl-spot: rgba(36, 211, 102, 0.14);
    --gl-shine-edge: #062b25;
    --gl-logo-glow: 0 0 14px rgba(3, 94, 84, 0.28);
    --gl-mock-bg: linear-gradient(180deg, #ffffff, #eef4f3);
    --gl-featured-bg: linear-gradient(165deg, rgba(36, 211, 102, 0.16), rgba(255, 255, 255, 0.8));
}

.gl-theme *,
.gl-theme *::before,
.gl-theme *::after {
    box-sizing: border-box;
}

.gl-theme h1,
.gl-theme h2,
.gl-theme h3,
.gl-theme h4,
.gl-theme h5 {
    color: var(--gl-text);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.gl-theme p {
    color: var(--gl-muted);
    margin: 0;
    line-height: 1.75;
}

.gl-theme a {
    color: inherit;
    text-decoration: none;
}

.gl-theme img {
    max-width: 100%;
    height: auto;
}

.gl-theme ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-theme button {
    font-family: inherit;
}

/* ---------- Layout helpers ---------- */

.gl-container {
    width: 100%;
    max-width: var(--gl-container);
    margin-inline: auto;
    padding-inline: 24px;
}

.gl-section {
    position: relative;
    padding: 50px 0;
    z-index: 2;
}

.gl-section--tight {
    padding: 78px 0;
}

.gl-head {
    max-width: 720px;
    margin: 0 auto 62px;
    text-align: center;
}

.gl-head h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 18px;
}

.gl-head p {
    font-size: 17px;
}

.gl-head .gl-pill {
    margin-bottom: 18px;
}

.gl-eyebrow {
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.gl-center {
    text-align: center;
}

/* Comfortable reading measure for long-form pages. */
.gl-narrow {
    max-width: 860px;
    margin-inline: auto;
}

.gl-lead {
    font-size: 16.5px;
    line-height: 1.8;
}

.gl-lead + .gl-lead {
    margin-top: 16px;
}

/* ---------- Inline icons ---------- */

.gl-i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: block;
}

[dir='rtl'] .gl-i--flip {
    transform: scaleX(-1);
}

/* ---------- Aurora background ---------- */

.gl-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.gl-aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--gl-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--gl-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}

.gl-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--gl-orb-opacity);
    will-change: transform;
    transition: opacity 0.45s ease;
}

.gl-orb--1 {
    width: 620px;
    height: 620px;
    top: -180px;
    left: -120px;
    background: radial-gradient(circle, rgba(36, 211, 102, 0.55), transparent 68%);
    animation: gl-drift-a 22s var(--gl-ease) infinite alternate;
}

.gl-orb--2 {
    width: 560px;
    height: 560px;
    top: 4%;
    right: -140px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.42), transparent 68%);
    animation: gl-drift-b 26s var(--gl-ease) infinite alternate;
}

.gl-orb--3 {
    width: 720px;
    height: 720px;
    top: 52%;
    left: 34%;
    background: radial-gradient(circle, rgba(11, 213, 174, 0.3), transparent 70%);
    animation: gl-drift-c 30s var(--gl-ease) infinite alternate;
}

@keyframes gl-drift-a {
    to {
        transform: translate3d(120px, 90px, 0) scale(1.15);
    }
}

@keyframes gl-drift-b {
    to {
        transform: translate3d(-110px, 130px, 0) scale(1.12);
    }
}

@keyframes gl-drift-c {
    to {
        transform: translate3d(90px, -120px, 0) scale(0.9);
    }
}

/* ---------- Glass surfaces ---------- */

.gl-glass {
    position: relative;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--gl-shadow);
}

/* Gradient hairline on top edge */
.gl-glass::before {
    content: '';
    position: absolute;
    inset-inline: 18%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(36, 211, 102, 0.75), transparent);
    opacity: 0.85;
}

/* Cursor spotlight */
.gl-spot {
    overflow: hidden;
}

.gl-spot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(320px circle at var(--gl-mx, 50%) var(--gl-my, 50%),
            var(--gl-spot), transparent 65%);
    pointer-events: none;
}

.gl-spot:hover::after {
    opacity: 1;
}

/* ---------- Buttons ---------- */

.gl-btn {
    position: relative;
    /* The sheen pseudo-element is clipped to the pill, otherwise it streaks outside the button. */
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.35s var(--gl-ease), box-shadow 0.35s var(--gl-ease),
        background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.gl-btn--primary {
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2) 55%, var(--gl-brand-3));
    box-shadow: 0 14px 34px rgba(36, 211, 102, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.gl-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(36, 211, 102, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/*
 * Sheen sweep. Driven by a transition rather than a keyframe so that leaving the button mid-sweep
 * reverses smoothly instead of snapping, and re-entering never restarts a half-finished animation.
 */
.gl-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.5) 48%, transparent 66%);
    transform: translateX(-135%);
    transition: transform 0.85s var(--gl-ease);
}

.gl-btn--primary:hover::after {
    transform: translateX(135%);
}

[dir='rtl'] .gl-btn--primary::after {
    transform: translateX(135%);
}

[dir='rtl'] .gl-btn--primary:hover::after {
    transform: translateX(-135%);
}

.gl-btn--ghost {
    color: var(--gl-text);
    background: var(--gl-surface);
    border-color: var(--gl-border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gl-btn--ghost:hover {
    transform: translateY(-3px);
    background: var(--gl-surface-2);
    border-color: rgba(36, 211, 102, 0.55);
    box-shadow: 0 0 30px rgba(36, 211, 102, 0.22);
}

.gl-btn--sm {
    padding: 11px 22px;
    font-size: 14px;
}

.gl-btn--block {
    width: 100%;
}

/* ---------- Badge / pill ---------- */

.gl-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gl-text);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gl-pill .gl-dot {
    color: var(--gl-brand);
}

.gl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gl-brand);
    box-shadow: 0 0 0 0 rgba(36, 211, 102, 0.6);
    animation: gl-ping 2.4s ease-out infinite;
}

@keyframes gl-ping {
    70% {
        box-shadow: 0 0 0 12px rgba(36, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(36, 211, 102, 0);
    }
}

/* ---------- Gradient text ---------- */

.gl-gradient-text {
    background: linear-gradient(100deg, var(--gl-shine-edge) 8%, var(--gl-brand) 38%,
            var(--gl-brand-3) 62%, var(--gl-shine-edge) 92%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gl-shine 7s linear infinite;
}

@keyframes gl-shine {
    to {
        background-position: 220% center;
    }
}

/* Heading <span> coming from the CMS gets the brand gradient */
.gl-hero__title span {
    background: linear-gradient(100deg, var(--gl-brand-ink), var(--gl-brand-ink-2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gl-shine 6s linear infinite;
}

/* ---------- Navigation ---------- */

.gl-nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 60;
    padding: 18px 0;
    transition: padding 0.4s var(--gl-ease), background 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
}

.gl-nav.is-stuck {
    padding: 10px 0;
    background: var(--gl-nav-bg);
    border-bottom-color: var(--gl-border);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.gl-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ---------- Logo glow ---------- */

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

/* Soft brand halo behind the mark, so transparent logo PNGs read as lit rather than washed out. */
.gl-logo::before {
    content: '';
    position: absolute;
    inset: -30% -14%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(36, 211, 102, 0.4), transparent 70%);
    filter: blur(16px);
    opacity: 0.9;
    pointer-events: none;
    animation: gl-logo-pulse 4.5s ease-in-out infinite;
}

.gl-theme[data-gl-mode='light'] .gl-logo::before {
    opacity: 0.55;
}

.gl-logo img {
    position: relative;
    filter: drop-shadow(var(--gl-logo-glow));
    transition: filter 0.4s ease, transform 0.4s var(--gl-ease);
}

/*
 * Admin stores two marks: "Site Logo - Deep Colour" (logo) and "Site Logo - light colour"
 * (footer_logo). Dark mode shows the light mark; light mode shows the deep mark. Both are in
 * the DOM so the pre-paint mode script can flip them with CSS alone  no flash of the wrong logo.
 */
.gl-logo__deep {
    display: none;
}

.gl-theme[data-gl-mode='light'] .gl-logo__deep {
    display: block;
}

.gl-theme[data-gl-mode='light'] .gl-logo__light {
    display: none;
}

.gl-logo:hover img {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 26px rgba(36, 211, 102, 0.75));
}

@keyframes gl-logo-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

.gl-nav__logo img {
    max-height: 44px;
    width: auto;
}

.gl-nav__menu>ul {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-nav__menu li {
    position: relative;
}

.gl-nav__menu li>a {
    display: block;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gl-muted);
    transition: color 0.3s ease, background 0.3s ease;
}

.gl-nav__menu li>a:hover {
    color: var(--gl-text);
    background: var(--gl-surface);
}

.gl-nav__menu .submenu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 12px);
    min-width: 210px;
    padding: 10px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-panel-bg);
    border: 1px solid var(--gl-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--gl-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--gl-ease);
}

.gl-nav__menu li:hover>.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gl-nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- Compact chrome buttons (colour mode, language) ---------- */

.gl-iconbtn {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--gl-text);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform 0.35s var(--gl-ease), background 0.35s ease, border-color 0.35s ease,
        box-shadow 0.35s ease, color 0.35s ease;
}

.gl-iconbtn:hover,
.gl-iconbtn.is-open {
    transform: translateY(-2px);
    color: var(--gl-brand);
    border-color: rgba(36, 211, 102, 0.5);
    box-shadow: 0 0 26px rgba(36, 211, 102, 0.24);
}

/* ---------- Colour mode switcher ---------- */

.gl-mode .gl-i {
    width: 19px;
    height: 19px;
    grid-area: 1 / 1;
    transition: opacity 0.35s ease, transform 0.45s var(--gl-ease);
}

/* Only the icon for the mode you can switch *to* is shown. */
.gl-mode__sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.gl-mode__moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.gl-theme[data-gl-mode='light'] .gl-mode__sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.gl-theme[data-gl-mode='light'] .gl-mode__moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

/* ---------- Language switcher ---------- */

.gl-lang {
    position: relative;
    flex: 0 0 auto;
}

.gl-lang__code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Locale codes stay latin even in an RTL document. */
    direction: ltr;
    unicode-bidi: isolate;
}

/*
 * Only rendered when three or more languages are configured; the two-language case is a plain link.
 */
.gl-lang__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 10px);
    min-width: 170px;
    padding: 8px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-panel-bg);
    border: 1px solid var(--gl-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--gl-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s var(--gl-ease), transform 0.3s var(--gl-ease), visibility 0.3s;
}

.gl-lang.is-open .gl-lang__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gl-lang__menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--gl-muted);
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease;
}

.gl-lang__menu a:hover {
    color: var(--gl-text);
    background: var(--gl-surface-2);
}

.gl-lang__menu a.is-active {
    color: var(--gl-brand);
    background: rgba(36, 211, 102, 0.12);
}

.gl-nav__burger {
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    color: var(--gl-text);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    cursor: pointer;
}

/* Mobile drawer */
.gl-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.gl-drawer.is-open {
    display: block;
}

.gl-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--gl-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gl-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(360px, 88vw);
    padding: 28px 24px;
    overflow-y: auto;
    background: var(--gl-panel-bg);
    border-inline-start: 1px solid var(--gl-border);
    animation: gl-slide-in 0.4s var(--gl-ease);
}

@keyframes gl-slide-in {
    from {
        transform: translateX(12%);
        opacity: 0;
    }
}

[dir='rtl'] .gl-drawer__panel {
    animation-name: gl-slide-in-rtl;
}

@keyframes gl-slide-in-rtl {
    from {
        transform: translateX(-12%);
        opacity: 0;
    }
}

.gl-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.gl-drawer__close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--gl-text);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    cursor: pointer;
}

.gl-drawer__menu ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gl-drawer__menu li>a {
    display: block;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 16px;
    color: var(--gl-muted);
    transition: all 0.25s ease;
}

.gl-drawer__menu li>a:hover {
    color: var(--gl-text);
    background: var(--gl-surface);
}

.gl-drawer__menu .submenu {
    padding-inline-start: 14px;
}

.gl-drawer__actions {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

/* Language / theme live in the drawer on phones so the header stays uncluttered. Hidden on desktop. */
.gl-drawer__chrome {
    display: none;
}

/* ---------- Hero ---------- */

.gl-hero {
    position: relative;
    z-index: 2;
    padding: 172px 0 96px;
}

/* Copy and showcase sit side by side; they only stack on tablet and below. */
.gl-hero__grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: clamp(34px, 5vw, 70px);
}

.gl-hero__copy {
    text-align: start;
}

.gl-hero__title {
    font-size: clamp(34px, 4.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 22px 0;
    max-width: 15ch;
}

.gl-hero__sub {
    max-width: 520px;
    font-size: 17.5px;
    margin-top: 15px !important;
}

.gl-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.gl-hero__cta--start {
    justify-content: flex-start;
    margin-top: 34px;
}

.gl-hero__note {
    margin-top: 18px !important;
    font-size: 13px;
    color: var(--gl-faint);
}

/* Hero showcase card */
.gl-hero__stage {
    position: relative;
    perspective: 1600px;
}

/*
 * A slight sideways tilt suits the two-column layout better than a backward lean, and it mirrors
 * for RTL so the artwork always angles toward the copy instead of away from it.
 */
.gl-hero__frame {
    --gl-tilt: -7deg;
    position: relative;
    padding: 14px;
    border-radius: 30px;
    transform: rotateY(var(--gl-tilt)) rotateX(3deg);
    animation: gl-hero-settle 1.4s var(--gl-ease) 0.2s both;
}

[dir='rtl'] .gl-hero__frame {
    --gl-tilt: 7deg;
}

@keyframes gl-hero-settle {
    from {
        transform: rotateY(calc(var(--gl-tilt) * 2.4)) rotateX(12deg) translateY(38px);
        opacity: 0;
    }

    to {
        transform: rotateY(var(--gl-tilt)) rotateX(3deg) translateY(0);
        opacity: 1;
    }
}

/*
 * Landscape artwork fills the frame, while a tall portrait shot (a phone screenshot, say) is capped
 * and centred instead of dwarfing the copy beside it.
 */
.gl-hero__frame img {
    display: block;
    width: 100%;
    max-height: 520px;
    border-radius: 20px;
    object-fit: contain;
}

.gl-hero__glow {
    position: absolute;
    inset-inline: 8%;
    bottom: -60px;
    height: 180px;
    background: radial-gradient(ellipse at center, rgba(36, 211, 102, 0.45), transparent 70%);
    filter: blur(50px);
    z-index: -1;
}

/* Floating chips around the hero visual */
.gl-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gl-text);
    background: var(--gl-chip-bg);
    border: 1px solid var(--gl-border-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--gl-shadow-float);
    z-index: 3;
}

.gl-chip__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
}

.gl-chip__ico img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gl-chip small {
    display: block;
    font-size: 12px;
    color: var(--gl-muted);
}

.gl-chip--a {
    top: 6%;
    inset-inline-start: -14%;
    animation: gl-float 6s ease-in-out infinite;
}

.gl-chip--b {
    top: 46%;
    inset-inline-end: -3%;
    animation: gl-float 7s ease-in-out 0.8s infinite;
}

.gl-chip--c {
    bottom: 4%;
    inset-inline-start: -10%;
    animation: gl-float 8s ease-in-out 0.4s infinite;
}

@keyframes gl-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

/* Hero stats */
.gl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 78px;
}

.gl-stat {
    padding: 26px 22px;
    text-align: center;
}

.gl-stat__value {
    display: block;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
}

.gl-stat__label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--gl-muted);
}

/* ---------- Marquee ---------- */

.gl-marquee {
    position: relative;
    overflow: hidden;
    padding: 26px 0;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.gl-marquee__track {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    animation: gl-marquee 40s linear infinite;
}

.gl-marquee:hover .gl-marquee__track {
    animation-play-state: paused;
}

@keyframes gl-marquee {
    to {
        transform: translateX(-50%);
    }
}

[dir='rtl'] .gl-marquee__track {
    animation-name: gl-marquee-rtl;
}

@keyframes gl-marquee-rtl {
    to {
        transform: translateX(50%);
    }
}

/*
 * Integration artwork is customer-uploaded and can be light, dark or full colour, so each logo
 * sits on its own frosted chip instead of being recoloured. That keeps any source image legible
 * on the dark canvas without guessing at its contrast.
 */
.gl-marquee__item {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.4s var(--gl-ease), background 0.4s ease, border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.gl-marquee__item:hover {
    transform: translateY(-5px);
    background: var(--gl-surface-2);
    border-color: rgba(36, 211, 102, 0.45);
    box-shadow: 0 0 30px rgba(36, 211, 102, 0.18);
}

.gl-marquee__item img {
    height: 42px;
    width: 42px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.35s ease;
}

.gl-marquee__item:hover img {
    opacity: 1;
}

/* ---------- Feature bento ---------- */

.gl-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Keeps one or two cards from stretching awkwardly across the full row. */
.gl-bento--center {
    grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
    justify-content: center;
}

.gl-card {
    padding: 34px 30px;
    transition: transform 0.45s var(--gl-ease), border-color 0.45s ease, box-shadow 0.45s ease;
}

.gl-card:hover {
    transform: translateY(-8px);
    border-color: rgba(36, 211, 102, 0.4);
    box-shadow: var(--gl-shadow), 0 0 46px rgba(36, 211, 102, 0.14);
}

.gl-card__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    border-radius: 18px;
    font-size: 22px;
    color: var(--gl-brand);
    background: linear-gradient(140deg, rgba(36, 211, 102, 0.2), rgba(34, 211, 238, 0.08));
    border: 1px solid rgba(36, 211, 102, 0.28);
    box-shadow: inset 0 0 22px rgba(36, 211, 102, 0.14);
}

.gl-card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.gl-card__icon .gl-i {
    width: 26px;
    height: 26px;
}

.gl-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.gl-card p {
    font-size: 15px;
}

.gl-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-brand);
    transition: gap 0.3s ease;
}

.gl-card__link:hover {
    gap: 14px;
}

/* ---------- Split showcase ---------- */

.gl-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

.gl-split__media {
    position: relative;
    display: grid;
    place-items: center;
    padding: 14px;
}

/*
 * About artwork is customer-uploaded and is often a tall phone screenshot. Capping the height keeps
 * it in proportion with the text column instead of stretching to the full grid width.
 */
.gl-split__media img {
    display: block;
    width: 100%;
    max-height: 460px;
    border-radius: 18px;
    object-fit: contain;
}

.gl-split h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.18;
    margin-bottom: 20px;
}

.gl-split p {
    font-size: 16.5px;
}

.gl-checklist {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.gl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--gl-muted);
}

.gl-checklist__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
}

.gl-checklist__ico .gl-i {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

/* ---------- Pricing ---------- */

.gl-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 52px;
    padding: 6px;
    border-radius: 999px;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gl-toggle button {
    padding: 11px 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gl-muted);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s var(--gl-ease);
}

.gl-toggle button.is-active {
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    box-shadow: 0 8px 22px rgba(36, 211, 102, 0.35);
}

.gl-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.gl-plans[hidden] {
    display: none;
}

.gl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    /* Tag sits above the card; .gl-spot's overflow:hidden would clip it. */
    overflow: visible;
    transition: transform 0.45s var(--gl-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}

.gl-plan:hover {
    transform: translateY(-8px);
    border-color: rgba(36, 211, 102, 0.4);
}

.gl-plan--featured {
    border-color: rgba(36, 211, 102, 0.5);
    background: var(--gl-featured-bg);
    box-shadow: var(--gl-shadow), 0 0 60px rgba(36, 211, 102, 0.2);
}

/* Animated glow ring for the recommended plan */
.gl-plan--featured::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--gl-angle, 0deg),
            transparent 0%, var(--gl-brand) 18%, var(--gl-brand-3) 30%, transparent 48%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: gl-rotate 5s linear infinite;
    pointer-events: none;
}

@property --gl-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes gl-rotate {
    to {
        --gl-angle: 360deg;
    }
}

.gl-plan__tag {
    position: absolute;
    top: -14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    box-shadow: 0 8px 22px rgba(36, 211, 102, 0.4);
}

[dir='rtl'] .gl-plan__tag {
    transform: translateX(50%);
}

.gl-plan__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.gl-plan__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 18px;
    color: var(--gl-brand);
    background: rgba(36, 211, 102, 0.12);
    border: 1px solid rgba(36, 211, 102, 0.24);
}

.gl-plan__name {
    font-size: 17px;
    font-weight: 600;
}

.gl-plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 26px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}

.gl-plan__price svg {
    width: 24px;
    height: auto;
}

.gl-plan__price svg path {
    fill: currentColor;
}

.gl-plan__price small {
    font-size: 14px;
    font-weight: 500;
    color: var(--gl-muted);
}

.gl-plan__list {
    display: grid;
    gap: 13px;
    margin-bottom: 30px;
}

.gl-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    color: var(--gl-muted);
}

.gl-plan__list li::before {
    content: '\2713';
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--gl-brand);
    background: rgba(36, 211, 102, 0.14);
}

.gl-plan__foot {
    margin-top: auto;
}

/* ---------- Testimonials ---------- */

.gl-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.gl-quote {
    padding: 32px 30px;
    transition: transform 0.45s var(--gl-ease), border-color 0.45s ease;
}

.gl-quote:hover {
    transform: translateY(-6px);
    border-color: rgba(36, 211, 102, 0.35);
}

.gl-quote__stars {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    color: #ffc83d;
}

.gl-quote__stars .gl-i {
    width: 16px;
    height: 16px;
}

.gl-quote p {
    font-size: 15.5px;
    color: var(--gl-text-soft);
}

.gl-quote__by {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--gl-border);
}

.gl-quote__by img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gl-border-strong);
}

.gl-quote__by strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--gl-text);
}

.gl-quote__by span {
    font-size: 13px;
    color: var(--gl-muted);
}

/* ---------- FAQ ---------- */

.gl-faq {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.gl-faq__item {
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.gl-faq__item.is-open {
    border-color: rgba(36, 211, 102, 0.4);
    box-shadow: 0 0 40px rgba(36, 211, 102, 0.12);
}

.gl-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px 28px;
    border: 0;
    background: transparent;
    color: var(--gl-text);
    font-size: 16.5px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.gl-faq__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--gl-brand);
    background: rgba(36, 211, 102, 0.14);
    transition: transform 0.4s var(--gl-ease), background 0.4s ease;
}

.gl-faq__ico .gl-i {
    width: 15px;
    height: 15px;
}

.gl-faq__item.is-open .gl-faq__ico {
    transform: rotate(45deg);
    background: rgba(36, 211, 102, 0.24);
}

.gl-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--gl-ease);
}

.gl-faq__item.is-open .gl-faq__a {
    grid-template-rows: 1fr;
}

.gl-faq__a>div {
    overflow: hidden;
}

.gl-faq__a p {
    padding: 0 28px 26px;
    font-size: 15px;
}

/* ---------- CTA ---------- */

.gl-cta {
    position: relative;
    overflow: hidden;
    padding: 78px 48px;
    text-align: center;
    background: linear-gradient(150deg, rgba(36, 211, 102, 0.14), rgba(34, 211, 238, 0.07));
    border-color: rgba(36, 211, 102, 0.32);
}

.gl-cta::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    bottom: -300px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(36, 211, 102, 0.4), transparent 66%);
    filter: blur(60px);
    pointer-events: none;
}

.gl-cta h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.12;
    margin-bottom: 18px;
}

.gl-cta p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    font-size: 17px;
}

.gl-cta .gl-hero__cta {
    position: relative;
    z-index: 1;
}

/* ---------- Footer ---------- */

.gl-footer {
    position: relative;
    z-index: 2;
    isolation: isolate;
    padding: 28px 0 28px;
    overflow: hidden;
}

.gl-footer__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.gl-footer__glow span {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: calc(var(--gl-orb-opacity) + 0.12);
}

.gl-footer__glow span:first-child {
    width: min(52vw, 520px);
    height: min(52vw, 520px);
    inset-inline-start: -8%;
    top: -18%;
    background: radial-gradient(circle, rgba(36, 211, 102, 0.45), transparent 68%);
}

.gl-footer__glow span:last-child {
    width: min(46vw, 460px);
    height: min(46vw, 460px);
    inset-inline-end: -6%;
    bottom: -28%;
    background: radial-gradient(circle, rgba(11, 213, 174, 0.38), transparent 70%);
}

.gl-footer > .gl-container {
    position: relative;
    z-index: 1;
}

.gl-footer__shell {
    position: relative;
    padding: 48px 44px 42px;
    overflow: hidden;
}

.gl-footer__shell.gl-glass::before {
    inset-inline: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gl-brand), var(--gl-brand-2), var(--gl-brand-3), transparent);
    opacity: 0.95;
}

.gl-footer__grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1.15fr;
    gap: 48px;
    align-items: start;
}

.gl-footer__brand .gl-logo {
    margin-bottom: 18px;
}

.gl-footer__brand img {
    max-height: 48px;
}

.gl-footer__brand p {
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 390px;
    color: var(--gl-text-soft);
}

.gl-footer__col h4,
.gl-footer h4 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gl-muted);
}

.gl-footer__col h4::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gl-brand), var(--gl-brand-2));
    box-shadow: 0 0 12px rgba(36, 211, 102, 0.55);
}

.gl-footer__links {
    display: grid;
    gap: 4px;
}

.gl-footer__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 9px 12px 9px 0;
    font-size: 15px;
    color: var(--gl-muted);
    border-radius: 12px;
    transition: color 0.3s ease, transform 0.35s var(--gl-ease), background 0.3s ease;
}

.gl-footer__links a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gl-border-strong);
    box-shadow: 0 0 0 0 rgba(36, 211, 102, 0);
    transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--gl-ease);
}

.gl-footer__links a:hover {
    color: var(--gl-text);
    transform: translateX(4px);
}

[dir='rtl'] .gl-footer__links a:hover {
    transform: translateX(-4px);
}

.gl-footer__links a:hover::before {
    background: var(--gl-brand);
    box-shadow: 0 0 12px rgba(36, 211, 102, 0.75);
    transform: scale(1.2);
}

.gl-footer__contact {
    display: grid;
    gap: 12px;
}

.gl-footer__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--gl-text-soft);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    transition: border-color 0.35s ease, transform 0.35s var(--gl-ease), background 0.35s ease,
        box-shadow 0.35s ease;
}

a.gl-footer__row:hover {
    color: var(--gl-text);
    border-color: rgba(36, 211, 102, 0.35);
    background: var(--gl-surface-2);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(36, 211, 102, 0.12);
}

.gl-footer__row span:last-child,
.gl-footer__value {
    font-size: 14.5px;
    line-height: 1.5;
    word-break: break-word;
}

.gl-footer__value {
    display: block;
    width: 100%;
    text-align: start;
}

.gl-footer__value bdi {
    unicode-bidi: isolate;
}

.gl-footer__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--gl-brand-ink);
    background: linear-gradient(145deg, rgba(36, 211, 102, 0.18), rgba(11, 213, 174, 0.08));
    border: 1px solid rgba(36, 211, 102, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gl-footer__ico .gl-i {
    width: 18px;
    height: 18px;
}

.gl-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.gl-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--gl-muted);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    transition: all 0.35s var(--gl-ease);
}

.gl-social a:hover {
    color: var(--gl-on-brand);
    transform: translateY(-4px) scale(1.04);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(36, 211, 102, 0.38);
}

.gl-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--gl-faint);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- Back to top ---------- */

.gl-top {
    position: fixed;
    inset-inline-end: 26px;
    bottom: 26px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    border: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    box-shadow: 0 14px 34px rgba(36, 211, 102, 0.4);
    transition: all 0.4s var(--gl-ease);
}

.gl-top .gl-i {
    width: 20px;
    height: 20px;
}

.gl-nav__burger .gl-i,
.gl-drawer__close .gl-i {
    width: 20px;
    height: 20px;
}

.gl-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Built-in hero mockup (fallback when no hero image is set) ---------- */

.gl-mock {
    border-radius: 20px;
    overflow: hidden;
    background: var(--gl-mock-bg);
    border: 1px solid var(--gl-border);
}

.gl-mock__bar {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gl-border);
}

.gl-mock__bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gl-border-strong);
}

.gl-mock__bar span:first-child {
    background: rgba(36, 211, 102, 0.7);
}

.gl-mock__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 320px;
    padding: 34px;
    text-align: start;
}

.gl-mock__bubble {
    max-width: 74%;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0;
    animation: gl-bubble-in 0.7s var(--gl-ease) forwards;
}

.gl-mock__bubble--in {
    align-self: flex-start;
    color: var(--gl-text);
    background: var(--gl-surface-2);
    border: 1px solid var(--gl-border);
    border-start-start-radius: 6px;
}

.gl-mock__bubble--out {
    align-self: flex-end;
    color: var(--gl-on-brand);
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    border-start-end-radius: 6px;
    box-shadow: 0 12px 30px rgba(36, 211, 102, 0.28);
}

.gl-mock__bubble:nth-child(1) {
    animation-delay: 0.6s;
}

.gl-mock__bubble:nth-child(2) {
    animation-delay: 1.2s;
}

.gl-mock__bubble:nth-child(3) {
    animation-delay: 1.8s;
}

@keyframes gl-bubble-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.gl-mock__typing {
    display: flex;
    align-self: flex-start;
    gap: 6px;
    padding: 15px 18px;
    border-radius: 18px;
    background: var(--gl-surface-2);
    border: 1px solid var(--gl-border);
}

.gl-mock__typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gl-brand);
    animation: gl-typing 1.3s ease-in-out infinite;
}

.gl-mock__typing span:nth-child(2) {
    animation-delay: 0.18s;
}

.gl-mock__typing span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes gl-typing {

    0%,
    60%,
    100% {
        opacity: 0.25;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

/* =============================================================
   Inner pages
   Everything below is shared by the non-landing pages. It consumes the same tokens as the
   landing sections above, so light mode and RTL are inherited rather than re-implemented.
   ============================================================= */

/* ---------- Page hero ---------- */

.gl-pagehero {
    position: relative;
    z-index: 2;
    padding: 168px 0 64px;
    text-align: center;
}

.gl-pagehero__title {
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.12;
    margin-bottom: 18px;
}

.gl-pagehero__lead {
    /* max-width: 660px; */
    margin: 0 auto;
    color: var(--gl-muted);
    font-size: 17px;
}

.gl-pagehero .gl-pill {
    margin-bottom: 20px;
}

.gl-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    font-size: 14.5px;
    color: var(--gl-muted);
}

.gl-crumbs a {
    color: var(--gl-text-soft);
    transition: color 0.25s ease;
}

.gl-crumbs a:hover {
    color: var(--gl-brand);
}

.gl-crumbs [aria-current='page'] {
    color: var(--gl-brand);
}

.gl-crumbs__sep {
    display: inline-grid;
    place-items: center;
    color: var(--gl-faint);
}

.gl-crumbs__sep .gl-i {
    width: 14px;
    height: 14px;
}

/* ---------- Content + sidebar layout ---------- */

.gl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}

.gl-side {
    display: grid;
    gap: 24px;
    /* Keeps the sidebar in view on long articles without fighting the sticky navbar. */
    position: sticky;
    top: 108px;
}

.gl-side__box {
    padding: 26px;
    border-radius: var(--gl-radius);
}

.gl-side__title {
    font-size: 17px;
    margin-bottom: 18px;
}

.gl-side__posts {
    display: grid;
    gap: 8px;
}

.gl-side__post {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 14px;
    transition: background 0.25s ease;
}

.gl-side__post:hover {
    background: var(--gl-surface-2);
}

.gl-side__thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--gl-surface-2);
}

.gl-side__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gl-side__meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gl-side__meta strong {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--gl-text);
}

.gl-side__date {
    font-size: 12.5px;
    color: var(--gl-faint);
}

.gl-side__links {
    display: grid;
    gap: 4px;
}

.gl-side__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--gl-text-soft);
    transition: background 0.25s ease, color 0.25s ease;
}

.gl-side__links a:hover {
    background: var(--gl-surface-2);
    color: var(--gl-brand);
}

.gl-side__links .gl-i {
    width: 15px;
    height: 15px;
    color: var(--gl-faint);
}

.gl-side__count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gl-surface-2);
    border: 1px solid var(--gl-border);
    font-size: 12.5px;
    text-align: center;
}

.gl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gl-tags a {
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    font-size: 13.5px;
    color: var(--gl-text-soft);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.gl-tags a:hover {
    color: var(--gl-brand);
    border-color: rgba(36, 211, 102, 0.45);
    background: rgba(36, 211, 102, 0.1);
}

/* ---------- Blog cards ---------- */

.gl-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.gl-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--gl-radius);
}

/*
 * Cover images are editorial banners that often carry text, so the card keeps them full width at a
 * near-native aspect ratio. Cropping them into a narrow side column cut words in half.
 */
.gl-post__thumb {
    display: block;
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    background: var(--gl-surface-2);
    overflow: hidden;
}

.gl-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--gl-ease);
}

.gl-post:hover .gl-post__thumb img {
    transform: scale(1.06);
}

.gl-post__body {
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
}

.gl-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: var(--gl-faint);
}

.gl-post__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gl-post__meta .gl-i {
    width: 14px;
    height: 14px;
}

.gl-post__body h3 {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gl-post__body h3 a {
    color: var(--gl-text);
    transition: color 0.25s ease;
}

.gl-post__body h3 a:hover {
    color: var(--gl-brand);
}

.gl-post__body p {
    font-size: 14px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gl-post__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gl-brand);
}

.gl-post__more .gl-i {
    width: 16px;
    height: 16px;
    transition: transform 0.35s var(--gl-ease);
}

.gl-post__more:hover .gl-i {
    transform: translateX(4px);
}

[dir='rtl'] .gl-post__more:hover .gl-i {
    transform: translateX(-4px) scaleX(-1);
}

/* ---------- Article body / CMS prose ---------- */

.gl-article__cover {
    border-radius: var(--gl-radius);
    overflow: hidden;
    margin-bottom: 34px;
    background: var(--gl-surface-2);
}

.gl-article__cover img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

.gl-article__intro {
    margin: 22px 0 8px;
    color: var(--gl-text);
    font-weight: 700;
}

.gl-article__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--gl-border);
}

.gl-article__tags > span {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-muted);
}

/*
 * Editors paste arbitrary HTML into these fields, so element defaults are restored here rather
 * than relying on the theme reset. Inline font-family from Summernote is overridden so the
 * public site always reads in Cairo (loaded as GlassSans), regardless of what the editor stored.
 */
.gl-prose {
    font-family: 'GlassSans', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        sans-serif;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--gl-text-soft);
}

/*
 * Summernote / Word paste often bake in font-family and near-black / near-white colors. Those clash
 * with dark mode and with Cairo, so descendants inherit the theme tokens instead.
 */
.gl-prose *,
.gl-prose *::before,
.gl-prose *::after {
    font-family: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
}

.gl-prose > * + * {
    margin-top: 18px;
}

.gl-prose h1,
.gl-prose h2,
.gl-prose h3,
.gl-prose h4 {
    color: var(--gl-text) !important;
    line-height: 1.3;
    margin-top: 36px;
}

.gl-prose h2 {
    font-size: 27px;
}

.gl-prose h3 {
    font-size: 22px;
}

.gl-prose a {
    color: var(--gl-brand) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gl-prose ul,
.gl-prose ol {
    padding-inline-start: 22px;
    list-style: revert;
}

.gl-prose li {
    margin-top: 8px;
}

.gl-prose img {
    border-radius: var(--gl-radius-sm);
}

.gl-prose blockquote {
    margin-inline: 0;
    padding: 20px 26px;
    border-inline-start: 3px solid var(--gl-brand);
    border-radius: var(--gl-radius-sm);
    background: var(--gl-surface);
    color: var(--gl-text);
}

.gl-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.gl-prose th,
.gl-prose td {
    padding: 12px 14px;
    border: 1px solid var(--gl-border);
    text-align: start;
}

.gl-prose th {
    background: var(--gl-surface);
    color: var(--gl-text);
}

/* Glass sheet for long-form content that has no cover image to anchor it. */
.gl-paper {
    padding: 48px 52px;
    border-radius: var(--gl-radius);
}

/* ---------- Pagination ---------- */

/*
 * Laravel renders the Bootstrap 5 paginator, so the generated markup is restyled here instead of
 * publishing a new paginator view. Element selectors are scoped to .gl-pager only.
 */
.gl-pager {
    margin-top: 46px;
}

/*
 * That paginator relies on Bootstrap's responsive display utilities to show a compact
 * previous/next pair on phones and the full control elsewhere. This theme does not load Bootstrap,
 * so the same visibility rules are reproduced here; without them both variants render at once.
 */
.gl-pager > nav > .d-sm-none {
    display: none;
}

.gl-pager > nav > .d-none {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

@media (max-width: 575px) {
    .gl-pager > nav > .d-sm-none {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .gl-pager > nav > .d-none {
        display: none;
    }
}

.gl-pager .small {
    margin: 0;
    font-size: 14px;
    color: var(--gl-muted);
}

.gl-pager .fw-semibold {
    color: var(--gl-text);
    font-weight: 700;
}

.gl-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gl-pager .page-item .page-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 13px;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    color: var(--gl-text-soft);
    font-size: 15px;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease,
        transform 0.3s var(--gl-ease);
}

.gl-pager .page-item .page-link:hover {
    color: var(--gl-brand);
    border-color: rgba(36, 211, 102, 0.45);
    transform: translateY(-2px);
}

.gl-pager .page-item.active .page-link {
    background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-2));
    border-color: transparent;
    color: var(--gl-on-brand);
    font-weight: 700;
}

.gl-pager .page-item.disabled .page-link {
    opacity: 0.4;
}

.gl-pager svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------- Empty state ---------- */

.gl-empty {
    display: grid;
    /* Icons are display:block, so the grid centres them together with the message. */
    justify-items: center;
    gap: 14px;
    padding: 54px 30px;
    border-radius: var(--gl-radius);
    text-align: center;
    color: var(--gl-muted);
}

.gl-empty .gl-i {
    width: 34px;
    height: 34px;
    color: var(--gl-faint);
}

.gl-empty p {
    margin: 0;
}

/* ---------- Forms ---------- */

.gl-form {
    display: grid;
    gap: 20px;
}

.gl-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.gl-field {
    display: grid;
    gap: 9px;
}

.gl-field > label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-text-soft);
}

.gl-field input,
.gl-field textarea,
.gl-field select {
    width: 100%;
    padding: 15px 18px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    color: var(--gl-text);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.gl-field textarea {
    min-height: 150px;
    resize: vertical;
}

.gl-field input::placeholder,
.gl-field textarea::placeholder {
    color: var(--gl-faint);
}

.gl-field input:focus,
.gl-field textarea:focus,
.gl-field select:focus {
    border-color: rgba(36, 211, 102, 0.55);
    box-shadow: 0 0 0 4px rgba(36, 211, 102, 0.14);
    background: var(--gl-surface-2);
}

/* Server-side validation state, driven by Blade's @error directive. */
.gl-field input.is-invalid,
.gl-field textarea.is-invalid {
    border-color: rgba(248, 113, 113, 0.65);
}

.gl-field .invalid-feedback,
.gl-error {
    display: block;
    font-size: 13px;
    color: #fca5a5;
}

.gl-theme[data-gl-mode='light'] .gl-field .invalid-feedback,
.gl-theme[data-gl-mode='light'] .gl-error {
    color: #c02626;
}

.gl-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14.5px;
}

.gl-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--gl-text-soft);
    cursor: pointer;
}

.gl-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--gl-brand);
    cursor: pointer;
}

.gl-form__link {
    color: var(--gl-brand);
    font-weight: 700;
}

/* ---------- Search field ---------- */

.gl-search {
    /* Owns the relative context the leading icon is positioned against. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gl-search__ico {
    position: absolute;
    display: grid;
    place-items: center;
    inset-inline-start: 16px;
    color: var(--gl-faint);
    pointer-events: none;
}

.gl-search__ico .gl-i {
    width: 17px;
    height: 17px;
}

.gl-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px 14px 44px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    color: var(--gl-text);
    font-family: inherit;
    font-size: 14.5px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[dir='rtl'] .gl-search input {
    padding: 14px 44px 14px 16px;
}

.gl-search input::placeholder {
    color: var(--gl-faint);
}

.gl-search input:focus {
    border-color: rgba(36, 211, 102, 0.55);
    box-shadow: 0 0 0 4px rgba(36, 211, 102, 0.14);
}

/* reCAPTCHA renders a fixed-size iframe; this keeps it from overflowing a narrow card. */
.gl-captcha {
    display: grid;
    gap: 8px;
}

.gl-captcha .g-recaptcha {
    transform-origin: left top;
    max-width: 100%;
    overflow: hidden;
}

[dir='rtl'] .gl-captcha .g-recaptcha {
    transform-origin: right top;
}

/* ---------- Alerts ---------- */

.gl-alert {
    padding: 16px 20px;
    border-radius: var(--gl-radius-sm);
    border: 1px solid var(--gl-border);
    background: var(--gl-surface);
    font-size: 14.5px;
    color: var(--gl-text-soft);
}

.gl-alert ul {
    margin: 0;
    padding-inline-start: 18px;
    list-style: disc;
}

.gl-alert--ok {
    border-color: rgba(36, 211, 102, 0.4);
    background: rgba(36, 211, 102, 0.1);
    color: var(--gl-text);
}

.gl-alert--bad {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.1);
}

/* ---------- Contact info cards ---------- */

.gl-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.gl-info__card {
    padding: 34px 30px;
    border-radius: var(--gl-radius);
    text-align: center;
}

.gl-info__ico {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(36, 211, 102, 0.22), rgba(34, 211, 238, 0.14));
    border: 1px solid var(--gl-border);
    color: var(--gl-brand);
}

.gl-info__ico .gl-i {
    width: 24px;
    height: 24px;
}

.gl-info__card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.gl-info__card a,
.gl-info__card span {
    display: block;
    font-size: 15px;
    color: var(--gl-muted);
    transition: color 0.25s ease;
}

.gl-info__card a:hover {
    color: var(--gl-brand);
}

/* ---------- Team ---------- */

.gl-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.gl-member {
    padding: 28px 24px;
    border-radius: var(--gl-radius);
    text-align: center;
}

.gl-member__avatar {
    width: 108px;
    height: 108px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gl-surface-2);
    border: 1px solid var(--gl-border);
}

.gl-member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gl-member h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.gl-member__role {
    display: block;
    font-size: 14px;
    color: var(--gl-brand);
    margin-bottom: 16px;
}

.gl-member .gl-social {
    justify-content: center;
}

/* ---------- Auth card ---------- */

.gl-auth {
    display: grid;
    place-items: center;
    padding: 150px 0 96px;
    position: relative;
    z-index: 2;
}

.gl-auth__card {
    width: 100%;
    max-width: 500px;
    /* The wrapping container is full width, so the card centres itself. */
    margin-inline: auto;
    padding: 44px;
    border-radius: var(--gl-radius);
}

.gl-auth__head {
    text-align: center;
    margin-bottom: 32px;
}

.gl-auth__head h1 {
    font-size: clamp(25px, 3vw, 33px);
    margin-bottom: 10px;
}

.gl-auth__head p {
    font-size: 15px;
}

.gl-auth__foot {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--gl-border);
    text-align: center;
    font-size: 14.5px;
    color: var(--gl-muted);
}

.gl-auth__foot a {
    color: var(--gl-brand);
    font-weight: 700;
}

/* ---------- About media pair ---------- */

.gl-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.gl-duo figure {
    margin: 0;
    border-radius: var(--gl-radius);
    overflow: hidden;
    background: var(--gl-surface-2);
}

.gl-duo img {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;
}

.gl-duo figure:last-child {
    margin-top: 34px;
}

.gl-badge-years {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-featured-bg);
    border: 1px solid var(--gl-border);
}

.gl-badge-years strong {
    font-size: 34px;
    line-height: 1;
}

.gl-badge-years span {
    font-size: 14.5px;
    color: var(--gl-muted);
}

/* ---------- Scroll reveal ---------- */

.gl-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.85s var(--gl-ease), transform 0.85s var(--gl-ease);
    transition-delay: var(--gl-delay, 0ms);
}

.gl-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .gl-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .gl-section {
        padding: 44px 0;
    }

    .gl-hero {
        padding: 150px 0 74px;
    }

    /* Stacked hero: the copy re-centres above the showcase. */
    .gl-hero__grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .gl-hero__copy {
        text-align: center;
    }

    .gl-hero__title {
        margin-inline: auto;
        max-width: 18ch;
    }

    .gl-hero__sub {
        margin-inline: auto;
    }

    .gl-hero__copy .gl-hero__cta--start {
        justify-content: center;
    }

    .gl-nav__menu,
    .gl-nav__actions .gl-btn--primary,
    .gl-nav__actions .gl-lang,
    .gl-nav__actions .gl-mode {
        display: none;
    }

    /* Header on tablet/phone: logo, Login, menu. Language and theme move into the drawer. */
    .gl-nav__actions .gl-nav__login {
        display: inline-flex;
        padding: 9px 16px;
        font-size: 13.5px;
    }

    .gl-nav__actions {
        gap: 8px;
    }

    .gl-nav__burger {
        display: grid;
    }

    .gl-drawer__chrome {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 22px;
    }

    .gl-split {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    /* Sidebar drops below the content, so it must stop sticking. */
    .gl-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .gl-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gl-side {
        position: static;
        top: auto;
    }

    .gl-pagehero {
        padding: 142px 0 52px;
    }

    .gl-info {
        grid-template-columns: 1fr;
    }

    .gl-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gl-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    .gl-footer__shell {
        padding: 36px 28px 32px;
    }

    .gl-footer__brand {
        grid-column: 1 / -1;
    }

    .gl-chip {
        display: none;
    }
}

@media (max-width: 767px) {
    .gl-bento {
        grid-template-columns: 1fr;
    }

    .gl-container {
        padding-inline: 16px;
    }

    .gl-nav {
        padding: 10px 0;
    }

    .gl-nav.is-stuck {
        padding: 8px 0;
    }

    .gl-hero {
        padding: 112px 0 48px;
    }

    .gl-hero__grid {
        gap: 36px;
    }

    .gl-hero__title {
        font-size: clamp(28px, 8.4vw, 36px);
        line-height: 1.28;
        letter-spacing: 0;
        max-width: none;
        margin: 16px 0 0;
    }

    [dir='rtl'] .gl-hero__title {
        line-height: 1.4;
    }

    .gl-hero__sub {
        max-width: none;
        font-size: 15.5px;
        line-height: 1.9;
        margin-top: 14px !important;
    }

    [dir='rtl'] .gl-hero__sub {
        line-height: 2.05;
    }

    .gl-hero__cta {
        gap: 10px;
        margin-top: 22px;
    }

    .gl-hero__cta--start {
        margin-top: 22px;
    }

    .gl-hero__note {
        margin-top: 14px !important;
        line-height: 1.7;
    }

    .gl-hero__frame {
        transform: none;
        animation: none;
        padding: 10px;
        border-radius: 22px;
    }

    .gl-nav__inner {
        gap: 10px;
    }

    .gl-nav__logo img {
        max-height: 34px;
    }

    .gl-iconbtn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .gl-nav__burger {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .gl-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 36px;
    }

    .gl-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        text-align: start;
    }

    .gl-stat__value {
        font-size: 24px;
        line-height: 1.2;
    }

    .gl-stat__label {
        margin-top: 0;
        font-size: 13px;
        text-align: end;
    }

    .gl-head {
        margin-bottom: 36px;
    }

    .gl-pagehero {
        padding: 118px 0 40px;
    }

    .gl-pagehero__title {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.3;
    }

    .gl-head h2 {
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.3;
    }

    [dir='rtl'] .gl-head h2 {
        line-height: 1.45;
    }

    .gl-hero__frame img {
        max-height: 420px;
    }

    .gl-split__media img {
        max-height: 380px;
    }

    .gl-cta {
        padding: 56px 24px;
    }

    .gl-footer__grid {
        grid-template-columns: 1fr;
    }

    .gl-footer__shell {
        padding: 30px 20px 26px;
        border-radius: 22px;
    }

    .gl-footer__brand {
        grid-column: auto;
    }

    .gl-footer__bottom {
        border-radius: 18px;
        text-align: center;
    }

    .gl-hero__cta .gl-btn {
        width: 100%;
    }

    .gl-grid-2,
    .gl-duo,
    .gl-team {
        grid-template-columns: 1fr;
    }

    .gl-duo figure:last-child {
        margin-top: 0;
    }

    .gl-auth {
        padding: 128px 0 72px;
    }

    .gl-auth__card,
    .gl-side__box,
    .gl-paper {
        padding: 28px 22px;
    }

    .gl-post__body {
        padding: 22px 18px 20px;
    }

    .gl-posts {
        grid-template-columns: 1fr;
    }

    /* The reCAPTCHA widget is 304px wide and cannot reflow, so it is scaled instead. */
    .gl-captcha .g-recaptcha {
        transform: scale(0.86);
    }

    .gl-search {
        flex-wrap: wrap;
    }

    .gl-search .gl-btn {
        width: 100%;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .gl-theme *,
    .gl-theme *::before,
    .gl-theme *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .gl-reveal {
        opacity: 1;
        transform: none;
    }
}