/* ================================================
   AI漫画Studio — ホームページ CSS
   テーマ: ダークヒーロー + ホワイトコンテンツ
   ================================================ */

/* === RESET & VARIABLES === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0e1117;
    --bg-surface:#161b2e;
    --bg-elevated:#1c2035;
    --bg-white:#fafbff;
    --bg-white2:#f0f2f8;
    --surface:#fff;
    --surface-border:rgba(0,0,0,.08);
    --text:#e8e6f0;
    --text-secondary:#a09cb0;
    --text-dim:#6b6880;
    --text-dark:#1a1a2e;
    --text-dark2:#555;
    --text-dark3:#888;
    --accent:#6c5ce7;
    --accent2:#5a4bd1;
    --accent-bright:#b4a6ff;
    --accent-light:rgba(108,92,231,.08);
    --accent-glow:rgba(108,92,231,.15);
    --cyan:#00b894;
    --pink:#e84393;
    --grad1:linear-gradient(135deg,#6c5ce7,#00b894);
    --grad2:linear-gradient(135deg,#6c5ce7,#e84393);
    --radius:16px;
    --radius-sm:10px;
    --radius-lg:12px;
    --radius-xl:16px;
    --shadow:0 2px 20px rgba(0,0,0,.06);
    --shadow-lg:0 8px 40px rgba(0,0,0,.08);
}

html{scroll-behavior:smooth;font-size:16px}
body{
    font-family:'Noto Sans JP','Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.8;
    overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none;transition:color .3s}
a:hover{color:var(--accent2)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* === NAV（AI漫画Studioの実際のアプリUIと完全に一致させる） === */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    height:44px; /* アプリの --topbar-h */
    display:flex;align-items:center;
    background:#1c2035; /* アプリの --bg-topbar */
    border-bottom:1px solid rgba(255,255,255,.06); /* アプリの --border */
}
.nav-logo-container{
    width:56px; /* アプリの --sidebar-w */
    height:100%;
    display:flex;align-items:center;justify-content:center;
    background:#131728; /* アプリの --bg-sidebar */
    border-right:1px solid rgba(255,255,255,.06); /* アプリの --border */
    flex-shrink:0;
}
.nav-logo-mark{
    width:36px;height:36px;
    cursor:pointer;
    transition:transform .2s ease;
    flex-shrink:0;
}
.nav-logo-mark:hover{
    transform:scale(1.08);
}
.nav-logo-mark img{
    width:100%;height:100%;
    border-radius:6px;
}
.nav-content{
    display:flex;align-items:center;justify-content:space-between;
    flex:1;
    padding:0 24px;
}
.nav-brand{
    font-size:0.95rem;font-weight:700;color:var(--text);
}
.nav-links{
    display:flex;align-items:center;gap:4px;
    margin:0 auto;list-style:none;padding:0;
}
.nav-link-btn{
    color:var(--text-secondary);font-size:0.875rem;font-weight:500;
    cursor:pointer;padding:8px 12px;border-radius:6px;
    transition:color .2s,background .2s;
    background:none;border:none;font-family:inherit;line-height:1;display:block;
}
.nav-link-btn:hover{
    color:var(--text);background:rgb(255 255 255 / 5%);
}

.nav-actions{
    display:flex;align-items:center;gap:12px;
    flex-shrink:0;
}
.nav-btn-outline{
    display:inline-flex;align-items:center;justify-content:center;
    padding:6px 16px;
    color:#b3a6ff;
    border:1px solid var(--accent);
    border-radius:6px;
    font-size:0.85rem;font-weight:600;
    text-decoration:none;background:transparent;
    transition:all .2s ease;white-space:nowrap;
}
.nav-btn-outline:hover{
    background:var(--accent-a10);
    border-color:var(--accent-bright);
    color:#fff;
}

