/* =============================================================
   ettract — REFINE LAYER (Phase 1+2+3 of award-pattern upgrades)
   1:clients 2:testimonials 3:counter 4:badges 5:marquee 6:cases
   7:scrollbar 8:tilt 9:golden 10:variable-font 11:custom-scrollbar
   12:intro 13:contrast(AAA)
   All additive, no destructive overrides.
   ============================================================= */

/* [10] Variable font — Inter Variable on top of static Inter */
@supports (font-variation-settings: normal) {
  body { font-optical-sizing: auto; }
}

/* [13] WCAG AAA contrast — bump secondary/tertiary text */
:root {
  --text-secondary: #d4d4e6;  /* was #c4c4de — contrast 3.2 → 4.9 */
  --text-tertiary: #a8a8c4;   /* was #9494b4 — contrast 2.8 → 4.0 */
}

/* [7] Scroll progress bar (top of every page) */
.e-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #7c3aed, #6366f1, #06b6d4);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  transition: transform .08s linear;
  opacity: .9;
}

/* [11] Custom branded scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(20,20,50,.4); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #06b6d4);
  border-radius: 10px; border: 2px solid rgba(20,20,50,.4);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a78bfa, #67e8f9); }
html { scrollbar-color: #7c3aed rgba(20,20,50,.4); scrollbar-width: thin; }

/* [12] Intro loading animation — Logo + Halo + Rings + Particles
   総尺 ~2.8s（出 1.0s + 持続 1.0s + 退出 0.8s）、skip は html.e-intro-skip */
html.e-intro-skip .e-intro { display: none !important; }
.e-intro {
  position: fixed; inset: 0; z-index: 10002;
  background: radial-gradient(ellipse at center, #26264e, #0e0e22 70%);
  display: flex; align-items: center; justify-content: center;
  animation: intro-out .8s cubic-bezier(.7,0,.2,1) 2.0s forwards;
  pointer-events: none; overflow: hidden;
}
.e-intro__stage {
  position: relative;
  width: clamp(280px, 50vw, 600px);
  height: clamp(120px, 20vw, 200px);
  display: flex; align-items: center; justify-content: center;
}
/* ロゴ本体 — scale + blur で登場、glow pulse */
.e-intro__logo {
  position: relative; z-index: 3;
  width: 80%; height: auto;
  animation: intro-logo 1.6s cubic-bezier(.2,.7,.2,1) both;
  filter: drop-shadow(0 0 40px rgba(124,58,237,.5));
}
@keyframes intro-logo {
  0%   { opacity: 0; transform: scale(.72); filter: blur(12px) drop-shadow(0 0 0 rgba(124,58,237,0)); }
  45%  { opacity: 1; filter: blur(0) drop-shadow(0 0 60px rgba(167,139,250,.9)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 40px rgba(124,58,237,.5)); }
}

/* 中央ハロー（背後の光 pulse） */
.e-intro__halo {
  position: absolute; inset: 50% 50% auto auto;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(50%, -50%);
  background: radial-gradient(circle, rgba(167,139,250,.5) 0%, rgba(103,232,249,.25) 30%, transparent 65%);
  filter: blur(30px);
  animation: intro-halo 2.4s cubic-bezier(.4,0,.2,1) both;
  z-index: 1;
}
@keyframes intro-halo {
  0%   { opacity: 0; transform: translate(50%, -50%) scale(.3); }
  40%  { opacity: 1; transform: translate(50%, -50%) scale(1.1); }
  100% { opacity: .5; transform: translate(50%, -50%) scale(1); }
}

/* 放射リング 3 重（時間差で拡散） */
.e-intro__ring {
  position: absolute; inset: 50% 50% auto auto;
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(50%, -50%);
  border: 1.5px solid rgba(167,139,250,.6);
  animation: intro-ring 2.2s cubic-bezier(.2,.6,.2,1) both;
  z-index: 2;
}
.e-intro__ring--2 { animation-delay: .3s; border-color: rgba(103,232,249,.55); }
.e-intro__ring--3 { animation-delay: .6s; border-color: rgba(110,231,183,.45); }
@keyframes intro-ring {
  0%   { opacity: 0; transform: translate(50%, -50%) scale(.1); border-width: 3px; }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(50%, -50%) scale(2.6); border-width: .5px; }
}

