:root {
  --bg:#f5f8fd;
  --bg-soft:#eef4fb;
  --card:#ffffff;
  --line:#d8e4f4;
  --text:#15304d;
  --muted:#5d738d;
  --primary:#1764d1;
  --primary-dark:#104da4;
  --dark:#0e2540;
  --success:#eaf6ee;
  --shadow:0 20px 60px rgba(13,42,76,.10);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f8fbff 0%,#f5f8fd 100%)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(248,251,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(216,228,244,.8)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.1rem}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#3f8cff);color:#fff;font-size:1rem;box-shadow:var(--shadow)}
.brand-accent{color:var(--primary)}
.main-nav{display:flex;gap:18px;flex-wrap:wrap}
.main-nav a{color:var(--muted);font-weight:600}
.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:16px;font-weight:700;border:1px solid transparent;transition:.2s ease}
.header-cta,.btn-primary{background:linear-gradient(135deg,var(--primary),#448fff);color:#fff;box-shadow:0 15px 35px rgba(23,100,209,.2)}
.btn-secondary{background:#fff;border-color:var(--line);color:var(--text)}
.btn:hover,.header-cta:hover{transform:translateY(-1px)}
.lang-bar{background:#f1f6fd;border-top:1px solid rgba(216,228,244,.85)}
.lang-links{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0;font-size:.95rem;color:var(--muted)}
.lang-links strong{color:var(--text)}
.lang-links a,.lang-links .lang-current{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.lang-links .lang-current{background:var(--primary);color:#fff;border-color:var(--primary)}
.hero{padding:64px 0}
.hero-grid,.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.hero-copy h1,.section-head h2,.story-copy h2,.detail-copy h1{font-size:clamp(2rem,4vw,4rem);line-height:1.05;letter-spacing:-.04em;margin:14px 0 18px}
.hero-copy h1 em{color:var(--primary);font-style:normal}
.lead{font-size:1.08rem;line-height:1.8;color:var(--muted)}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:#eaf2ff;color:var(--primary);padding:8px 14px;font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.hero-points{display:flex;gap:14px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.hero-points li{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--muted)}
.hero-media img,.image-story img{border-radius:28px;box-shadow:var(--shadow);object-fit:cover;width:100%;height:100%}
.section{padding:48px 0}
.section-head{display:grid;gap:12px;margin-bottom:28px}
.section-head p{margin:0;color:var(--muted);line-height:1.8;max-width:820px}
.section-head.narrow{max-width:950px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-box,.step-card,.app-card,.download-band,.faq-grid details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.info-box,.step-card{padding:26px}
.info-box h3,.step-card h3{margin:0 0 10px;font-size:1.1rem}
.info-box p,.step-card p,.mini-note,.detail-note{margin:0;color:var(--muted);line-height:1.7}
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.app-card{overflow:hidden}
.app-card-top{min-height:230px;display:grid;place-items:center;padding:30px}
.jwb-top{background:radial-gradient(circle at top right,#6ea9ff 0%,#2870d8 40%,#123865 100%)}
.bp-top{background:linear-gradient(135deg,#081425,#0f2441 55%,#173c6e)}
.app-logo.jwb-logo{width:min(88%,420px);aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.18))}
.app-logo.bp-logo{width:min(90%,430px);object-fit:contain}
.app-card-body{padding:24px}
.app-card-body h3{font-size:1.55rem;margin:12px 0}
.app-card-body p{color:var(--muted);line-height:1.8;margin:0 0 14px}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-weight:600}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--success);color:#226d40;font-size:.85rem;font-weight:800}
.card-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.image-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.image-story-grid.reverse{grid-template-columns:1fr 1fr}
.story-copy p{color:var(--muted);line-height:1.8}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card span{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:14px;background:#eaf2ff;color:var(--primary);font-weight:800;margin-bottom:16px}
.install-list{margin:0;padding-left:24px;display:grid;gap:16px;font-size:1.03rem;line-height:1.8;color:var(--muted)}
.faq-grid{display:grid;gap:14px}
.faq-grid details{padding:0 20px}
.faq-grid summary{cursor:pointer;padding:20px 0;font-weight:800;list-style:none}
.faq-grid p{margin:0 0 20px;color:var(--muted);line-height:1.8}
.site-footer{margin-top:30px;background:#0f2138;color:#deebfb;padding:36px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr;gap:30px;align-items:start}
.brand-footer{color:#fff}
.site-footer p{color:#b9c9df;line-height:1.8}
.footer-links{display:grid;gap:10px}
.footer-copy{padding-top:14px;border-top:1px solid rgba(255,255,255,.1);margin-top:16px;color:#9db2cc}
.breadcrumb{margin:10px 0 8px;color:var(--muted);font-size:.95rem}
.detail-side{display:flex;justify-content:center}
.detail-logo{max-width:420px;width:100%;height:auto}
.bp-logo-inline{max-width:420px}
.detail-highlight{margin-top:24px;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.detail-highlight p{margin-top:8px}
.download-band-wrap{padding-top:10px}
.download-band{padding:28px;display:flex;justify-content:space-between;gap:18px;align-items:center}
.download-band h2{margin:0 0 8px;font-size:1.8rem}
.download-band p{margin:0;color:var(--muted);line-height:1.7}
.root-chooser{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#f8fbff,#eef5fe)}
.root-card{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:38px;max-width:820px;width:min(92vw,820px)}
.root-card h1{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 14px;letter-spacing:-.03em}
.root-card p{color:var(--muted);line-height:1.8}
.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.lang-grid a{padding:16px 18px;border-radius:18px;background:var(--bg-soft);border:1px solid var(--line);font-weight:700;text-align:center}
@media (max-width: 980px){
 .hero-grid,.detail-grid,.image-story-grid,.footer-grid,.grid-3,.steps-grid,.app-grid{grid-template-columns:1fr}
 .main-nav{display:none}
 .download-band{flex-direction:column;align-items:flex-start}
 .lang-grid{grid-template-columns:repeat(2,1fr)}
 .app-card-top{min-height:200px}
}
@media (max-width: 640px){
 .container{width:min(100% - 24px,1180px)}
 .hero,.section{padding:34px 0}
 .header-inner{padding:12px 0}
 .brand{font-size:1rem}
 .header-cta{display:none}
 .lang-grid{grid-template-columns:1fr 1fr}
 .root-card{padding:24px}
 .hero-points{flex-direction:column;align-items:flex-start}
}

.quick-callout{margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);line-height:1.7}.quick-callout strong{color:var(--primary)}