:root{color-scheme:light;--ink:#101113;--paper:#fafaf8;--muted:#757578;font-family:Arial,"Helvetica Neue","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid #ea2334;outline-offset:7px}img{display:block;max-width:100%}svg{width:24px;height:24px}h1,h2,h3,p{margin:0}.skip{position:fixed;top:-100px;left:20px;z-index:10;padding:15px;background:#fff;color:#111}.skip:focus{top:15px}.opening{background:#101113;color:#f7f7f5;padding:0 4.5vw 30px}.header{max-width:1440px;margin:auto;height:120px;display:flex;align-items:center;justify-content:space-between}.logo{position:relative;display:block;width:172px}.logo img{width:100%;height:auto}.logo i{position:absolute;inset:0;background:#f7f7f5;mask:url('assets/logo.png') center/contain no-repeat;clip-path:inset(0 10.3% 0 0)}.nav{display:flex;align-items:center;gap:28px;font-size:14px;letter-spacing:.02em;color:#c8c8cb}.nav span{font-size:20px;transition:transform .25s}.nav:hover span{transform:translateY(4px)}.hero-copy{text-align:center;padding:56px 0 58px}.hero-copy h1{font-size:clamp(54px,6.8vw,104px);font-weight:500;letter-spacing:-.065em;line-height:1.05}.hero-copy h1 span{white-space:nowrap}.hero-copy h1 span:last-child{color:#b4b6bb}.explore{margin-top:34px;display:inline-flex;align-items:center;gap:38px;padding:16px 22px 16px 26px;border-radius:99px;background:#26282c;font-size:15px;font-weight:400;transition:background .25s}.explore:hover{background:#393c42}.explore svg{width:20px;height:20px;transition:transform .25s}.explore:hover svg{transform:translate(2px,-2px)}.hero-stage{isolation:isolate;position:relative;display:block;overflow:hidden;max-width:1440px;aspect-ratio:2.5;margin:auto;border-radius:22px;background:#08090b;border:1px solid #26282c}.stage-light{position:absolute;inset:-55% -5% 0;background:radial-gradient(ellipse at 50% 36%,#6d77833a,transparent 46%);pointer-events:none}.stage-horizon{position:absolute;left:10%;right:10%;height:35%;bottom:10%;background:radial-gradient(ellipse,#8d9dab35,transparent 68%);filter:blur(20px);transform:rotate(-5deg);pointer-events:none}.hero-device{position:absolute;left:50%;top:47%;width:clamp(320px,42%,670px);height:85%;object-fit:contain;transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px));filter:drop-shadow(0 28px 28px #0009);transition:transform .8s cubic-bezier(.2,.65,.3,1)}.hero-label{position:absolute;bottom:32px;left:34px;color:#c0c3c9;font-size:15px;letter-spacing:.01em}.hero-arrow{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;bottom:24px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff30;transition:background .25s}.hero-stage:hover .hero-arrow{background:#ffffff1c}.products{max-width:1440px;margin:auto;padding:68px 4.5vw 50px}.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.section-top h2{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}.section-top>span{font-size:11px;letter-spacing:.05em;color:#999}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:64px}.product-visual{position:relative;overflow:hidden;border-radius:19px;aspect-ratio:1.29;background:#f0f0ef}.product-visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1)}.mecloud-visual{background:#fff;border:1px solid #eeeeeb}.mecloud-visual img{object-fit:contain;transform:scale(.88)}.product:hover .mecloud-visual img{transform:scale(.93)}.kurachan-visual img{object-position:50% 50%}.product:hover .kurachan-visual img{transform:scale(1.035)}.product-meta{display:flex;align-items:center;justify-content:space-between;padding:24px 3px 0}.product h3{font-size:29px;letter-spacing:-.025em;font-weight:500;line-height:1.2}.product p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:7px;letter-spacing:.005em}.product-arrow{width:43px;height:43px;border:1px solid #d8d8d5;border-radius:50%;display:grid;place-items:center;transition:background .25s,transform .25s}.product:hover .product-arrow{background:#eaeae6;transform:translate(2px,-2px)}.kibi{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:24px}.kibi-visual{border:1px solid #eeefeb;border-radius:19px;overflow:hidden;background:#fff;aspect-ratio:1.29;display:flex;align-items:center;justify-content:center}.kibi-portrait{position:relative;width:100%;aspect-ratio:1;overflow:hidden}.kibi-portrait img{position:absolute;width:128.43%;max-width:none;height:auto;left:-9.7%;top:-13.3%}.kibi-copy{padding:30px 10%}.kibi-copy h3{font-size:52px;letter-spacing:-.04em}.kibi-copy p{margin-top:12px;font-size:18px}footer{max-width:1440px;display:flex;align-items:center;justify-content:space-between;padding:34px 4.5vw 38px;margin:auto;border-top:1px solid #e4e4e0}footer .logo{width:116px}footer .logo i{display:none}footer small{font-size:11px;color:#858587}
@media(min-width:1540px){.products{padding-left:0;padding-right:0}footer{padding-left:0;padding-right:0}}
@media(max-width:900px){.header{height:100px}.hero-copy{padding-top:48px;padding-bottom:48px}.hero-copy h1{font-size:7.5vw}.hero-stage{aspect-ratio:2}.hero-device{width:58%}.products{padding-top:48px}.product-grid{gap:44px 20px}.product h3{font-size:25px}.product p{font-size:14px}.kibi-copy h3{font-size:43px}}
@media(max-width:600px){.opening{padding:0 20px 20px}.header{height:88px}.logo{width:138px}.nav{font-size:12px;gap:15px}.nav span{font-size:17px}.hero-copy{padding:42px 0 36px}.hero-copy h1{font-size:clamp(54px,13.8vw,82px);letter-spacing:-.06em;line-height:1.05}.hero-copy h1 span{display:block}.hero-copy h1 span:last-child{margin-top:3px}.explore{font-size:13px;margin-top:28px;padding:13px 18px 13px 22px;gap:24px}.hero-stage{aspect-ratio:1.15;border-radius:16px}.hero-device{width:90%;height:75%;top:45%}.hero-label{left:20px;bottom:23px;font-size:13px}.hero-arrow{right:17px;bottom:16px;width:37px;height:37px}.hero-arrow svg{width:18px}.products{padding:42px 20px 40px}.section-top{margin-bottom:23px}.section-top h2{font-size:11px}.section-top>span{font-size:10px}.product-grid{grid-template-columns:1fr;row-gap:37px}.product-visual,.kibi-visual{aspect-ratio:1.25;border-radius:15px}.product-meta{padding-top:18px}.product h3{font-size:25px}.product p{font-size:14px;margin-top:4px}.product-arrow{width:39px;height:39px}.kibi{display:block;grid-column:auto}.kibi-copy{padding:18px 3px 0}.kibi-copy h3{font-size:25px}.kibi-copy p{font-size:14px;margin-top:4px}footer{padding:27px 20px 32px;margin:0 20px}footer .logo{width:100px}footer small{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.hero-device{transform:translate(-50%,-50%)!important}}

/* Atmospheric layer: cool studio light and a quiet field of data points. */
.opening{position:relative;isolation:isolate;overflow:hidden;background:#0b111b}
.opening::before,.opening::after{content:"";position:absolute;z-index:-2;pointer-events:none;width:100%;height:100%;inset:0}
.opening::before{background:radial-gradient(ellipse at 14% 23%,#31497965,transparent 49%),radial-gradient(ellipse at 85% 20%,#236e7c45,transparent 44%),radial-gradient(ellipse at 55% 76%,#42478038,transparent 60%)}
.opening::after{background:linear-gradient(180deg,#06091120,transparent 40%,#0a101bcc)}
.ambient-field{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65}
.header{position:relative;z-index:4}
.nav{display:flex;gap:30px;align-items:center;font-size:13px;color:#c1c9d6}
.nav a{position:relative;padding:12px 0;white-space:nowrap;transition:color .25s}
.nav a:hover{color:#fff}
.nav a::after{content:"";position:absolute;bottom:6px;left:0;right:0;height:1px;background:#b8d3ec;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.menu-toggle{display:none;color:#ecf2fc;background:transparent;border:1px solid #afc6e330;border-radius:50%;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{width:16px;height:1px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-toggle:focus-visible{outline:2px solid #e60012;outline-offset:4px}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{text-shadow:0 2px 40px #050a1644}
.hero-copy h1 span:last-child{background:linear-gradient(120deg,#e5eaf2,#acc3d6 65%,#c6dce2);background-clip:text;-webkit-background-clip:text;color:transparent}
.explore{background:#b8cce412;border:1px solid #c5d9f128;box-shadow:inset 0 1px 0 #ffffff0a;backdrop-filter:blur(12px)}
.explore:hover{background:#b8cce424}
.hero-stage{background:radial-gradient(ellipse at 50% 35%,#293947b3,transparent 62%),linear-gradient(130deg,#111c2c,#0c1420 46%,#162532);border:1px solid #91adc12e;box-shadow:inset 0 1px 0 #b5d9ff0b,0 20px 65px #02050a3d}
.stage-light{inset:-45% 0 -10%;background:radial-gradient(ellipse at 50% 46%,#9ec2e54a,transparent 51%);filter:blur(15px)}
.stage-horizon{left:15%;right:15%;height:25%;bottom:13%;background:radial-gradient(ellipse,#aacde74a,transparent 67%);filter:blur(22px);transform:none}
.stage-grid{position:absolute;inset:35% -15% -35%;background-image:radial-gradient(circle,#9cb6cd80 .8px,transparent 1.2px);background-size:23px 23px;transform:perspective(500px) rotateX(60deg);mask-image:radial-gradient(ellipse,#0009,transparent 67%);opacity:.5;pointer-events:none}
.hero-device{width:clamp(320px,43%,670px);height:82%;top:47%;filter:saturate(.4) brightness(1.1) drop-shadow(0 32px 20px #020711aa)}
.hero-label{color:#d5e1ed;letter-spacing:.02em}
.hero-arrow{background:#9dc2e509;border-color:#c1d8e838}
.products{position:relative}
body{background:#f7f8fa}
.product-visual,.kibi-visual{border-color:#e4e8ed;box-shadow:0 6px 26px #192d4a04}
.mecloud-visual{background:radial-gradient(ellipse at 50% 45%,#fff 15%,#eef2f6 85%)}
.mecloud-visual::after{content:"";position:absolute;inset:auto 21% 12%;height:15%;background:#637b9126;filter:blur(20px);border-radius:50%;z-index:0}
.mecloud-visual img{position:relative;z-index:1;filter:drop-shadow(0 16px 10px #4f657c15);transform:scale(.82)}
.product:hover .mecloud-visual img{transform:scale(.86)}
.kurachan-visual{background:#c0c5d8}
.product-visual{transition:box-shadow .4s,border-color .4s}
.product:hover .product-visual{box-shadow:0 18px 36px #182e4d0c;border-color:#cdd6df}
.product-arrow{border-color:#cbd3dc;background:#ffffff60}
.product:hover .product-arrow{background:#e5ebf1}
.kibi-visual{background:#fff}
footer{border-top-color:#dfe4eb}
@media(max-width:1000px){.nav{gap:20px}}
@media(max-width:760px){
  .header{height:96px}
  .menu-toggle{display:flex}
  .nav{display:none;position:absolute;top:82px;left:0;right:0;padding:18px 24px;flex-direction:column;align-items:stretch;gap:1px;background:#121e2bf5;border:1px solid #8eabc42e;border-radius:18px;backdrop-filter:blur(24px);box-shadow:0 16px 50px #0005}
  .nav.open{display:flex}
  .nav a{padding:14px 0;font-size:15px}
  .nav a+a{border-top:1px solid #abc5dd12}
  .nav a::after{display:none}
}
@media(max-width:600px){
  .header{height:88px}
  .hero-device{width:91%;height:74%;top:46%}
  .stage-grid{background-size:18px 18px;opacity:.4}
  .ambient-field{opacity:.5}
}
/* Extra room for the two-turn Kurachan conversation, with aligned product cards. */
.product-visual{aspect-ratio:1}
.kurachan-visual img{object-fit:contain;background:#f7f6f2}