:root{--ai-bg:#061321;--ai-surface:#0b2237;--ai-surface2:#102c45;--ai-text:#f4f9fc;--ai-muted:#abc2d2;--ai-cyan:#4ee6e2;--ai-line:rgba(130,211,229,.2)}
*{box-sizing:border-box}
.ai-page{margin:0;background:var(--ai-bg);color:var(--ai-text);font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.75}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-150%);background:#fff;color:#000;padding:.75rem 1rem}
.skip-link:focus{transform:none}
.ai-header{height:76px;padding:0 max(20px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ai-line);background:rgba(6,19,33,.9);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}
.ai-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800}
.ai-header nav{display:flex;align-items:center;gap:24px}
.ai-header nav a,.ai-footer a,.social-links a{color:var(--ai-text);text-decoration:none}
.ai-nav-cta{border:1px solid var(--ai-cyan);padding:8px 18px;border-radius:999px}
.ai-hero,.ai-section,.ai-contact{max-width:1180px;margin:auto;padding:112px 24px}
.ai-hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px}
.eyebrow,.tag{color:var(--ai-cyan);font-size:.75rem;font-weight:800;letter-spacing:.18em}
.ai-hero h1{font-size:clamp(2.8rem,6vw,5.6rem);line-height:1.08;letter-spacing:-.04em;margin:.25em 0}
.lead,.section-lead{color:var(--ai-muted);max-width:680px}
.ai-actions{display:flex;gap:12px;margin-top:32px}
.ai-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:800}
.ai-button.primary{background:var(--ai-cyan);color:#04141f}
.ai-button.secondary{border:1px solid var(--ai-line);color:#fff}
.hero-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;transform:rotate(2deg)}
.hero-mosaic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px}
.hero-mosaic img:first-child{aspect-ratio:9/16;grid-row:span 2}
.ai-section h2,.ai-contact h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.2;letter-spacing:-.03em}
.cap-grid,.media-grid,.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.cap-grid article,.flow-grid li{background:var(--ai-surface);padding:32px;border:1px solid var(--ai-line);border-radius:18px}
.cap-grid span,.flow-grid b{color:var(--ai-cyan)}
.media-card{background:var(--ai-surface);border:1px solid var(--ai-line);border-radius:18px;overflow:hidden}
.media-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#02070b;cursor:pointer}
.media-card.portrait video{object-fit:contain}
.media-card>div{padding:22px}
.media-card h3{margin:.2rem 0}
.media-card p:last-child{color:var(--ai-muted)}
.flow-grid{grid-template-columns:repeat(4,1fr);list-style:none;padding:0}
.faq details{border-top:1px solid var(--ai-line);padding:22px 0}
.faq summary{cursor:pointer;font-weight:700;min-height:44px}
.faq details p{color:var(--ai-muted)}
.ai-contact{text-align:center;background:linear-gradient(135deg,var(--ai-surface),var(--ai-surface2));border:1px solid var(--ai-line);border-radius:28px;margin-bottom:100px}
.social-links{display:flex;justify-content:center;gap:24px;margin-top:28px}
.ai-footer{max-width:1180px;margin:auto;padding:32px 24px;border-top:1px solid var(--ai-line);display:flex;justify-content:space-between;color:var(--ai-muted)}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:850px){.ai-header nav a:not(.ai-nav-cta){display:none}
.ai-hero{grid-template-columns:1fr;gap:48px;padding-top:72px}
.cap-grid,.media-grid{grid-template-columns:1fr 1fr}
.flow-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.ai-header{height:68px}
.ai-hero,.ai-section,.ai-contact{padding:72px 20px}
.ai-hero{min-height:auto}
.ai-hero h1{font-size:2.8rem}
.ai-actions{flex-direction:column}
.hero-mosaic{transform:none}
.cap-grid,.media-grid,.flow-grid{grid-template-columns:1fr}
.ai-contact{margin:0 12px 72px}
.ai-footer{display:block}
.social-links{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Full-bleed AI animation hero */
.ai-hero {
    position: relative;
    isolation: isolate;
    max-width: none;
    min-height: calc(100svh - 76px);
    display: flex;
    grid-template-columns: none;
    align-items: center;
    overflow: hidden;
}

.ai-hero-media,
.ai-hero-scrim {
    position: absolute;
    inset: 0;
}

.ai-hero-media {
    z-index: -2;
    background: var(--ai-bg);
}

.ai-hero-media img,
.ai-hero-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ai-hero-media img {
    object-fit: cover;
    object-position: center;
}

.ai-hero-media iframe {
    left: 50%;
    top: 50%;
    width: max(100vw, 177.78vh);
    height: max(56.25vw, 100vh);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}

.ai-hero-media.is-loaded iframe {
    opacity: 1;
}

.ai-hero-scrim {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 13, 24, .94) 0%, rgba(3, 13, 24, .78) 45%, rgba(3, 13, 24, .48) 72%, rgba(3, 13, 24, .58) 100%),
        linear-gradient(0deg, rgba(6, 19, 33, .68), transparent 55%);
}

