/*
 * EasyBOQ Landing Page - Design System
 * Premium Construction SaaS visual language.
 * Loaded on top of Tailwind (CDN/JIT). Keep selectors scoped to .eb-landing
 * so nothing here leaks into the authenticated dashboard.
 */

.eb-landing {
    --eb-bg-0: #030817;
    --eb-bg-1: #071022;
    --eb-bg-2: #0B1326;
    --eb-green: #8BD63F;
    --eb-teal: #18C98B;
    --eb-border: rgba(255, 255, 255, 0.08);
    --eb-card: rgba(255, 255, 255, 0.035);
    background-color: var(--eb-bg-0);
    font-family: 'Inter', 'Khmer OS Battambang', 'Noto Sans Khmer', sans-serif;
}

.eb-landing[lang="km"] h1,
.eb-landing[lang="km"] h2,
.eb-landing[lang="km"] h3 {
    line-height: 1.5;
}

/* Tailwind's display utilities (grid/flex) share specificity with the UA
   [hidden] rule and are declared later, so they win and the panel stays
   visible. Force it back off whenever the hidden attribute is set. */
.eb-landing [hidden] {
    display: none !important;
}

/* ---------- Focus states (accessibility) ---------- */
.eb-landing a:focus-visible,
.eb-landing button:focus-visible,
.eb-landing [tabindex]:focus-visible,
.eb-landing input:focus-visible,
.eb-landing summary:focus-visible {
    outline: 2px solid var(--eb-green);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Blueprint / technical grid backgrounds ---------- */
.eb-grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

.eb-blueprint-bg {
    background-image:
        linear-gradient(rgba(139, 214, 63, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 214, 63, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.eb-glow {
    background: radial-gradient(closest-side, rgba(139, 214, 63, 0.16), transparent);
    filter: blur(10px);
}

/* ---------- Glass card ---------- */
.eb-card {
    background: var(--eb-card);
    border: 1px solid var(--eb-border);
    backdrop-filter: blur(6px);
}

.eb-card-hover {
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.eb-card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 214, 63, 0.35);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

/* ---------- Sticky nav ---------- */
.eb-nav {
    background: rgba(3, 8, 23, 0.55);
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.eb-nav.is-scrolled {
    background: rgba(3, 8, 23, 0.88);
    border-bottom-color: var(--eb-border);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
}

/* ---------- Buttons ---------- */
.eb-btn-primary {
    background: linear-gradient(135deg, var(--eb-green), var(--eb-teal));
    color: #05170a;
    box-shadow: 0 12px 30px -12px rgba(139, 214, 63, 0.45);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.eb-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 34px -12px rgba(139, 214, 63, 0.55);
}

.eb-btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--eb-border);
    color: #E2E8F0;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.eb-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

/* ---------- Hero dashboard preview ---------- */
.eb-dashboard-frame {
    animation: eb-float 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes eb-float {
    0%, 100% { transform: translateY(0) rotateX(1deg) rotateY(-1deg); }
    50% { transform: translateY(-10px) rotateX(0deg) rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eb-dashboard-frame { animation: none; }
}

.eb-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 214, 63, 0.35) transparent;
}

.eb-table-scroll::-webkit-scrollbar {
    height: 6px;
}

.eb-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(139, 214, 63, 0.35);
    border-radius: 999px;
}

/* ---------- Scroll fade-up animation ---------- */
.eb-fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.eb-fade-up.eb-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .eb-fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Tabs ---------- */
.eb-tab-btn {
    color: #94A3B8;
    border: 1px solid transparent;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.eb-tab-btn[aria-selected="true"] {
    color: #05170a;
    background: var(--eb-green);
    border-color: var(--eb-green);
}

.eb-tab-btn:not([aria-selected="true"]):hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--eb-border);
}

/* ---------- FAQ accordion ---------- */
.eb-faq-item {
    border: 1px solid var(--eb-border);
    background: var(--eb-card);
    transition: border-color .2s ease;
}

.eb-faq-item[data-open="true"] {
    border-color: rgba(139, 214, 63, 0.3);
}

.eb-faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.eb-faq-item[data-open="true"] .eb-faq-panel {
    grid-template-rows: 1fr;
}

.eb-faq-panel > div {
    overflow: hidden;
}

.eb-faq-chevron {
    transition: transform .25s ease;
}

.eb-faq-item[data-open="true"] .eb-faq-chevron {
    transform: rotate(180deg);
}

/* ---------- Marquee for trust bar ---------- */
.eb-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 3rem;
}

/* ---------- Mobile menu ---------- */
.eb-mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.eb-mobile-menu.is-open {
    max-height: 32rem;
}

/* ---------- Utility: number counter tabular figures ---------- */
.eb-counter {
    font-variant-numeric: tabular-nums;
}