/* ============ Tenant landing & public pages (Eventify Pro style, indigo/cyan, offline) ============ */

.land-body { overflow-x: hidden; }

/* ---------- Shared layout ---------- */
.l-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 22px; }
.l-section { padding: 66px 0; position: relative; }
.l-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.l-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 36px); margin: 0 0 10px; letter-spacing: -.02em; }
.l-head p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.l-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.section-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 34px); margin: 0 0 10px; letter-spacing: -.02em; }
.section-head p { color: var(--muted); font-size: 14.5px; margin: 0; }
.section-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent); }

/* ---------- Navbar ---------- */
.l-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.l-nav .l-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.l-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); flex: none; }
.l-mark {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), #4f46e5 55%, var(--accent));
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent);
}
.l-mark .ic { width: 21px; height: 21px; }
/* An uploaded logo is shown on its own: the tile behind it is what the gradient
   and the initials fill, so leaving it would frame the logo in the wrong colour. */
.l-mark-img {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    object-fit: contain;
}
.l-mark-initials {
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
    letter-spacing: .01em; line-height: 1;
}
.l-name { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -.02em; line-height: 1.05; }
/* A tenant name is user input and the header has a fixed number of pixels to
   spend on it. Without a cap, one long name eats the anchors' room and the nav
   falls back to scrolling. */
.l-name { max-width: 220px; overflow: hidden; white-space: nowrap; }
.l-name small { display: block; font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Six anchored labels plus the logo, the language switcher, the login button and
   the theme toggle need roughly 1510px together, and the row is capped at the
   1180px .l-wrap measure. With no flex policy the nav was the only item allowed
   to give way, so it compressed until the labels wrapped onto three lines, the
   72px row grew to 81px and overlapped the hero, and the theme toggle was pushed
   past the right edge of the page. The labels now hold their natural width and
   the shortfall scrolls inside the nav, where .land-body's overflow-x:hidden can
   no longer eat a control. */
.l-links {
    display: flex; align-items: stretch; gap: 0;
    flex: 0 1 auto; min-width: 0;
    /* The scrollbar is left visible on purpose: it only appears when the row
       genuinely does not fit (a long tenant name, or the control plane's eight
       console sections), and that is exactly when the reader needs to be told
       there is more nav to the side. */
    overflow-x: auto;
}
.l-links a {
    color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
    /* The hairline below is drawn at inset-inline-start:0, so it lives inside the
       inline padding - 12px is enough for it to read as a separator and leaves
       the row 36px wider than 15px would. */
    padding: 8px 12px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    /* The header is a fixed 72px row, so every label has to sit on the same
       optical centre line or the menu looks ragged against the logo. */
    min-height: 40px;
    /* One line, always: min-height above is a height contract, and wrapping is
       what broke it. */
    white-space: nowrap; flex: none;
    transition: color .15s ease, background .15s ease;
}
.l-links a:hover { color: var(--text); background: var(--surface-2); }

/* A hairline between items rather than a gap. Sibling borders cannot be used
   here: the platform console renders the active item with an inline
   color/font-weight, so :first-child / :last-child are not the only items and
   an adjacent pair would double up to 2px. This sits in the padding as a
   pseudo-element so it scales with the label rather than with the row. */
.l-links a + a { position: relative; }
.l-links a + a::before {
    content: ''; position: absolute; inset-block: 25%;
    inset-inline-start: 0; width: 1px;
    background: var(--border);
    transition: background .15s ease;
}
.l-links a + a:hover::before { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.l-links a.is-active { color: var(--primary); font-weight: 800; }

.l-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.l-actions .lang-link { font-size: 13px; font-weight: 700; text-decoration: none; }
.l-actions .lang-sep { color: var(--muted); }

/* ---------- Header dropdowns (language switcher, operator chip) ----------
   These panels were marked up as Bootstrap .dropdown-menu / .dropdown-item and
   driven by data-bs-toggle, but the public shell and the control plane never
   load Bootstrap - only layouts/tenant-admin.php does. Without Bootstrap's
   .dropdown-menu rules the panel had no positioning, no background and no
   display:none, so it sat in the header flow permanently open: the globe button
   was followed by "EN English / AR العربية" in plain text, and the console's
   operator chip spilled its whole account menu across the nav. The markup now
   carries its own data-menu hooks and the panel is styled and shown here. */
[data-menu] { position: relative; }
.lang-menu, .l-usermenu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
    display: none; margin: 0; padding: 6px; list-style: none;
    min-width: 168px; border-radius: 13px;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
[data-menu].is-open > .lang-menu, [data-menu].is-open > .l-usermenu { display: block; }

.lang-drop { position: relative; }
.lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface-2); color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] {
    background: var(--surface-3);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.lang-toggle .ic { width: 17px; height: 17px; }
.lang-toggle__code { font-size: 12px; letter-spacing: .04em; }
.lang-toggle__caret { width: 12px; height: 12px; opacity: .6; flex: none; }
.lang-drop--bare .lang-toggle { padding: 0 9px; }
.lang-drop--bare .lang-toggle__code { display: none; }

.lang-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px;
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: var(--text); cursor: pointer;
}
.lang-menu__item:hover { background: var(--surface-2); }
.lang-menu__item.is-active { color: var(--primary); font-weight: 800; }
.lang-menu__code {
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
    min-width: 26px; text-align: center;
    padding: 2px 5px; border-radius: 6px;
    background: var(--surface-2); color: var(--muted);
}
.lang-menu__item.is-active .lang-menu__code { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.lang-menu__native { flex: 1; }
.lang-menu__tick { width: 14px; height: 14px; color: var(--primary); flex: none; }

/* ---------- Console operator chip ---------- */
.l-userchip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 10px 0 5px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.l-userchip:hover, .l-userchip[aria-expanded="true"] {
    background: var(--surface-3);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.l-userchip__avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--primary), #4f46e5);
}
.l-userchip__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-userchip__caret { width: 11px; height: 11px; opacity: .6; flex: none; }

