@import "shared-footer.css?v=2";

:root {
    color-scheme: dark;
    --bg: #090a0d;
    --bg-soft: #0c0e13;
    --surface: #11141b;
    --surface-raised: #171b24;
    --surface-light: #0e1016;
    --ink: #f5f6f8;
    --ink-dark: #f5f6f8;
    --muted: #959dac;
    --muted-dark: #959dac;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.18);
    --accent: #7c8cff;
    --accent-soft: #adb6ff;
    --button-accent: #6366f1;
    --button-accent-hover: #7477f3;
    --lime: var(--accent);
    --cyan: var(--accent);
    --violet: var(--accent);
    --blue: var(--accent);
    --font-sans: Inter, "Noto Sans JP", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Noto Sans JP", monospace;
    --container: 1200px;
    --header-height: 76px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 75% 6%, rgba(124, 140, 255, 0.12), transparent 24rem),
        var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

html[lang="ja"] body {
    font-family: "Noto Sans JP", Inter, system-ui, sans-serif;
    letter-spacing: 0.01em;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

p,
h1,
h2,
h3,
figure {
    margin: 0;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--lime);
    color: var(--ink-dark);
    font-weight: 700;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    background: rgba(9, 10, 13, 0.76);
    backdrop-filter: blur(20px);
    transition: border-color 200ms ease, background 200ms ease;
}

.site-header.is-scrolled {
    border-color: var(--line);
    background: rgba(9, 10, 13, 0.94);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: url("assets/logo.png") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(124, 140, 255, 0.28));
}

.brand-mark span {
    display: none;
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 1.6vw, 26px);
    margin-left: auto;
}

.desktop-nav a {
    color: var(--muted);
    font-size: 13px;
    font-weight: 550;
    transition: color 180ms ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
    color: var(--ink);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switcher {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 34px);
    align-items: center;
    gap: 10px;
    width: 90px;
    height: 36px;
    padding: 0 6px 3px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
}

.language-switcher::before {
    content: "/";
    position: absolute;
    top: 47%;
    left: 50%;
    color: rgba(149, 157, 172, 0.55);
    font-family: var(--font-mono);
    font-size: 9px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.language-switcher::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 14px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-soft);
    box-shadow: 0 0 9px rgba(124, 140, 255, 0.48);
    transition: transform 240ms cubic-bezier(0.22, 0.72, 0.2, 1);
    pointer-events: none;
}

.language-switcher[data-active-language="ja"]::after {
    transform: translateX(44px);
}

.lang-btn {
    position: relative;
    z-index: 1;
    width: 34px;
    min-width: 0;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: color 180ms ease, transform 180ms ease;
}

.lang-btn:hover {
    color: var(--ink);
}

.lang-btn.active {
    background: transparent;
    color: var(--ink);
}

.lang-btn:focus-visible {
    outline: 1px solid rgba(173, 182, 255, 0.72);
    outline-offset: -2px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button svg {
    width: 18px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.button-small {
    min-height: 38px;
    padding-inline: 16px;
    border-radius: 9px;
    font-size: 12px;
}

.button-light {
    background: var(--button-accent);
    color: white;
}

.button-light:hover {
    background: var(--button-accent-hover);
}

.button-primary {
    background: var(--button-accent);
    color: white;
    box-shadow: 0 10px 34px rgba(99, 102, 241, 0.2);
}

.button-primary:hover {
    background: var(--button-accent-hover);
}

.menu-toggle,
.mobile-nav {
    display: none;
}

.hero {
    position: relative;
    min-height: min(900px, calc(100vh - var(--header-height)));
    overflow: hidden;
    padding: 90px 0 0;
    border-bottom: 1px solid var(--line);
    isolation: isolate;
}

main {
    position: relative;
    z-index: 1;
}

main > section {
    position: relative;
}

.hero-art {
    --art-pointer-x: 0px;
    --art-pointer-y: 0px;
    --planet-scroll-x: 0px;
    --planet-scroll-y: 0px;
    --planet-rotate: 0deg;
    --planet-scale: 1;
    --planet-light-x: 26%;
    --planet-night-opacity: 0.8;
    --planet-ring-tilt: -8deg;
    --planet-glow: 0.72;
    --star-scroll-y: 0px;
    --star-opacity: 0.72;
    --scene-opacity: 1;
    --far-one-x: 0px;
    --far-one-y: 0px;
    --far-one-scale: 1;
    --far-one-opacity: 0.78;
    --far-two-x: 0px;
    --far-two-y: 0px;
    --far-two-scale: 1;
    --far-two-opacity: 0.24;
    --far-three-x: 0px;
    --far-three-y: 0px;
    --far-three-scale: 1;
    --far-three-opacity: 0.12;
    --product-pointer-x: 0px;
    --product-pointer-y: 0px;
    --product-scroll-y: 0px;
    --copy-scroll-y: 0px;
    position: fixed;
    z-index: 0;
    inset: var(--header-height) 0 0;
    overflow: hidden;
    opacity: var(--scene-opacity);
    pointer-events: none;
    transform: translate3d(var(--art-pointer-x), var(--art-pointer-y), 0);
    transform-origin: 65% 35%;
    transition: opacity 280ms ease-out;
    will-change: transform, opacity;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 74%);
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.hero-art::before {
    content: "";
    position: absolute;
    inset: -12% -8% -12% 42%;
    background:
        radial-gradient(circle at 71% 38%, rgba(128, 142, 255, 0.2), transparent 30%),
        radial-gradient(ellipse at 62% 46%, rgba(70, 83, 172, 0.12), transparent 52%);
    filter: blur(12px);
    opacity: var(--planet-glow);
}

.hero-art::after {
    content: "";
    position: absolute;
    width: 62%;
    height: 54%;
    right: -8%;
    bottom: -14%;
    background: radial-gradient(ellipse, rgba(103, 116, 236, 0.13), transparent 68%);
    filter: blur(34px);
    opacity: calc(var(--planet-glow) * 0.72);
}

.art-star-field {
    position: absolute;
    inset: -80px 0 0 42%;
    opacity: var(--star-opacity);
    background-image:
        radial-gradient(circle, rgba(234, 237, 255, 0.95) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(150, 162, 255, 0.78) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 0.7px, transparent 1.2px),
        radial-gradient(circle, rgba(187, 197, 255, 0.32) 0 0.6px, transparent 1px);
    background-position:
        0 var(--star-scroll-y),
        19px calc(23px + var(--star-scroll-y)),
        7px calc(15px + var(--star-scroll-y)),
        31px calc(9px + var(--star-scroll-y));
    background-size: 67px 67px, 101px 101px, 43px 43px, 29px 29px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.22) 20%, black 62%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.22) 20%, black 62%);
    will-change: background-position, opacity;
}