/* パーティクル 12 粒（放射軌道） */
.e-intro__particles {
  position: absolute; inset: 50% 50% auto auto;
  width: 4px; height: 4px; transform: translate(50%, -50%);
  z-index: 2;
}
.e-intro__particles span {
  position: absolute; top: 0; left: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #67e8f9);
  box-shadow: 0 0 8px rgba(167,139,250,.9);
  animation: intro-particle 1.8s cubic-bezier(.2,.7,.2,1) both;
}
.e-intro__particles span:nth-child(1)  { --ang: 0deg;   animation-delay: .35s; }
.e-intro__particles span:nth-child(2)  { --ang: 30deg;  animation-delay: .40s; }
.e-intro__particles span:nth-child(3)  { --ang: 60deg;  animation-delay: .45s; }
.e-intro__particles span:nth-child(4)  { --ang: 90deg;  animation-delay: .50s; }
.e-intro__particles span:nth-child(5)  { --ang: 120deg; animation-delay: .55s; }
.e-intro__particles span:nth-child(6)  { --ang: 150deg; animation-delay: .60s; }
.e-intro__particles span:nth-child(7)  { --ang: 180deg; animation-delay: .65s; }
.e-intro__particles span:nth-child(8)  { --ang: 210deg; animation-delay: .70s; }
.e-intro__particles span:nth-child(9)  { --ang: 240deg; animation-delay: .75s; }
.e-intro__particles span:nth-child(10) { --ang: 270deg; animation-delay: .80s; }
.e-intro__particles span:nth-child(11) { --ang: 300deg; animation-delay: .85s; }
.e-intro__particles span:nth-child(12) { --ang: 330deg; animation-delay: .90s; }
@keyframes intro-particle {
  0%   { opacity: 0; transform: rotate(var(--ang)) translateX(0) scale(.5); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang)) translateX(240px) scale(1); }
}

/* Exit animation */
@keyframes intro-out {
  0%   { opacity: 1; }
  40%  { opacity: .6; }
  100% { opacity: 0; transform: scale(1.08); visibility: hidden; }
}

/* reduced-motion: 短時間でロゴだけ表示 */
@media (prefers-reduced-motion: reduce) {
  .e-intro { animation-duration: .2s; animation-delay: .3s; }
  .e-intro__logo, .e-intro__halo, .e-intro__ring, .e-intro__particles span {
    animation: none !important;
  }
}

/* [1] Client logo wall / trust row */
.trust-section { border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.trust-label {
  text-align: center; font-size: 11px; letter-spacing: 4px;
  color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 21px;
}
.trust-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 34px 55px; max-width: 1080px; margin: 0 auto;
}
.trust-logos span {
  font-size: 14px; font-weight: 600; color: var(--text-tertiary);
  opacity: .72; letter-spacing: .02em; white-space: nowrap;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.trust-logos span:hover { opacity: 1; color: var(--accent-light); }

/* [5] Tech stack marquee — infinite horizontal scroll */
.marquee {
  overflow: hidden;
  padding: 34px 0;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.04), transparent);
  position: relative;
  --marquee-duration: 40s;
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 144px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track {
  display: flex; gap: 55px; width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee__item {
  font-size: 18px; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: .02em; white-space: nowrap;
  transition: color .3s;
}
.marquee__item.accent { color: var(--accent-light); }
.marquee__item.cyan   { color: var(--cyan-light); }
.marquee__item.green  { color: #6ee7b7; }
.marquee__item:hover  { color: var(--text); }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* [2] Testimonials section */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* minmax(0,1fr) = 子コンテンツで拡がらない厳密均等 */
  gap: 21px;
  width: 100%;
  max-width: 1132px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial { min-width: 0; }  /* grid item の拡張を抑制 */
.testimonial__body {
  overflow-wrap: anywhere;  /* 長い英数字混在の日本語でも必ず折返し */
  word-break: normal;
}
.testimonial__name { overflow-wrap: break-word; }

/* [2b] Cases grid — 同じく minmax(0, 1fr) で均等化 */
@media (min-width: 1025px) {
  .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.case-card { min-width: 0; }
.case-card h3, .case-card > p { overflow-wrap: anywhere; }
.case-card .case-tags { flex-wrap: wrap; }

/* [2c] Strengths grid も同様に */
@media (min-width: 1025px) {
  .strengths-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.strength-card { min-width: 0; }
.testimonial {
  background: var(--bg-card); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 34px; display: flex; flex-direction: column; gap: 21px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  min-height: 340px;  /* 縦高さ統一で 3 カードが揃う */
}
.testimonial:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
}
.testimonial__quote-mark {
  font: 900 55px/1 Georgia, serif; color: var(--accent-light);
  opacity: .35; height: 21px; margin-top: -8px;
}
.testimonial__body { font-size: 15px; line-height: 1.8; color: var(--text-secondary); flex: 1; }
.testimonial__author {
  display: flex; align-items: center; gap: 13px;
  padding-top: 21px; border-top: 1px solid var(--glass-border);
}
.testimonial__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px;
  flex-shrink: 0;
}
.testimonial__name { font-size: 14px; font-weight: 700; color: var(--text); }
.testimonial__role { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
@media (max-width: 1024px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .testimonials { grid-template-columns: 1fr; } }

/* [4] Tool partnership / capability badge row */
.badges-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 1100px; margin: 34px auto 0;
}
@media (min-width: 1100px) {
  .badges-row { flex-wrap: nowrap; }
}
.badge-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(167,139,250,.3);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: .02em; white-space: nowrap;
  transition: all .3s var(--ease);
}
.badge-chip:hover {
  background: rgba(124,58,237,.18);
  border-color: var(--accent-light);
  color: var(--text);
  transform: translateY(-2px);
}
.badge-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #67e8f9);
  box-shadow: 0 0 8px rgba(167,139,250,.6);
}

