:root{--bg:#050713;--panel:rgba(11,16,34,.78);--text:#eef3ff;--muted:#aab5d3;--line:rgba(125,153,255,.18);--cyan:#55e7ff;--purple:#a875ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050713;color:var(--text);font-family:Inter,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.85;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 15% 15%,rgba(53,110,255,.22),transparent 30%),radial-gradient(circle at 85% 20%,rgba(157,69,255,.2),transparent 28%),radial-gradient(circle at 55% 80%,rgba(0,221,255,.1),transparent 30%),#050713}
body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.2;background-image:linear-gradient(rgba(100,130,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,130,255,.12) 1px,transparent 1px);background-size:56px 56px}
a{color:inherit;text-decoration:none}
.container{
    justify-content:center;
    width:min(1160px,calc(100% - 40px));
    margin:auto
}
av{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,7,19,.8);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.navin{
    height:72px;display:flex;align-items:center;justify-content:space-betwee
    n}
    .logo{font-weight:900;letter-spacing:.08em}.logo span{color:var(--cyan)}.navlinks{display:flex;gap:24px;font-size:13px;color:#cbd5f2}.navlinks a:hover{color:var(--cyan)}
.hero{min-height:760px;padding:145px 0 90px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}.kicker,.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--cyan);font-weight:900}
h1{font-size:clamp(54px,8vw,108px);line-height:.95;margin:18px 0 24px;letter-spacing:-.055em}h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#7d9bff,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;color:#c1cbe4;max-width:660px}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{padding:12px 18px;border:1px solid rgba(92,231,255,.35);border-radius:999px;background:rgba(28,44,85,.45);font-weight:800;font-size:13px}.btn.primary{background:linear-gradient(90deg,#167eaa,#6d54c7);border:0}
.visual{height:440px;position:relative;display:grid;place-items:center}.core{width:185px;height:185px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(80,235,255,.95),rgba(67,106,255,.5) 22%,rgba(134,72,255,.22) 50%,transparent 70%);box-shadow:0 0 45px rgba(80,220,255,.38),0 0 120px rgba(135,82,255,.28);position:relative}.core:before,.core:after{content:"";position:absolute;border:1px solid rgba(95,230,255,.38);border-radius:50%;inset:-35px;transform:rotate(22deg)}.core:after{inset:-75px;transform:rotate(-28deg);border-color:rgba(170,105,255,.3)}.core b{font-size:30px;letter-spacing:.1em}.core small{display:block;color:#c7eaff;letter-spacing:.15em}.orbit{position:absolute;width:360px;height:360px;border:1px solid rgba(93,142,255,.18);border-radius:50%;animation:spin 18s linear infinite}.orbit.o2{width:500px;height:210px;transform:rotate(-25deg)}.orbit.o3{width:240px;height:470px;transform:rotate(55deg)}@keyframes spin{to{transform:rotate(385deg)}}
section{padding:105px 0}.title{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:12px 0 22px}
.sub{
    display:flex;
    justify-content:center;
    color:var(--muted);
    max-width:760px;
    gap:10px;
    margin:0 auto
}
.panel{background:linear-gradient(145deg,rgba(15,22,48,.84),rgba(7,11,27,.72));border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 70px rgba(0,0,0,.25)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(10,15,33,.66);transition:.25s}.card:hover{transform:translateY(-4px);border-color:rgba(85,231,255,.38)}.card h3{margin:0 0 10px;font-size:20px}.num{color:var(--cyan);font-size:12px;letter-spacing:.2em;font-weight:900}.icon{font-size:28px;margin-bottom:12px}
.timeline{display:grid;gap:14px;margin-top:28px}.step{display:grid;grid-template-columns:70px 1fr;gap:20px}.stepno{width:54px;height:54px;border:1px solid rgba(85,231,255,.3);border-radius:16px;display:grid;place-items:center;color:var(--cyan);font-weight:900}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin-top:30px}.flowbox{min-height:150px;display:flex;flex-direction:column;justify-content:center}.arrow{color:var(--cyan);font-size:25px}.code{background:#03050c;border:1px solid rgba(110,140,255,.2);border-radius:16px;overflow:hidden}.codebar{padding:10px 15px;border-bottom:1px solid rgba(110,140,255,.15);color:#7e8aaa;font-size:11px}.code pre{margin:0;padding:22px;overflow:auto;color:#c9d6ff;font:13px/1.7 Consolas,monospace;white-space:pre-wrap}.resultbox{min-height:330px;display:grid;place-items:center;text-align:center;border:1px dashed rgba(85,231,255,.35);border-radius:20px;background:radial-gradient(circle at center,rgba(64,116,255,.1),transparent 55%)}
.member{min-height:190px}.member .initial{font-size:34px;font-weight:900;color:var(--cyan);letter-spacing:.08em}.ref a{text-decoration:underline;text-decoration-color:rgba(85,231,255,.5);text-underline-offset:4px}footer{padding:60px 0 90px;border-top:1px solid var(--line);color:#7f8aa8;font-size:12px}
@media(max-width:800px){.navlinks{display:none}.hero{grid-template-columns:1fr;padding-top:125px}.visual{height:350px}.grid2,.grid3,.flow{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}.container{width:min(100% - 28px,1160px)}section{padding:75px 0}h1{font-size:60px}}

/* Technology diagrams */
.diagram-panel{margin-top:20px}.diagram-text{font-size:20px;font-weight:800;letter-spacing:.04em;margin-bottom:0}