/* ============================================================
   EduSmart Landing 2026 — premium SaaS design
   ============================================================ */
:root {
    --ld-bg:#F4F7FB;
    --ld-card:#fff;
    --ld-text:#0F172A;
    --ld-muted:#64748B;
    --ld-soft:#94A3B8;
    --ld-border:#E2E8F0;
    --ld-accent:#2563EB;
    --ld-accent-2:#3B82F6;
    --ld-accent-3:#7C3AED;
    --ld-success:#10B981;
    --ld-amber:#F59E0B;
    --ld-radius:18px;
    --ld-radius-sm:12px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.ld-page {
    margin:0; padding:0; background:var(--ld-bg);
    font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--ld-text); font-size:15px; line-height:1.6;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }

/* === NAV === */
.ld-nav {
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(15,23,42,.06);
}
.ld-nav__inner {
    max-width:1200px; margin:0 auto;
    padding:.85rem 1.5rem;
    display:flex; align-items:center; gap:2rem;
}
.ld-logo {
    display:inline-flex; align-items:center; gap:.55rem;
    text-decoration:none; color:var(--ld-text); font-weight:800; font-size:1.05rem;
    letter-spacing:-.015em;
}
.ld-logo__mark {
    width:34px; height:34px; border-radius:9px;
    background:linear-gradient(135deg,var(--ld-accent),var(--ld-accent-2));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.05rem; box-shadow:0 3px 10px -2px rgba(37,99,235,.35);
}
.ld-nav__links { display:flex; gap:.25rem; flex:1; }
.ld-nav__link {
    padding:.55rem .85rem; border-radius:8px;
    color:var(--ld-muted); text-decoration:none; font-size:.88rem; font-weight:500;
    transition:all .15s;
}
.ld-nav__link:hover { color:var(--ld-text); background:rgba(15,23,42,.04); }
.ld-nav__link.is-active { color:var(--ld-accent); background:rgba(37,99,235,.08); font-weight:600; }
.ld-nav__right { display:flex; gap:.5rem; align-items:center; }
.ld-lang {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .7rem; border:1px solid var(--ld-border); border-radius:8px;
    font-size:.82rem; color:var(--ld-muted); background:#fff;
    cursor:pointer; text-decoration:none;
}
.ld-lang:hover { color:var(--ld-text); border-color:#CBD5E1; }
.ld-cta {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem 1.1rem;
    background:var(--ld-accent); color:#fff !important; text-decoration:none;
    border-radius:10px; font-weight:600; font-size:.88rem;
    box-shadow:0 3px 10px -2px rgba(37,99,235,.3);
    transition:all .15s;
}
.ld-cta:hover { background:#1D4ED8; transform:translateY(-1px); box-shadow:0 6px 14px -2px rgba(37,99,235,.4); }
.ld-nav__toggle {
    display:none; background:none; border:0; padding:.5rem;
    color:var(--ld-text); cursor:pointer; font-size:1.25rem;
}

/* === HERO === */
.ld-hero {
    position:relative; overflow:hidden;
    padding:5rem 1.5rem 4rem;
    background:radial-gradient(circle at 20% 20%, rgba(37,99,235,.08), transparent 50%),
               radial-gradient(circle at 80% 80%, rgba(124,58,237,.06), transparent 50%);
}
.ld-hero__inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ld-hero__badge {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .85rem; background:#EFF6FF; color:var(--ld-accent);
    border:1px solid #DBEAFE; border-radius:99px;
    font-size:.78rem; font-weight:600; margin-bottom:1rem;
}
.ld-hero__title {
    font-size:clamp(2rem, 4.5vw, 3.25rem); font-weight:800;
    line-height:1.1; letter-spacing:-.025em; margin:0 0 1.1rem;
    color:var(--ld-text);
}
.ld-hero__title span { background:linear-gradient(135deg,var(--ld-accent),var(--ld-accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-hero__sub {
    font-size:1.1rem; color:var(--ld-muted); line-height:1.6;
    margin:0 0 1.85rem; max-width:540px;
}
.ld-hero__actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.ld-btn-primary {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.85rem 1.5rem; background:var(--ld-accent); color:#fff !important;
    border-radius:12px; font-weight:600; font-size:.95rem;
    text-decoration:none; box-shadow:0 4px 14px -2px rgba(37,99,235,.4);
    transition:all .2s;
}
.ld-btn-primary:hover { background:#1D4ED8; transform:translateY(-1px); box-shadow:0 8px 22px -4px rgba(37,99,235,.5); }
.ld-btn-ghost {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.85rem 1.5rem; background:#fff; color:var(--ld-text) !important;
    border:1px solid var(--ld-border); border-radius:12px;
    font-weight:600; font-size:.95rem; text-decoration:none;
    transition:all .15s;
}
.ld-btn-ghost:hover { border-color:#CBD5E1; background:#F8FAFC; }

.ld-hero__trust { display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.82rem; color:var(--ld-muted); }
.ld-hero__trust span { display:inline-flex; align-items:center; gap:.35rem; }
.ld-hero__trust i { color:var(--ld-success); }

.ld-hero__visual {
    position:relative; display:flex; justify-content:center; align-items:center;
}
.ld-hero__visual img {
    border-radius:18px; box-shadow:0 30px 60px -20px rgba(15,23,42,.25);
    max-width:100%;
}

/* === SECTION === */
.ld-section { padding:5rem 1.5rem; }
.ld-section--alt { background:#fff; }
.ld-section__inner { max-width:1200px; margin:0 auto; }
.ld-section__head { text-align:center; max-width:680px; margin:0 auto 3rem; }
.ld-eyebrow {
    display:inline-block; padding:.3rem .85rem;
    background:#EFF6FF; color:var(--ld-accent);
    border-radius:99px; font-size:.74rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:.85rem;
}
.ld-title { font-size:clamp(1.75rem,3.5vw,2.5rem); font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0 0 .85rem; color:var(--ld-text); }
.ld-lead { font-size:1.05rem; color:var(--ld-muted); margin:0; line-height:1.6; }

/* Feature grid */
.ld-features { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.ld-feat {
    background:#fff; border:1px solid var(--ld-border); border-radius:var(--ld-radius);
    padding:1.5rem; transition:all .25s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.ld-feat:hover { transform:translateY(-3px); box-shadow:0 12px 28px -10px rgba(15,23,42,.12); border-color:#DBEAFE; }
.ld-feat__ic {
    width:48px; height:48px; border-radius:12px;
    background:linear-gradient(135deg,var(--ld-accent),var(--ld-accent-2));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; margin-bottom:1rem;
    box-shadow:0 4px 12px -3px rgba(37,99,235,.4);
}
.ld-feat--purple .ld-feat__ic { background:linear-gradient(135deg,#7C3AED,#8B5CF6); box-shadow:0 4px 12px -3px rgba(124,58,237,.4); }
.ld-feat--green .ld-feat__ic  { background:linear-gradient(135deg,#059669,#10B981); box-shadow:0 4px 12px -3px rgba(5,150,105,.4); }
.ld-feat--amber .ld-feat__ic  { background:linear-gradient(135deg,#D97706,#F59E0B); box-shadow:0 4px 12px -3px rgba(217,119,6,.4); }
.ld-feat--pink .ld-feat__ic   { background:linear-gradient(135deg,#EC4899,#F472B6); box-shadow:0 4px 12px -3px rgba(236,72,153,.4); }
.ld-feat--cyan .ld-feat__ic   { background:linear-gradient(135deg,#0EA5E9,#22D3EE); box-shadow:0 4px 12px -3px rgba(14,165,233,.4); }
.ld-feat__title { font-size:1.05rem; font-weight:700; margin:0 0 .5rem; color:var(--ld-text); }
.ld-feat__desc { font-size:.9rem; color:var(--ld-muted); margin:0; line-height:1.55; }

/* Article card */
.ld-article {
    background:#fff; border:1px solid var(--ld-border); border-radius:var(--ld-radius);
    overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.ld-article__head {
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--ld-border);
    background:linear-gradient(180deg,#FAFBFC,#fff);
    display:flex; align-items:center; gap:.75rem;
}
.ld-article__ic {
    width:42px; height:42px; border-radius:11px;
    background:linear-gradient(135deg,var(--ld-accent),var(--ld-accent-2));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
    box-shadow:0 3px 10px -2px rgba(37,99,235,.35);
}
.ld-article__title { font-size:1.15rem; font-weight:700; margin:0; color:var(--ld-text); letter-spacing:-.01em; }
.ld-article__body { padding:1.5rem; }
.ld-article__body p { margin:0 0 1rem; color:var(--ld-muted); line-height:1.7; font-size:.95rem; }
.ld-article__body p:last-child { margin-bottom:0; }
.ld-article__body p b, .ld-article__body p strong { color:var(--ld-text); font-weight:700; }

/* Stats */
.ld-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.ld-stat {
    background:#fff; border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm);
    padding:1.25rem; text-align:center;
}
.ld-stat__val { font-size:2rem; font-weight:800; color:var(--ld-accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ld-stat__lbl { font-size:.82rem; color:var(--ld-muted); margin-top:.25rem; font-weight:500; }

/* CTA banner */
.ld-cta-banner {
    background:linear-gradient(135deg,#1E40AF,#2563EB,#3B82F6);
    color:#fff; border-radius:24px;
    padding:3rem 2rem; text-align:center;
    position:relative; overflow:hidden;
    box-shadow:0 20px 50px -15px rgba(37,99,235,.5);
}
.ld-cta-banner::before {
    content:''; position:absolute; top:-50px; right:-50px; width:300px; height:300px;
    border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
}
.ld-cta-banner::after {
    content:''; position:absolute; bottom:-80px; left:-80px; width:280px; height:280px;
    border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
}
.ld-cta-banner > * { position:relative; z-index:1; }
.ld-cta-banner h2 { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; margin:0 0 .85rem; letter-spacing:-.02em; }
.ld-cta-banner p { font-size:1rem; opacity:.9; margin:0 0 1.5rem; max-width:600px; margin-left:auto; margin-right:auto; }
.ld-cta-banner .ld-btn-primary { background:#fff; color:var(--ld-accent) !important; box-shadow:0 4px 14px -2px rgba(0,0,0,.2); }
.ld-cta-banner .ld-btn-primary:hover { background:#F0F9FF; transform:translateY(-2px); }

/* === FOOTER === */
.ld-footer { background:#0F172A; color:#94A3B8; padding:3rem 1.5rem 1.5rem; margin-top:5rem; }
.ld-footer__inner { max-width:1200px; margin:0 auto; }
.ld-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2rem; margin-bottom:2.5rem; }
@media(max-width:768px){ .ld-footer__grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .ld-footer__grid { grid-template-columns:1fr; } }
.ld-footer__brand .ld-logo { color:#fff; margin-bottom:.85rem; }
.ld-footer__brand p { color:#94A3B8; font-size:.88rem; line-height:1.6; margin:0; }
.ld-footer__title { color:#F8FAFC; font-size:.95rem; font-weight:700; margin:0 0 .85rem; }
.ld-footer__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.ld-footer__list a { color:#94A3B8; text-decoration:none; font-size:.88rem; transition:color .15s; }
.ld-footer__list a:hover { color:#fff; }
.ld-footer__contact { font-size:.88rem; color:#94A3B8; line-height:1.7; }
.ld-footer__contact i { color:var(--ld-accent-2); width:18px; margin-right:.45rem; }
.ld-footer__bottom { padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.85rem; font-size:.82rem; color:#64748B; }
.ld-footer__bottom a { color:#94A3B8; text-decoration:none; }
.ld-footer__socials { display:flex; gap:.5rem; }
.ld-footer__socials a {
    width:36px; height:36px; border-radius:9px;
    background:rgba(255,255,255,.06); color:#94A3B8;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .15s; text-decoration:none;
}
.ld-footer__socials a:hover { background:var(--ld-accent); color:#fff; transform:translateY(-2px); }

/* === FORM === */
.ld-form { display:flex; flex-direction:column; gap:1rem; }
.ld-form__group label { font-size:.85rem; font-weight:600; color:#334155; margin-bottom:.35rem; display:block; }
.ld-form__group input, .ld-form__group textarea, .ld-form__group select {
    width:100%; padding:.75rem 1rem; border:1.5px solid var(--ld-border); border-radius:10px;
    font-size:.92rem; font-family:inherit; background:#F8FAFC;
    transition:all .15s;
}
.ld-form__group input:focus, .ld-form__group textarea:focus, .ld-form__group select:focus {
    outline:none; border-color:var(--ld-accent); background:#fff;
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

/* Two-col */
.ld-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media(max-width:840px){ .ld-grid-2 { grid-template-columns:1fr; } }

/* Responsive nav */
@media(max-width:880px){
    .ld-nav__links { display:none; position:absolute; top:100%; left:0; right:0;
        background:#fff; flex-direction:column; padding:.5rem 1rem; border-bottom:1px solid var(--ld-border);
        box-shadow:0 10px 30px -10px rgba(15,23,42,.15);
    }
    .ld-nav__links.is-open { display:flex; }
    .ld-nav__toggle { display:inline-flex; }
    .ld-hero__inner { grid-template-columns:1fr; }
    .ld-hero__visual { order:-1; }
}

/* Generic utility */
.ld-center { text-align:center; }
.ld-mb-4 { margin-bottom:2rem; }

/* === SHARED GLASS NAV (all landing pages) === */
.bn-nav-wrap {
    position:sticky; top:0; z-index:50;
    padding:1rem 1.5rem;
    background:rgba(244,246,251,.65);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.bn-nav {
    max-width:1280px; margin:0 auto;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);
    border-radius:18px;
    padding:.6rem 1rem;
    display:flex; align-items:center; gap:1.5rem;
    box-shadow:0 8px 24px -8px rgba(15,23,42,.08);
}
.bn-nav .ld-logo { color:#0F172A; text-decoration:none; }
.bn-nav__links { display:flex; gap:.15rem; flex:1; }
.bn-nav__link {
    padding:.5rem .8rem; border-radius:10px;
    color:#475569; text-decoration:none;
    font-size:.85rem; font-weight:500;
    transition:all .15s;
}
.bn-nav__link:hover { background:rgba(15,23,42,.05); color:#0F172A; }
.bn-nav__link.is-active { background:#0F172A; color:#fff; }
.bn-nav__cta {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.55rem 1.1rem;
    background:#0F172A; color:#fff !important;
    border-radius:11px;
    font-weight:600; font-size:.85rem;
    text-decoration:none; transition:all .2s; border:0; cursor:pointer;
}
.bn-nav__cta:hover { background:#1E293B; transform:translateY(-1px); }
.bn-nav__toggle {
    display:none; background:none; border:0; padding:.5rem;
    color:#0F172A; cursor:pointer; font-size:1.1rem;
}
@media(max-width:880px){
    .bn-nav__links {
        display:none; position:absolute; top:100%; left:1.5rem; right:1.5rem; margin-top:.5rem;
        flex-direction:column; background:rgba(255,255,255,.95);
        backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.6);
        border-radius:14px; padding:.5rem;
        box-shadow:0 12px 30px -10px rgba(15,23,42,.15);
    }
    .bn-nav__links.is-open { display:flex; }
    .bn-nav__toggle { display:inline-flex; }
}