/* === BUTTONS (Legacy fallbacks for hero) === */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 36px;border:none;border-radius:60px;
    font-size:1rem;font-weight:700;cursor:pointer;
    transition:all .3s ease;text-decoration:none;
}
.btn-primary{
    background:linear-gradient(135deg,var(--accent),#9b8afb);color:#fff;
    box-shadow:0 4px 28px rgba(108,92,231,.45);
}
.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 36px rgba(108,92,231,.6);
    color:#fff;
}
.btn-outline{
    background:transparent;color:var(--text-secondary);
    border:1px solid rgba(255,255,255,.12);
}
.btn-outline:hover{
    color:var(--text);border-color:rgba(255,255,255,.25);
}
.btn-sm{padding:8px 20px;font-size:.85rem}

/* === HERO（ダークテーマ） === */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;padding:80px 32px 64px;
}
@media (orientation: portrait) {
    .hero {
        min-height: 56vw;
    }
}
.hero-bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 80% 55% at 50% 15%,rgba(108,92,231,.20) 0%,transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 75%,rgba(155,138,251,.10) 0%,transparent 60%),
        radial-gradient(ellipse 30% 30% at 10% 60%,rgba(108,92,231,.07) 0%,transparent 60%),
        var(--bg);
    z-index:0;
}
.hero-bg::after{
    content:'';position:absolute;inset:0;
    background:url('images/hero-bg.png') 30% top/40% auto no-repeat;
    opacity:.30;
}
.hero-grid-overlay{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(108,92,231,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(108,92,231,.035) 1px,transparent 1px);
    background-size:64px 64px;z-index:0;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 0%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 0%,transparent 100%);
}
.hero-inner{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
    max-width:1200px;width:100%;margin:0 auto;
}
.hero-text{display:flex;flex-direction:column;gap:20px}
.hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;background:rgba(108,92,231,.10);
    border:1px solid rgba(108,92,231,.30);border-radius:100px;
    font-size:.75rem;color:var(--accent-bright);font-weight:700;
    width:fit-content;letter-spacing:.06em;text-transform:uppercase;
}
.hero-badge-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--accent-bright);
    box-shadow:0 0 6px var(--accent-bright);
    animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero h1{
    font-size:clamp(2rem,4.5vw,3.4rem);font-weight:900;
    line-height:1.18;letter-spacing:-.025em;color:var(--text);margin:0;
}
.hero-title-accent{
    display:block;
    background:linear-gradient(135deg,var(--accent-bright) 10%,#c4b5fd 90%);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;background-clip:text;
}
.hero p{
    font-size:1.05rem;color:var(--text-secondary);
    line-height:1.75;max-width:480px;margin:0;
}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.hero-stats{
    display:flex;gap:32px;padding-top:12px;
    border-top:1px solid rgba(255,255,255,.06);margin-top:8px;
}
.hero-stat{display:flex;flex-direction:column;gap:2px}
.hero-stat-value{font-size:1.3rem;font-weight:800;color:var(--accent-bright)}
.hero-stat-label{font-size:.75rem;color:var(--text-dim)}

/* Hero Screenshot */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-screenshot{
    width:100%;max-width:448px;
    border-radius:var(--radius-xl);
    border:1px solid rgba(108,92,231,.20);
    box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(108,92,231,.12);
}
.floating-label{font-size:.7rem;color:var(--text-dim)}
.floating-value{font-size:.85rem;color:var(--text);font-weight:600}

/* === SCREENSHOT LABELS（HUD サイバースタイル） === */
.screenshot-wrap{
    position:relative;
    display:inline-block;
}
.ss-label{
    position:absolute;
    padding:8px 32px 8px 16px;
    color:#fff;
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:0.05em;
    white-space:nowrap;
    pointer-events:none;
    z-index:10;
}
.ss-label::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    transform-origin:bottom left;
    transform:skewX(-35deg);
    border-left:1px solid rgba(138,115,255,1);
    border-bottom:3px solid rgba(138,115,255,1);
    background:linear-gradient(90deg,rgba(138,115,255,0.4) 0%,transparent 100%);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
@media(max-width:900px){
    .ss-label{font-size:0.65rem;padding:6px 12px}
}

/* === CROSSOVER VISUAL（セクションまたぎ） === */
.crossover-wrap{
    position:relative;
    z-index:2;
    pointer-events:none;
    height:0;
    overflow:visible;
}
.crossover-img{
    position:absolute;
    left:3%;
    top:-180px;
    width:22%;
    max-width:320px;
    opacity:1;
    border-radius:12px;
    box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05);
}
@media(max-width:900px){
    .crossover-img{display:none}
}

