/* ==========================================================================
   ECONOVO — components.css
   ========================================================================== */

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-24); }
.section { padding: var(--sp-96) 0; position: relative; }
.text-center { text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand-dark);
    background: color-mix(in srgb, var(--color-sage) 22%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    margin-bottom: var(--sp-16);
}
[data-theme="dark"] .eyebrow { color: var(--color-sage); }

.section-header { max-width: 620px; margin: 0 auto var(--sp-64); text-align: center; }
.section-title { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--text); margin-bottom: var(--sp-16); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
    padding: 15px 30px; border-radius: var(--r-pill); font-weight: 600; font-size: 1.05rem;
    transition: var(--t-base); position: relative; overflow: hidden; z-index: 1; white-space: nowrap;
}
.btn::before {
    content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12);
    transform: scaleX(0); transform-origin: right; transition: transform var(--t-base); z-index: -1;
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-primary { background: var(--brand-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(14,42,36,.3); color: #fff; }
.btn-secondary { background: var(--color-sage); color: var(--color-obsidian); box-shadow: var(--shadow-md); }
.btn-secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.btn-outline {
    background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm));
    border: 1.5px solid var(--color-sage); color: var(--text);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn-outline:hover { background: var(--color-sage); color: var(--color-obsidian); transform: translateY(-3px); }
.btn-sm { padding: 10px 20px; font-size: .9rem; }

/* ---- Scroll progress (thin ledger line tracking read position) ---- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--color-sage); z-index: 1100; transition: width .1s linear;
}
[lang="ar"] .scroll-progress { left: auto; right: 0; }

/* ---- Navbar ---- */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; padding: var(--sp-16) 0;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: inset 0 -1px 0 var(--glass-highlight);
    z-index: 1000; transition: var(--t-base);
}
.navbar.scrolled { padding: var(--sp-8) 0; box-shadow: inset 0 -1px 0 var(--glass-highlight), var(--shadow-sm); }
.nav-container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); }
.brand { display: flex; align-items: center; gap: var(--sp-16); font-size: 1.4rem; font-weight: 800; color: var(--text); cursor: pointer; }
.brand small { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.logo-img { width: 42px; height: 42px; object-fit: contain; border-radius: var(--r-sm); }
.nav-links { display: flex; gap: var(--sp-32); align-items: center; }
.nav-link { font-weight: 600; color: var(--text); position: relative; font-size: .95rem; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--color-sage); transform: scaleX(0); transition: var(--t-base); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-16); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-pill);
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm));
    transition: var(--t-base);
}
.icon-btn:hover { background: var(--color-sage); color: var(--color-obsidian); }
.icon-btn svg, .icon-btn i { width: 18px; height: 18px; }

.lang-btn {
    padding: 8px 16px; border-radius: var(--r-pill); background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm));
    border: 1px solid var(--color-sage); font-weight: 700; font-size: .85rem; color: var(--text); transition: var(--t-base);
}
.lang-btn:hover { background: var(--color-sage); color: var(--color-obsidian); }

.nav-toggle { display: none; }

/* ---- Cards ----
   Glass-LITE by design: a tinted translucent surface with a soft inset
   sheen, but no live backdrop-filter. There can be a dozen+ of these on
   screen at once (Why/Focus/Team/Events grids) — real blur on all of them
   would tax mid-range phones. Real blur is reserved for the few overlay
   elements below (navbar, mobile menu, floating badges). */
.card {
    background: var(--glass-lite-bg); border-radius: var(--r-lg);
    border: 1px solid var(--glass-lite-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
    transition: var(--t-base);
}
.card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-hover); border-color: var(--color-sage); background: var(--glass-bg); }

.icon-tile {
    width: 60px; height: 60px; background: var(--bg-sunken); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; color: var(--brand-dark);
    margin-bottom: var(--sp-24); transition: var(--t-base);
}
[data-theme="dark"] .icon-tile { color: var(--color-sage); }
.card:hover .icon-tile { background: var(--brand-dark); color: var(--color-sage); transform: scale(1.08) rotate(4deg); }

