:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e7e9f1;
  --text: #0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --accent:#22c55e;
}
body.bg-page{ background: var(--bg); color: var(--text); }
.navbar-brand{ color: var(--text) !important; }
.navbar .nav-link{ color:#475569; }
.navbar .nav-link:hover{ color: var(--primary); }

.hero{ padding-top: 120px; padding-bottom: 70px; }
.hero-card{ background: var(--card); border:1px solid var(--border); border-radius: 18px; padding: 14px; }
.gradient-text{
  background: linear-gradient(135deg, #2563eb, #00cfff);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.mockup{ border-radius: 12px; overflow: hidden; border:1px solid var(--border); background:#fafbff; }
.mockup-nav{ height: 36px; background: linear-gradient(180deg,#fff,#f5f7ff); display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--border); }
.mockup-nav .dot{ width:10px; height:10px; border-radius:50%; background:#d0d6e6; }
.mockup-hero{ display:flex; gap:12px; padding:16px; align-items:center; }
.mockup-hero .avatar{ width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg, #60a5fa, #34d399); }
.mockup-hero .lines{ flex:1; }
.line{ height:10px; background:#e6ebf7; border-radius:6px; margin-bottom:10px; }
.w-25{ width:25%; } .w-50{ width:50%; } .w-75{ width:75%; }
.mockup-cards{ display:grid; grid-template-columns: 1fr; gap:10px; padding:0 16px 16px; }
.card-skel{ border:1px solid var(--border); border-radius:10px; padding:12px; background:#fff; }

.section{ padding: 70px 0; }
.f-card{ background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 18px; }
.f-card .icon{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:20px; color:#0f172a;
  background: linear-gradient(135deg, #eff6ff, #ecfeff); border:1px solid #e5f0ff; margin-bottom:10px; }

.glass{ background: #ffffff; border:1px solid var(--border); }
.stat .h2{ font-weight:800; color:#111827; }
.text-muted{ color: var(--muted) !important; }

.t-card{ background: var(--card); border:1px solid var(--border); border-radius: 16px; padding: 18px; height:100%; }
.t-head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.t-avatar{ width:36px; height:36px; border-radius:50%; background:#e2e8f0; }
.t-avatar.bg-1{ background: linear-gradient(135deg,#93c5fd,#fde68a); }
.t-avatar.bg-2{ background: linear-gradient(135deg,#a7f3d0,#bfdbfe); }
.t-avatar.bg-3{ background: linear-gradient(135deg,#fca5a5,#a7f3d0); }

.cta{ background: linear-gradient(135deg, #f1f5ff, #f0fff9); border:1px solid var(--border); }
footer a{ text-decoration: none; }
footer a:hover{ text-decoration: underline; }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(14px); transition: .6s ease all; }
.reveal.revealed{ opacity:1; transform:none; }