/* ============================================
   TRUSTEP JAPAN Blog Article — Common Styles
   ============================================ */

/* Hero */
.article-hero{
  padding:120px 24px 60px;
  text-align:center;
  position:relative;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(75,156,251,.10),transparent 70%);
}
.article-breadcrumb{
  display:flex;justify-content:center;gap:8px;
  font-size:12px;letter-spacing:.12em;color:var(--muted);
  margin-bottom:30px;text-transform:uppercase;
}
.article-breadcrumb a{color:var(--gold-a);text-decoration:none;}
.article-breadcrumb a:hover{color:#fff;}
.article-cat-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 16px;border-radius:50px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:rgba(232,199,106,.1);border:1px solid rgba(232,199,106,.35);color:var(--gold-a);
  margin-bottom:24px;
}
.article-cat-pill.cat-ai{background:rgba(75,156,251,.12);color:#95c7ff;border-color:rgba(75,156,251,.35);}
.article-cat-pill.cat-finance{background:rgba(184,150,62,.12);color:#e8c76a;border-color:rgba(184,150,62,.35);}
.article-cat-pill.cat-sales{background:rgba(248,79,101,.1);color:#ff8fa1;border-color:rgba(248,79,101,.35);}
.article-cat-pill.cat-insight{background:rgba(180,140,255,.1);color:#c5acff;border-color:rgba(180,140,255,.35);}
.article-cat-pill.cat-hr{background:rgba(95,212,167,.1);color:#7be3b8;border-color:rgba(95,212,167,.35);}

.article-title{
  font-family:var(--serif);
  font-size:clamp(28px,4.2vw,46px);
  line-height:1.4;font-weight:700;
  color:#fff;margin:0 auto 24px;max-width:900px;
}
.article-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--gold-a),#ffd97a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.article-meta{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);margin-bottom:40px;
}
.article-meta .dot{color:var(--gold-a);}

/* Eyecatch */
.article-eyecatch{
  max-width:1080px;margin:0 auto 60px;padding:0 24px;
}
.article-eyecatch-inner{
  aspect-ratio:21/9;
  border-radius:18px;
  background:
    radial-gradient(ellipse 50% 80% at 30% 50%,rgba(75,156,251,.4),transparent 70%),
    radial-gradient(ellipse 50% 80% at 75% 50%,rgba(232,199,106,.35),transparent 70%),
    linear-gradient(135deg,#0d1f3c,#1a2f5e);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  border:1px solid rgba(120,160,220,.15);
}
.article-eyecatch-inner.theme-ai{
  background:
    radial-gradient(ellipse 60% 80% at 30% 60%,rgba(75,156,251,.5),transparent 70%),
    linear-gradient(135deg,#0c1e44,#173a7a);
}
.article-eyecatch-inner.theme-finance{
  background:
    radial-gradient(ellipse 60% 80% at 75% 50%,rgba(232,199,106,.4),transparent 70%),
    linear-gradient(135deg,#1a2f5e,#0d1f3c);
}
.article-eyecatch-inner.theme-sales{
  background:
    radial-gradient(ellipse 60% 80% at 25% 50%,rgba(248,79,101,.32),transparent 70%),
    linear-gradient(135deg,#0d1f3c,#3a1626);
}
.article-eyecatch-inner.theme-insight{
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,rgba(180,140,255,.25),transparent 70%),
    linear-gradient(135deg,#0d1f3c,#1f1a4a);
}
.article-eyecatch-inner::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(232,199,106,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,199,106,.08) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 70% at center,#000 0%,transparent 70%);
}
.article-eyecatch-text{
  font-family:var(--serif);
  font-size:clamp(28px,4vw,52px);
  font-weight:700;color:#fff;
  letter-spacing:.05em;text-align:center;
  position:relative;z-index:2;
  text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.article-eyecatch-text .em{
  background:linear-gradient(135deg,var(--gold-a),#ffd97a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Body */
.article-body{
  max-width:760px;margin:0 auto;padding:0 24px 80px;
  font-size:16.5px;line-height:2.05;color:#dee5f0;
}
.article-body p{margin:0 0 26px;}
.article-body p strong{color:var(--gold-a);font-weight:600;}
.article-body h2{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,32px);
  font-weight:600;color:#fff;
  margin:64px 0 24px;line-height:1.5;
  padding-left:18px;border-left:4px solid var(--gold-a);
}
.article-body h3{
  font-size:20px;font-weight:600;color:#fff;
  margin:40px 0 18px;line-height:1.5;
  display:flex;align-items:center;gap:12px;
}
.article-body h3::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-a),var(--cyan-a));
  display:inline-block;flex-shrink:0;
}
.article-body ul,.article-body ol{margin:0 0 28px;padding-left:0;}
.article-body ul li,.article-body ol li{
  list-style:none;position:relative;padding:8px 0 8px 30px;
  border-bottom:1px dashed rgba(120,160,220,.12);
}
.article-body ul li::before{
  content:'✓';position:absolute;left:0;top:8px;
  color:var(--gold-a);font-weight:700;
}
.article-body ol{counter-reset:steps;}
.article-body ol li{counter-increment:steps;}
.article-body ol li::before{
  content:counter(steps);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-a),var(--cyan-a));
  color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* Callout */
.callout{
  background:rgba(232,199,106,.06);
  border:1px solid rgba(232,199,106,.25);
  border-left:4px solid var(--gold-a);
  border-radius:12px;
  padding:24px 28px;margin:36px 0;
}
.callout-title{
  font-weight:700;color:var(--gold-a);
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.callout p:last-child{margin-bottom:0;}

/* Fact box */
.fact-box{
  background:linear-gradient(135deg,rgba(13,31,60,.7),rgba(26,47,94,.5));
  border:1px solid rgba(120,160,220,.2);border-radius:16px;
  padding:32px;margin:40px 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px;
}
.fact-box-item{text-align:center;}
.fact-box-num{
  font-family:var(--serif);
  font-size:clamp(20px,2.8vw,32px);
  font-weight:700;
  background:linear-gradient(135deg,var(--gold-a),#ffd97a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1.2;margin-bottom:6px;
}
.fact-box-label{font-size:12px;color:var(--muted);letter-spacing:.06em;line-height:1.6;}
@media (max-width:680px){.fact-box{grid-template-columns:1fr;}}

/* CTA card */
.cta-card{
  background:linear-gradient(135deg,#0d1f3c 0%,#1a2f5e 100%);
  border:1px solid rgba(232,199,106,.35);
  border-radius:20px;padding:40px;
  text-align:center;margin:60px 0;
  position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;top:-50%;right:-30%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,199,106,.18),transparent 70%);
  pointer-events:none;
}
.cta-card-kicker{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-a);font-weight:600;margin-bottom:14px;position:relative;
}
.cta-card-title{
  font-family:var(--serif);
  font-size:clamp(20px,2.4vw,26px);
  color:#fff;font-weight:600;line-height:1.5;margin-bottom:24px;
  position:relative;
}
.cta-card-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 36px;border-radius:50px;
  background:linear-gradient(135deg,var(--gold-a),#ffd97a);
  color:#0a1428;font-weight:700;text-decoration:none;
  font-size:15px;transition:transform .25s,box-shadow .25s;
  position:relative;
  box-shadow:0 10px 30px rgba(232,199,106,.3);
}
.cta-card-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(232,199,106,.45);}

/* Share bar */
.share-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:30px 0;border-top:1px solid rgba(120,160,220,.12);
  border-bottom:1px solid rgba(120,160,220,.12);
  margin:60px 0 40px;
}
.share-bar-label{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
.share-bar a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(120,160,220,.2);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;font-size:14px;
  transition:all .25s ease;
}
.share-bar a:hover{
  background:rgba(75,156,251,.15);border-color:var(--blue-a);transform:translateY(-2px);
}

/* Author */
.author-card{
  display:flex;gap:20px;align-items:center;
  padding:28px;background:rgba(255,255,255,.02);
  border:1px solid rgba(120,160,220,.12);border-radius:16px;
  margin:40px 0;
}
.author-avatar{
  width:60px;height:60px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1a2f5e,#0d1f3c);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-a);font-family:var(--serif);font-size:24px;font-weight:700;
}
.author-name{font-weight:600;color:#fff;margin-bottom:4px;font-size:15px;}
.author-bio{font-size:13px;color:var(--muted);line-height:1.6;}

/* Related Posts */
.related-posts{
  max-width:1080px;margin:0 auto;padding:80px 24px 60px;
  border-top:1px solid rgba(120,160,220,.08);
}
.related-posts-title{
  font-family:var(--serif);font-size:24px;color:#fff;font-weight:600;
  margin-bottom:30px;text-align:center;letter-spacing:.04em;
}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media (max-width:780px){.related-grid{grid-template-columns:1fr;}}
.related-card{
  display:block;padding:24px;border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,160,220,.12);
  text-decoration:none;color:#fff;
  transition:all .3s ease;
}
.related-card:hover{
  background:rgba(75,156,251,.05);
  border-color:rgba(75,156,251,.3);transform:translateY(-3px);
}
.related-cat{
  display:inline-block;padding:4px 10px;border-radius:30px;font-size:10px;
  letter-spacing:.1em;background:rgba(232,199,106,.1);
  color:var(--gold-a);margin-bottom:14px;
}
.related-cat.cat-ai{background:rgba(75,156,251,.12);color:#95c7ff;}
.related-cat.cat-finance{background:rgba(184,150,62,.12);color:#e8c76a;}
.related-cat.cat-sales{background:rgba(248,79,101,.1);color:#ff8fa1;}
.related-cat.cat-insight{background:rgba(180,140,255,.1);color:#c5acff;}
.related-cat.cat-hr{background:rgba(95,212,167,.1);color:#7be3b8;}
.related-title{font-size:14px;line-height:1.6;font-weight:500;}