/* Bekboto Static Landing — minimal, modern, animated */
:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --emerald:#10b981;
  --cyan:#06b6d4;
  --indigo:#6366f1;
  --soft:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(2,8,23,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(to bottom,#f0f9ff 0%,#fff 40%,#ecfdf5 100%);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1152px;margin:0 auto;padding:0 16px}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}
@media(min-width:960px){.grid--2{grid-template-columns:1.1fr .9fr}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
.gap{gap:16px}
.mt{margin-top:16px}
.maxw{max-width:720px}

.text-emerald{color:var(--emerald)}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.h2{font-size:2rem;font-weight:800}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;background:var(--emerald);color:#fff;font-weight:600;border:1px solid transparent;box-shadow:var(--shadow);transition:.2s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn--dark{background:#0b1220}
.w-100{width:100%}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand__logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--emerald),var(--cyan),var(--indigo));position:relative;overflow:hidden;box-shadow:var(--shadow)}
.brand__logo::after{content:"";position:absolute;inset:-40% 0 auto -60%;width:60%;height:200%;background:linear-gradient( to right, rgba(255,255,255,.6), rgba(255,255,255,0) );transform:skewX(20deg);animation:sheen 2.6s ease-in-out infinite}
@keyframes sheen{0%{left:-60%}60%{left:120%}100%{left:120%}}
.brand__text{letter-spacing:.2px}
.nav__links{display:none;gap:26px}
@media(min-width:960px){.nav__links{display:flex}}
.nav__links a{color:#0f172aaa}
.nav__links a:hover{color:var(--emerald)}
.nav__cta{display:flex;gap:10px}

/* HERO */
.hero{position:relative;overflow:hidden;padding:72px 0 16px}
.hero__grid{align-items:center}
.hero__title{font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hero__actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.hero__trust{display:flex;align-items:center;gap:14px;margin-top:18px}
.avatars{display:flex;gap:0}
.avatars span{width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:linear-gradient(to bottom right,#7dd3fc,#86efac);box-shadow:0 6px 14px rgba(15,23,42,.15)}
.avatars span:not(:first-child){margin-left:-10px}
.blur{position:absolute;filter:blur(60px);border-radius:999px;opacity:.6}
.blur--left{left:-140px;top:-140px;width:520px;height:520px;background:rgba(110,231,183,.45)}
.blur--right{right:-140px;bottom:-160px;width:520px;height:520px;background:rgba(103,232,249,.45)}

.card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:16px}
.dashboard{position:relative}
.card__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px}
.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f87171;margin-left:6px}
.dots i:nth-child(2){background:#fbbf24}.dots i:nth-child(3){background:#34d399}
.dashboard__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash__highlight{grid-column:span 2;min-height:100px;background:linear-gradient(90deg,#eef2ff,#e6fffb);border-radius:16px;padding:14px;display:flex;align-items:end}
.metric{padding:14px;border:1px solid var(--border);border-radius:14px}
.metric__value{font-weight:700;margin-top:2px}
.bar{margin-top:10px;height:8px;width:100%;background:#f1f5f9;border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--emerald),var(--cyan));width:0}
.blob{position:absolute;right:-16px;bottom:-16px;width:110px;height:110px;background:rgba(16,185,129,.2);filter:blur(30px);border-radius:26px;animation:pulse 5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* marquee */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);padding:12px 0;overflow:hidden}
.marquee .track{display:flex;gap:40px;white-space:nowrap;animation:marquee 18s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee span{color:var(--muted);font-size:.95rem}

/* SECTION */
.section{padding:64px 0}
.section--soft{background:linear-gradient(to bottom,#fff,#f8fafc)}
.section__title{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.02em}

/* KPI cards */
.kpi{padding:18px}
.kpi__value{font-size:28px;font-weight:800}

/* soft cards */
.soft{background:#fff8;backdrop-filter:blur(2px)}
.list{margin:14px 0 0 0;padding:0 0 0 18px;color:var(--ink)}
.list li{margin:8px 0}

/* CHART */
.chart__bars{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;height:170px;gap:8px;margin-top:12px}
.chart__bars span{display:block;width:100%;background:linear-gradient(180deg,var(--cyan),var(--emerald));border-radius:8px;height:0;opacity:.85}

/* CTA */
.cta{position:relative;padding:64px 0;background:radial-gradient(ellipse at center, rgba(16,185,129,.15), transparent 60%)}
.cta__box{background:#0b1220;color:#fff;border-radius:26px;padding:26px;border:1px solid #101827;display:flex;align-items:center;justify-content:space-between;gap:18px;overflow:hidden;box-shadow:var(--shadow)}
.cta__box::after{content:"";position:absolute;right:-120px;bottom:-120px;width:220px;height:220px;background:rgba(16,185,129,.3);filter:blur(30px);border-radius:999px;animation:pulse 6s infinite}

/* FORM */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;font-size:.95rem}
.form input,.form select,.form textarea{margin-top:6px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-family:inherit}
.form textarea{resize:vertical}
.form button{grid-column:span 2}

@media(max-width:959px){
  .form{grid-template-columns:1fr}
  .cta__box{flex-direction:column;align-items:flex-start}
}

/* FOOTER */
.footer{border-top:1px solid var(--border);background:#0b1220;color:#cbd5e1;padding:38px 0 10px}
.footer strong{color:#fff}
.footlist{list-style:none;margin:10px 0 0 0;padding:0}
.footlist li{margin:8px 0}
.footlist a{color:#cbd5e1}
.footlist a:hover{color:#fff}
.brand--footer .brand__logo{box-shadow:none}
.copy{text-align:center;color:#94a3b8;font-size:.85rem;margin-top:16px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}