*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07101e;color:#eef5ff;font-family:Arial,sans-serif;line-height:1.6}a{color:#8ec5ff;text-decoration:none}.site-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 6%;background:rgba(7,16,30,.94);border-bottom:1px solid #17304e}.brand{font-size:1.7rem;font-weight:900;color:#fff}.site-header nav{display:flex;gap:18px;flex-wrap:wrap}.hero,.section{max-width:1120px;margin:auto;padding:64px 6%}.hero{padding-top:90px}.compact{padding-bottom:30px}.eyebrow{color:#6eafff;font-size:.78rem;font-weight:800;letter-spacing:.13em}.hero h1{font-size:clamp(2.3rem,6vw,5rem);line-height:1.02;margin:.2em 0}.lead{font-size:1.18rem;max-width:760px;color:#b9c9dc}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.search-panel,.device-detail{padding:24px;border:1px solid #1b3b61;border-radius:20px;background:#0b182a}.btn{display:inline-block;border:1px solid #315d8f;border-radius:12px;padding:11px 17px;background:#10243c;color:#fff;cursor:pointer}.btn-primary{background:#1673e6;border-color:#1673e6}.button-row,.search-row{display:flex;gap:10px;flex-wrap:wrap}.search-input{flex:1;min-width:220px;padding:14px;border-radius:12px;border:1px solid #315d8f;background:#07111f;color:white}.device-list{display:grid;gap:10px;margin-top:18px}.device-item{display:flex;justify-content:space-between;text-align:left;padding:16px;border-radius:14px;border:1px solid #24496f;background:#0e1d31;color:white;cursor:pointer}.device-item span,.device-item small{display:block;color:#9fb3ca}.status{display:inline-block;padding:5px 9px;border:1px solid #315d8f;border-radius:99px;font-size:.78rem}.hidden{display:none}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.facts div,.notice{padding:15px;border:1px solid #24496f;border-radius:13px;background:#0a1525}.facts span{display:block;color:#91a6bd;font-size:.8rem}.feature-row{display:grid;grid-template-columns:1fr .7fr 2fr;gap:12px;padding:13px 0;border-bottom:1px solid #17304e}.timeline{display:grid;gap:12px}.timeline-item{padding:18px;border-left:2px solid #398cf1;background:#0b182a}.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #1b3b61;border-radius:20px;background:#0b182a}footer{text-align:center;padding:35px;color:#8196ad}.section h2{font-size:2rem}.warning{color:#ffd18a}@media(max-width:800px){.cards,.facts,.feature-row{grid-template-columns:1fr}.site-header{align-items:flex-start}.cta{display:block}}
.hero-logo{width:min(340px,72vw);margin:0 auto 28px;filter:drop-shadow(0 22px 42px rgba(42,145,255,.20))}
.community-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.topic-card{padding:20px;border:1px solid #1b3b61;border-radius:16px;background:#0b182a}
.topic-meta{font-size:.82rem;color:#8196ad}
.social-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.cta-check{margin-top:24px;padding:22px;border:1px solid #2c67a8;border-radius:20px;background:linear-gradient(180deg,rgba(40,121,220,.12),rgba(15,45,82,.08))}
@media(max-width:800px){.community-grid{grid-template-columns:1fr}}

.hero-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 auto 30px;
  text-align:center;
}
.hero-logo{
  display:block;
  width:min(360px,74vw);
  height:auto;
  margin:0 auto;
}
.download-box{
  margin:26px 0;
  padding:24px;
  border:1px solid #2c67a8;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(42,145,255,.14),rgba(15,45,82,.08));
}
.download-box .btn-primary{
  font-size:1.05rem;
  padding:14px 20px;
}
.steps-simple{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.steps-simple div{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid #17304e;
}

/* V5.3 */
.logo-stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:220px;margin:0 auto 28px;overflow:hidden}
.logo-stage .hero-logo{opacity:0;transform:scale(.94);animation:mjLogoReveal .65s ease-out 1.25s forwards}
.logo-letter{position:absolute;font-weight:800;font-size:clamp(72px,13vw,142px);line-height:1;color:#dcecff;text-shadow:0 0 22px rgba(66,153,255,.48);opacity:0}
.logo-m{transform:translateX(-48px);animation:mjM .48s ease-out .08s forwards}
.logo-j{transform:translateX(48px);animation:mjJ .48s ease-out .48s forwards}
.logo-pencil{position:absolute;width:min(300px,62vw);height:4px;border-radius:999px;background:linear-gradient(90deg,#7bbcff,#e7f4ff);transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(82,170,255,.8);animation:mjLine .52s ease-out .86s forwards}
@keyframes mjM{to{opacity:1;transform:translateX(-38px)}}
@keyframes mjJ{to{opacity:1;transform:translateX(38px)}}
@keyframes mjLine{to{transform:scaleX(1)}}
@keyframes mjLogoReveal{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.logo-letter,.logo-pencil{display:none}.logo-stage .hero-logo{opacity:1;transform:none;animation:none}}
.device-choice{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.device-chip{padding:10px 15px;border:1px solid #2c67a8;border-radius:999px;background:rgba(42,145,255,.08)}
.study-box{padding:22px;border:1px solid #2c67a8;border-radius:18px;background:rgba(42,145,255,.08);margin-top:20px}
.study-data{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;border-radius:12px;background:rgba(0,0,0,.18);font-size:.9rem}

/* ===== V5.4 ===== */
.logo-stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:230px;
  margin:0 auto 30px;
  overflow:hidden;
}
.logo-stage .hero-logo{
  opacity:0;
  transform:scale(.985);
  animation:v54FinalLogo .28s ease-out 1.48s forwards;
  z-index:3;
}
.v54-letter{
  position:absolute;
  z-index:2;
  font-weight:900;
  font-size:clamp(86px,14vw,150px);
  line-height:1;
  color:#e5f2ff;
  text-shadow:
    0 0 18px rgba(85,170,255,.38),
    0 12px 26px rgba(0,0,0,.28);
  will-change:transform,opacity;
}
.v54-m{
  left:50%;
  transform:translateX(-680px) skewX(-12deg);
  animation:v54SkidM .62s cubic-bezier(.11,.78,.26,1) .05s forwards;
}
.v54-j{
  left:50%;
  transform:translateX(680px) skewX(12deg);
  animation:v54SkidJ .62s cubic-bezier(.11,.78,.26,1) .48s forwards;
}
.v54-skid{
  position:absolute;
  z-index:1;
  top:58%;
  left:50%;
  width:min(330px,66vw);
  height:3px;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(116,190,255,.78),transparent);
  filter:blur(.3px);
}
.v54-skid.left{transform:translateX(-50%) rotate(-2deg);animation:v54SkidFlash .28s ease-out .28s}
.v54-skid.right{transform:translateX(-50%) rotate(2deg);animation:v54SkidFlash .28s ease-out .72s}
.v54-pencil{
  position:absolute;
  z-index:2;
  top:69%;
  left:50%;
  width:min(330px,66vw);
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#78baff,#f1f8ff 75%,#8bc7ff);
  box-shadow:0 0 16px rgba(91,177,255,.85);
  transform:translateX(-50%) scaleX(0);
  transform-origin:left center;
  animation:v54Pencil .47s cubic-bezier(.18,.75,.25,1) 1.02s forwards;
}
.v54-pencil-tip{
  position:absolute;
  z-index:3;
  top:calc(69% - 4px);
  left:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f4fbff;
  box-shadow:0 0 18px rgba(105,190,255,.95);
  opacity:0;
  transform:translateX(-165px);
  animation:v54PencilTip .47s cubic-bezier(.18,.75,.25,1) 1.02s forwards;
}
@keyframes v54SkidM{
  0%{opacity:0;transform:translateX(-680px) skewX(-12deg)}
  58%{opacity:1;transform:translateX(-20px) skewX(-5deg)}
  76%{transform:translateX(-58px) skewX(3deg)}
  88%{transform:translateX(-34px) skewX(-1deg)}
  100%{opacity:1;transform:translateX(-42px) skewX(0)}
}
@keyframes v54SkidJ{
  0%{opacity:0;transform:translateX(680px) skewX(12deg)}
  58%{opacity:1;transform:translateX(-6px) skewX(5deg)}
  76%{transform:translateX(50px) skewX(-3deg)}
  88%{transform:translateX(30px) skewX(1deg)}
  100%{opacity:1;transform:translateX(38px) skewX(0)}
}
@keyframes v54SkidFlash{
  0%{opacity:0;transform:translateX(-50%) scaleX(.2)}
  30%{opacity:.75}
  100%{opacity:0;transform:translateX(-50%) scaleX(1)}
}
@keyframes v54Pencil{
  0%{transform:translateX(-50%) scaleX(0)}
  100%{transform:translateX(-50%) scaleX(1)}
}
@keyframes v54PencilTip{
  0%{opacity:1;transform:translateX(-165px)}
  92%{opacity:1}
  100%{opacity:0;transform:translateX(150px)}
}
@keyframes v54FinalLogo{
  to{opacity:1;transform:scale(1)}
}
.logo-stage .v54-letter,
.logo-stage .v54-pencil,
.logo-stage .v54-pencil-tip,
.logo-stage .v54-skid{
  animation-fill-mode:forwards;
}
@media (prefers-reduced-motion:reduce){
  .v54-letter,.v54-pencil,.v54-pencil-tip,.v54-skid{display:none!important}
  .logo-stage .hero-logo{opacity:1;transform:none;animation:none}
}
.mj-flow{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.mj-flow-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  padding:16px;
  border:1px solid #1d426a;
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.mj-flow-num{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  background:#1673e6;
  font-weight:800;
}
.mj-badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #315d8f;
  color:#bcd8f7;
  font-size:.78rem;
}
.mj-current{
  border-color:#2b6eb7;
  background:rgba(22,115,230,.08);
}
.mj-future{
  opacity:.78;
}
.mj-warning{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #5b4a2a;
  border-radius:12px;
  background:rgba(150,105,35,.08);
}