:root{--ink:#0b1220; --glass:rgba(255,255,255,.55); --line:rgba(255,255,255,.65); --brand:#1d6fdc;}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:'Noto Sans JP',system-ui,-apple-system,'Hiragino Sans','Yu Gothic',sans-serif;color:var(--ink);background:linear-gradient(#e9f4ff,#f8fbff)}
/* Top nav */
header.topnav{position:sticky; top:0; background:linear-gradient(90deg,#ffffff, #eaf4ff); border-bottom:1px solid rgba(13,61,133,.18); z-index:50}
.topwrap{max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; justify-content:space-between}
.brandname{font-weight:900;color:#0c2f66}
.links a{margin:0 10px; color:#194f93; text-decoration:none; font-weight:700}

/* Mobile menu button */
.menu-toggle{display:none}
.menu-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid #8ec5ff; background:linear-gradient(#dff1ff,#cde8ff); color:#0b3b86; border-radius:10px; padding:8px 12px; font-weight:800}
.menu-panel{position:fixed; inset:60px 12px auto 12px; background:rgba(255,255,255,.96); border:1px solid rgba(13,61,133,.2); border-radius:14px; box-shadow:0 20px 50px rgba(13,61,133,.15); display:none; padding:10px}
.menu-panel a{display:block; padding:12px 10px; border-radius:10px; color:#0b3b86; text-decoration:none; font-weight:800}
.menu-panel a:hover{background:#eaf4ff}

/* hero rotating globe */
.hero{position:relative; min-height:74vh; display:grid; place-items:center; overflow:hidden}
.hero .sky{position:absolute; inset:0; background:linear-gradient(#dff1ff,#f7fbff)}
.hero .sphere{position:absolute; width:min(120vmin,900px); aspect-ratio:1/1; border-radius:50%; filter: drop-shadow(0 40px 120px rgba(29,111,220,.35));}
.hero .sphere::before,.hero .sphere::after{content:''; position:absolute; inset:0; border-radius:50%}
.hero .sphere::before{background:
  repeating-conic-gradient(from 0deg, rgba(40,110,200,.65) 0 2deg, rgba(40,110,200,.0) 2deg 12deg),
  radial-gradient(80% 80% at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,.1) 70%, rgba(255,255,255,0) 72%);
  animation: spin 40s linear infinite; opacity:.55}
.hero .sphere::after{background:
  repeating-radial-gradient(circle at 50% 50%, rgba(40,110,200,.45) 0 3px, rgba(40,110,200,0) 3px 26px);
  mix-blend-mode:multiply; animation: spin 80s linear infinite reverse; opacity:.35}
.hero .halo{position:absolute; width:min(140vmin,1000px); aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,.0) 70%); filter: blur(20px); opacity:.35}
.hero .veil{position:absolute; inset:0; background:
  radial-gradient(1000px 600px at 15% 10%, rgba(109,197,255,.35), transparent 60%),
  radial-gradient(1000px 600px at 85% 15%, rgba(29,111,220,.25), transparent 60%); pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .content{position:relative; z-index:2; text-align:center; padding:32px; backdrop-filter: blur(6px)}
.brand{letter-spacing:.28em; font-weight:800; color:#0c2f66; display:inline-block; border:1px solid #a9c7f5; border-radius:999px; padding:8px 12px; background:linear-gradient(#fff, #f2f7ff)}
h1{font-size:clamp(28px,4.6vw,56px); line-height:1.08; margin:.4em 0; background:linear-gradient(90deg, #003e9b, #16a2ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:#29507f; max-width:960px; margin:0 auto}
.cta{margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800; border:1px solid #8ec5ff; background:linear-gradient(#dff1ff,#cde8ff); color:#0b3b86}
.btn.ghost{background:transparent; color:#0b3b86}

.section{max-width:1200px; margin:42px auto; padding:0 16px}
.block{position:relative; padding:22px; border-radius:18px; background:var(--glass);
  border:1px solid var(--line); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(13,61,133,.10), inset 0 1px 0 rgba(255,255,255,.6)}
.block .en{position:absolute; right:16px; top:10px; font-weight:800; letter-spacing:.06em; font-size:12px; color:#0c2f66; opacity:.5}

h2{margin:0 0 10px; font-size:clamp(20px,2.8vw,28px); color:#0c2f66}
.lead{color:#2d527e}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{border-radius:16px; border:1px solid rgba(13,61,133,.25); background:rgba(255,255,255,.8); padding:16px; box-shadow: 0 10px 24px rgba(13,61,133,.12)}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.specs ul{margin:0; padding-left:18px}
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{padding:6px 10px; border-radius:999px; border:1px solid rgba(13,61,133,.3); background:rgba(255,255,255,.85); font-weight:700; color:#0b3b86; font-size:13px}
.timeline{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.step{padding:12px; text-align:center; border-radius:14px; border:1px dashed rgba(13,61,133,.35); background:rgba(255,255,255,.85)}

footer{padding:40px 12px 80px; text-align:center; color:#29507f}
form{display:grid; gap:10px}
input,textarea{border-radius:12px; border:1px solid rgba(13,61,133,.3); padding:10px; font-size:16px; background:rgba(255,255,255,.9)}
.send{padding:12px 16px; border-radius:12px; border:1px solid #8ec5ff; background:linear-gradient(#eaf6ff,#cfe9ff); color:#093679; font-weight:800}
.success{display:none; color:#0a6e2f; font-weight:800}

/* responsive */
@media (max-width:900px){
  .links{display:none}
  .menu-toggle{display:block}
  .grid2{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr 1fr}
}