.l-usermenu { min-width: 236px; border-radius: 14px; }
.l-usermenu__item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border-radius: 9px; border: 0; background: none;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--text); text-align: start; text-decoration: none; cursor: pointer;
}
.l-usermenu__item:hover { background: var(--surface-2); }
.l-usermenu__item .ic { width: 16px; height: 16px; flex: none; opacity: .75; }
.l-usermenu__sep { height: 0; margin: 5px 4px; border: 0; border-top: 1px solid var(--border); }
.l-usermenu__head { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; }
.l-usermenu__name { font-size: 13.5px; font-weight: 800; }
.l-usermenu__mail { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.l-usermenu__role {
    align-self: flex-start; margin-top: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary-strong);
}
.l-signin { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 8px 11px; border-radius: 10px; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.l-signin:hover { color: var(--text); background: var(--surface-2); }
.l-hamburger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; place-items: center; }
.l-mobile { display: none; padding: 8px 22px 18px; border-top: 1px solid var(--border); flex-direction: column; gap: 4px; }
.l-mobile a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 11px 10px; border-radius: 10px; }
.l-mobile a:hover { background: var(--surface-2); color: var(--text); }
.l-mobile .grad-btn { margin-top: 10px; }

/* The switcher copy that lives in the mobile menu. Below the collapse point the
   desktop anchors are gone, so without this the language becomes unreachable on
   a phone rather than merely cramped. It expands in place instead of floating:
   a panel anchored inside a stacked menu has nowhere to go but over the links
   underneath it. */
