/*
 * 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: #050B1B;
    --eb-bg-1: #0A1222;
    --eb-bg-2: #101827;
    --eb-green: #84CC36;
    --eb-teal: #20C997;
    --eb-head: #F8FAFC;
    --eb-text: #94A3B8;
    --eb-border: rgba(255, 255, 255, 0.08);
    --eb-card: rgba(255, 255, 255, 0.035);
    background-color: var(--eb-bg-0);
    color: var(--eb-head);
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Khmer script is taller than Latin: more line height so vowels and subscripts are not clipped */
.eb-landing[lang="kh"] { line-height: 1.75; }
.eb-landing[lang="kh"] h1 { line-height: 1.45; letter-spacing: 0; }
.eb-landing[lang="kh"] h2,
.eb-landing[lang="kh"] h3 { line-height: 1.55; letter-spacing: 0; }
.eb-landing[lang="kh"] .eb-eyebrow { letter-spacing: 0.02em; }
.eb-landing[lang="en"] h1 { line-height: 1.08; letter-spacing: -0.03em; }
.eb-landing[lang="en"] h2 { line-height: 1.15; letter-spacing: -0.02em; }

/* 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;
}

/* anchors land below the sticky header */
.eb-landing section[id],
.eb-landing [data-eb-anchor] {
    scroll-margin-top: 88px;
}

/* ---------- 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;
}

.eb-skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--eb-green); color: #05170a; font-weight: 700; font-size: 14px;
    padding: 10px 16px; border-radius: 10px; transition: top .15s ease;
}
.eb-skip:focus { top: 12px; }

/* ---------- Text helpers ---------- */
.eb-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
    color: var(--eb-green);
}
.eb-eyebrow-pill {
    padding: .4rem .85rem; border-radius: 999px;
    background: rgba(132, 204, 54, 0.08); border: 1px solid rgba(132, 204, 54, 0.3);
}
.eb-gradient-text {
    background: linear-gradient(100deg, var(--eb-green) 10%, var(--eb-teal) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Blueprint / technical grid backgrounds ---------- */
.eb-grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 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-glow {
    background: radial-gradient(closest-side, rgba(132, 204, 54, 0.16), transparent);
    filter: blur(10px);
}

/* hero: the blueprint drawing also used on the login page, kept faint behind the product preview */
.eb-hero-img {
    opacity: .16; mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.eb-hero-shade {
    background: linear-gradient(180deg, rgba(5, 11, 27, 0) 55%, var(--eb-bg-0) 100%);
}

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

.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(-3px);
    border-color: rgba(132, 204, 54, 0.35);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.eb-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(132, 204, 54, 0.1); color: var(--eb-green);
    border: 1px solid rgba(132, 204, 54, 0.18);
}

.eb-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--eb-green); font-weight: 600; font-size: 14px;
}
.eb-link svg { transition: transform .2s ease; }
.eb-link:hover svg { transform: translateX(3px); }

