:root{
  --brand:#00ABE4;           /* bright blue */
  --brand-50:#E9F1FA;        /* light blue */
  --white:#FFFFFF;
  --ink:#0B2239;             /* deep readable navy */
}

html,body{scroll-behavior:smooth}
body{color:var(--ink); background-color:var(--brand-50)}
.bg-page{background:linear-gradient(180deg,var(--brand-50),#fff)}
.bg-white{background:#fff!important}
.text-brand{color:var(--brand)!important}
.link-brand{color:var(--brand)}
.link-brand:hover{text-decoration:underline}
.btn-brand{background:var(--brand); color:#fff; border:none}
.btn-brand:hover{filter:brightness(0.95)}
.btn-outline-brand{border:2px solid var(--brand); color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand); color:#fff}
.brand .bi-hexagon-fill{font-size:1.25rem}

.site-header .navbar{border-bottom:1px solid rgba(0,0,0,.06)}
.hero{
  min-height: 72vh;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(0,171,228,.12), transparent 60%),
              radial-gradient(800px 300px at 90% 20%, rgba(0,171,228,.10), transparent 60%);
}

/* floating orbs */
.bg-orb{position:absolute; filter:blur(40px); opacity:.5; z-index:0; border-radius:9999px}
.orb-a{width:360px;height:360px;right:-120px;top:-80px;background:radial-gradient(circle at 30% 30%, var(--brand), transparent 70%)}
.orb-b{width:280px;height:280px;left:-60px;bottom:-60px;background:radial-gradient(circle at 60% 60%, var(--brand), transparent 70%)}

/* card features */
.card-feature{border:1px solid rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease}
.card-feature:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.08)}
.icon-feature{font-size:1.75rem; color:var(--brand)}

.badge-brand{display:inline-block;background:var(--brand-50); color:var(--brand); padding:.35rem .6rem; border-radius:999px; font-weight:600; letter-spacing:.2px}

/* pill list */
.pill{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:.75rem 1rem; display:flex; align-items:center; gap:.5rem}
.pill i{color:var(--brand)}

/* gradient CTA */
.bg-grad{background:linear-gradient(135deg, var(--brand) 0%, #3CC7F0 100%);}

/* stack visualization */
.stack{position:relative;width:280px;height:280px;margin-inline:auto; perspective:1000px}
.stack-card{position:absolute; inset:0; border-radius:22px; background:#fff; border:1px solid rgba(0,0,0,.06); transform-style:preserve-3d; animation:float 8s ease-in-out infinite}
.stack-card.c1{transform:translateZ(-40px) rotateX(6deg) rotateY(-8deg)}
.stack-card.c2{transform:translateZ(-20px) rotateX(4deg) rotateY(-6deg); animation-delay:.25s}
.stack-card.c3{transform:rotateX(2deg) rotateY(-4deg); animation-delay:.5s}
.stack-core{position:absolute;inset:0;display:grid;place-items:center;font-size:4rem;color:var(--brand);animation:corePulse 3.5s ease-in-out infinite}

@keyframes float{
  0%,100%{transform:translateY(0) rotateX(4deg) rotateY(-6deg)}
  50%{transform:translateY(-10px) rotateX(5deg) rotateY(-8deg)}
}
@keyframes corePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

/* reveal-on-scroll */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.revealed{opacity:1!important; transform:translateY(0)!important}
[data-reveal-delay="60"]{transition-delay:.06s}
[data-reveal-delay="90"]{transition-delay:.09s}
[data-reveal-delay="120"]{transition-delay:.12s}
[data-reveal-delay="180"]{transition-delay:.18s}

/* sections spacing */
.py-6{padding-top:4.5rem; padding-bottom:4.5rem}

/* brand utility */
.text-dark{color:#0B2239!important}
.text-muted{color:#5f7a96!important}

/* subtle tilt */
.tilt{transform:rotateX(2deg) rotateY(-2deg); transform-style:preserve-3d}
.preview-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1.5rem; box-shadow:0 12px 40px rgba(0,0,0,.08)}