.l-mobile > .lang-drop { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.l-mobile > .lang-drop > .lang-toggle { width: 100%; justify-content: center; }
.l-mobile > .lang-drop > .lang-menu {
    position: static; margin-top: 6px;
    background: transparent; border: 0; box-shadow: none;
}
.l-mobile > .lang-drop > .lang-menu .lang-menu__item { color: var(--muted); font-size: 14.5px; padding: 11px 10px; }
.l-mobile > .lang-drop > .lang-menu .lang-menu__item:hover,
.l-mobile > .lang-drop > .lang-menu .lang-menu__item.is-active { color: var(--text); }

/* Collapse the anchors into the hamburger menu.
   .l-nav--stack is the marker for the shells that actually ship a .l-mobile
   fallback: the tenant landing, the platform home and the public nav partial.
   The control-plane header is deliberately excluded - it has eight console
   sections and no mobile menu, so its nav keeps scrolling instead of vanishing.
   1240px rather than 900px because six anchored labels plus the logo, language
   switcher, sign-in link and theme toggle come to 1130px, and the row is capped
   at the 1180px .l-wrap measure: under the old breakpoint they were still on
   screen at 1000px, squeezed until the labels wrapped onto three lines. */
@media (max-width: 1240px) {
    .l-nav--stack .l-links { display: none; }
    .l-nav--stack .l-hamburger { display: grid; }
    .l-nav--stack .l-mobile.open { display: flex; }
}

/* ---------- Hero ---------- */
.land-hero { position: relative; overflow: hidden; padding: 52px 0 72px; }
.land-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(900px 480px at 50% -6%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
}
.l-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .5; pointer-events: none; animation: lFloat 9s ease-in-out infinite; }
.l-orb-1 { width: 360px; height: 360px; top: -110px; inset-inline-start: 6%; background: color-mix(in srgb, var(--primary) 45%, transparent); }
.l-orb-2 { width: 300px; height: 300px; top: 14%; inset-inline-end: 4%; background: color-mix(in srgb, var(--accent) 34%, transparent); animation-delay: -3s; }
@keyframes lFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.05); } }
.l-hero-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(760px 420px at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(760px 420px at 50% 0%, #000, transparent 78%);
}
.l-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; position: relative; z-index: 1; }
.l-hero-copy { min-width: 0; }
.l-hero-banner {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 20px;
}
.l-hero-banner .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: lPulse 1.6s ease-in-out infinite; }
.l-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(30px, 4.6vw, 52px); margin: 0 0 16px; }
.l-title .grad { background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 60%, var(--neon) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.l-sub { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 560px; margin: 0 0 26px; }
.l-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.l-stats { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(22px, 5vw, 54px); justify-content: start; padding-top: 24px; border-top: 1px solid var(--border); }
.l-stat-val { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3vw, 30px); letter-spacing: -.02em; }
.l-stat-val.cyan { color: var(--accent); }
.l-stat-lbl { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
@media (max-width: 900px) {
    .l-hero { grid-template-columns: 1fr; gap: 34px; }
    .l-stats { justify-content: start; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- Live dashboard mockup ---------- */
.l-mock { position: relative; max-width: 460px; margin-inline-start: auto; }
.l-mock-glow {
    position: absolute; inset: -2px; border-radius: 26px; z-index: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent)); opacity: .35; filter: blur(22px);
    animation: lPulse 4s ease-in-out infinite;
}
.l-mock-card {
    position: relative; z-index: 1; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--border); box-shadow: var(--shadow);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.l-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.l-mock-dots { display: flex; gap: 7px; }
.l-mock-dots span { width: 11px; height: 11px; border-radius: 50%; }
.l-mock-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 5px 11px; border-radius: 10px; }
.l-mock-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: lPulse 1.5s ease-in-out infinite; }
.l-mock-body { padding: 18px; display: grid; gap: 14px; }
.l-mock-event {
    position: relative; padding: 16px; border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--surface-2) 80%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); overflow: hidden;
}
.l-mock-event::after { content: ''; position: absolute; width: 130px; height: 130px; inset-inline-end: -50px; top: -50px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(10px); }
.l-mock-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); padding: 3px 9px; border-radius: 999px; }
.l-mock-event h4 { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin: 8px 0 4px; }
.l-mock-event .loc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.l-mock-badge { position: absolute; inset-inline-end: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--ok-fg); background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); padding: 4px 10px; border-radius: 10px; animation: lPulse 1.8s ease-in-out infinite; }
.l-mock-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.l-mock-cell { background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid var(--border); border-radius: 13px; padding: 10px 12px; }
.l-mock-cell .k { font-size: 11px; color: var(--muted); }
.l-mock-cell .v { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-top: 2px; }
.l-mock-cell .v small { font-size: 10px; color: var(--ok); font-weight: 700; }
.l-mock-feed { display: grid; gap: 8px; }
.l-mock-feed-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.l-mock-feed-title .synced { font-size: 10px; color: var(--accent); text-transform: none; letter-spacing: 0; font-family: ui-monospace, monospace; }
.l-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); }
.l-mock-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.l-mock-row .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.l-mock-row .who b { font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-mock-row .who span { font-size: 10.5px; color: var(--muted); }
.l-mock-row .ok-chip { font-size: 10px; font-weight: 700; color: var(--ok-fg); background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.l-mock-row .ok-chip.cyan-chip { color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 32%, transparent); }
.l-mock-btn { width: 100%; margin-top: 2px; padding: 11px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease, transform .12s ease; }
.l-mock-btn:hover { background: var(--surface-3); }
.l-mock-btn:active { transform: scale(.98); }
.l-mock-btn .ic { width: 15px; height: 15px; color: var(--accent); }
.l-mock-float {
    position: absolute; inset-inline-end: -14px; bottom: -18px; z-index: 2;
    display: flex; align-items: center; gap: 11px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); backdrop-filter: blur(12px);
    animation: lFloat 7s ease-in-out infinite;
}
.l-mock-float .icw { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.l-mock-float .icw .ic { width: 18px; height: 18px; }
.l-mock-float b { display: block; font-size: 12px; }
.l-mock-float small { font-size: 10px; color: var(--muted); }

/* ---------- Partners ---------- */
.l-partners { border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); padding: 26px 0; }
.l-partners p { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 16px; }
.l-partners .l-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 42px; opacity: .75; }
.l-partners .l-row span { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .08em; color: var(--muted); transition: color .15s ease; cursor: default; }

