/* ============================================================
   WizBrand About page — themed + creative (external)
   ============================================================ */
.ab { font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: #41506b; }
.ab * { box-sizing: border-box; }
.ab-container { max-width: 1140px; margin: 0 auto; padding: 0 1.4rem; }

/* Hero */
.ab-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #0b2350 0%, #1d4ed8 60%, #3b7dff 100%); color: #fff; padding: 3.4rem 1.4rem 4rem; text-align: center; }
.ab-hero::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; top: -190px; right: -120px; background: radial-gradient(circle, rgba(59, 130, 246, .5), transparent 70%); animation: abFloat 9s ease-in-out infinite; }
.ab-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); }
.ab-hero .inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.ab-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cfe0ff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); padding: .42rem .9rem; border-radius: 999px; }
.ab-hero h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; color: #fff; font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.02em; margin: 1rem 0 .9rem; }
.ab-hero p { color: #dbe6f7; font-size: 1.12rem; max-width: 660px; margin: 0 auto; }
@keyframes abFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(24px) scale(1.05); } }

/* Sections */
.ab-section { padding: 3.6rem 0; }
.ab-section.bg { background: #f7f9fd; }
.ab-head { max-width: 720px; margin: 0 auto 2.4rem; text-align: center; }
.ab-head .ab-eyebrow { color: #1d4ed8; background: #ecf2ff; border-color: #d8e4ff; }
.ab-head h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: #0f1b34; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: .7rem 0 .6rem; letter-spacing: -.02em; }
.ab-head p { color: #6b7894; font-size: 1.04rem; }
.ab-lead { font-size: 1.15rem; color: #41506b; line-height: 1.85; max-width: 880px; margin: 0 auto; text-align: center; }
.ab-lead strong { color: #1d4ed8; }

/* Stats */
.ab-stats { background: #0b1f44; color: #fff; }
.ab-stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; padding: 2.6rem 0; }
.ab-stats .num { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.5rem); background: linear-gradient(90deg, #6fa3ef, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab-stats .lbl { color: #a9bbdc; font-size: .92rem; margin-top: .2rem; }
@media (max-width: 640px) { .ab-stats .grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }

/* Card grids */
.ab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.ab-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .ab-grid, .ab-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ab-grid, .ab-grid.cols-3 { grid-template-columns: 1fr; } }
.ab-card { background: #fff; border: 1px solid #e6ecf5; border-radius: 16px; padding: 1.6rem 1.4rem; box-shadow: 0 2px 8px rgba(15, 27, 52, .06); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ab-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 27, 52, .12); border-color: #cdddfb; }
.ab-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; margin-bottom: .9rem; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 10px 20px rgba(29, 78, 216, .26); }
.ab-card.t2 .ic { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.ab-card.t3 .ic { background: linear-gradient(135deg, #34d399, #2f9e44); }
.ab-card.t4 .ic { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ab-card.t5 .ic { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.ab-card.t6 .ic { background: linear-gradient(135deg, #f472b6, #be185d); }
.ab-card h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: #0f1b34; margin: 0 0 .45rem; }
.ab-card p { color: #6b7894; font-size: .94rem; line-height: 1.6; margin: 0; }

/* CTA */
.ab-cta-wrap { padding: 4rem 0; }
.ab-cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0b2350, #1d4ed8); color: #fff; text-align: center; padding: 3.2rem 1.5rem; border-radius: 24px; max-width: 1040px; margin: 0 auto; box-shadow: 0 30px 70px rgba(15, 27, 52, .16); }
.ab-cta::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; top: -150px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(139, 92, 246, .4), transparent 70%); }
.ab-cta h2 { position: relative; color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0 0 .8rem; }
.ab-cta p { position: relative; color: #d7e3fb; max-width: 600px; margin: 0 auto 1.6rem; line-height: 1.7; }
.ab-btn { position: relative; display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: #1d4ed8; font-weight: 700; padding: .9rem 1.8rem; border-radius: 11px; text-decoration: none; box-shadow: 0 14px 34px rgba(15, 27, 52, .18); transition: transform .18s; }
.ab-btn:hover { transform: translateY(-2px); color: #1741b6; }