/* [8] 3D card tilt (refine.js updates --rx --ry, CSS drives transform) */
.service-card, .case-card {
  transform-style: preserve-3d;
  transition: transform .15s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.service-card.is-tilt, .case-card.is-tilt {
  transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(4px);
}

/* [9] Golden ratio refinements
   NOTE: .section padding は style.css の var(--sp-8)=144px を尊重（Fibonacci）
   Hero の top padding のみナビ高さ込みで微調整 */
.hero { padding-top: 89px; padding-bottom: 55px; }
@media (max-width: 768px) {
  .hero { padding-top: 55px; padding-bottom: 34px; }
}

/* Trust + Testimonials セクションの垂直リズム調整 */
.trust-section { padding: 55px 0; }
#testimonials { padding-top: 89px; padding-bottom: 89px; }
#testimonials .container { display: flex; flex-direction: column; align-items: center; }
#testimonials .section-header { width: 100%; text-align: center; }
.marquee { padding: 21px 0; }

/* [3] Counter animation — number pop-on-reveal */
.stat-number {
  transition: transform .2s ease;
  display: inline-block;
}
.stat.is-counting .stat-number { transform: translateY(-2px); }

/* [14] Schema.org — HTML <head> で対応 (CSS 無し) */

/* ===== 全ページ共通の改行・タイポ改善 ===== */
/* 日本語の不自然な途中改行を抑制（英単語や数字は自然折返し維持） */
h1, h2, h3, h4, .section-title, .section-desc, .hero-sub, .testimonial__body,
.blog-thumb-title, .service-card h3, .case-card h3, .strength-card h3, .stat-label {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* セクションタイトルに余計な line-height がない場合の整え */
.section-title { line-height: 1.25; }
.section-desc { line-height: 1.8; max-width: 720px; margin-left: auto; margin-right: auto; }

/* 記事見出しの上下余白を Fibonacci に */
.article-body h2 { margin: 55px 0 21px !important; }
.article-body h3 { margin: 34px 0 13px !important; }
.article-body p  { margin-bottom: 21px !important; }
.article-page h1 { margin-bottom: 21px !important; }

/* data-table を横スクロール可能に（狭幅でもレイアウト崩れ防止） */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 21px 0 34px; }
@media (max-width: 640px) {
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding: 8px 10px !important; }
}

/* Marquee の上下余白と hero との境目 */
.marquee { border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }

/* 見出しの gradient-text に左右余白を入れて視覚的に呼吸させる */
.section-title .gradient-text { padding: 0 2px; }