/* ---------- Events toolbar ---------- */
.l-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.l-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.l-tab {
    padding: 9px 17px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
    transition: all .15s ease;
}
.l-tab:hover { color: var(--text); }
.l-tab.active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 38%, transparent); }
.l-search { position: relative; }
.l-search input {
    width: min(310px, 76vw); padding: 10px 14px 10px 40px; border-radius: 11px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.l-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.l-search .mag { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.l-search .mag .ic { width: 15px; height: 15px; }

/* ---------- Event cards ---------- */
.l-cards { display: grid; gap: 16px; }
.l-event {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--border); border-radius: 20px;
    padding: 20px 22px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.l-event:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.l-event-main { display: flex; align-items: center; gap: 18px; flex: 1 1 340px; min-width: 0; }
.l-date {
    width: 70px; height: 76px; border-radius: 18px; flex-shrink: 0;
    background: linear-gradient(160deg, var(--primary), var(--accent));
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 34%, transparent);
}
.l-date .d { font-family: var(--font-display); font-size: 25px; font-weight: 900; line-height: 1; }
.l-date .m { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.l-event-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.l-tag { padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); }
.l-tag.free { color: var(--ok-fg); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.l-tag.paid { color: var(--warn-fg); background: var(--warn-bg); }
.l-event h3 { font-family: var(--font-display); font-size: 18.5px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.l-event-sub { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 13px; }
.l-event-sub span { display: inline-flex; align-items: center; gap: 6px; }
.l-event-sub .ic { width: 14px; height: 14px; }
.l-event-side { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; flex-shrink: 0; }
.l-price { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.l-price-item { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 5px 10px; font-size: 12.5px; }
.l-price-item strong { font-weight: 800; }
.l-price-dot { width: 8px; height: 8px; border-radius: 50%; }
.l-price-flat { font-size: 21px; font-weight: 900; }
.l-none { text-align: center; padding: 46px 20px; color: var(--muted); border: 1px dashed var(--border); border-radius: 20px; background: var(--surface); }
@media (max-width: 640px) {
    .l-event-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
    .l-price { align-items: flex-start; }
}

/* ---------- Features ---------- */
.l-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.l-feat {
    background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border);
    border-radius: 18px; padding: 24px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.l-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.l-feat-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 34%, transparent); margin-bottom: 15px; }
.l-feat-ic .ic { width: 22px; height: 22px; }
.l-feat h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin: 0 0 7px; }
.l-feat p { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 0; min-height: 42px; }

/* ---------- ROI calculator ---------- */
.l-calc { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 30px; box-shadow: var(--shadow-sm); }
.l-calc-head { margin-bottom: 18px; }
.l-calc-head h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); margin: 10px 0 6px; }
.l-calc-head p { color: var(--muted); font-size: 13.5px; margin: 0; }
.l-calc-field { margin-bottom: 18px; }
.l-calc-labels { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; margin-bottom: 9px; }
.l-calc-labels .val { font-family: var(--font-display); font-weight: 900; color: var(--primary); font-size: 15px; }
.l-calc-labels .val.cyan { color: var(--accent); }
.l-calc-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border-radius: 999px; background: var(--surface-3); outline: none; }
.l-calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent); cursor: pointer; border: 3px solid var(--surface); }
.l-calc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); border: 3px solid var(--surface); cursor: pointer; }
.l-calc-included { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.l-calc-included .left { display: flex; align-items: center; gap: 11px; }
.l-calc-included .icw { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.l-calc-included b { display: block; font-size: 12.5px; }
.l-calc-included small { font-size: 11px; color: var(--muted); }
.l-calc-included .free { font-size: 10.5px; font-weight: 800; color: var(--ok-fg); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 4px 10px; border-radius: 9px; white-space: nowrap; }
.l-calc-out { position: relative; overflow: hidden; text-align: center; padding: 30px 24px; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); }
.l-calc-out::before { content: ''; position: absolute; width: 150px; height: 150px; inset-inline-end: -50px; top: -50px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 26%, transparent); filter: blur(12px); }
.l-calc-out .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.l-calc-rev { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; margin: 8px 0 16px; background: linear-gradient(120deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.l-calc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.l-calc-cell { text-align: start; background: color-mix(in srgb, var(--bg) 50%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.l-calc-cell .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.l-calc-cell .v { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-top: 3px; }
.l-calc-cell .v.green { color: var(--ok); }
@media (max-width: 900px) { .l-calc { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.l-bill { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 26px; font-size: 13px; font-weight: 700; color: var(--muted); }
.l-bill .on { color: var(--text); }
.l-bill-toggle { position: relative; width: 52px; height: 28px; border-radius: 999px; background: var(--primary); border: 0; cursor: pointer; padding: 3px; transition: background .2s ease; }
.l-bill-dot { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: inset-inline-start .22s ease; }
.l-bill-toggle.grow { background: color-mix(in srgb, var(--primary) 24%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); }
.l-bill-save { font-size: 10px; font-weight: 800; color: var(--ok-fg); background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); border-radius: 999px; padding: 3px 9px; }
.l-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.l-price-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px; position: relative; transition: transform .16s ease, box-shadow .16s ease; }
.l-price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.l-price-card.featured { border: 2px solid var(--primary); box-shadow: 0 14px 44px color-mix(in srgb, var(--primary) 24%, transparent); }
.l-price-ribbon { position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 999px; white-space: nowrap; letter-spacing: .03em; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent); }
.l-price-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.l-price-card .who { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.l-price-amount { font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -.02em; margin: 12px 0; }
.l-price-amount small { font-size: 13px; font-weight: 600; color: var(--muted); }
.l-price-list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; gap: 11px; font-size: 13px; color: var(--muted); }
.l-price-list li { display: flex; align-items: center; gap: 9px; }
.l-price-list li.off { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.l-price-list li .ic { width: 15px; height: 15px; color: var(--ok); flex-shrink: 0; }
.l-price-list li.off .ic { color: color-mix(in srgb, var(--muted) 40%, transparent); }
.l-price-card .grad-btn { margin-top: 22px; }

/* ---------- Testimonials ---------- */
.l-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.l-testi { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px; transition: border-color .15s ease, transform .15s ease; }
.l-testi:hover { border-color: var(--accent); transform: translateY(-2px); }
.l-stars { color: #f59e0b; letter-spacing: 2px; font-size: 14px; margin-bottom: 12px; }
.l-testi p { color: var(--muted); font-size: 13.5px; line-height: 1.75; margin: 0 0 18px; }
.l-who { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--border); }
.l-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); flex-shrink: 0; }
.l-who b { display: block; font-size: 13px; }
.l-who span { font-size: 11.5px; color: var(--muted); }

/* ---------- FAQ ---------- */
.l-faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.l-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 17px 20px; cursor: pointer; transition: border-color .15s ease; }
.l-faq-item:hover { border-color: var(--accent); }
.l-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 15px; }
.l-faq-q .chev { flex-shrink: 0; color: var(--muted); transition: transform .2s ease; }
.l-faq-item.open .chev { transform: rotate(180deg); }
.l-faq-a { color: var(--muted); font-size: 13.5px; line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .28s ease, margin .28s ease; }
.l-faq-item.open .l-faq-a { max-height: 320px; margin-top: 12px; }

