.ob-roadmap-page{background:#0a0a1a;color:#e5e7eb;min-height:100vh;overflow-x:hidden}
.ob-roadmap-page-container{max-width:1180px;margin:0 auto;padding:0 40px;position:relative}
.ob-roadmap-hero{position:relative;overflow:hidden;padding:96px 0 74px;text-align:center;background:linear-gradient(180deg,#0a0a1a 0%,#1a1a2e 100%);border-bottom:1px solid rgba(255,255,255,.06)}
.ob-roadmap-hero::before{content:'';position:absolute;inset:-25% -20% auto;height:560px;background:radial-gradient(circle at 28% 25%,rgba(16,185,129,.22),transparent 34%),radial-gradient(circle at 72% 24%,rgba(168,85,247,.28),transparent 36%);filter:blur(10px);pointer-events:none}
.ob-roadmap-hero .ob-roadmap-page-container{z-index:1}
.ob-roadmap-hero h1{max-width:980px;margin:18px auto 22px;color:#fff;font-size:clamp(2.25rem,5.2vw,4.75rem);line-height:1.02;font-weight:800;letter-spacing:-.045em}
.ob-roadmap-hero-sub{max-width:780px;margin:0 auto;color:#9ca3af;font-size:1.15rem;line-height:1.75}
.ob-roadmap-hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.ob-roadmap-timeline{background:#0f1022;padding:34px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.ob-roadmap-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ob-roadmap-milestone{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;position:relative;overflow:hidden}
.ob-roadmap-milestone::before{content:'';position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 999px 999px;background:#818cf8}
.ob-roadmap-milestone.is-live::before{background:#10b981}.ob-roadmap-milestone.is-next::before{background:#f59e0b}.ob-roadmap-milestone.is-later::before{background:#a855f7}
.ob-roadmap-milestone strong{display:block;color:#fff;font-size:1.2rem;margin:14px 0 8px;font-weight:800;letter-spacing:-.02em}
.ob-roadmap-milestone p{margin:0;color:#9ca3af;font-size:.94rem;line-height:1.65}
.ob-roadmap-page-main{max-width:1220px;padding-top:86px;padding-bottom:86px}
.ob-roadmap-page-main .ob-roadmap-grid{align-items:stretch;margin-bottom:34px}
.ob-roadmap-page-main .ob-roadmap-card{min-height:100%;border-radius:22px}
.ob-roadmap-page-main .ob-roadmap-card-live{background:linear-gradient(180deg,rgba(16,185,129,.08),rgba(255,255,255,.04));border-color:rgba(16,185,129,.34)}
.ob-roadmap-page-main .ob-roadmap-card-soon{background:linear-gradient(180deg,rgba(99,102,241,.08),rgba(255,255,255,.04));border-color:rgba(99,102,241,.25)}
.ob-roadmap-page-main .ob-woo-card{max-width:100%;border-radius:24px;background:linear-gradient(180deg,rgba(16,185,129,.08),rgba(255,255,255,.04));box-shadow:0 30px 90px rgba(0,0,0,.28)}
.ob-roadmap-principles{padding:82px 0;background:#0f1022;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.ob-roadmap-principles h2{color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:14px auto 38px;max-width:760px;font-weight:800;letter-spacing:-.035em}
.ob-roadmap-principle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;text-align:left}
.ob-roadmap-principle-grid div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;transition:border-color .25s,transform .25s}
.ob-roadmap-principle-grid div:hover{border-color:rgba(129,140,248,.35);transform:translateY(-3px)}
.ob-roadmap-principle-grid strong{display:block;color:#fff;font-size:1rem;margin-bottom:9px;font-weight:800}
.ob-roadmap-principle-grid span{display:block;color:#9ca3af;font-size:.9rem;line-height:1.6}
@media (max-width:900px){.ob-roadmap-milestones,.ob-roadmap-principle-grid{grid-template-columns:1fr}.ob-roadmap-page-container{padding:0 20px}.ob-roadmap-hero{padding:70px 0 54px}.ob-roadmap-page-main{padding:64px 20px}.ob-roadmap-hero-actions .ob-btn{width:100%;max-width:340px}.ob-roadmap-principles{padding:64px 0}}