@font-face{font-family:'Almarai';src:url('/fonts/almarai-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Almarai';src:url('/fonts/almarai-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{
  --purple:#6539AF;--purple2:#8b5cf6;--blue:#4f7cff;
  --bg:#070d1a;--bg2:#0b1322;--surface:#0e1728;
  --ink:#e8edf6;--dim:#8b98ad;--line:rgba(139,152,173,.16);
  --accent-ink:#8b5cf6;--glow:rgba(101,57,175,.45);
  --mark:url('/brand/b2p-mark-white.svg');
  --wa:#25d366;
}
html[data-theme="light"]{
  --bg:#f7f8fb;--bg2:#eef1f7;--surface:#fff;
  --ink:#152335;--dim:#5b6878;--line:rgba(21,35,53,.12);
  --accent-ink:#6539AF;--glow:rgba(101,57,175,.18);
  --mark:url('/brand/b2p-mark.svg');
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark light;-webkit-text-size-adjust:100%}
html[data-theme="light"]{color-scheme:light}
body{min-height:100svh;background:var(--bg);color:var(--ink);font-family:'Almarai','Poppins',system-ui,sans-serif;line-height:1.6;display:flex;flex-direction:column;overflow-x:hidden;
  background-image:radial-gradient(60% 45% at 50% 0%,var(--glow),transparent 70%);}
html[lang="en"] body{font-family:'Poppins','Almarai',system-ui,sans-serif}
a{color:inherit}
.px{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(12,1fr);gap:0;opacity:.9}
.px i{display:block;aspect-ratio:1;background:var(--purple2);opacity:0;animation:blink 7s ease-in-out infinite;animation-delay:var(--d);transform:scale(.18);border-radius:2px}
@keyframes blink{0%,100%{opacity:0}50%{opacity:var(--o)}}
@media (prefers-reduced-motion:reduce){.px i{animation:none;opacity:.08}}
header,main,footer{position:relative;z-index:1}
header{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) clamp(16px,4vw,40px) 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:30px;height:41px;background:var(--mark) center/contain no-repeat}
.brand b{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.02em;font-size:1.05rem}
.brand span{color:var(--dim);font-size:.8rem}
.ctl{display:flex;gap:8px}
.ctl a,.ctl button{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;height:38px;min-width:38px;padding:0 14px;font:inherit;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:border-color .2s,transform .2s}
.ctl a:hover,.ctl button:hover{border-color:var(--purple2);transform:translateY(-1px)}
.ctl .sun,.ctl .moon{width:18px;height:18px}
html[data-theme="light"] .moon,html:not([data-theme="light"]) .sun{display:none}
main{flex:1;display:grid;place-items:center;padding:32px clamp(16px,4vw,40px) 48px;text-align:center}
.hero{max-width:760px;width:100%}
.big-mark{width:clamp(72px,14vw,110px);height:calc(clamp(72px,14vw,110px)*1.365);margin:0 auto 22px;background:var(--mark) center/contain no-repeat;filter:drop-shadow(0 12px 40px var(--glow))}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface)}
.eyebrow i{width:8px;height:8px;background:var(--purple2);border-radius:2px;box-shadow:0 0 0 4px var(--glow)}
h1{margin:18px 0 8px;font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.15;font-weight:700;letter-spacing:-.01em}
h1 .soon{display:block;background:linear-gradient(90deg,var(--purple2),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--dim);font-size:clamp(1rem,2.2vw,1.2rem);max-width:600px;margin:0 auto 26px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 32px;max-width:640px}
.chips span{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 14px;font-size:.9rem;display:inline-flex;align-items:center;gap:8px}
.chips span::before{content:"";width:7px;height:7px;background:var(--purple);border-radius:2px}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:14px;text-decoration:none;font-weight:700;font-size:1rem;border:1px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;box-shadow:0 10px 30px var(--glow)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--purple2)}
.btn svg{width:20px;height:20px;flex:none}
.note{margin-top:22px;color:var(--dim);font-size:.85rem}
footer{border-top:1px solid var(--line);padding:18px clamp(16px,4vw,40px) calc(18px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;color:var(--dim);font-size:.82rem}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--accent-ink)}
@media (max-width:640px){.cta .btn{width:100%}.brand span{display:none}footer{justify-content:center;text-align:center}}