:root{--ink:#07192f;--navy:#061526;--blue:#195fef;--cyan:#50b8ff;--pale:#eef5ff;--line:#d7e1ee;--white:#fff;--muted:#587087;--max:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"IBM Plex Sans JP",sans-serif;background:#fff;line-height:1.75}
a{color:inherit;text-decoration:none}
.site-header{height:78px;padding:0 max(28px,calc((100vw - var(--max))/2));display:flex;align-items:center;gap:42px;border-bottom:1px solid rgba(8,31,56,.1);position:absolute;z-index:20;width:100%;color:#fff}
.brand{display:flex;margin-right:auto}
.brand img,footer img{width:142px;height:auto;display:block}
nav{display:flex;gap:28px;font-size:14px}
nav a{opacity:.76}
nav a:hover{opacity:1}
.header-cta{border:1px solid rgba(255,255,255,.45);padding:9px 18px;font-size:14px}
.hero{min-height:900px;background:radial-gradient(circle at 73% 38%,#123f7a 0,rgba(18,63,122,.08) 32%,transparent 54%),linear-gradient(120deg,#04101f 0%,#071c35 62%,#092d56 100%);color:#fff;padding:170px max(28px,calc((100vw - var(--max))/2)) 0;position:relative;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto 108px;gap:55px 50px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(96,170,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(96,170,255,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.hero-copy,.hero-visual,.hero-stats{position:relative;z-index:2}
.eyebrow,.overline{font-family:Manrope,sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:700}
.eyebrow span{color:#7fc9ff;margin-right:12px}
.hero h1{font-size:clamp(45px,5vw,76px);line-height:1.26;letter-spacing:-.045em;margin:24px 0 28px;font-weight:600}
.hero h1 em{font-style:normal;color:#8fd6ff}
.lead{font-size:18px;max-width:650px;color:#ccdaea;line-height:2}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:36px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:16px 20px;font-weight:600;min-width:260px;transition:.25s}
.button span{font-size:18px}
.button.primary{background:#fff;color:var(--ink)}
.button.primary:hover{background:#86d2ff;transform:translateY(-2px)}
.text-link{font-size:14px;color:#c7d8eb;border-bottom:1px solid #7090b1;padding-bottom:5px}
.text-link span{margin-left:9px}
.scope-note{font-size:12px;letter-spacing:.06em;color:#7f9cba;margin-top:28px}
.hero-visual{align-self:center;min-height:480px}
.orbit{position:absolute;border:1px solid rgba(109,190,255,.27);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.orbit-a{width:410px;height:410px}
.orbit-b{width:285px;height:285px;border-style:dashed;animation:spin 22s linear infinite}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:178px;height:178px;background:linear-gradient(145deg,rgba(44,125,232,.28),rgba(3,17,32,.9));border:1px solid #57aefe;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 70px rgba(50,143,255,.22),inset 0 0 35px rgba(58,160,255,.16)}
.core span{font-size:10px;letter-spacing:.23em;color:#83cbff}
.core strong{font:700 46px/1 Manrope}
.core small{font-size:9px;color:#75a0c9}
.token{position:absolute;width:84px;height:84px;border:1px solid #4e9ee5;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#071b32;box-shadow:0 0 35px rgba(51,142,244,.18)}
.token small{font:500 8px Manrope;letter-spacing:.12em;color:#76acd8}
.token strong{font:600 28px Manrope}
.token-a{top:8%;right:9%}
.token-b{bottom:8%;left:4%}
.flow-tag{position:absolute;font:600 9px Manrope;letter-spacing:.15em;color:#7ab9eb;border:1px solid rgba(92,167,232,.25);padding:7px 9px;background:#071a30}
.tag-one{left:2%;top:24%}
.tag-two{right:2%;bottom:26%}
.hero-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.15)}
.hero-stats div{display:flex;align-items:center;gap:18px;border-right:1px solid rgba(255,255,255,.15);padding:24px 30px}
.hero-stats div:first-child{padding-left:0}
.hero-stats strong{font:600 23px Manrope}
.hero-stats span{font-size:13px;color:#90a8c0}
.section{max-width:var(--max);margin:auto;padding:120px 28px}
.section-kicker{font:600 11px Manrope;letter-spacing:.16em;color:#3773bc;border-top:1px solid var(--line);padding-top:15px;margin-bottom:64px}
.intro{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:90px}
.intro .section-kicker{grid-column:1/-1}
.intro h2,.section-heading h2,.process h2,.lab h2,.notice h2{font-size:clamp(34px,4vw,55px);line-height:1.34;letter-spacing:-.045em;margin:0;font-weight:600}
.intro-copy>p{font-size:17px;color:var(--muted);margin-top:30px}
.challenge-list article{display:grid;grid-template-columns:60px 1fr;border-top:1px solid var(--line);padding:24px 0}
.challenge-list article:last-child{border-bottom:1px solid var(--line)}
.challenge-list span{font:600 12px Manrope;color:#3b7bc1;grid-row:1/3}
.challenge-list h3{font-size:18px;margin:0}
.challenge-list p{margin:7px 0 0;color:var(--muted);font-size:14px}
.architecture{max-width:none;background:var(--navy);color:#fff;padding-left:max(28px,calc((100vw - var(--max))/2));padding-right:max(28px,calc((100vw - var(--max))/2))}
.section-kicker.light{color:#6bb8fa;border-color:#26435f}
.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:end;margin-bottom:65px}
.section-heading>p{color:#91a8bf;margin:0}
.overline{color:#4889d5;margin:0 0 17px}
.architecture-board{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;background:#091d32;border:1px solid #1b3b59;padding:24px}
.arch-step{min-height:210px;padding:24px;background:#0b223b;border:1px solid #183d60;display:flex;flex-direction:column}
.arch-step.featured{background:linear-gradient(145deg,#0c3156,#10569a);border-color:#3a96e5}
.arch-step>span{font:600 11px Manrope;color:#75bdf4}
.arch-step small{font:600 9px Manrope;letter-spacing:.14em;color:#7795b1;margin-top:auto}
.arch-step strong{font-size:19px;margin-top:7px}
.arch-step p{font-size:12px;color:#9fb5ca;margin:5px 0 0}
.connector{display:flex;align-items:center;justify-content:center}
.connector i{width:100%;height:1px;background:#3c749f;position:relative}
.connector i:after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid #66a8d9;border-top:3px solid transparent;border-bottom:3px solid transparent}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px}
.feature-grid article{padding:0 27px;border-left:1px solid #24425d}
.feature-grid article:first-child{padding-left:0;border:0}
.feature-no{font:600 10px Manrope;color:#4e99d9}
.feature-grid h3{font-size:17px;margin:14px 0 9px}
.feature-grid p{font-size:13px;color:#8fa5ba;margin:0}
.section-heading.dark>p{color:var(--muted)}
.usecase-panel{border:1px solid var(--line)}
.usecase-tabs{display:flex;border-bottom:1px solid var(--line)}
.usecase-tabs button{flex:1;border:0;border-right:1px solid var(--line);background:#f7f9fc;padding:20px;font:500 15px "IBM Plex Sans JP";color:#607488;cursor:pointer}
.usecase-tabs button:last-child{border-right:0}
.usecase-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.usecase-content{padding:55px;display:grid;grid-template-columns:150px 1fr 260px;gap:45px;align-items:center;min-height:330px}
.case-index{font:500 10px Manrope;color:#6c83a0;letter-spacing:.13em}
.case-index strong{display:block;font-size:50px;color:#bdd0e2}
.usecase-content h3{font-size:26px;margin:0 0 14px}
.usecase-content p{color:var(--muted)}
.usecase-content ul{display:flex;gap:24px;padding:0;list-style:none;font-size:12px;color:#336ba9}
.usecase-content li:before{content:"+";margin-right:5px}
.mini-flow{height:210px;border:1px solid #bcd1e5;background:radial-gradient(circle at center,#e8f4ff,transparent 65%);display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column;font:600 10px Manrope;letter-spacing:.1em;color:#3b6d9f}
.mini-flow i{font-style:normal;transform:rotate(90deg);color:#4e9fe5}
.project{border-top:1px solid var(--line)}
.project-header{display:grid;grid-template-columns:1fr auto;gap:70px;align-items:end;margin-bottom:55px}
.project-header h2{font-size:clamp(34px,4vw,55px);line-height:1.34;letter-spacing:-.045em;margin:0;font-weight:600}
.project-meta{display:grid;grid-template-columns:auto auto;gap:7px 25px;border-left:1px solid var(--line);padding-left:35px;min-width:280px}
.project-meta span{font-size:12px;color:#72869a}
.project-meta strong{font:600 13px Manrope;text-align:right}
.project-card{display:grid;grid-template-columns:.38fr .62fr;background:var(--navy);color:#fff}
.project-title{padding:48px;background:linear-gradient(150deg,#0d65cd,#0b3d78);min-height:450px;display:flex;flex-direction:column}
.project-label{font:600 10px Manrope;letter-spacing:.15em;color:#bde4ff}
.project-title>p{font-size:28px;font-weight:600;line-height:1.45;margin:35px 0}
.project-status{margin-top:auto;font-size:12px;display:flex;align-items:center;gap:9px;color:#d8edff}
.project-status i{width:8px;height:8px;border-radius:50%;background:#78d5ff;box-shadow:0 0 0 6px rgba(120,213,255,.14)}
.project-body{padding:52px 58px}
.project-body h3{font-size:26px;line-height:1.5;margin:0 0 18px}
.project-body>p{color:#9fb4c8;margin:0 0 28px}
.project-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #29445e;border-bottom:1px solid #29445e;margin:30px 0}
.project-facts div{padding:22px 18px;border-right:1px solid #29445e}
.project-facts div:first-child{padding-left:0}
.project-facts div:last-child{border-right:0}
.project-facts span{display:block;font:600 10px Manrope;color:#63b4f4}
.project-facts strong{display:block;font-size:14px;margin:6px 0}
.project-facts small{display:block;font-size:11px;line-height:1.6;color:#859fb8}
.project-body .project-note{font-size:11px;color:#728ba2;margin-bottom:16px}
.project-link{font-size:13px;color:#8fcfff;border-bottom:1px solid #397db8;padding-bottom:5px}
.project-link span{margin-left:8px}
.project-flow{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr;border:1px solid var(--line);border-top:0;padding:28px 35px;align-items:center}
.project-flow div{display:flex;flex-direction:column}
.project-flow small{font:600 9px Manrope;letter-spacing:.12em;color:#4d86c3}
.project-flow strong{font-size:14px;margin-top:5px}
.project-flow>i{font-style:normal;color:#77a9d6;text-align:center}
.process{border-top:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.process-copy>p:last-child{color:var(--muted);margin-top:28px}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:75px 1fr;border-top:1px solid var(--line);padding:23px 0}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline span{font:600 12px Manrope;color:#3574ba}
.timeline h3{font-size:18px;margin:0}
.timeline p{font-size:14px;color:var(--muted);margin:5px 0}
.lab{padding-top:20px}
.lab-card{background:#eaf4ff;padding:70px;display:grid;grid-template-columns:110px .9fr 1.1fr;gap:55px;align-items:center}
.lab-mark{position:relative;width:90px;height:90px}
.lab-mark span{position:absolute;inset:0;border:2px solid #1970d2;border-radius:50% 50% 50% 12%;transform:rotate(0)}
.lab-mark span:nth-child(2){transform:rotate(120deg)}
.lab-mark span:nth-child(3){transform:rotate(240deg)}
.lab-card>div:last-child p{color:#405b73}
.lab-card a{font-size:14px;color:#0d62bd;border-bottom:1px solid #72a9dd;padding-bottom:4px}
.notice{padding-top:35px}
.notice-box{display:grid;grid-template-columns:140px 1fr;gap:50px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:44px 0}
.notice-box>span{font:600 10px Manrope;letter-spacing:.13em;color:#d95f53}
.notice h2{font-size:27px}
.notice p{font-size:13px;color:#607184}
.cta-section{background:linear-gradient(120deg,#0b58c9,#1184df);color:#fff;padding:100px 28px;text-align:center;position:relative;overflow:hidden}
.cta-section:before{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.16);border-radius:50%;left:-170px;top:-280px}
.cta-inner{position:relative}
.cta-section .overline{color:#b9e3ff}
.cta-section h2{font-size:clamp(39px,5vw,64px);line-height:1.25;margin:0}
.cta-section p{color:#d8edff}
.light-button{background:#fff;color:#0756ad;margin-top:18px}
.light-button:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(0,0,0,.18)}
footer{background:#04101e;color:#91a4b8;min-height:150px;padding:55px max(28px,calc((100vw - var(--max))/2));display:flex;align-items:center;gap:50px;font-size:12px}
footer img{margin-right:auto}
footer div{display:flex;gap:24px}
footer p{margin:0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media(max-width:900px){.site-header nav{display:none}
.site-header{padding:0 22px}
.header-cta{padding:8px 12px}
.hero{min-height:auto;grid-template-columns:1fr;padding:135px 24px 0}
.hero-visual{min-height:410px}
.hero-stats{margin-top:0}
.section{padding:85px 24px}
.intro,.section-heading,.process-grid,.project-header{grid-template-columns:1fr;gap:42px}
.project-meta{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;max-width:320px}
.project-card{grid-template-columns:1fr}
.project-title{min-height:230px}
.project-flow{grid-template-columns:1fr 25px 1fr 25px 1fr 25px 1fr;padding:24px}
.architecture{padding-left:24px;padding-right:24px}
.architecture-board{grid-template-columns:1fr}
.architecture-board .arch-step{min-height:175px}
.architecture-board .connector{height:28px}
.architecture-board .connector i{width:1px;height:100%}
.architecture-board .connector i:after{right:-3px;top:auto;bottom:0;border-top:6px solid #66a8d9;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:0}
.architecture-board .arch-step,.architecture-board .connector{display:flex}
.feature-grid{grid-template-columns:1fr 1fr;gap:35px 0}
.usecase-content{grid-template-columns:90px 1fr;padding:35px}
.mini-flow{grid-column:1/-1;height:120px;flex-direction:row}
.lab-card{grid-template-columns:80px 1fr;padding:45px}
.lab-card>div:last-child{grid-column:2}
.notice-box{grid-template-columns:1fr;gap:15px}
}
@media(max-width:600px){.brand img{width:112px}
.header-cta{font-size:12px}
.hero h1{font-size:40px}
.lead{font-size:16px}
.hero-actions{align-items:flex-start;flex-direction:column}
.hero-visual{min-height:350px}
.orbit-a{width:315px;height:315px}
.orbit-b{width:225px;height:225px}
.core{width:142px;height:142px}
.core strong{font-size:36px}
.token{width:68px;height:68px}
.hero-stats div{padding:20px 8px;display:block}
.hero-stats strong{font-size:15px;display:block}
.hero-stats span{font-size:10px}
.section-kicker{margin-bottom:40px}
.intro h2,.section-heading h2,.process h2,.lab h2{font-size:34px}
.architecture-board{grid-template-columns:1fr;padding:16px}
.architecture-board .connector{height:24px}
.feature-grid{grid-template-columns:1fr}
.feature-grid article,.feature-grid article:first-child{padding:22px 0;border-left:0;border-top:1px solid #24425d}
.usecase-tabs{flex-direction:column}
.usecase-tabs button{border-right:0;border-bottom:1px solid var(--line)}
.usecase-content{grid-template-columns:1fr;padding:28px;gap:20px}
.project-title,.project-body{padding:32px 26px}
.project-facts{grid-template-columns:1fr}
.project-facts div,.project-facts div:first-child{padding:17px 0;border-right:0;border-bottom:1px solid #29445e}
.project-facts div:last-child{border-bottom:0}
.project-flow{grid-template-columns:1fr;text-align:center;gap:9px}
.project-flow>i{transform:rotate(90deg)}
.case-index strong{display:inline;font-size:20px;margin-left:7px}
.lab-card{grid-template-columns:1fr;padding:35px 28px}
.lab-card>div:last-child{grid-column:auto}
.notice-box{padding:30px 0}
footer{flex-wrap:wrap;gap:25px}
footer img{width:120px}
}