/* Shared LP: fluid layouts, explicit grid breakpoints, no fixed content heights. */
:root{
    color-scheme:dark;
    --dark-bg:#0c0e14;
    --card-bg:#141722;
    --text-primary:#f5f5fa;
    --text-secondary:#aeb4c7;
    --accent-purple:#afa0ff;
    --accent-green:#67dbb3;
    --glass-border:#2a2e3e;
    --primary-gradient:linear-gradient(120deg,#7065df,#8262c8)
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body{
    font-family:'Inter','Noto Sans JP',sans-serif;
    background:var(--dark-bg);
    color:var(--text-primary);
    line-height:1.8;
    overflow-wrap:anywhere
}
a{
    color:inherit;
    text-underline-offset:4px
}
button{
    font:inherit;
    color:inherit;
    cursor:pointer
}
img{
    display:block;
    max-width:100%;
    height:auto
}
button,a{
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:3px solid #c5bbff;
    outline-offset:5px
}
.background-effects{
    position:absolute;
    inset:0 0 auto;
    height:900px;
    overflow:hidden;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse at 80% 15%,#28224380,transparent 65%)
}
.gradient-orb,.grid-pattern{
    display:none
}
nav{
    position:sticky;
    top:0;
    z-index:100;
    background:#0c0e14f5;
    border-bottom:1px solid var(--glass-border);
    padding:16px 32px;
    backdrop-filter:blur(16px)
}
.nav-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:24px
}
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:800;
    white-space:nowrap;
    flex-shrink:0
}
.logo-icon{
    width:32px;
    height:32px;
    overflow:hidden;
    border-radius:8px
}
.nav-links{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:24px
}
.nav-link{
    font-size:14px;
    text-decoration:none;
    color:var(--text-secondary);
    white-space:nowrap
}
.nav-link:hover{
    color:#fff
}
.lang-switch{
    display:flex;
    align-items:center
}
.lang-switch select{
    font:inherit;
    font-size:13px;
    color:var(--text-primary);
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:8px;
    min-height:44px;
    max-width:100%;
    padding:8px 12px;
    cursor:pointer
}
.lang-switch select:hover{
    border-color:var(--accent-purple)
}
.lang-switch select:focus-visible{
    outline:3px solid #c5bbff;
    outline-offset:5px
}
.nav-actions{
    display:flex;
    gap:12px;
    align-items:center;
    margin-left:auto
}
.nav-actions .download-btn{
    white-space:nowrap;
    font-size:13px;
    padding:10px 18px
}
.menu-toggle{
    display:none;
    border:1px solid var(--glass-border);
    background:var(--card-bg);
    border-radius:8px;
    min-height:44px;
    padding:8px 12px
}
.btn-primary,.download-btn,.plan-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:48px;
    padding:15px 24px;
    border:1px solid transparent;
    border-radius:10px;
    background:var(--primary-gradient);
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    line-height:1.6;
    transition:background .2s,box-shadow .2s
}
.btn-primary:hover,.download-btn:hover,.plan-button:hover{
    box-shadow:0 0 0 3px #afa0ff40
}
.text-link{
    font-size:14px;
    color:var(--text-primary)
}
.hero{
    padding:80px 32px 96px
}
.hero-content{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:48px;
    align-items:center
}
.hero-content>*{
    min-width:0
}
.hero-badge{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--text-secondary);
    margin-bottom:24px
}
.badge-dot{
    width:7px;
    height:7px;
    background:var(--accent-green);
    border-radius:50%;
    flex-shrink:0
}
.hero-title{
    font-size:clamp(32px,3.35vw,48px);
    line-height:1.5;
    letter-spacing:-.045em;
    font-weight:900;
    margin-bottom:24px
}
.gradient-text{
    color:#b3a3ff
}
.hero-description{
    font-size:16px;
    line-height:2;
    color:var(--text-secondary);
    margin-bottom:28px
}
.hero-description strong{
    color:var(--text-primary)
}
.hero-buttons{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap
}
.hero-assurance{
    margin-top:24px;
    display:grid;
    gap:6px;
    color:var(--text-secondary);
    font-size:12px
}
.hero-visual{
    width:100%;
    min-width:0
}
.app-preview{
    border:1px solid #3d4054;
    border-radius:16px;
    overflow:hidden;
    background:#151823;
    box-shadow:0 24px 80px #0005
}
.app-preview-header{
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--glass-border);
    background:#1c1f2c
}
.window-controls{
    display:flex;
    gap:6px;
    flex-shrink:0
}
.window-control{
    width:9px;
    height:9px;
    border-radius:50%
}
.control-red{
    background:#fa766e
}
.control-yellow{
    background:#edc262
}
.control-green{
    background:#77cb96
}
.app-preview-label{
    font-size:12px;
    color:var(--text-secondary)
}
.app-preview-content{
    padding:20px
}
.diff-panel{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}
.diff-side{
    min-width:0;
    border:1px solid var(--glass-border);
    border-radius:8px;
    overflow:hidden;
    background:#10131b
}
.diff-side-header{
    padding:12px;
    font-size:12px;
    color:var(--text-secondary);
    border-bottom:1px solid var(--glass-border)
}
.code-diff{
    font-size:13px;
    line-height:1.9;
    padding:8px 0
}
.diff-line{
    padding:10px 12px;
    display:flex;
    gap:8px;
    align-items:baseline;
    min-width:0
}
.line-number{
    color:#737b92;
    font-size:11px;
    flex-shrink:0
}
.diff-line code{
    font:inherit;
    min-width:0
}
.diff-added{
    background:#15372f;
    color:#8ce4c1;
    border-left:2px solid #67dbb3
}
.diff-removed{
    background:#39252c;
    color:#ffb3bb;
    border-left:2px solid #f494a4
}
.preview-caption{
    padding:16px 20px;
    border-top:1px solid var(--glass-border);
    font-size:12px;
    color:var(--text-secondary)
}
section:not(.hero){
    padding:80px 32px;
    border-top:1px solid #202431
}
section[id]{
    scroll-margin-top:24px
}
.use-cases,.comparison-table,.faq{
    background:#11141c
}
.section-header{
    max-width:880px;
    margin:0 auto 40px;
    text-align:center
}
.section-subtitle{
    font-size:12px;
    letter-spacing:.12em;
    color:var(--accent-purple);
    font-weight:700;
    margin-bottom:14px
}
.section-title,.cta-title{
    font-size:clamp(26px,3vw,38px);
    line-height:1.6;
    letter-spacing:-.035em;
    margin-bottom:20px;
    font-weight:800;
    text-wrap:balance
}
.section-description,.cta-description{
    font-size:16px;
    color:var(--text-secondary);
    line-height:1.9
}
.use-cases-grid,.features-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    max-width:1200px;
    margin:auto
}
.use-case-card,.feature-card{
    position:relative;
    min-width:0;
    padding:28px;
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:14px;
    text-align:left
}
.use-case-title,.feature-title{
    font-size:20px;
    line-height:1.7;
    font-weight:700;
    margin-bottom:14px
}
.use-case-description,.feature-description{
    font-size:14px;
    color:var(--text-secondary);
    line-height:1.95
}
.use-case-description strong{
    font-weight:500;
    color:#d9ddeb
}
.use-case-card .vm-step-number{
    position:static;
    transform:none;
    margin-bottom:20px
}
.inline-cta{
    text-align:center;
    margin-top:32px
}
.inline-cta p,.price-note{
    font-size:13px;
    color:var(--text-secondary);
    margin-top:16px
}
.feature-icon{
    font-size:24px;
    margin-bottom:16px
}
.feature-badge{
    display:table;
    font-size:11px;
    font-weight:500;
    padding:2px 8px;
    border-radius:4px;
    margin-top:8px;
    letter-spacing:0;
    white-space:nowrap
}
.badge-free{
    color:#80dfbb;
    background:#1c3730
}
.badge-limited{
    color:#e9ca83;
    background:#353023
}
.badge-pro{
    color:#c3b4ff;
    background:#2b2442
}
.app-slider{
    margin-top:36px
}
.slider-container{
    overflow:hidden;
    border:1px solid var(--glass-border);
    border-radius:14px;
    background:var(--card-bg)
}
.slider-track{
    display:flex;
    width:100%;
    transition:transform .25s
}
.slide{
    flex:0 0 100%;
    min-width:0;
    padding:24px;
    text-align:center
}
.slide img{
    width:100%;
    max-width:800px;
    margin:0 auto 24px;
    border-radius:6px
}
.slide h3{
    font-size:20px;
    margin-bottom:8px
}
.slide p{
    font-size:14px;
    color:var(--text-secondary)
}
.slider-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:20px
}
.nav-btn{
    width:44px;
    height:44px;
    flex-shrink:0;
    border:1px solid var(--glass-border);
    border-radius:50%;
    background:var(--card-bg);
    font-size:24px
}
.nav-btn:disabled{
    opacity:.35;
    cursor:default
}
.slider-dots{
    display:flex;
    gap:0
}
.dot{
    width:28px;
    height:44px;
    position:relative;
    border:0;
    background:transparent
}
.dot::before{
    content:'';
    position:absolute;
    left:10px;
    top:18px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#54526c
}
.dot.active::before{
    background:#b9aaff;
    box-shadow:0 0 0 4px #afa0ff25
}
.version-management-content{
    max-width:1100px;
    margin:auto
}
.vm-flow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:24px
}
.vm-step{
    position:relative;
    min-width:0;
    padding:28px;
    border:1px solid var(--glass-border);
    border-radius:14px;
    background:var(--card-bg)
}
.vm-step-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:8px;
    background:#302b4b;
    color:#c5baff;
    font-size:14px;
    font-weight:700;
    margin-bottom:16px
}
.vm-step-icon{
    font-size:24px;
    margin-bottom:12px
}
.vm-step-arrow{
    display:none
}
.vm-step h3{
    font-size:18px;
    margin-bottom:12px
}
.vm-step p,.vm-tier p{
    font-size:14px;
    color:var(--text-secondary)
}
.vm-tiers{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.vm-tier{
    min-width:0;
    padding:20px;
    border:1px solid var(--glass-border);
    border-radius:12px
}
.vm-tier h4{
    font-size:15px;
    margin-bottom:8px
}
.vm-tier.pro{
    border-color:#655787
}
.vm-tier.addon{
    border-color:#635634
}
.pricing-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    max-width:900px;
    margin:auto
}
.pricing-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:32px;
    border:1px solid var(--glass-border);
    background:var(--card-bg);
    border-radius:16px
}
.pricing-card.featured{
    border-color:#9680df;
    background:linear-gradient(145deg,#242037,#141722 60%)
}
.plan-name{
    font-size:24px;
    margin-bottom:12px
}
.plan-price{
    font-size:44px;
    font-weight:800;
    line-height:1.4;
    margin-bottom:12px
}
.plan-price.free{
    color:var(--accent-green)
}
.plan-period{
    font-size:14px;
    color:var(--text-secondary);
    min-height:52px;
    margin-bottom:20px
}
.plan-features{
    list-style:none;
    margin-bottom:28px
}
.plan-features li{
    position:relative;
    padding:12px 0 12px 24px;
    border-bottom:1px solid var(--glass-border);
    font-size:14px;
    color:var(--text-secondary)
}
.plan-features li::before{
    content:'✓';
    position:absolute;
    left:0;
    color:var(--accent-purple)
}
.plan-button{
    width:100%;
    margin-top:auto
}
.pricing-card:not(.featured) .plan-button{
    background:transparent;
    border-color:#81729f
}
.table-container{
    max-width:1000px;
    margin:auto;
    overflow-x:auto;
    border:1px solid var(--glass-border);
    border-radius:12px
}
.comparison-table-content{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:14px;
    background:var(--card-bg)
}
.comparison-table-content th,.comparison-table-content td{
    padding:16px 20px;
    text-align:left;
    border-bottom:1px solid var(--glass-border)
}
.comparison-table-content th{
    background:#222035;
    font-size:14px
}
.comparison-table-content th:first-child{
    width:36%
}
.comparison-table-content th:not(:first-child),.comparison-table-content td:not(:first-child){
    text-align:center
}
.comparison-table-content tr:last-child td{
    border-bottom:0
}
.check-icon{
    color:var(--accent-green)
}
.limit-text{
    color:#e9ca83
}
.cross-icon{
    color:var(--text-secondary)
}
.table-hint{
    display:none
}
.faq-container{
    max-width:800px;
    margin:auto
}
.faq-item{
    border:1px solid var(--glass-border);
    border-radius:12px;
    background:var(--card-bg);
    margin-bottom:12px;
    overflow:hidden
}
.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:22px 24px;
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    font-size:16px;
    font-weight:600;
    line-height:1.7
}
.faq-icon{
    flex-shrink:0
}
.faq-item.active .faq-icon{
    transform:rotate(180deg)
}
.faq-answer{
    display:none
}
.faq-item.active .faq-answer{
    display:block
}
.faq-answer-content{
    padding:0 24px 24px;
    font-size:14px;
    color:var(--text-secondary);
    line-height:1.95
}
.cta-content{
    max-width:850px;
    margin:auto;
    text-align:center
}
.cta-title{
    color:#c4b7ff
}
.cta-description{
    margin-bottom:28px
}
.cta-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap
}
.cta-buttons .btn-primary{
    flex:1;
    max-width:350px
}
.footer-content{
    max-width:1200px;
    margin:0 auto 32px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px
}
footer{
    padding:48px 32px 24px;
    border-top:1px solid var(--glass-border)
}
.footer-brand h3{
    font-size:22px;
    margin-bottom:16px
}
.footer-brand p,.footer-links,.footer-bottom{
    font-size:13px;
    color:var(--text-secondary)
}
.footer-column h4{
    font-size:14px;
    margin-bottom:16px
}
.footer-links{
    list-style:none
}
.footer-links li{
    margin-bottom:12px
}
.footer-links a{
    text-decoration:none;
    display:inline-block;
    padding-block:3px
}
.footer-bottom{
    padding-top:24px;
    border-top:1px solid var(--glass-border);
    text-align:center
}
@media(max-width:1100px){
    .menu-toggle{
        display:block
    }
    .nav-links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#141722;
        border-bottom:1px solid #39384c;
        padding:20px 32px;
        max-height:calc(100dvh - 80px);
        overflow:auto
    }
    .nav-links.is-open{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px 20px
    }
    .nav-link{
        padding:10px 0
    }
    .lang-switch{
        grid-column:1/-1;
        border-top:1px solid var(--glass-border);
        padding-top:8px
    }

    .hero-content{
        gap:32px
    }
    .hero-title{
        font-size:34px
    }
    .features-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .use-case-card,.feature-card{
        padding:24px
    }
    .use-case-title{
        font-size:19px
    }
}
@media(max-width:900px){
    .hero{
        padding-top:48px
    }
    .hero-content{
        grid-template-columns:minmax(0,1fr);
        max-width:680px;
        gap:40px
    }
    .hero-title{
        font-size:44px
    }
    .hero-visual{
        max-width:680px
    }
    .use-cases-grid{
        grid-template-columns:minmax(0,1fr);
        max-width:680px
    }
    .use-case-title br{
        display:none
    }
    .vm-step{
        padding:20px
    }
    .vm-step h3{
        font-size:16px
    }
    .vm-tiers{
        gap:12px
    }
    .vm-tier{
        padding:16px
    }
    .footer-content{
        grid-template-columns:2fr 1fr;
        gap:32px
    }
    .footer-brand{
        grid-column:1/-1
    }
    .section-header{
        margin-bottom:32px
    }
}
@media(max-width:600px){
    html{
        scroll-padding-top:85px
    }
    nav{
        padding:12px 16px
    }
    .nav-container{
        gap:8px
    }
    .logo{
        font-size:16px;
        gap:8px
    }
    .logo-icon{
        width:28px;
        height:28px
    }
    .nav-actions{
        gap:8px
    }
    .nav-actions .download-btn{
        font-size:12px;
        padding:8px 12px;
        min-height:44px
    }
    .menu-toggle{
        font-size:12px;
        padding:8px 10px
    }
    .nav-links{
        padding:16px 20px
    }
    .hero{
        padding:36px 20px 56px
    }
    .hero-title{
        font-size:clamp(28px,7.6vw,42px);
        line-height:1.55
    }
    .hero-badge{
        font-size:11px;
        margin-bottom:20px
    }
    .hero-description{
        font-size:15px
    }
    .hero-description br{
        display:none
    }
    .hero-buttons{
        align-items:stretch;
        flex-direction:column;
        gap:12px
    }
    .hero-buttons .text-link{
        text-align:center;
        padding:8px
    }
    .hero-assurance{
        font-size:11px
    }
    .app-preview-header{
        padding:12px
    }
    .app-preview-content{
        padding:12px
    }
    .diff-panel{
        gap:8px
    }
    .diff-side-header{
        font-size:11px;
        padding:10px 8px
    }
    .diff-line{
        padding:8px;
        gap:5px
    }
    .code-diff{
        font-size:11px
    }
    .preview-caption{
        font-size:11px;
        padding:12px
    }
    .app-preview-label{
        font-size:11px
    }
    .section-title,.cta-title{
        font-size:27px;
        line-height:1.55
    }
    .section-description{
        font-size:14px
    }
    .section-description br{
        display:none
    }
    section:not(.hero){
        padding:56px 20px
    }
    .features-grid,.pricing-cards,.vm-flow,.vm-tiers{
        grid-template-columns:minmax(0,1fr)
    }
    .use-cases-grid,.features-grid,.vm-flow{
        gap:16px
    }
    .feature-title{
        font-size:20px
    }
    .vm-step{
        padding:24px
    }
    .vm-step h3{
        font-size:18px
    }
    .vm-step-icon{
        display:none
    }
    .vm-tier{
        padding:20px
    }
    .pricing-card{
        padding:24px
    }
    .plan-period{
        min-height:0
    }
    .slide{
        padding:12px
    }
    .slide img{
        margin-bottom:16px
    }
    .slide h3{
        font-size:18px
    }
    .slide p{
        font-size:13px
    }
    .slider-nav{
        gap:8px
    }
    .slider-dots .dot{
        width:26px
    }
    .dot::before{
        left:9px
    }
    .comparison-table-content{
        min-width:560px
    }
    .table-hint{
        display:block;
        font-size:12px;
        color:var(--text-secondary);
        margin:0 0 12px;
        text-align:center
    }
    .comparison-table-content th,.comparison-table-content td{
        padding:14px 12px
    }
    .faq-question{
        padding:20px;
        font-size:15px
    }
    .faq-answer-content{
        padding:0 20px 20px
    }
    .cta-buttons{
        flex-direction:column
    }
    .cta-buttons .btn-primary{
        width:100%;
        max-width:none
    }
    .cta-description{
        font-size:15px
    }
    footer{
        padding:36px 20px 24px
    }
    .footer-content{
        gap:28px 20px;
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:360px){
    .logo{
        font-size:14px
    }
    .logo-icon{
        width:24px;
        height:24px
    }
    .nav-actions .download-btn{
        padding:8px
    }
    .menu-toggle{
        padding:8px
    }
    .nav-container{
        gap:6px
    }
    .nav-actions{
        gap:6px
    }
    .hero-title{
        font-size:26px
    }
    .slider-nav{
        gap:4px
    }
    .slider-dots .dot{
        width:24px
    }
    .dot::before{
        left:8px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        animation:none!important;
        transition:none!important
    }
}

/* Latin scripts need natural word wrapping, especially in longer German labels. */
html:not([lang="ja"]) body { font-family: 'Inter', sans-serif; overflow-wrap: break-word; hyphens: auto; }
html:not([lang="ja"]) .hero-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.3; letter-spacing: -.035em; }
html:not([lang="ja"]) .hero-title br { display: none; }
html:not([lang="ja"]) .hero-title .gradient-text { display: block; }
html:not([lang="ja"]) .hero-title { max-width: 18ch; }
@media (max-width: 600px) {
    html:not([lang="ja"]) .hero-title { font-size: clamp(28px, 7.6vw, 40px); }
    html:not([lang="ja"]) .diff-panel { grid-template-columns: minmax(0, 1fr); }
    html:not([lang="ja"]) .code-diff { font-size: 12px; }
}