/* ---- Badges / floating elements (hero) — real glass, cheap since there
   are only ever one or two of these on screen ---- */
.floating-badge {
    position: absolute; bottom: 30px; left: -30px; background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(160%); backdrop-filter: blur(var(--glass-blur-sm)) saturate(160%);
    padding: var(--sp-16) var(--sp-24); border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
    display: flex; align-items: center; gap: var(--sp-16); z-index: 10; border: 1px solid var(--glass-border);
}
.floating-badge .icon-wrap {
    width: 40px; height: 40px; background: var(--bg-sunken); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--brand-dark);
}
[data-theme="dark"] .floating-badge .icon-wrap { color: var(--color-sage); }
.floating-tag {
    position: absolute; top: -20px; right: -16px; background: var(--glass-bg-strong); color: var(--brand-dark);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(160%); backdrop-filter: blur(var(--glass-blur-sm)) saturate(160%);
    padding: 10px 18px; border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
    border: 1px solid var(--glass-border); font-weight: 700;
    font-size: .82rem; display: flex; align-items: center; gap: 8px; z-index: 10;
}
[data-theme="dark"] .floating-tag { color: var(--color-sage); }

/* ---- Avatars (team) ---- */
.avatar-circle {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto var(--sp-16);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
    font-weight: 600; font-size: 1.5rem; color: var(--color-obsidian); background: var(--gradient-sage);
    box-shadow: var(--shadow-sm); border: 3px solid var(--bg-raised); outline: 1px solid var(--line);
}

/* ---- FAQ ---- */
.faq-item { background: var(--glass-lite-bg); border-radius: var(--r-md); margin-bottom: var(--sp-16); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm); overflow: hidden; border: 1px solid var(--glass-lite-border); transition: var(--t-base); }
.faq-item.active { border-color: var(--color-sage); background: var(--glass-bg); }
.faq-question { width: 100%; padding: var(--sp-24); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); font-size: 1.05rem; font-weight: 700; color: var(--text); text-align: left; }
[lang="ar"] .faq-question { text-align: right; }
.faq-icon { flex-shrink: 0; transition: transform var(--t-base); }
.faq-item.active .faq-icon { transform: rotate(180deg); color: var(--color-sage); }
.faq-answer { padding: 0 var(--sp-24); height: 0; overflow: hidden; opacity: 0; transition: opacity var(--t-base), padding-bottom var(--t-base); }
.faq-item.active .faq-answer { padding-bottom: var(--sp-24); opacity: 1; height: 500px; } /* no-JS fallback only — faq.js drives the real height */

/* ---- Status pill (events) ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); }
.pill-open { background: color-mix(in srgb, var(--color-sage) 25%, transparent); color: var(--brand-dark); }
[data-theme="dark"] .pill-open { color: var(--color-sage); }
.pill-open::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4CAF7D; }

/* ---- Mobile bottom join button ---- */
.mobile-join {
    display: none; position: fixed; left: 50%; z-index: 1200; width: calc(100% - 40px); max-width: 360px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(0);
    transition: transform var(--t-base), opacity var(--t-base);
    opacity: 1;
}
.mobile-join.is-hidden { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }
.mobile-join .btn { width: 100%; box-shadow: var(--shadow-lg); }

/* ---- Mobile side menu ---- */
.mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(7,21,18,.5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 1300; opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100%;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    box-shadow: inset 1px 0 0 var(--glass-highlight), var(--shadow-lg);
    z-index: 1400; padding: var(--sp-32) var(--sp-24); transition: right var(--t-base);
    display: flex; flex-direction: column; gap: var(--sp-32);
}
[lang="ar"] .mobile-menu { right: auto; left: -320px; transition: left var(--t-base); }
.mobile-menu.open { right: 0; }
[lang="ar"] .mobile-menu.open { left: 0; }
.mobile-menu .nav-link { font-size: 1.1rem; padding: var(--sp-8) 0; display: block; }
.mobile-menu-close { align-self: flex-end; }