:root{--primary:#13547a;--primary-dark:#0b344c;--accent:#f5a623;--bg:#f5f7fa;--text-main:#111827;--text-soft:#4b5563;--radius-lg:16px;--shadow-soft:0 18px 35px rgba(15,23,42,.18)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text-main);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.x1{max-width:1100px;margin:0 auto;padding:1.5rem}
header{position:relative;color:#f9fafb;padding:1rem 0 3rem;overflow:hidden;background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(8,47,73,.94)),url("https://bobibosbbn.com/img/bg-bbm-texture.jpg") center/cover no-repeat}
header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 0,rgba(255,255,255,.09),transparent 55%),radial-gradient(circle at 90% 10%,rgba(255,255,255,.07),transparent 55%);mix-blend-mode:screen;opacity:.9;pointer-events:none}
.x2{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.75rem}
.x3{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.x4{display:flex;align-items:center;gap:.75rem}
.x5{width:380px;height:95px;display:block}
.x6{display:flex;flex-direction:column}
.x6 span:first-child{font-weight:700;letter-spacing:.03em;font-size:.95rem;text-transform:uppercase}
.x6 span:last-child{font-size:.8rem;opacity:.85}
nav ul{list-style:none;display:flex;gap:1rem;font-size:.9rem}
nav a{opacity:.9}
nav a:hover{opacity:1}
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1.5fr);gap:2rem;align-items:center;margin-top:.5rem}
.x7 h1{font-size:2.2rem;line-height:1.15;margin-bottom:.8rem}
.x7 h1 .highlight{color:#fbbf24}
.x8{font-size:.98rem;opacity:.92;margin-bottom:1.4rem;max-width:520px}
.x9{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.x10{border-radius:999px;border:1px solid rgba(248,250,252,.28);padding:.25rem .75rem;font-size:.78rem;display:inline-flex;align-items:center;gap:.35rem;background:rgba(15,23,42,.7);backdrop-filter:blur(10px)}
.x11{width:7px;height:7px;border-radius:50%;background:#22c55e}
.x12{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.x13{background:linear-gradient(to right,#fbbf24,#f97316);padding:.75rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:0 12px 30px rgba(248,181,55,.55);border:none;cursor:pointer;color:#111827;display:inline-flex;align-items:center;gap:.4rem}
.x14{border-radius:999px;border:1px solid rgba(248,250,252,.45);padding:.65rem 1.1rem;font-size:.85rem;cursor:pointer;background:rgba(15,23,42,.55);color:#e5e7eb;backdrop-filter:blur(10px)}
.x15{font-size:.78rem;opacity:.78;margin-top:.75rem;max-width:480px}
.x16{position:relative;display:flex;justify-content:center;align-items:center;min-height:260px}
.x17{position:relative;background:rgba(15,23,42,.35);border-radius:var(--radius-lg);padding:1.2rem 1.2rem 1.4rem;box-shadow:0 18px 40px rgba(15,23,42,.45);border:1px solid rgba(148,163,184,.7);backdrop-filter:blur(18px);width:340px;display:flex;flex-direction:column;gap:.6rem}
.x18{font-size:.9rem;font-weight:600;margin-bottom:.2rem;display:flex;justify-content:space-between;align-items:center}
.x19{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;font-size:.78rem;margin-bottom:.2rem}
.x20{padding:.45rem .55rem;border-radius:.55rem;background:rgba(15,23,42,.95);border:1px solid rgba(148,163,184,.5)}
.x21{font-size:.7rem;opacity:.8;margin-bottom:.1rem}
.x22{font-weight:600;margin-bottom:.05rem;font-size:.8rem}
.x23{font-size:.68rem;opacity:.85}
.x24{position:absolute;bottom:-155px;right:-54px;display:flex;justify-content:center;align-items:center;pointer-events:none}
.x25{width:230px;height:auto}
main{margin-top:-1.4rem;position:relative;z-index:2}
.x26{position:relative;border-radius:24px;padding:1.9rem 1.7rem;margin-bottom:1.8rem;background:radial-gradient(circle at 10% 0,rgba(59,130,246,.06),transparent 60%),radial-gradient(circle at 90% 100%,rgba(16,185,129,.08),transparent 55%),#fff;box-shadow:0 18px 40px rgba(15,23,42,.12);border:1px solid rgba(226,232,240,.9);overflow:hidden}
.x26:before{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 0 0,rgba(15,23,42,.03),transparent 50%),radial-gradient(circle at 100% 100%,rgba(15,23,42,.04),transparent 50%);opacity:.8;pointer-events:none}
.x27{font-size:1.3rem;margin-bottom:.3rem;position:relative;z-index:1}
.x28{font-size:.96rem;color:var(--text-soft);margin-bottom:1.2rem;position:relative;z-index:1}
.x29{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;margin-bottom:.3rem;display:inline-flex;align-items:center;gap:.4rem}
.x29:before{content:"";width:26px;height:2px;border-radius:999px;background:linear-gradient(to right,#22c55e,#0ea5e9)}
.x30{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr);gap:1.7rem;align-items:flex-start;position:relative;z-index:1}
.x31{border-radius:18px;background:rgba(248,250,252,.9);border:1px solid rgba(226,232,240,.9);padding:1rem 1rem;box-shadow:0 12px 28px rgba(15,23,42,.06)}
.x32{list-style:disc;padding-left:1.3rem;font-size:.95rem;color:var(--text-soft)}
.x33{display:flex;flex-wrap:wrap;gap:.25rem}
.x34{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;padding:.25rem .7rem;border-radius:999px;background:#eff6ff;color:#1d4ed8;margin-right:.35rem;margin-bottom:.35rem}
.x35{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;padding:.2rem .7rem;border-radius:999px;background:#eff6ff;color:#1d4ed8;margin-right:.35rem;margin-bottom:.35rem}
.x36{width:6px;height:6px;border-radius:50%;background:#22c55e}
.x37{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1rem;position:relative;z-index:1}
.x38{border-radius:18px;border:1px solid #e5e7eb;padding:.9rem .9rem;font-size:.86rem;background:radial-gradient(circle at 0 0,rgba(59,130,246,.08),transparent 55%),#f9fafb}
.x38 h3{font-size:.92rem;margin-bottom:.3rem}
.x39{font-size:.7rem;padding:.1rem .4rem;border-radius:999px;background:#e0f2fe;color:#0369a1;margin-left:.3rem}
.x40{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.x41{border-radius:18px;border:1px solid #e5e7eb;padding:.9rem .95rem;font-size:.86rem;background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(16,185,129,.05)),#fff}
.x42{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:#6b7280;margin-bottom:.2rem}
.x43{font-weight:600;margin-bottom:.25rem}
.x44{font-size:.75rem;color:#9ca3af}
.x45{border-radius:18px;border:1px solid #e5e7eb;padding:.95rem 1rem;margin-bottom:.7rem;background:#f9fafb}
.x46{font-weight:600;margin-bottom:.25rem;font-size:.94rem}
.x47{font-size:.88rem;color:#4b5563}
footer{padding:1.5rem 0 1.75rem;font-size:.8rem;color:#6b7280}
.x48{border-top:1px solid #e5e7eb;padding-top:1.1rem;display:flex;flex-direction:column;gap:.75rem}
.x49{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.x50{display:flex;flex-wrap:wrap;gap:.7rem}
.x50 a{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
@media (max-width:900px){
.x1{padding:1.5rem 1.2rem}
.hero{grid-template-columns:minmax(0,1fr)}
.x16{order:-1;margin-bottom:.5rem}
.x17{width:100%;max-width:360px;margin-top:.85rem;margin-left:auto;margin-right:auto}
.x30{grid-template-columns:minmax(0,1fr);gap:1.4rem}
.x31{width:100%;margin-top:.5rem}
.x37,.x40{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.x1{padding:1.3rem 1rem}
.x3{flex-direction:column;align-items:flex-start}
nav ul{padding-left:0;flex-wrap:wrap}
.x7 h1{font-size:1.7rem}
.x8{font-size:.9rem}
.x13,.x14{width:100%;justify-content:center}
.x15{font-size:.78rem}
.x24{position:static;margin-top:.35rem;display:flex;justify-content:flex-end}
.x25{width:230px;height:auto}
.x26{padding:1.5rem 1.2rem}
.x37,.x40{grid-template-columns:minmax(0,1fr)}
.x49{flex-direction:column;align-items:flex-start}
}
.faq-question-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;cursor:pointer}
.x45 .x47{margin-top:.45rem;display:none}
.x45.open .x47{display:block}
.faq-icon{font-size:.8rem;transition:transform .2s ease,opacity .2s ease;opacity:.7}
.x45.open .faq-icon{transform:rotate(90deg);opacity:1}