*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    font-family:"Inter","Noto Sans JP",system-ui,sans-serif;
    font-size:18px;
    line-height:1.65;
    color:#f4f6fb;
    background:#05060a;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased
}
img,svg{
    display:block;
    max-width:100%
}
a{
    color:inherit;
    text-decoration:none
}
button{font:inherit}
.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.glow{
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    z-index:0;
    animation:floatGlow 14s ease-in-out infinite
}
.glow-one{
    width:520px;
    height:520px;
    top:-120px;
    right:-80px;
    background:radial-gradient(circle,rgb(255 107 53/35%),#0000 68%)
}
.glow-two{
    width:480px;
    height:480px;
    bottom:10%;
    left:-120px;
    background:radial-gradient(circle,rgb(124 92 255/28%),#0000 70%);
    animation-delay:-6s
}
@keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(24px,-18px) scale(1.06)}
}
main,footer{
    position:relative;
    z-index:1
}
.hero-copy,.product-visual,.feature-card,.price-box,.proof-strip>div,.timeline-row{min-width:0}
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;padding:0 24px;
    backdrop-filter:blur(18px);
    background:rgb(5 6 10/72%);
    border-bottom:1px solid rgb(255 255 255/6%)
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.08em
}
.brand-mark{
    width:14px;
    height:14px;
    border-radius:4px;
    background:linear-gradient(135deg,#ff6b35,#7c5cff);
    box-shadow:0 0 18px rgb(255 107 53/45%)
}
.header-link{
    padding:12px 20px;
    border-radius:999px;
    font-size:1rem;
    font-weight:700;
    border:1px solid rgb(255 255 255/10%);
    background:rgb(255 255 255/3%);
    transition:.25s ease
}
.header-link:hover{
    border-color:rgb(255 255 255/18%)
    ;background:rgb(255 255 255/8%);
    transform:translateY(-1px)
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#00d4aa
}
.eyebrow span{
    width:28px;
    height:2px;
    background:linear-gradient(90deg,#ff6b35,#00d4aa);
    box-shadow:0 0 12px rgb(0 212 170/50%)
}
h1,h2,h3,p{margin:0}
h1{
    font-size:clamp(3.4rem,6vw + 1.2rem,5.8rem);
    line-height:1.06;
    font-weight:800;
    letter-spacing:-.04em;
    text-wrap:balance
}
h1 em{
    font-style:normal;
    background:linear-gradient(135deg,#fff 0%,#ff6b35 45%,#7c5cff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:#0000;
}
h2{
    font-size:clamp(2rem,4.5vw,3.2rem);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.02em
}
h3{
    font-size:clamp(1.35rem,2.2vw,1.75rem);
    line-height:1.25;
    font-weight:800
}
.lead{margin-top:22px;
    max-width:34ch;
    font-size:clamp(1.2rem,2vw + .5rem,1.6rem);
    line-height:1.7;
    color:rgb(244 246 251/68%)
}
.hero{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(24px,4vw,48px);
    align-items:center;
    padding:clamp(32px,6vw,56px) 0 clamp(48px,8vw,72px)
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px 22px;
    margin-top:34px
}
.hero-actions>p{
    font-size:1.05rem;
    font-weight:600;
    color:rgb(244 246 251/68%)
}
.primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:62px;
    padding:0 28px;
    border-radius:999px;
    font-size:1.15rem;
    font-weight:800;
    color:#0a0b10;
    background:linear-gradient(135deg,#fff 0%,#ffe8dc 40%,#ff6b35 100%);
    box-shadow:0 12px 40px rgb(255 107 53/35%),inset 0 1px 0 rgb(255 255 255/65%);
    transition:transform .25s ease,box-shadow .25s ease
}
.primary-button span{
    font-size:1.2rem;
    transition:transform .25s ease
}
.primary-button:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 18px 50px rgb(255 107 53/45%),0 0 0 1px rgb(255 255 255/12%)
}
.primary-button:hover span{transform:translate(3px,-3px)}
.full-button{width:100%}
.product-visual{
    position:relative;
    width:100%;
    max-width:560px;
    justify-self:end;
    border-radius:28px;
    border:1px solid rgb(255 255 255/12%);
    background:linear-gradient(180deg,rgb(255 255 255/8%),rgb(255 255 255/2%)),rgb(8 10 18/88%);
    box-shadow:0 24px 80px rgb(0 0 0/45%),0 0 60px rgb(255 107 53/18%),inset 0 1px 0 rgb(255 255 255/8%);
    overflow:hidden;
    transform:perspective(1100px) rotateY(-3deg) rotateX(1deg);
    transition:transform .15s ease-out
}
.product-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgb(255 107 53/12%),#0000 35%,rgb(124 92 255/12%));
    pointer-events:none
}
.visual-body{padding:22px}
.next-post{display:grid;
    gap:6px;
    padding:20px 22px;
    margin-bottom:18px;
    border-radius:18px;
    background:linear-gradient(135deg,rgb(255 107 53/16%),rgb(124 92 255/12%));
    border:1px solid rgb(255 255 255/10%)
}
.next-post span{
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.14em;
    color:rgb(244 246 251/48%)
}
.next-post strong{
    font-size:clamp(2rem,4vw,2.8rem);
    line-height:1;
    font-weight:800;
    letter-spacing:-.03em
}
.next-post small{
    font-size:1rem;
    font-weight:600;
    color:#00d4aa
}
.timeline{
    display:grid;
    gap:10px
}
.timeline-row{
    display:grid;
    grid-template-columns:72px 1fr auto;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
    background:rgb(255 255 255/3%);
    border:1px solid rgb(255 255 255/6%);
    font-size:1rem
}
.timeline-row time{
    font-weight:700;
    color:rgb(244 246 251/68%)
}
.timeline-row span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600
}
.timeline-row span i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgb(255 255 255/25%)
}
.timeline-row b{
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.08em;
    color:rgb(244 246 251/48%)
}
.timeline-row.done{opacity:.72}
.timeline-row.done b{color:#22f0a8}
.timeline-row.active{
    border-color:rgb(255 107 53/35%);
    background:rgb(255 107 53/8%);
    box-shadow:inset 0 0 0 1px rgb(255 107 53/8%)
}
.timeline-row.active span i{
    background:#ff6b35;
    box-shadow:0 0 14px rgb(255 107 53/45%)
}
.timeline-row.active b{color:#ff6b35}
.proof-strip>div{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:22px 24px;
    border-radius:18px;
    background:linear-gradient(180deg,rgb(255 255 255/6%),rgb(255 255 255/2%));
    border:1px solid rgb(255 255 255/10%);
    backdrop-filter:blur(12px)
}
.proof-strip strong{
    font-size:1.4rem;
    font-weight:800;
    background:linear-gradient(135deg,#ff6b35,#7c5cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:#0000
}
.proof-strip span{
    font-size:1.1rem;
    font-weight:700;
}
.features{padding-bottom:88px}
.section-heading{margin-bottom:34px}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap:18px
}
.feature-card{
    position:relative;
    min-height:260px;
    padding:28px;
    border-radius:28px;
background:linear-gradient(160deg,rgb(255 107 53/14%),rgb(124 92 255/10%)),rgb(12 14 24/72%);
    border:1px solid rgb(255 255 255/10%);
    box-shadow:inset 0 1px 0 rgb(255 255 255/5%);
    overflow:hidden;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease
}
.feature-card::after{
    content:"";
    position:absolute;
    inset:auto -20% -40% auto;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle,rgb(124 92 255/18%),#0000 70%);
    pointer-events:none
}
.feature-card:hover{transform:translateY(-6px);
    border-color:rgb(255 255 255/18%);
    box-shadow:0 24px 60px rgb(0 0 0/35%),0 0 0 1px rgb(255 255 255/4%)}
.feature-card-main{
    border-color:rgb(255 107 53/22%)
}
.card-number{
    display:inline-block;
    margin-bottom:18px;
    font-size:.9rem;
    font-weight:800;
    letter-spacing:.16em;
    color:#00d4aa
}
.feature-card h3{margin-bottom:12px}
.feature-card p{
    font-size:1.05rem;
    line-height:1.7;
    color:rgb(244 246 251/68%)
}
.icon-orbit,.pulse-icon{
    position:relative;
    width:64px;
    height:64px;
    margin-bottom:22px
}
.icon-orbit i,.pulse-icon i{
    position:absolute;
    inset:10px;
    border-radius:18px;
    background:linear-gradient(135deg,#ff6b35,#7c5cff);
    box-shadow:0 10px 30px rgb(124 92 255/35%)
}
.icon-orbit b,.pulse-icon b{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgb(255 255 255/12%);
    animation:spinRing 8s linear infinite
}
.pulse-icon b{animation:pulseRing 2.4s ease-out infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.mini-ui{
    display:grid;
    gap:6px;
    width:fit-content;
    margin-bottom:22px;
    padding:14px 16px;
    border-radius:14px;
    background:rgb(255 255 255/5%);
    border:1px solid rgb(255 255 255/8%)
}
.mini-ui span{
    font-size:.82rem;font-weight:700;letter-spacing:.08em;color:rgb(244 246 251/48%)}
.mini-ui strong{
    font-size:1.6rem;
    font-weight:800
}
.price-wrap{
    padding-bottom:72px
}
.price-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:34px;
    border-radius:36px;
    background:linear-gradient(135deg,rgb(255 107 53/10%),rgb(124 92 255/8%)),rgb(10 12 20/88%);
    border:1px solid rgb(255 255 255/12%);
    box-shadow:0 24px 80px rgb(0 0 0/45%)
}
.price-box{
    padding:28px;
    border-radius:28px;
    background:rgb(255 255 255/4%);
    border:1px solid rgb(255 255 255/10%)
}
.price-line{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px
}
.price-line span{
    font-size:1.1rem;
    font-weight:700;
    color:rgb(244 246 251/68%)
}
.price-line strong{
    font-size:clamp(3rem,6vw,4.2rem);
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em
}
.price-line strong small{
    font-size:.45em;
    margin-right:4px
}
.price-box ul{
    list-style:none;
    margin:0 0 24px;
    padding:0;
    display:grid;
    gap:12px
}
.price-box li{
    position:relative;
    padding-left:28px;
    font-size:1.05rem;
    font-weight:600
}
.price-box li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#00d4aa;
    font-weight:800
}
.price-note{
    display:block;
    margin-top:14px;
    text-align:center;
    font-size:.95rem;
    color:rgb(244 246 251/48%)
}
footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:min(calc(100% - 40px),1180px);
    margin:0 auto 40px;
    padding-top:28px;
    border-top:1px solid rgb(255 255 255/8%)
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px 24px
}
.footer-links a,footer small{
    font-size:.98rem;
    color:rgb(244 246 251/48%);
    transition:color .2s ease
}
.footer-links a:hover{color:#f4f6fb}
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)
}
.reveal.visible{
    opacity:1;
    transform:translateY(0)
}
.price-copy p:last-child{
    margin-top:16px;
    max-width:28ch;
    font-size:1.15rem;
    color:rgb(244 246 251/68%)
}
.feature-card:nth-child(2).visible{transition-delay:.08s}
.feature-card:nth-child(3).visible{transition-delay:.16s}
.section-shell{
    width:min(calc(100% - 240px),1180px);
    margin-inline:auto
}
.proof-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:16px;
    width:min(calc(100% - 180px),1180px);
    margin:0 auto 72px
}
@media (max-width:1080px){
    .section-shell,.proof-strip,footer{width:min(calc(100% - 140px),1180px)}
    .hero-actions{
        flex-direction:column;
        align-items:stretch
    }
    .hero-actions>p{text-align:center}
    .mobile-break{display:none}
    .hero{
        grid-template-columns:1fr;
        gap:32px
    }
    .hero-copy h1{
        font-size:clamp(3.6rem,12vw,5rem);
        letter-spacing:-.05em
    }
    .hero-copy .lead{
        max-width:none;
        font-size:clamp(1.3rem,4.2vw,1.65rem)
    }
    .product-visual{
        max-width:640px;
        justify-self:stretch;
        margin-inline:auto;
    }
    .price-card{grid-template-columns:1fr}
    .feature-card-main{min-height:auto}
}
@media (max-width:960px){
    .section-shell,.proof-strip,footer{width:min(calc(100% - 120px),1180px)}
}
@media (max-width:840px){
    .mobile-break{display:block}
    .section-shell,.proof-strip,footer{width:min(calc(100% - 90px),1180px)}
}
@media (max-width:720px){
    body{font-size:17px}
    .hero-copy h1{font-size:clamp(3.8rem,13.5vw,4.8rem)}
    .hero-copy .lead{font-size:clamp(1.35rem,4.8vw,1.7rem)}
    .eyebrow{font-size:1rem}
    .site-header{padding-inline:16px}
    .section-shell,.proof-strip,footer{width:min(calc(100% - 60px),1180px)}
    .primary-button{width:100%}
    .visual-body{padding:16px}
    .timeline-row{
        grid-template-columns:58px minmax(0,1fr) auto;
        gap:8px;
        padding:12px;
        font-size:.92rem
    }
    .timeline-row span{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .price-card{padding:22px}
    .price-box{padding:20px}
    footer{
        flex-direction:column;
        align-items:flex-start
    }
}
@media (max-width:600px){
    .section-shell,.proof-strip,footer{width:min(calc(100% - 40px),1180px)}
}
@media (max-width:1080px),(pointer:coarse){.product-visual{transform:none !important}}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important
    }
    .reveal{
        opacity:1;
        transform:none
    }
    .product-visual{transform:none !important}
}