/* ---------- CTA band ---------- */
.l-cta-band { position: relative; overflow: hidden; border-radius: 26px; padding: 46px 28px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 45%, var(--accent) 110%); box-shadow: 0 20px 50px color-mix(in srgb, var(--primary) 38%, transparent); }
.l-cta-band::before { content: ''; position: absolute; width: 260px; height: 260px; inset-inline-end: -80px; top: -120px; border-radius: 50%; background: color-mix(in srgb, var(--neon) 30%, transparent); filter: blur(30px); }
.l-cta-band h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 8px; position: relative; }
.l-cta-band p { opacity: .92; margin: 0 0 20px; position: relative; }
.l-cta-band .grad-btn { background: #fff; color: var(--primary); box-shadow: 0 10px 28px rgba(0,0,0,.22); position: relative; }
.l-cta-band .grad-btn:hover { filter: none; transform: translateY(-2px); }

/* ---------- Footer ---------- */
.l-footer { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 44px 0 26px; color: var(--muted); }
.l-footer .l-wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.l-footer h4 { color: var(--text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; }
.l-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.l-footer a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
.l-footer a:hover { color: var(--accent); }
.l-news input { width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; margin-bottom: 9px; }
.l-news input:focus { outline: none; border-color: var(--primary); }
.l-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: 12.5px; }
@media (max-width: 860px) { .l-footer .l-wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .l-footer .l-wrap { grid-template-columns: 1fr; } }

/* ---------- Modal ---------- */
.l-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 6, 23, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.l-modal.show { display: flex; }
.l-modal-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); position: relative; animation: lRise .22s ease; }
@keyframes lRise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.l-modal-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 15px; display: grid; place-items: center; }
.l-modal-close:hover { color: var(--text); }
.l-modal-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 10px 0 6px; }
.l-modal-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.l-modal-card label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 13px 0 6px; }
.l-modal-card input, .l-modal-card select { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; }
.l-modal-card input:focus, .l-modal-card select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---------- Toast ---------- */
.l-toast { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 99; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); padding: 14px 18px; border-radius: 15px; transform: translateY(26px); opacity: 0; pointer-events: none; transition: transform .26s ease, opacity .26s ease; max-width: min(360px, calc(100vw - 44px)); border-inline-start: 4px solid var(--ok); }
.l-toast.show { transform: none; opacity: 1; }
.l-toast .icw { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); flex-shrink: 0; }
.l-toast b { display: block; font-size: 13px; }
.l-toast span { font-size: 11.5px; color: var(--muted); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Icon helper (inline SVG) ---------- */
.ic { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- FullCalendar theme (kept for compatibility) ---------- */
.fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-today-bg-color: color-mix(in srgb, var(--primary) 12%, transparent);
  --fc-now-indicator-color: var(--accent);
  --fc-list-event-hover-bg-color: var(--surface-2);
  --fc-button-text-color: #fff;
  --fc-button-bg-color: var(--primary);
  --fc-button-border-color: transparent;
  --fc-button-hover-bg-color: var(--accent);
  --fc-button-active-bg-color: var(--primary-strong);
  --fc-event-bg-color: var(--primary);
  --fc-event-border-color: transparent;
  --fc-event-text-color: #fff;
  --fc-highlight-color: color-mix(in srgb, var(--primary) 16%, transparent);
}