/* ---------- Sticky nav ---------- */
.eb-nav {
    background: rgba(5, 11, 27, 0.6);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.eb-nav.is-scrolled {
    background: rgba(5, 11, 27, 0.9);
    border-bottom-color: var(--eb-border);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.eb-nav-link {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .5rem .6rem; border-radius: 8px; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: #CBD5E1;
    transition: color .15s ease, background-color .15s ease;
}
.eb-nav-link:hover,
.eb-dd.is-open > .eb-nav-link,
.eb-nav-link.is-active { color: #fff; background: rgba(255, 255, 255, 0.06); }
.eb-nav-link .eb-dd-chevron { transition: transform .2s ease; }
@media (min-width: 1280px) { .eb-nav-link { padding: .5rem .8rem; } }
.eb-dd.is-open .eb-dd-chevron { transform: rotate(180deg); }

/* dropdown menus (opened by landing.js: click, hover on desktop, keyboard) */
.eb-dd { position: relative; }
.eb-dd-panel {
    position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60;
    width: 300px; padding: 8px;
    background: #0C1528; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.eb-dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.eb-dd.is-open .eb-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.eb-dd-item {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .6rem .7rem; border-radius: 10px;
    transition: background-color .15s ease;
}
.eb-dd-item:hover { background: rgba(255, 255, 255, 0.06); }
.eb-dd-item svg { color: var(--eb-green); flex-shrink: 0; margin-top: 2px; }
.eb-dd-item strong { display: block; font-size: 14px; font-weight: 600; color: #F8FAFC; }
.eb-dd-item span { display: block; font-size: 12.5px; color: var(--eb-text); line-height: 1.5; }

/* ---------- Buttons ---------- */
.eb-btn-primary {
    background: linear-gradient(135deg, var(--eb-green), #6FBF3A);
    color: #05170a;
    box-shadow: 0 12px 30px -12px rgba(132, 204, 54, 0.5);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.eb-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 34px -12px rgba(132, 204, 54, 0.6);
}
.eb-btn-primary svg { transition: transform .2s ease; }
.eb-btn-primary:hover svg { transform: translateX(3px); }

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

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

/* ---------- Product previews (light app UI on the dark page) ---------- */
.eb-app {
    background: #fff; color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(132, 204, 54, 0.08), 0 0 90px -20px rgba(132, 204, 54, 0.28);
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    line-height: 1.4;
}
.eb-app-side { background: #0E1A2E; color: #94A3B8; }
.eb-app-side .is-on { background: rgba(132, 204, 54, 0.14); color: #A3E05B; }
.eb-app table { border-collapse: collapse; width: 100%; }
.eb-app th { font-weight: 600; color: #64748B; background: #F8FAFC; white-space: nowrap; }
.eb-app td, .eb-app th { border-bottom: 1px solid #EEF2F6; }
.eb-app .eb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eb-app-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem;
    border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; color: #334155;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}

.eb-float-card {
    background: #fff; color: #1E293B; border-radius: 14px; border: 1px solid #E2E8F0;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6);
    animation: eb-float 7s ease-in-out infinite;
}
.eb-donut {
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(#84CC36 0 59%, #20C997 59% 85%, #F59E0B 85% 100%);
    -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px);
    mask: radial-gradient(circle, transparent 15px, #000 16px);
}

@keyframes eb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* small UI thumbnails inside the feature cards */
.eb-thumb {
    background: #fff; color: #334155; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12);
    height: 148px; overflow: hidden; font-size: 10.5px; line-height: 1.35;
}

.eb-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(132, 204, 54, 0.45) transparent;
}

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

.eb-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(132, 204, 54, 0.45);
    border-radius: 999px;
}

/* ---------- Scroll fade-up animation (only once landing.js has started: .eb-js on <html>) ---------- */
.eb-js .eb-fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

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

/* ---------- Tabs ---------- */
.eb-tab-btn {
    color: #94A3B8;
    border: 1px solid transparent;
    white-space: nowrap;
    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.05);
    border-color: var(--eb-border);
}

[data-eb-tabpanel]:not([hidden]) { animation: eb-panel-in .28s ease both; }
@keyframes eb-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- How it works: connected steps ---------- */
.eb-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    font-size: 12px; font-weight: 800; color: #05170a;
    background: linear-gradient(135deg, var(--eb-green), var(--eb-teal));
}

/* ---------- Pricing ---------- */
.eb-plan-featured {
    border: 1px solid rgba(132, 204, 54, 0.55);
    background: linear-gradient(180deg, rgba(132, 204, 54, 0.09), rgba(132, 204, 54, 0.02));
    box-shadow: 0 30px 60px -30px rgba(132, 204, 54, 0.35);
}
.eb-compare th, .eb-compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--eb-border); text-align: left; }
.eb-compare th:not(:first-child), .eb-compare td:not(:first-child) { text-align: center; }
.eb-compare thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #CBD5E1; }

/* ---------- 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(132, 204, 54, 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);
}

/* ---------- Final CTA ---------- */
.eb-cta {
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(132, 204, 54, 0.2), transparent 70%),
        linear-gradient(180deg, #0C1629, #081021);
    border: 1px solid rgba(132, 204, 54, 0.22);
}

/* ---------- Mobile menu ---------- */
.eb-mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: rgba(5, 11, 27, 0.98);
}

.eb-mobile-menu.is-open {
    max-height: calc(100vh - 68px);
    overflow-y: auto;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .eb-landing *, .eb-landing *::before, .eb-landing *::after {
        animation: none !important;
        transition: none !important;
    }
    .eb-js .eb-fade-up { opacity: 1; transform: none; }
    html { scroll-behavior: auto !important; }
}