/* ========================================
   WHITE CONTENT SECTIONS（ヒーロー以下）
   ======================================== */
.section{padding:100px 0}
.section-alt{background:transparent}
.section-dark{
    background:var(--bg);color:var(--text);
}
.section-label-dark{
    display:inline-block;padding:6px 18px;border-radius:20px;
    background:rgba(108,92,231,.12);color:var(--accent-bright);
    font-size:.8rem;font-weight:700;letter-spacing:.05em;
    margin-bottom:16px;border:1px solid rgba(108,92,231,.25);
}
.section-title-dark{
    font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;
    line-height:1.3;margin-bottom:16px;color:var(--text);
}
.section-sub-dark{
    color:var(--text-secondary);font-size:1.05rem;
    max-width:640px;margin-bottom:48px;margin-left:auto;margin-right:auto;
}
.section-dark .showcase-points li::before{color:var(--accent-bright)}
.section-dark .showcase-img{border-color:rgba(108,92,231,.2);box-shadow:0 8px 40px rgba(0,0,0,.4)}

/* === TRUTH（もう一つの真実）GRID === */
.truth-grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:16px;margin-top:8px;
}
.truth-grid img{
    width:100%;aspect-ratio:16/9;object-fit:cover;
    border-radius:var(--radius);
    box-shadow:0 8px 40px rgba(0,0,0,0.4);border:1px solid rgba(168,85,247,0.3);
    transition:transform .3s ease;
}
.truth-grid img:hover{transform:scale(1.03)}
.truth-caption{margin-top:32px}
.truth-caption p{
    color:var(--text-secondary);font-size:1.05rem;line-height:1.8;
}