.ai-hero-inner {
    width: min(1180px, 100%);
    margin: auto;
}

.ai-hero-copy {
    max-width: 920px;
}

.ai-hero h1 {
    max-width: 920px;
    font-size: clamp(2.8rem, 4.8vw, 4.4rem);
}

@media (max-width: 850px) {
    .ai-hero {
        padding-top: 72px;
    }

    .ai-hero-scrim {
        background:
            linear-gradient(90deg, rgba(3, 13, 24, .92), rgba(3, 13, 24, .6)),
            linear-gradient(0deg, rgba(6, 19, 33, .72), transparent 55%);
    }
}

@media (max-width: 560px) {
    .ai-hero {
        min-height: calc(100svh - 68px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-hero-media iframe {
        display: none;
    }
}

/* Back navigation */
.ai-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ai-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #04141f;
    background: var(--ai-cyan);
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
}

.ai-back-link:hover {
    background: #89fffa;
}

.ai-back-link:active {
    transform: translateY(1px);
}

.ai-back-short {
    display: none;
}

/* Embedded published works */
.embed-showcase {
    margin-top: 88px;
    padding-top: 64px;
    border-top: 1px solid var(--ai-line);
}

.embed-showcase-head {
    max-width: 720px;
    margin-bottom: 40px;
}

.embed-showcase-head h3 {
    margin: 8px 0 12px;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.25;
}

.embed-showcase-head > p:last-child {
    margin: 0;
    color: var(--ai-muted);
}

.embed-wide-grid,
.embed-vertical-grid {
    display: grid;
    gap: 20px;
}

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

.embed-vertical-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
}

.embed-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ai-line);
    border-radius: 18px;
    background: var(--ai-surface);
}

.embed-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #02070b;
}

.embed-frame--vertical {
    aspect-ratio: 9 / 16;
}

.embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed-card-body {
    padding: 20px;
}

.embed-card-body h4 {
    margin: 4px 0 14px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.embed-card-body a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ai-cyan);
    font-weight: 800;
    text-decoration: none;
}

.embed-card-body a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 850px) {
    .ai-header {
        gap: 12px;
    }

    .ai-header-left {
        gap: 10px;
    }

    .ai-back-link {
        padding-inline: 14px;
    }

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

@media (max-width: 560px) {
    .ai-header nav .ai-nav-cta {
        display: none;
    }

    .ai-brand > span,
    .ai-back-full {
        display: none;
    }

    .ai-back-short {
        display: inline;
    }

    .ai-back-link {
        padding-inline: 13px;
    }

    .embed-showcase {
        margin-top: 64px;
        padding-top: 48px;
    }

    .embed-wide-grid,
    .embed-vertical-grid {
        grid-template-columns: 1fr;
    }

    .embed-vertical-grid .embed-card {
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }
}