:root{
  --ink:#12172a; --ink-soft:#565f7a; --line:#e6e8f0; --bg:#f7f8fc; --card:#fff;
  --accent:#3b5bfd; --accent-dark:#2743c9; --accent-ink:#fff;
  --c1:#2f8fe0; --c2:#22b57d; --c3:#f2a430; --c4:#ef4d6b; --c5:#8a5cf6;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); background:var(--bg);}
h1,h2,h3{font-family:'Manrope',system-ui,sans-serif; margin:0;}
a{color:var(--accent);}
img{max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* Topbar */
.topbar{position:sticky; top:0; z-index:10; background:rgba(18,23,42,.96); backdrop-filter:blur(6px);}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:26px; display:block;}
.topnav{display:flex; align-items:center; gap:22px;}
.topnav a{color:#dfe2f0; text-decoration:none; font-size:14px; font-weight:500;}
.topnav a:hover{color:#fff;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:9px; text-decoration:none; font-weight:700; font-size:14px; border:none; cursor:pointer;}
.btn-accent{background:var(--accent); color:var(--accent-ink);}
.btn-accent:hover{background:var(--accent-dark);}
.btn-ghost{background:rgba(255,255,255,.1); color:#fff;}

/* Hero */
.hero{padding:84px 0 64px; text-align:center;}
.hero .eyebrow{display:inline-block; background:#e9edff; color:var(--accent-dark); font-weight:700; font-size:12.5px; padding:6px 14px; border-radius:999px; margin-bottom:18px;}
.hero h1{font-size:42px; line-height:1.12; max-width:820px; margin:0 auto 18px;}
.hero p{font-size:17px; color:var(--ink-soft); max-width:620px; margin:0 auto 30px; line-height:1.6;}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn-lg{padding:13px 26px; font-size:15px;}

/* Sections */
section{padding:64px 0;}
.section-head{max-width:620px; margin:0 auto 40px; text-align:center;}
.section-head .eyebrow{display:block; color:var(--accent); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;}
.section-head h2{font-size:30px; margin-bottom:12px;}
.section-head p{color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin:0;}

/* Features */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px;}
.feature-card .icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:16px;
}
.feature-card h3{font-size:16px; margin-bottom:8px;}
.feature-card p{margin:0; color:var(--ink-soft); font-size:13.8px; line-height:1.55;}

/* Roles */
.roles-band{background:var(--ink); color:#fff;}
.roles-band .section-head h2, .roles-band .section-head p{color:#fff;}
.roles-band .section-head p{color:#c7cbe0;}
.roles-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.role-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px;}
.role-card h3{font-size:14.5px; color:#fff; margin-bottom:6px;}
.role-card p{margin:0; color:#b9bfd8; font-size:13px; line-height:1.5;}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step-card{position:relative; padding-left:2px;}
.step-num{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:#e9edff; color:var(--accent-dark); font-weight:800; font-size:14px; margin-bottom:14px;}
.step-card h3{font-size:15.5px; margin-bottom:6px;}
.step-card p{margin:0; color:var(--ink-soft); font-size:13.8px; line-height:1.55;}

/* CTA */
.cta-band{background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; border-radius:20px; padding:48px 40px; text-align:center; margin:0 24px;}
.cta-band h2{font-size:26px; margin-bottom:12px;}
.cta-band p{color:#dfe4ff; font-size:15px; margin:0 0 24px;}

footer{padding:36px 24px; text-align:center; color:var(--ink-soft); font-size:13px; border-top:1px solid var(--line);}
footer a{color:var(--ink-soft);}
footer .fbrand{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;}
footer .fbrand img{height:18px;}

@media (max-width:860px){
  .features-grid, .roles-grid, .steps{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:32px;}
}
@media (max-width:600px){
  .features-grid, .roles-grid, .steps{grid-template-columns:1fr;}
  .topnav{display:none;}
  .hero{padding:56px 0 40px;}
  .cta-band{padding:36px 22px;}
}