/* === MONETIZE GRID === */
.monetize-grid{
    display:flex;gap:32px;
    margin-top:40px;align-items:stretch;
}
.monetize-card{
    background:rgba(255,255,255,0.05);border-radius:var(--radius-lg);padding:24px;
    backdrop-filter:blur(12px);
    box-shadow:0 4px 20px rgba(0,0,0,0.2);border:1px solid rgba(168,85,247,0.3);
    transition:transform .3s ease, border-color .3s ease;
    flex:1;min-width:0;
}
.monetize-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(168,85,247,0.2); border-color:rgba(168,85,247,0.6);}
.monetize-card img{
    width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius);margin-bottom:24px;
    border:1px solid rgba(168,85,247,0.3);
}
.monetize-card h3{
    font-size:1.2rem;font-weight:900;margin-bottom:16px;color:var(--text);line-height:1.4;letter-spacing:-.02em;
}
.monetize-card p{
    color:var(--text-secondary);font-size:1.05rem;line-height:1.75;
}
@media(max-width:768px){
    .monetize-grid{flex-direction:column}
}
/* ── 統一テキストシステム ── */
.section-label{
    display:inline-block;padding:8px 22px;border-radius:24px;
    background:rgba(255,255,255,0.05);color:var(--accent-bright);
    backdrop-filter:blur(8px);border:1px solid rgba(168,85,247,0.3);
    font-size:.9rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:20px;
}
.section-title{
    font-size:clamp(1.75rem,3.5vw,2.4rem);font-weight:900;
    line-height:1.3;margin-bottom:20px;color:#fff;
    letter-spacing:-.02em;
}
.section-sub{
    color:var(--text-secondary);font-size:1.15rem;
    line-height:1.8;
    max-width:640px;margin-bottom:48px;
}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.grad-text{
    background:var(--grad1);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

/* === FADE IN === */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* === PILLARS === */
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pillar-card{
    position:relative;
    padding:40px 32px 36px;
    border-radius:16px;
    background:linear-gradient(145deg,#1c2035 0%,#232845 100%);
    border:1px solid rgba(168,85,247,.3);
    box-shadow:0 4px 24px rgba(0,0,0,.25);
    transition:all .4s cubic-bezier(.25,.8,.25,1);
    overflow:hidden;
}
/* 右上の巨大ナンバー装飾 */
.pillar-card::after{
    content:attr(data-num);
    position:absolute;top:-14px;right:-4px;
    font-size:7rem;font-weight:900;
    line-height:1;letter-spacing:-.06em;
    background:linear-gradient(180deg,rgba(108,92,231,.12) 0%,rgba(108,92,231,.03) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    pointer-events:none;user-select:none;
}
.pillar-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 24px 56px rgba(0,0,0,.35),
        0 0 0 1px rgba(108,92,231,.25),
        0 0 48px rgba(108,92,231,.10);
    border-color:rgba(108,92,231,.35);
    background:linear-gradient(145deg,#212643 0%,#2a305a 100%);
}
.pillar-num{display:none}

.pillar-card h3{
    position:relative;z-index:1;
    font-size:1.25rem;font-weight:900;margin-bottom:14px;
    letter-spacing:-.02em;
    color:#e8e4ff;
}
.pillar-card p{
    position:relative;z-index:1;
    color:rgba(255,255,255,.65);font-size:1rem;line-height:1.8;
}
.pillar-link{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:4px;
    margin-top:20px;font-size:.9rem;font-weight:700;
    color:var(--accent-bright);
    transition:gap .25s ease,color .25s ease;
}
.pillar-link:hover{gap:10px;color:#c4b5fd}

/* === SHOWCASE === */
.showcase-item{
    display:grid;grid-template-columns:1fr 1fr;
    gap:48px;align-items:center;padding:48px 0;
}
.showcase-item.reverse{direction:rtl}
.showcase-item.reverse > *{direction:ltr}

/* 魔法陣背景装飾（Pillar Card内） */
.summon-magic-circle-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    aspect-ratio: 1;
    opacity: 0.15;
    animation: mc-spin-card 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* 背景画像装飾（Pillar Card内） */
.bg-texture-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 105%;
    object-fit: contain;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
@keyframes mc-spin-card {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.showcase-img{
    border-radius:var(--radius);overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,0.4);
    border:1px solid rgba(168,85,247,0.3);
    transition:transform .4s ease;
}
.showcase-img:hover{transform:scale(1.02)}
.showcase-img-sm{overflow:visible}
.showcase-item:has(.showcase-img-sm){grid-template-columns:1fr 3fr}
.showcase-img-dual{display:flex!important;gap:12px;overflow:visible}
.showcase-img-dual img{flex:1;min-width:0;border-radius:var(--radius-sm);height:auto}
.dual-images{
    display:flex;gap:24px;margin-top:8px;
}
.dual-images img{
    flex:1;min-width:0;border-radius:var(--radius);
    box-shadow:0 8px 40px rgba(0,0,0,0.4);border:1px solid rgba(168,85,247,0.3);
}
/* === DUAL MEDIA（画像＋動画 横並び） === */
.dual-media{
    display:grid;grid-template-columns:1fr 1fr;gap:28px;
    margin-top:8px;
}
@media(max-width:900px){
    .dual-media{grid-template-columns:1fr}
}
.media-block{}
.media-caption{
    margin-top:16px;
    color:var(--text-secondary);font-size:1.05rem;line-height:1.7;
    text-align:center;
}
.showcase-img img,.showcase-img video{width:100%;height:auto;display:block}
.showcase-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 22px;border-radius:24px;font-size:.9rem;
    font-weight:700;margin-bottom:20px;
    background:rgba(255,255,255,0.05);color:var(--accent-bright);
    backdrop-filter:blur(8px);border:1px solid rgba(168,85,247,0.3);
    border:1px solid rgba(168,85,247,.3);
    letter-spacing:.06em;text-transform:uppercase;
}
.showcase-text h3{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:900;margin-bottom:16px;line-height:1.35;color:#fff;letter-spacing:-.02em}
.showcase-text p{color:var(--text-secondary);font-size:1.05rem;margin-bottom:16px;line-height:1.8}
.showcase-points{list-style:none;display:flex;flex-direction:column;gap:8px}
.showcase-points li{
    display:flex;align-items:flex-start;gap:8px;
    font-size:1.05rem;color:var(--text-secondary);
}
.showcase-points li::before{
    content:'✦';color:var(--accent);font-weight:700;flex-shrink:0;
}

/* === PERSONA FEATURE CARDS === */
.persona-features{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:20px;margin-top:56px;
}
.persona-feature-card{
    padding:32px 24px;border-radius:16px;
    background:linear-gradient(145deg,#1c2035 0%,#232845 100%);
    border:1px solid rgba(168,85,247,.3);
    box-shadow:0 4px 24px rgba(0,0,0,.25);
    transition:all .4s cubic-bezier(.25,.8,.25,1);
}
.persona-feature-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 24px 56px rgba(0,0,0,.35),
        0 0 0 1px rgba(108,92,231,.25),
        0 0 48px rgba(108,92,231,.10);
    border-color:rgba(108,92,231,.35);
}
.persona-feature-card h4{font-size:1.1rem;font-weight:900;color:#e8e4ff;margin-bottom:12px;line-height:1.3;letter-spacing:-.02em}
.persona-feature-card p{color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.75}

/* === EDIT FEATURE CARDS（表情・ポーズ・消去） === */
.edit-features{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.edit-card{
    border-radius:var(--radius);background:rgba(255,255,255,0.05);
    backdrop-filter:blur(12px);
    border:1px solid rgba(168,85,247,0.3);box-shadow:0 4px 20px rgba(0,0,0,0.2);
    overflow:hidden;transition:all .3s ease;
}
.edit-card:hover{
    transform:translateY(-4px);box-shadow:0 16px 40px rgba(168,85,247,0.2);
    border-color:rgba(168,85,247,0.6);
    background:rgba(255,255,255,0.08);
}
.edit-card-img{
    width:100%;aspect-ratio:4/3;overflow:hidden;
    background:rgba(255,255,255,0.1);
}
.edit-card-img img{width:100%;height:100%;object-fit:cover}
.edit-card h4{
    font-size:1rem;font-weight:800;color:#fff;
    padding:20px 24px 8px;letter-spacing:-.01em;
}
.edit-card p{
    color:var(--text-secondary);font-size:1.05rem;line-height:1.75;
    padding:0 24px 24px;
}

/* === WORKFLOW === */
.workflow-card{
    background:linear-gradient(145deg,#0f1120 0%,#1a1e38 100%);
    border:1px solid rgba(108,92,231,.12);
    border-radius:20px;
    padding:56px 48px;
    box-shadow:0 8px 40px rgba(0,0,0,.35);
    max-width:960px;margin:0 auto;
}
.workflow-timeline{
    display:flex;align-items:flex-start;
}
.workflow-step{
    flex:1;text-align:center;position:relative;z-index:1;
}
/* 接続ライン */
.step-line{
    width:80px;flex-shrink:0;
    height:2px;
    margin-top:30px;
    border-radius:2px;
}
.step-line-1{
    background:linear-gradient(90deg,#22d3ee,#8b5cf6);
}
.step-line-2{
    background:linear-gradient(90deg,#8b5cf6,#ec4899);
}
/* ノード丸 */
.step-node{
    width:62px;height:62px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;
    border:3px solid;
    transition:box-shadow .4s ease;
}
.step-node-1{
    border-color:#22d3ee;
    background:rgba(34,211,238,.08);
    box-shadow:0 0 24px rgba(34,211,238,.15);
}
.step-node-2{
    border-color:#8b5cf6;
    background:rgba(139,92,246,.08);
    box-shadow:0 0 24px rgba(139,92,246,.15);
}
.step-node-3{
    border-color:#ec4899;
    background:rgba(236,72,153,.08);
    box-shadow:0 0 24px rgba(236,72,153,.15);
}
.step-number{
    font-size:1.5rem;font-weight:900;
}
.step-node-1 .step-number{color:#22d3ee}
.step-node-2 .step-number{color:#8b5cf6}
.step-node-3 .step-number{color:#ec4899}

.workflow-step:hover .step-node-1{box-shadow:0 0 40px rgba(34,211,238,.30)}
.workflow-step:hover .step-node-2{box-shadow:0 0 40px rgba(139,92,246,.30)}
.workflow-step:hover .step-node-3{box-shadow:0 0 40px rgba(236,72,153,.30)}

.workflow-step h4{font-size:1.15rem;font-weight:900;margin-bottom:10px;color:#e8e4ff;letter-spacing:-.02em}
.workflow-step p{color:rgba(255,255,255,.55);font-size:1rem;line-height:1.8;max-width:220px;margin:0 auto}

/* === COMMUNITY === */
.community-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.community-card{
    padding:36px 32px;border-radius:16px;
    background:linear-gradient(145deg,#1c2035 0%,#232845 100%);
    border:1px solid rgba(168,85,247,.3);
    box-shadow:0 4px 24px rgba(0,0,0,.25);
    transition:all .4s cubic-bezier(.25,.8,.25,1);
}
.community-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 24px 56px rgba(0,0,0,.35),
        0 0 0 1px rgba(108,92,231,.25),
        0 0 48px rgba(108,92,231,.10);
    border-color:rgba(108,92,231,.35);
}
.community-card h3{font-size:1.15rem;font-weight:900;margin-bottom:12px;color:#e8e4ff;letter-spacing:-.02em}
.community-card p{color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.75}

/* === CTA === */
.cta-section{
    padding:80px 0;text-align:center;
    background:transparent;
}
.cta-section h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;margin-bottom:16px;color:#fff}
.cta-section p{color:var(--text-secondary);margin-bottom:32px;font-size:1.05rem}

/* === FOOTER === */
.footer{
    padding:40px 0;border-top:1px solid rgba(168,85,247,0.2);
    background:transparent;
}
.footer-inner{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:16px;
}
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--text-dark3);font-size:.85rem}
.footer-links a:hover{color:var(--accent)}
.footer-copy{color:var(--text-dark3);font-size:.85rem}

/* === PRICING SECTION === */
.pricing-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:24px;margin-top:48px;align-items:stretch;
}
.pricing-card{
    background:rgba(28,32,53,0.6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-xl);
    padding:40px 32px;
    color:var(--text);
    transition:transform .3s ease,box-shadow .3s ease;
    position:relative;
    display:flex;flex-direction:column;
    height:100%;
}
.pricing-card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 48px rgba(0,0,0,0.4),0 0 0 1px rgba(108,92,231,0.3);
}

/* 中央: 一番人気専用スタイル */
.pricing-card-popular{
    transform:scale(1.05);
    background:linear-gradient(145deg,rgba(35,40,69,0.8) 0%,rgba(28,32,53,0.8) 100%);
    border:1px solid var(--accent);
    box-shadow:0 12px 48px rgba(108,92,231,0.3),inset 0 0 20px rgba(108,92,231,0.1);
    z-index:1;
}
.pricing-card-popular:hover{
    transform:scale(1.05) translateY(-8px);
    box-shadow:0 20px 60px rgba(108,92,231,0.4),inset 0 0 30px rgba(108,92,231,0.2);
}
.pricing-popular-ribbon{
    position:absolute;
    top:0;left:50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(135deg,var(--accent),var(--pink));
    color:#fff;
    padding:6px 20px;
    border-radius:20px;
    font-size:0.85rem;font-weight:800;
    letter-spacing:0.05em;
    box-shadow:0 4px 12px rgba(232,67,147,0.4);
    white-space:nowrap;
}

.pricing-name{
    font-size:1.3rem;font-weight:800;
    margin-bottom:16px;color:#e8e4ff;text-align:center;
}
.pricing-price{
    font-size:2.8rem;font-weight:900;
    margin-bottom:16px;text-align:center;
    color:#fff;line-height:1.1;
}
.pricing-currency{
    font-size:1rem;font-weight:600;
    color:var(--text-secondary);margin-left:4px;
}
.pricing-strike{
    font-size:1.2rem;color:var(--text-dim);
    text-decoration:line-through;font-weight:600;
}
.pricing-highlight{
    font-size:2.8rem;color:var(--pink);
    text-shadow:0 0 16px rgba(232,67,147,0.4);
}
.pricing-label{
    font-size:0.9rem;font-weight:700;
    color:var(--text-secondary);margin-left:6px;
    vertical-align:middle;
}
.pricing-sub{
    font-size:0.95rem;color:var(--text-secondary);
    text-align:center;margin-bottom:32px;
    line-height:1.6;min-height:48px;
}
.pricing-features{
    list-style:none;margin:0;padding:0;flex-grow:1;
}
.pricing-features li{
    position:relative;padding-left:28px;
    margin-bottom:16px;font-size:0.95rem;
    color:rgba(255,255,255,0.85);line-height:1.6;
}
.pricing-features li::before{
    content:'✅';position:absolute;left:0;top:2px;font-size:0.9rem;
}

/* === ADD-ON SECTION === */
.pricing-addon{
    margin-top:56px;
    background:rgba(28,32,53,0.4);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px dashed rgba(108,92,231,0.5);
    border-radius:var(--radius-xl);
    padding:32px 40px;
    display:flex;justify-content:space-between;
    align-items:center;gap:32px;
    transition:background .3s ease;
}
.pricing-addon:hover{
    background:rgba(28,32,53,0.6);
}
.addon-content{flex:1;}
.addon-title{
    font-size:1.3rem;font-weight:800;
    color:#fff;margin-bottom:8px;
}
.addon-sub{
    font-size:1rem;color:var(--text-secondary);
    margin-bottom:20px;
}
.addon-features{
    list-style:none;margin:0;padding:0;
}
.addon-features li{
    position:relative;padding-left:24px;
    margin-bottom:8px;font-size:0.95rem;
    color:rgba(255,255,255,0.8);
}
.addon-features li::before{
    content:'✅';position:absolute;left:0;top:2px;font-size:0.85rem;
}
.addon-price-col{
    text-align:right;flex-shrink:0;
}
.addon-price{
    font-size:2.4rem;font-weight:900;color:#fff;
}
.addon-warning-wrap{
    display:flex;justify-content:center;margin-top:20px;
}
.addon-warning{
    font-size:0.95rem;font-weight:700;
    color:#ff4757;
    background:rgba(255,71,87,0.1);
    padding:16px 24px;
    border-radius:var(--radius-sm);
    border:1px solid rgba(255,71,87,0.3);
    display:inline-flex;align-items:center;
    gap:8px;
}
.addon-warning::before{
    content:'⚠️';font-size:1.2rem;
}

/* === RESPONSIVE === */
@media(max-width:900px){
    .ss-label{font-size:0.65rem;padding:6px 12px}
    .pillars-grid{grid-template-columns:1fr}
    .showcase-item,.showcase-item.reverse{grid-template-columns:1fr;direction:ltr}
    .persona-features{grid-template-columns:repeat(2,1fr)}
    .edit-features{grid-template-columns:1fr}
    .workflow-timeline{flex-direction:column;gap:24px;align-items:center}
    .step-line{width:2px;height:40px;margin:0 auto}
    .community-grid{grid-template-columns:1fr}
    .nav-links a:not(.btn){display:none}
    .pricing-grid{grid-template-columns:1fr;gap:40px}
    .pricing-card-popular{transform:scale(1)}
    .pricing-card-popular:hover{transform:translateY(-8px)}
    .pricing-addon{flex-direction:column;align-items:flex-start;padding:24px;gap:24px}
    .addon-price-col{text-align:left}
}
@media(max-width:600px){
    .section{padding:64px 0}
    .persona-features{grid-template-columns:1fr}
    .footer-inner{flex-direction:column;text-align:center}
}