.art-star-field::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background:
        radial-gradient(circle at 14% 22%, #eef0ff 0 1px, transparent 1.8px),
        radial-gradient(circle at 28% 72%, #aab5ff 0 1.2px, transparent 2px),
        radial-gradient(circle at 52% 18%, #f8f8ff 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 64%, #8e9cff 0 1.3px, transparent 2px),
        radial-gradient(circle at 87% 28%, #eef0ff 0 1px, transparent 1.8px);
}

.orbiting-planets {
    position: absolute;
    inset: 0;
    transform: translate3d(var(--planet-scroll-x), var(--planet-scroll-y), 0);
    will-change: transform;
}

.distant-planet {
    position: absolute;
    top: 0;
    left: 0;
    offset-anchor: center;
    offset-rotate: 0deg;
    border: 1px solid rgba(200, 208, 255, 0.24);
    border-radius: 50%;
    will-change: offset-distance, transform, opacity;
}

.distant-planet::after {
    content: "";
    position: absolute;
    inset: -4%;
    border: 1px solid rgba(147, 160, 255, 0.12);
    border-radius: inherit;
    filter: blur(2px);
}

.distant-planet-one {
    width: 88px;
    height: 88px;
    offset-path: ellipse(29% 12% at 82% 46%);
    offset-distance: 6%;
    background:
        radial-gradient(circle at 35% 30%, rgba(242, 244, 255, 0.9), transparent 5%),
        radial-gradient(circle at 36% 36%, #7c8cff, #28315f 48%, #070912 78%);
    box-shadow: 0 0 40px rgba(115, 130, 247, 0.18);
    opacity: var(--far-one-opacity);
    transform: scale(var(--far-one-scale));
}

.distant-planet-two {
    width: clamp(150px, 15vw, 230px);
    height: clamp(150px, 15vw, 230px);
    offset-path: ellipse(23% 9% at 82% 46%);
    offset-distance: 58%;
    opacity: var(--far-two-opacity);
    background:
        radial-gradient(circle at 68% 22%, rgba(213, 219, 255, 0.34), transparent 3%),
        radial-gradient(circle at 64% 34%, #5966bd, #1b2143 46%, #06080f 76%);
    box-shadow:
        0 0 100px rgba(91, 105, 214, 0.14),
        inset -42px -36px 80px rgba(0, 0, 0, 0.5);
    transform: scale(var(--far-two-scale));
}

.distant-planet-three {
    width: clamp(72px, 8vw, 128px);
    height: clamp(72px, 8vw, 128px);
    offset-path: ellipse(17% 6.5% at 82% 46%);
    offset-distance: 76%;
    opacity: var(--far-three-opacity);
    background:
        radial-gradient(circle at 30% 28%, rgba(238, 240, 255, 0.5), transparent 4%),
        radial-gradient(circle at 35% 38%, #96a2ef, #323a70 42%, #0a0d19 76%);
    box-shadow: 0 0 74px rgba(102, 116, 225, 0.13);
    transform: scale(var(--far-three-scale));
}

.planet-system {
    position: absolute;
    width: clamp(390px, 46vw, 660px);
    aspect-ratio: 1;
    top: 48px;
    right: clamp(-150px, -4vw, -36px);
    transform:
        translate3d(var(--planet-scroll-x), var(--planet-scroll-y), 0)
        scale(var(--planet-scale));
    transform-origin: center;
    will-change: transform;
}

.art-planet {
    position: absolute;
    z-index: 2;
    inset: 16%;
    overflow: hidden;
    border: 1px solid rgba(211, 217, 255, 0.4);
    border-radius: 50%;
    background: radial-gradient(
        circle at var(--planet-light-x) 34%,
        #aeb8ff 0,
        #6f7ce2 22%,
        #303968 52%,
        #111528 74%,
        #060810 100%
    );
    box-shadow:
        0 0 18px rgba(188, 198, 255, 0.28),
        0 0 76px rgba(104, 119, 239, calc(var(--planet-glow) * 0.42)),
        inset -48px -28px 72px rgba(0, 0, 0, 0.42);
}

.art-planet::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 24%;
    left: var(--planet-light-x);
    width: 25%;
    height: 17%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 42% 38%,
        rgba(255, 255, 255, 0.88) 0 4%,
        rgba(235, 239, 255, 0.48) 12%,
        rgba(188, 199, 255, 0.18) 34%,
        transparent 70%
    );
    filter: blur(1.5px);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(-16deg);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.planet-surface,
.planet-night,
.planet-atmosphere {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
}

.planet-surface {
    z-index: 1;
    background:
        radial-gradient(ellipse at 26% 18%, rgba(235, 238, 255, 0.46) 0 4%, transparent 11%),
        radial-gradient(ellipse at 58% 40%, rgba(181, 191, 255, 0.18) 0 6%, transparent 16%),
        radial-gradient(ellipse at 32% 68%, rgba(14, 18, 42, 0.58) 0 7%, transparent 17%),
        repeating-linear-gradient(174deg, transparent 0 11%, rgba(227, 231, 255, 0.08) 12%, transparent 15% 24%);
    background-size: 100% 100%, 118% 118%, 105% 105%, 170% 170%;
    mix-blend-mode: screen;
    opacity: 0.82;
}

.planet-night {
    z-index: 2;
    background:
        radial-gradient(circle at var(--planet-light-x) 38%, transparent 0 21%, rgba(4, 6, 14, 0.1) 38%, rgba(3, 5, 12, 0.92) 78%),
        radial-gradient(circle at 78% 68%, rgba(2, 4, 10, 0.74), transparent 38%);
    opacity: var(--planet-night-opacity);
}

.planet-atmosphere {
    z-index: 3;
    border: 1px solid rgba(224, 228, 255, 0.42);
    box-shadow:
        inset 16px 4px 24px rgba(215, 221, 255, 0.14),
        inset -10px -8px 30px rgba(94, 108, 224, 0.08);
}

.planet-ring {
    position: absolute;
    left: -6%;
    top: 34%;
    width: 112%;
    height: 32%;
    border: 1px solid rgba(206, 213, 255, 0.42);
    border-radius: 50%;
    transform: rotate(var(--planet-ring-tilt));
    box-shadow:
        0 0 18px rgba(139, 153, 255, 0.08),
        inset 0 0 20px rgba(185, 194, 255, 0.06);
}

.planet-ring::after {
    content: "";
    position: absolute;
    inset: 13% 5%;
    border: 1px solid rgba(164, 176, 255, 0.18);
    border-radius: inherit;
}

.planet-ring-back {
    z-index: 1;
    opacity: 0.74;
}

.planet-ring-front {
    z-index: 3;
    clip-path: inset(50% -4% -12% -4%);
    border-color: rgba(229, 232, 255, 0.58);
}

.planet-orbit {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(164, 176, 255, 0.13);
    border-radius: 50%;
    transform: rotate(calc(var(--planet-ring-tilt) - 9deg));
}

.planet-orbit-outer {
    inset: 3% -8% 18%;
}

.planet-orbit-inner {
    inset: 9% 1% 23%;
    border-color: rgba(164, 176, 255, 0.08);
}

.planet-moon {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    offset-path: ellipse(47% 28% at 50% 50%);
    offset-distance: 18%;
    offset-anchor: center;
    offset-rotate: 0deg;
    border: 1px solid rgba(186, 194, 242, 0.38);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #aeb8ed, #5d69aa 40%, #1a203b 76%);
    box-shadow:
        0 0 14px rgba(116, 132, 225, 0.28),
        inset -3px -3px 7px rgba(3, 5, 13, 0.42);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 590px;
}

.hero-copy {
    max-width: 1120px;
    transform: translate3d(0, var(--copy-scroll-y), 0);
    will-change: transform;
}

.eyebrow,
.section-kicker,
.card-label,
.status-label,
.model-showcase-label,
.model-showcase-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 5px rgba(124, 140, 255, 0.12);
}

.hero h1 {
    max-width: 1080px;
    font-size: clamp(72px, 7vw, 112px);
    font-weight: 650;
    line-height: 0.9;
    letter-spacing: -0.075em;
}

.hero h1 span {
    display: block;
}

.hero-accent {
    background: linear-gradient(100deg, var(--ink) 5%, var(--accent-soft) 58%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[lang="ja"] .hero h1 {
    max-width: 1120px;
    font-size: clamp(68px, 6.3vw, 104px);
    line-height: 1.04;
    letter-spacing: -0.055em;
    word-break: auto-phrase;
}

.hero-description {
    max-width: 720px;
    margin-top: 34px;
    color: var(--muted);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 38px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.text-link:hover {
    color: var(--ink);
}

.hero-product {
    position: relative;
    perspective: 1200px;
    transform: translate3d(
        var(--product-pointer-x),
        calc(var(--product-pointer-y) + var(--product-scroll-y)),
        0
    );
    will-change: transform;
}

.product-window {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: rgba(17, 20, 27, 0.94);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.42);
    transform: rotateY(-4deg) rotateX(2deg);
}

.window-bar,
.console-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.window-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.window-logo {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: var(--accent);
}

.running-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lime);
}

.running-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
    box-shadow: 0 0 12px currentcolor;
}

.workflow-canvas {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.canvas-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.4;
    mask-image: radial-gradient(circle at center, black, transparent 84%);
}

.orchestrator-node,
.agent-node {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--line-strong);
    background: rgba(23, 27, 36, 0.96);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.orchestrator-node {
    top: 58%;
    left: 50%;
    width: 136px;
    padding: 16px;
    border-color: rgba(124, 140, 255, 0.55);
    border-radius: 15px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.orchestrator-core {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border: 7px double var(--lime);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(124, 140, 255, 0.24);
}

.orchestrator-node strong,
.agent-node > span:nth-child(2) {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.orchestrator-node small,
.agent-node small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
}

.agent-node {
    min-width: 124px;
    padding: 13px 14px 12px 44px;
    border-radius: 12px;
}

.node-icon {
    position: absolute;
    top: 13px;
    left: 13px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 7px;
    background: rgba(124, 140, 255, 0.12);
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 10px;
}

.node-translation {
    top: 24%;
    left: 18%;
    transform: translate(-50%, -50%);
}

.node-rag {
    top: 24%;
    right: auto;
    left: 80%;
    transform: translate(-50%, -50%);
}

.node-browser {
    top: 88%;
    right: auto;
    bottom: auto;
    left: 78%;
    transform: translate(-50%, -50%);
}

.workflow-connections {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.workflow-connections path {
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    opacity: 0.72;
}

.workflow-connections circle {
    fill: var(--cyan);
    filter: drop-shadow(0 0 4px var(--cyan));
}

.workflow-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: #0d1016;
}

.workflow-status strong {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.status-label {
    color: var(--muted);
    font-size: 8px;
}

.status-metric {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.status-metric span {
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 24px;
}

.status-metric small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
}

.floating-chip {
    position: absolute;
    z-index: 5;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(9, 10, 13, 0.92);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.chip-mcp {
    top: 95px;
    right: -20px;
    color: var(--cyan);
}

.chip-stream {
    bottom: 66px;
    left: -28px;
    color: var(--lime);
}

.model-showcase {
    position: relative;
    z-index: 2;
    margin-top: 52px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--line);
}

.model-showcase-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.model-showcase-label {
    color: var(--accent-soft);
    font-size: 10px;
}

.model-showcase-hint {
    color: var(--muted-dark);
    font-size: 9px;
}

.model-marquee {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    cursor: grab;
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}

.model-marquee::-webkit-scrollbar {
    display: none;
}

.model-marquee:active {
    cursor: grabbing;
}

.model-marquee:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 6px;
}

.model-track,
.model-set {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.model-track {
    width: max-content;
    padding: 2px 3%;
}

.model-chip {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: baseline;
    gap: 10px;
    min-width: max-content;
    padding: 12px 16px;
    border: 1px solid rgba(131, 143, 222, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(110deg, rgba(102, 114, 213, 0.11), transparent 58%),
        rgba(12, 15, 27, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.model-chip::before {
    content: "";
    align-self: center;
    width: 5px;
    height: 5px;
    margin-right: -2px;
    border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: 0 0 10px rgba(127, 142, 255, 0.62);
}

.model-chip strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.model-chip small {
    color: var(--muted-dark);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature-overview,
.editorial-section,
.capabilities-section,
.developer-section,
.components-section,
.enterprise-section,
.cta-section {
    padding: 132px 0;
    background: rgba(9, 10, 13, 0.74);
}

.feature-overview {
    background: rgba(9, 10, 13, 0.74);
    color: var(--ink);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.feature-card {
    position: relative;
    display: grid;
    grid-template-rows: 18px 172px 96px 1fr;
    min-height: 500px;
    padding: 36px 34px;
    border-right: 1px solid var(--line);
}

.feature-card::before {
    position: absolute;
    top: -1px;
    left: 34px;
    width: 38px;
    height: 2px;
    background: rgba(124, 140, 255, 0.62);
    content: "";
}

.feature-card:last-child {
    border-right: 0;
}

.feature-card-accent {
    background: transparent;
    box-shadow: none;
}

.card-index {
    color: var(--muted-dark);
    font-family: var(--font-mono);
    font-size: 11px;
}

.feature-illustration {
    display: grid;
    align-self: center;
    width: 112px;
    height: 112px;
    margin: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 45%, rgba(124, 140, 255, 0.11), transparent 68%),
        rgba(255, 255, 255, 0.018);
}

.feature-illustration svg {
    width: 78px;
    height: 78px;
    fill: none;
    stroke: rgba(232, 235, 245, 0.88);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.feature-illustration .feature-icon-accent {
    fill: var(--accent);
    stroke: none;
}

.feature-card h2 {
    align-self: start;
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.feature-card p {
    align-self: start;
    margin: 0;
    color: var(--muted-dark);
    font-size: 14px;
    line-height: 1.75;
}

.editorial-section {
    border-bottom: 1px solid var(--line);
}

.workflow-section {
    background: rgba(9, 10, 13, 0.74);
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(64px, 7vw, 100px);
}

.editorial-grid-reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-copy {
    min-width: 0;
    width: 100%;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--lime);
}

.section-copy h2,
.section-heading-row h2,
.center-heading h2,
.cta-copy h2 {
    font-size: clamp(45px, 5.2vw, 76px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.065em;
}

html[lang="ja"] .section-copy h2,
html[lang="ja"] .section-heading-row h2,
html[lang="ja"] .center-heading h2,
html[lang="ja"] .cta-copy h2 {
    overflow-wrap: anywhere;
    word-break: auto-phrase;
}

html[lang="ja"] .section-copy h2,
html[lang="ja"] .section-heading-row h2,
html[lang="ja"] .center-heading h2,
html[lang="ja"] .cta-copy h2 {
    font-size: clamp(40px, 4.8vw, 66px);
    line-height: 1.2;
    letter-spacing: -0.045em;
}

html[lang="ja"] .section-copy h2 {
    font-size: clamp(42px, 3.7vw, 50px);
}

.section-lead {
    margin-top: 30px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.85;
}

.section-detail {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 22px;
    margin-top: 44px;
}

.detail-line {
    height: 1px;
    margin-top: 13px;
    background: var(--lime);
}

.section-detail h3 {
    margin-bottom: 12px;
    font-size: 17px;
}

.section-detail p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.media-panel {
    position: relative;
    min-height: 640px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 45%, rgba(124, 140, 255, 0.09), transparent 40%),
        var(--surface);
    overflow: hidden;
    contain: layout paint;
}

.agent-media {
    min-height: 560px;
}

.media-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 48px;
    pointer-events: none;
}

.media-topline {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.agent-system-visual,
.workflow-system-visual {
    position: absolute;
    z-index: 1;
    inset: 76px 34px 52px;
    transform: translate3d(0, var(--diagram-shift, 0px), 0);
    will-change: transform;
}

.agent-system-visual {
    inset: 76px auto 52px 50%;
    width: min(calc(100% - 68px), 560px);
    transform: translate3d(-50%, var(--diagram-shift, 0px), 0);
}

.system-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.system-ring-outer {
    width: min(64%, 320px);
    aspect-ratio: 1;
}

.system-ring-inner {
    width: min(32%, 160px);
    aspect-ratio: 1;
    border-color: rgba(124, 140, 255, 0.28);
}

.system-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: 132px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid rgba(124, 140, 255, 0.5);
    border-radius: 14px;
    background: var(--surface-raised);
    place-items: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.core-mark {
    width: 24px;
    height: 24px;
    border: 5px double var(--accent);
    border-radius: 50%;
}

.system-core strong {
    font-size: 11px;
}

.system-core small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.08em;
}

.system-node {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 144px;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(23, 27, 36, 0.96);
    gap: 3px;
}

.system-node span,
.workflow-step-index {
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 7px;
}

.system-node strong {
    overflow: hidden;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-node-translation {
    top: 8%;
    left: 0;
}

.system-node-rag {
    top: 8%;
    right: 0;
}

.system-node-pdf {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.system-node-slide {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.system-node-browser {
    bottom: 8%;
    left: 0;
}

.system-node-mcp {
    right: 0;
    bottom: 8%;
}

.workflow-system-visual {
    display: grid;
    grid-template-rows: auto auto 38px auto 38px auto;
    align-content: center;
}

.workflow-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 26px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.1em;
}

.workflow-rail span:nth-child(2) {
    text-align: center;
}

.workflow-rail span:last-child {
    text-align: right;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-raised);
}

.workflow-step strong,
.workflow-step small {
    display: block;
}

.workflow-step strong {
    font-size: 11px;
}

.workflow-step small {
    margin-top: 3px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
}

.workflow-input,
.workflow-output {
    width: min(72%, 360px);
    margin-inline: auto;
}

.workflow-parallel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.workflow-path {
    position: relative;
    width: 1px;
    height: 38px;
    margin-inline: auto;
    background: var(--accent);
}

.workflow-path::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    transform: rotate(45deg);
}

.workflow-path i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    transform: translate(-50%, -50%);
}

.workflow-check {
    display: grid;
    width: 26px;
    height: 26px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(124, 140, 255, 0.14);
    color: var(--accent-soft);
    place-items: center;
    font-size: 11px;
}

.media-panel figcaption {
    position: absolute;
    z-index: 2;
    right: 26px;
    bottom: 24px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-media {
    background:
        radial-gradient(circle at 50% 45%, rgba(124, 140, 255, 0.09), transparent 42%),
        var(--surface);
    z-index: 1;
    min-width: 0;
}

.workflow-console-preview {
    position: absolute;
    inset: 64px 24px 36px;
    display: grid;
    align-items: center;
}

.workflow-console-preview .product-window {
    width: 100%;
    transform: none;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

.workflow-console-preview .workflow-canvas {
    height: 360px;
}

.workflow-section {
    position: relative;
    z-index: 1;
    overflow: clip;
}

.workflow-section .section-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.interactive-surface {
    position: relative;
    isolation: isolate;
}

.interactive-surface::after {
    content: "";
    position: absolute;
    z-index: 10;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle 240px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(124, 140, 255, 0.11),
        transparent 72%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.interactive-surface:hover::after {
    opacity: 1;
}

.capabilities-section {
    background: rgba(9, 10, 13, 0.74);
    color: var(--ink);
}

.section-heading-row {
    display: grid;
    grid-template-columns: 1fr 0.48fr;
    align-items: end;
    gap: 60px;
    margin-bottom: 68px;
}

.section-heading-row > * {
    min-width: 0;
}

.section-heading-row .section-kicker {
    color: var(--accent-soft);
}

.section-heading-row > p {
    padding-bottom: 9px;
    color: var(--muted-dark);
    font-size: 17px;
}

.capability-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr;
    gap: 16px;
}

.capability-card {
    position: relative;
    min-height: 340px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
}

.capability-wide {
    display: grid;
    grid-row: span 2;
    grid-template-rows: 1fr auto;
    min-height: 696px;
}

.card-label {
    display: block;
    margin-bottom: 18px;
    color: var(--muted-dark);
    font-size: 9px;
}

.capability-card h3 {
    margin-bottom: 13px;
    font-size: clamp(25px, 2.8vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.05em;
}

.capability-card p {
    max-width: 540px;
    color: var(--muted-dark);
    font-size: 14px;
    line-height: 1.75;
}

.capability-highlight {
    background: var(--surface-raised);
    color: var(--ink);
}

.capability-highlight .card-label,
.capability-highlight p {
    color: var(--muted);
}

.tool-stack {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tool-stack span {
    padding: 7px 9px;
    border: 1px solid rgba(124, 140, 255, 0.36);
    border-radius: 999px;
    background: rgba(124, 140, 255, 0.08);
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.08em;
}

.model-control-visual {
    display: grid;
    min-height: 390px;
    align-items: center;
    padding: 30px 0;
}

.model-control-shell {
    width: min(100%, 590px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(124, 140, 255, 0.06), transparent 38%),
        rgba(10, 13, 20, 0.72);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.model-control-header {
    display: flex;
    min-height: 54px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
}

.model-control-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent-soft);
}

.model-control-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(124, 140, 255, 0.8);
}

.model-control-body {
    padding: 22px;
}

.model-control-step {
    display: grid;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
}

.model-control-step-active {
    border-color: rgba(124, 140, 255, 0.48);
    background: rgba(124, 140, 255, 0.075);
}

.model-control-index {
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 9px;
}

.model-control-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.model-control-copy strong {
    font-size: 12px;
    letter-spacing: -0.01em;
}

.model-control-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-control-state {
    padding: 6px 8px;
    border: 1px solid rgba(124, 140, 255, 0.3);
    border-radius: 999px;
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.05em;
}

.model-control-path {
    display: block;
    width: 1px;
    height: 15px;
    margin-left: 29px;
    background: linear-gradient(var(--accent), rgba(124, 140, 255, 0.2));
}

.mini-workflow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
}

.mini-workflow span {
    display: grid;
    width: 42px;
    height: 36px;
    border: 2px solid var(--ink-dark);
    border-radius: 7px;
    place-items: center;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.04em;
}

.mini-workflow i {
    width: 24px;
    height: 1px;
    background: var(--ink-dark);
}

.developer-section {
    border-bottom: 1px solid var(--line);
}

.developer-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    align-items: center;
    gap: clamp(60px, 8vw, 120px);
}

.check-list {
    display: grid;
    gap: 18px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    align-items: start;
}

.check-list li > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(124, 140, 255, 0.12);
    color: var(--lime);
    font-size: 11px;
}

.check-list p {
    color: var(--muted);
    font-size: 14px;
}

.code-console {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: #090d17;
    box-shadow: 0 36px 80px rgba(0, 0, 0, 0.3);
}

.console-topbar {
    color: var(--muted);
}

.console-dots {
    display: flex;
    gap: 6px;
}

.console-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #394155;
}

.code-console pre {
    min-height: 420px;
    margin: 0;
    padding: 50px 44px;
    overflow-x: auto;
    color: #dfe6f4;
    font-family: var(--font-mono);
    font-size: clamp(12px, 1.25vw, 15px);
    line-height: 1.85;
}

.code-dim {
    color: #788397;
}

.code-green {
    color: var(--lime);
}

.code-blue {
    color: var(--cyan);
}

.code-violet {
    color: var(--violet);
}

.console-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
}

.console-footer span:first-child {
    color: var(--lime);
}

.console-footer i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentcolor;
}

.components-section {
    background: rgba(9, 10, 13, 0.74);
}

.center-heading {
    max-width: 850px;
    margin: 0 auto 72px;
    text-align: center;
}

.center-heading > p {
    max-width: 620px;
    margin: 26px auto 0;
    color: var(--muted);
    font-size: 17px;
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.component-card {
    min-height: 540px;
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.component-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 72px;
}

.component-number {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
}

.component-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
}

.gateway-icon {
    background: var(--accent);
    color: white;
}

.mate-icon {
    border: 1px solid var(--accent);
    background: transparent;
    color: white;
}

.component-card h3 {
    margin-bottom: 20px;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.055em;
}

.component-card > p {
    min-height: 110px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 30px 0;
}

.tag-list span {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
}

.component-card > a {
    display: inline-flex;
    padding-bottom: 5px;
    border-bottom: 1px solid currentcolor;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.integration-panel {
    margin-top: 18px;
    padding: 54px;
    border: 1px solid rgba(124, 140, 255, 0.28);
    border-radius: 20px;
    background:
        linear-gradient(120deg, rgba(124, 140, 255, 0.08), transparent 50%),
        var(--surface);
}

.integration-panel h3 {
    max-width: 570px;
    margin-bottom: 52px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}

.integration-grid > div {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.integration-grid span {
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 10px;
}

.integration-grid p {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

.enterprise-section {
    background: rgba(9, 10, 13, 0.74);
    color: var(--ink);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.stat-grid article {
    min-height: 400px;
    padding: 30px;
    border-right: 1px solid var(--line);
}

.stat-grid article:last-child {
    border: 0;
}

.stat-top,
.stat-unit {
    display: block;
    color: var(--muted-dark);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-grid strong {
    display: block;
    margin: 68px 0 10px;
    font-family: var(--font-mono);
    font-size: clamp(72px, 8vw, 112px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.08em;
}

.stat-grid article strong {
    color: var(--accent);
}

.stat-grid p {
    max-width: 270px;
    margin-top: 38px;
    color: var(--muted-dark);
    font-size: 13px;
}

.cta-section {
    padding-bottom: 150px;
}

.cta-panel {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    background:
        radial-gradient(circle at 78% 45%, rgba(124, 140, 255, 0.18), transparent 26rem),
        var(--surface);
}

.cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, black, transparent 85%);
}

.cta-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 66%;
    min-height: 600px;
    padding: 70px;
}

.cta-copy > p {
    max-width: 620px;
    margin: 28px 0 36px;
    color: var(--muted);
    font-size: 17px;
}

.cta-orbit {
    position: absolute;
    top: 50%;
    right: 4%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(124, 140, 255, 0.32);
    border-radius: 50%;
    transform: translateY(-50%);
}

.cta-orbit::before,
.cta-orbit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cta-orbit::before {
    width: 220px;
    height: 220px;
}

.cta-orbit::after {
    width: 74px;
    height: 74px;
    border-color: var(--lime);
    box-shadow: 0 0 50px rgba(124, 140, 255, 0.14);
}

.cta-orbit span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 20px currentcolor;
}

.cta-orbit span:first-child {
    top: -7px;
    left: 50%;
}

.cta-orbit span:nth-child(2) {
    right: 24px;
    bottom: 68px;
    background: var(--cyan);
}

.cta-orbit span:last-child {
    bottom: 65px;
    left: 22px;
    background: var(--lime);
}

@media (min-width: 1600px) {
    .site-header .container,
    .hero .container {
        width: min(calc(100% - 288px), 1760px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-copy > * {
        animation: hero-enter 700ms both;
    }

    .hero-copy > :nth-child(2) {
        animation-delay: 80ms;
    }

    .hero-copy > :nth-child(3) {
        animation-delay: 150ms;
    }

    .hero-copy > :nth-child(4) {
        animation-delay: 220ms;
    }

    .hero-product {
        animation: product-enter 850ms 180ms both;
    }

    .status-dot,
    .running-badge span {
        animation: pulse 2s ease-in-out infinite;
    }

    .floating-chip {
        animation: float 4s ease-in-out infinite;
    }

    .chip-stream {
        animation-delay: -2s;
    }

    .planet-atmosphere {
        animation: atmosphere-breathe 5.5s ease-in-out infinite;
    }

    .art-planet::before {
        animation: reflection-drift 32s ease-in-out infinite alternate;
    }

    .planet-surface {
        animation: planet-weather 22s linear infinite;
    }

    .planet-moon {
        animation: moon-orbit 110s -20s linear infinite;
    }

    .distant-planet-one {
        animation: solar-orbit 126s -21s linear infinite;
    }

    .distant-planet-two {
        animation: solar-orbit 192s -87s linear infinite reverse;
    }

    .distant-planet-three {
        animation: solar-orbit 156s -58s linear infinite;
    }

    .motion-ready .motion-item {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        transition:
            opacity 700ms cubic-bezier(0.2, 0.72, 0.2, 1),
            transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
        transition-delay: var(--motion-delay, 0ms);
    }

    .motion-ready .motion-item.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
}

@keyframes product-enter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
}

@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

@keyframes float {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes atmosphere-breathe {
    50% {
        box-shadow:
            inset 18px 4px 28px rgba(215, 221, 255, 0.2),
            inset -10px -8px 30px rgba(94, 108, 224, 0.1);
    }
}

@keyframes reflection-drift {
    0% {
        opacity: 0.74;
        filter: blur(1.8px);
        transform: translate(-50%, -50%) translate3d(-12px, -7px, 0) rotate(-18deg) scale(0.88);
    }

    48% {
        opacity: 1;
        filter: blur(1.2px);
        transform: translate(-50%, -50%) translate3d(12px, 8px, 0) rotate(-10deg) scale(1.08);
    }

    100% {
        opacity: 0.82;
        filter: blur(2.1px);
        transform: translate(-50%, -50%) translate3d(25px, 3px, 0) rotate(-5deg) scale(0.96);
    }
}

@keyframes planet-weather {
    to {
        background-position: 12% 0, -16% 4%, 10% -6%, 72% 28%;
    }
}

@keyframes moon-orbit {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@keyframes solar-orbit {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@media (max-width: 1100px) {
    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: grid;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: transparent;
        place-content: center;
        gap: 6px;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 18px;
        height: 1px;
        background: var(--ink);
        transition: transform 180ms ease;
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(3.5px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    .mobile-nav {
        position: fixed;
        inset: var(--header-height) 0 auto;
        z-index: 99;
        display: grid;
        max-height: 0;
        padding: 0 24px;
        overflow: hidden;
        background: rgba(9, 10, 13, 0.98);
        opacity: 0;
        transition: max-height 300ms ease, padding 300ms ease, opacity 200ms ease;
    }

    .mobile-nav.is-open {
        max-height: calc(100vh - var(--header-height));
        padding-block: 22px 30px;
        border-bottom: 1px solid var(--line);
        opacity: 1;
    }

    .mobile-nav > a:not(.button) {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 15px;
    }

    .mobile-nav .button {
        margin-top: 20px;
    }

    .planet-system {
        right: -118px;
    }

    .hero-grid {
        min-height: 560px;
    }

    .hero-copy {
        max-width: 860px;
    }

    .hero h1 {
        font-size: clamp(58px, 8vw, 78px);
    }

    html[lang="ja"] .hero h1 {
        font-size: clamp(54px, 7.1vw, 72px);
    }

    .hero-description {
        font-size: 16px;
    }

    .workflow-canvas {
        height: 360px;
    }

    .editorial-grid,
    .editorial-grid-reverse,
    .developer-grid {
        grid-template-columns: 1fr;
        gap: 72px;
    }

    .editorial-grid-reverse .section-copy {
        order: -1;
    }

    .workflow-section .editorial-grid {
        display: grid;
        grid-template-areas:
            "workflow-copy"
            "workflow-figure";
        gap: 96px;
    }

    .workflow-section .section-copy {
        grid-area: workflow-copy;
        order: initial;
    }

    .workflow-section .workflow-media {
        grid-area: workflow-figure;
        margin: 0;
    }

    .section-copy {
        max-width: 760px;
    }

    .media-panel {
        min-height: 600px;
    }

    .cta-copy {
        width: 70%;
        padding: 54px;
    }

    .cta-orbit {
        right: -80px;
    }
}

@media (max-width: 760px) {
    :root {
        --header-height: 68px;
    }

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .header-cta {
        display: none;
    }

    .language-switcher {
        margin-left: auto;
    }

    .hero {
        padding-top: 62px;
    }

    .planet-system {
        width: 440px;
        top: 142px;
        right: -188px;
        opacity: 0.76;
    }

    .art-star-field {
        inset-inline-start: 42%;
        opacity: 0.44;
    }

    .hero-grid {
        min-height: auto;
    }

    .hero h1 {
        font-size: clamp(50px, 15.5vw, 74px);
        line-height: 0.96;
    }

    html[lang="ja"] .hero h1 {
        font-size: clamp(40px, 11.5vw, 58px);
    }

    .hero-description {
        margin-top: 26px;
        font-size: 16px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .hero-product {
        display: none;
    }

    .product-window {
        transform: none;
    }

    .workflow-canvas {
        height: 340px;
    }

    .floating-chip {
        display: none;
    }

    .model-showcase {
        margin-top: 46px;
        padding: 16px 0 18px;
    }

    .model-showcase-hint {
        display: none;
    }

    .model-track {
        padding-inline: 5%;
    }

    .model-chip {
        padding: 11px 14px;
    }

    .feature-overview,
    .editorial-section,
    .capabilities-section,
    .developer-section,
    .components-section,
    .enterprise-section,
    .cta-section {
        padding: 90px 0;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        grid-template-rows: 18px 148px 92px 1fr;
        min-height: 430px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .feature-card:last-child {
        border-bottom: 0;
    }

    .feature-illustration {
        width: 100px;
        height: 100px;
    }

    .feature-illustration svg {
        width: 70px;
        height: 70px;
    }

    .section-copy h2,
    .section-heading-row h2,
    .center-heading h2,
    .cta-copy h2 {
        font-size: clamp(40px, 11vw, 56px);
    }

    html[lang="ja"] .section-copy h2,
    html[lang="ja"] .section-heading-row h2,
    html[lang="ja"] .center-heading h2,
    html[lang="ja"] .cta-copy h2 {
        font-size: clamp(35px, 9.5vw, 50px);
    }

    .section-detail {
        grid-template-columns: 30px 1fr;
        gap: 16px;
    }

    .media-panel {
        min-height: 450px;
        padding: 18px;
    }

    .workflow-media {
        min-height: 610px;
    }

    .workflow-console-preview {
        inset: 64px 10px 36px;
    }

    .workflow-section .editorial-grid {
        gap: 72px;
    }

    .media-panel figcaption {
        right: 18px;
        bottom: 16px;
    }

    .section-heading-row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }

    .capability-grid {
        grid-template-columns: 1fr;
    }

    .capability-wide {
        grid-row: auto;
        min-height: 620px;
    }

    .model-control-visual {
        min-height: 340px;
    }

    .code-console pre {
        min-height: 360px;
        padding: 34px 24px;
        font-size: 11px;
    }

    .console-footer {
        gap: 14px;
    }

    .component-grid,
    .integration-grid,
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .component-card {
        min-height: auto;
        padding: 28px;
    }

    .component-card-top {
        margin-bottom: 48px;
    }

    .component-card > p {
        min-height: auto;
    }

    .integration-panel {
        padding: 32px 26px;
    }

    .integration-grid {
        gap: 28px;
    }

    .stat-grid article {
        min-height: 330px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stat-grid article:last-child {
        border-bottom: 0;
    }

    .stat-grid strong {
        margin-top: 46px;
    }

    .cta-panel,
    .cta-copy {
        min-height: 560px;
    }

    .cta-copy {
        width: 100%;
        padding: 34px 28px;
    }

    .cta-orbit {
        top: auto;
        right: -120px;
        bottom: -160px;
        transform: none;
        opacity: 0.55;
    }

}

@media (max-width: 440px) {
    .brand {
        font-size: 16px;
    }

    .brand-mark {
        width: 25px;
        height: 25px;
    }

    .header-actions {
        gap: 8px;
    }

    .hero-art {
        opacity: 0.74;
    }

    .planet-system {
        width: 370px;
        top: 190px;
        right: -210px;
        opacity: 0.64;
    }

    .workflow-canvas {
        height: 310px;
    }

    .agent-node {
        min-width: 104px;
        padding: 11px 10px 10px 38px;
    }

    .node-icon {
        top: 11px;
        left: 10px;
    }

    .agent-node > span:nth-child(2) {
        max-width: 72px;
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .orchestrator-node {
        width: 124px;
    }

    .workflow-status {
        align-items: flex-start;
        gap: 12px;
    }

    .workflow-status strong {
        max-width: 180px;
    }

    .model-chip {
        gap: 8px;
        padding: 10px 12px;
    }

    .model-chip strong {
        font-size: 12px;
    }

    .model-chip small {
        font-size: 7px;
    }

    .media-panel {
        min-height: 520px;
    }

    .workflow-media {
        min-height: 570px;
    }

    .agent-system-visual,
    .workflow-system-visual {
        inset: 64px 12px 44px;
    }

    .agent-system-visual {
        inset: 64px auto 44px 50%;
        width: min(calc(100% - 24px), 480px);
        transform: translate3d(-50%, var(--diagram-shift, 0px), 0);
    }

    .system-node {
        width: 112px;
        padding-inline: 9px;
    }

    .system-node strong {
        font-size: 8px;
    }

    .system-core {
        width: 104px;
        min-height: 92px;
        padding: 12px;
    }

    .system-core strong {
        font-size: 9px;
    }

    .workflow-parallel {
        gap: 10px;
    }

    .workflow-step {
        min-height: 64px;
        padding: 10px;
    }

    .workflow-step strong {
        font-size: 9px;
    }

    .workflow-input,
    .workflow-output {
        width: 86%;
    }

    .capability-card {
        padding: 26px;
    }

    .model-control-visual {
        min-height: 300px;
        padding: 12px 0;
    }

    .model-control-header {
        padding: 0 12px;
        font-size: 7px;
    }

    .model-control-body {
        padding: 14px;
    }

    .model-control-step {
        min-height: 58px;
        padding: 11px 10px;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .model-control-copy small {
        display: none;
    }

    .model-control-state {
        padding: 5px 6px;
        font-size: 6px;
    }

    .model-control-path {
        margin-left: 21px;
    }
}