/* ============================================================
   WEB代行ページ専用スタイル — Enhanced Design
   ============================================================ */

/* --- カラー変数 --- */
:root {
  --w-dark:    #0f3c80;
  --w-dark2:   #0a2d6e;
  --w-accent:  #ffed1a;
  --w-accent2: #f5dc00;
  --w-blue:    #1a4fa0;
  --w-bg:      #f4f6fb;
  --w-white:   #ffffff;
  --w-text:    #2d3748;
  --w-muted:   #718096;
  --w-border:  #e2e8f0;
  --w-shadow:  0 4px 24px rgba(15,60,128,.10);
  --w-shadow-lg: 0 12px 48px rgba(15,60,128,.18);
}

/* ============================================================
   01. ヒーローセクション
   ============================================================ */
.web-hero {
  background: linear-gradient(135deg, var(--w-dark2) 0%, var(--w-dark) 55%, var(--w-blue) 100%);
  position: relative;
  overflow: hidden;
  /* メインテーマ #web-agent の margin/padding/max-width/border-radius を上書き */
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.web-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 75% 50%, rgba(255,255,255,.04) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 10% 80%, rgba(255,237,26,.08) 0%, transparent 60%);
  pointer-events: none;
}

.web-hero-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 72px;
  padding-bottom: 72px;
  position: relative;
  z-index: 1;
}

.web-hero-content {
  flex: 1;
  min-width: 0;
}

.web-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--w-accent);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.web-hero-eyebrow span { color: rgba(255,255,255,.25); }

.web-hero-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 24px;
}

.web-hero-lead {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,.72);
  margin: 0 0 32px;
  max-width: 520px;
}

.web-hero-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: rgba(255,237,26,.08);
  border: 1px solid rgba(255,237,26,.28);
  border-radius: 12px;
  padding: 16px 24px;
  margin: 0 0 28px;
}
.web-hero-price-label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  align-self: center;
}
.web-hero-price-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--w-accent);
  line-height: 1;
}
.web-hero-price-num small {
  font-size: 18px;
  font-weight: 400;
}
.web-hero-price-note {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  align-self: center;
  line-height: 1.4;
}

.web-hero-stats {
  display: flex;
  gap: 0;
  margin: 0 0 36px;
}
.web-hero-stat {
  padding: 0 28px 0 0;
  margin-right: 28px;
  border-right: 1px solid rgba(255,255,255,.14);
}
.web-hero-stat:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.web-hero-stat-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.web-hero-stat-num small {
  font-size: 13px;
  font-weight: 400;
  color: var(--w-accent);
}
.web-hero-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
  letter-spacing: .04em;
}

.web-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--w-accent);
  color: var(--w-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,237,26,.38);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.web-hero-cta:hover {
  background: var(--w-accent2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,237,26,.52);
  color: var(--w-dark);
  text-decoration: none;
}

.web-hero-visual {
  flex: 0 0 420px;
  max-width: 420px;
}
.web-hero-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  aspect-ratio: 4 / 3;
}
.web-hero-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid rgba(255,237,26,.18);
  pointer-events: none;
}
.web-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   02. セクション共通
   ============================================================ */
.web-section-inner {
  padding: 80px 0;
}

.web-section-heading {
  text-align: center;
  margin-bottom: 48px;
}

/* ============================================================
   03. 課題セクション
   ============================================================ */
.web-problems {
  background: var(--w-dark);
  padding: 80px 0;
}

.web-problems .section-title {
  color: #fff;
}
.web-problems .section-title-bar {
  background: var(--w-accent);
}

.web-problem-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.web-problem-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, background .25s ease;
}
.web-problem-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.09);
}
.web-problem-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--w-accent), var(--w-accent2));
}

.web-problem-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--w-accent2);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.web-problem-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
}

.web-problem-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.5;
}

.web-problem-text {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.65);
  margin: 0;
}

/* ============================================================
   04. 解決策セクション
   ============================================================ */
.web-solution {
  background: var(--w-bg);
  padding: 80px 0;
}

.web-solution-lead {
  text-align: center;
  font-size: 17px;
  line-height: 1.9;
  color: var(--w-text);
  margin: 0 auto 48px;
  max-width: 680px;
}
.web-solution-lead strong {
  color: var(--w-dark);
  font-weight: 700;
}

.web-solution-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.web-solution-item {
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
}
.web-solution-item--bad {
  background: #fff;
  border: 1px solid var(--w-border);
}
.web-solution-item--good {
  background: var(--w-dark);
  border: none;
  box-shadow: var(--w-shadow-lg);
}

.web-solution-item-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid;
  display: flex;
  align-items: center;
  gap: 10px;
}
.web-solution-item--bad  .web-solution-item-title { color: var(--w-muted); border-color: var(--w-border); }
.web-solution-item--good .web-solution-item-title { color: #fff; border-color: rgba(255,255,255,.15); }

.web-solution-item-title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.web-solution-item--bad  .web-solution-item-title::before { background: #d1d5db; }
.web-solution-item--good .web-solution-item-title::before { background: var(--w-accent); }

.web-solution-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.web-solution-item li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 12px;
  padding-left: 22px;
  position: relative;
}
.web-solution-item--bad li { color: var(--w-muted); }
.web-solution-item--bad li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #d1d5db;
  font-size: 12px;
}
.web-solution-item--good li { color: rgba(255,255,255,.85); }
.web-solution-item--good li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--w-accent2);
  font-weight: 700;
}

/* ============================================================
   05. サービスラインナップ
   ============================================================ */
.web-lineup {
  background: var(--w-white);
  padding: 80px 0;
}

.web-lineup-lead {
  text-align: center;
  font-size: 15px;
  color: var(--w-muted);
  margin: 0 0 48px;
}

.web-lineup-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.web-lineup-item {
  background: var(--w-bg);
  border-radius: 12px;
  padding: 24px 16px 20px;
  text-align: center;
  border: 1px solid transparent;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.web-lineup-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--w-accent), var(--w-accent2));
  transform: scaleX(0);
  transition: transform .25s ease;
}
.web-lineup-item:hover {
  border-color: var(--w-accent2);
  background: var(--w-white);
  transform: translateY(-3px);
  box-shadow: var(--w-shadow);
}
.web-lineup-item:hover::before {
  transform: scaleX(1);
}

.web-lineup-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--w-dark);
  margin: 0 0 8px;
  line-height: 1.4;
}
.web-lineup-item p {
  font-size: 11px;
  color: var(--w-muted);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   06. 選ばれる理由
   ============================================================ */
.web-reasons {
  background: var(--w-bg);
  padding: 80px 0;
}

.web-reasons .web-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.web-reasons .card {
  background: var(--w-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--w-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  border: none;
}
.web-reasons .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--w-shadow-lg);
}

.web-reasons .card-thumb {
  height: 200px;
  overflow: hidden;
}
.web-reasons .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.web-reasons .card:hover .card-thumb img {
  transform: scale(1.05);
}

.web-reasons .card-title.card-title-service {
  font-size: 16px;
  font-weight: 700;
  color: var(--w-dark);
  padding: 20px 20px 8px;
  margin: 0;
  border-left: 4px solid var(--w-accent);
}

.web-reasons .card-text {
  font-size: 13px;
  color: var(--w-muted);
  line-height: 1.8;
  padding: 0 20px 24px;
  margin: 0;
}

/* ============================================================
   07. AI顧問
   ============================================================ */
.web-ai {
  background: linear-gradient(135deg, #081f45 0%, var(--w-dark2) 50%, var(--w-dark) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.web-ai::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,60,128,.35) 0%, transparent 70%);
  pointer-events: none;
}

.web-ai .section-title { color: #fff; }
.web-ai .section-title-bar { background: var(--w-accent); }

.web-ai-lead {
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,.75);
  margin: 0 0 48px;
}

.web-ai-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.web-ai-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 32px 28px;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.web-ai-card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,237,26,.5);
  transform: translateY(-4px);
}

.web-ai-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.web-ai-card p {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   08. 成果事例
   ============================================================ */
.web-cases {
  background: var(--w-white);
  padding: 80px 0;
}

.web-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.web-case-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--w-shadow);
  border: 1px solid var(--w-border);
  display: flex;
  flex-direction: column;
}

.web-case-card-header {
  background: var(--w-dark);
  padding: 20px 28px;
  position: relative;
}
.web-case-card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28px;
  width: 40px;
  height: 3px;
  background: var(--w-accent);
}

.web-case-company {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.web-case-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.web-case-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 16px 0 10px;
}
.web-case-label:first-child { margin-top: 0; }
.before-label    { background: #f1f5f9; color: #64748b; }
.solution-label  { background: var(--w-dark); color: #fff; }

.web-case-list {
  margin: 0 0 4px;
  padding: 0 0 0 18px;
}
.web-case-list li {
  font-size: 13px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 4px;
}

.web-case-results {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--w-border);
  margin-top: auto;
}

.web-case-result {
  background: linear-gradient(135deg, var(--w-dark) 0%, var(--w-dark2) 100%);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
  flex: 1;
  min-width: 90px;
}
.web-case-result-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--w-accent2);
  line-height: 1.2;
}
.web-case-result-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  line-height: 1.4;
}

/* ============================================================
   09. サービス詳細
   ============================================================ */
.web-service-detail {
  background: var(--w-bg);
  padding: 80px 0;
}

.web-service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.web-service-detail-item {
  background: var(--w-white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--w-shadow);
  position: relative;
  overflow: hidden;
  border-top: 4px solid transparent;
  background-clip: padding-box;
}
.web-service-detail-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--w-accent), var(--w-blue));
}

.web-service-detail-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--w-dark);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  background: linear-gradient(135deg, var(--w-accent), var(--w-accent2));
  color: var(--w-dark);
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.web-service-detail-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.web-service-detail-item li {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.web-service-detail-item li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--w-accent);
}

/* ============================================================
   10. 料金
   ============================================================ */
.web-pricing {
  background: var(--w-dark);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.web-pricing::before {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.web-pricing::after {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

.web-pricing .section-title { color: #fff; }
.web-pricing .section-title-bar { background: var(--w-accent); }

.web-pricing-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  padding: 56px 48px;
  text-align: center;
  max-width: 560px;
  margin: 40px auto 0;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
}

.web-pricing-label {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.web-pricing-price {
  font-size: 64px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin: 0 0 8px;
}
.web-pricing-price span {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255,255,255,.8);
}
.web-pricing-note {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin: 0 0 32px;
}

.web-pricing-campaign {
  background: rgba(232,100,26,.15);
  border: 1px solid rgba(232,100,26,.4);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.web-pricing-campaign-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--w-accent2);
  margin: 0 0 8px;
}
.web-pricing-campaign p {
  font-size: 16px;
  color: #fff;
  margin: 0;
  font-weight: 500;
}
.web-pricing-campaign strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--w-accent2);
}

.web-pricing-detail {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: 0;
}

/* ============================================================
   11. 導入フロー
   ============================================================ */
.web-flow {
  background: var(--w-bg);
  padding: 80px 0;
}

.web-flow-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative !important;
  margin-top: 48px;
  gap: 0;
}

/* コンテナ線: 5等分の中心(10%) から 最後の中心(90%) まで */
.web-flow-steps::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 23px !important;          /* 円の半径(24px) - 線の半分(1px) */
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--w-accent), var(--w-blue)) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* step の ::before / ::after はすべて無効化 */
.web-flow-step::before,
.web-flow-step::after,
.web-flow-step:not(:first-child)::before,
.web-flow-step:not(:last-child)::after {
  display: none !important;
}

.web-flow-step {
  text-align: center;
  flex: 1 1 0;
  padding: 0 8px;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.web-flow-step-num {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--w-accent), var(--w-accent2));
  color: var(--w-dark);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 16px rgba(255,237,26,.4);
  position: relative;
  z-index: 2;
}

.web-flow-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--w-dark);
  margin: 0 0 6px;
}
.web-flow-step p {
  font-size: 11px;
  color: var(--w-muted);
  margin: 0;
  line-height: 1.5;
}

.web-flow-arrow { display: none !important; }

/* ============================================================
   12. CTA
   ============================================================ */
.web-cta {
  background: linear-gradient(135deg, #061529 0%, var(--w-dark2) 50%, var(--w-dark) 100%);
  padding: 96px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.web-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(15,60,128,.2) 0%, transparent 70%);
  pointer-events: none;
}

.web-cta-title {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.web-cta-text {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.9;
  margin: 0 0 40px;
  position: relative;
  z-index: 1;
}
.web-cta .btn-secondary {
  position: relative;
  z-index: 1;
  background: var(--w-accent);
  border-color: var(--w-accent);
  color: var(--w-dark);
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 1024px) {
  .web-hero-inner  { gap: 40px; }
  .web-hero-visual { flex: 0 0 360px; max-width: 360px; }
  .web-hero-title  { font-size: 30px; }
  .web-lineup-grid { grid-template-columns: repeat(3, 1fr); }
  .web-problem-cards { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
  .web-hero-inner {
    flex-direction: column;
    gap: 36px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .web-hero-visual { width: 100%; max-width: 100%; flex: none; }
  .web-hero-title  { font-size: 24px; }
  .web-hero-lead   { max-width: 100%; }

  .web-problems,
  .web-solution,
  .web-lineup,
  .web-reasons,
  .web-ai,
  .web-cases,
  .web-service-detail,
  .web-pricing,
  .web-flow,
  .web-cta { padding: 56px 0; }

  .web-problem-cards    { grid-template-columns: 1fr; }
  .web-solution-compare { grid-template-columns: 1fr; }
  .web-lineup-grid      { grid-template-columns: repeat(2, 1fr); }
  .web-reasons .web-cards { grid-template-columns: 1fr; }
  .web-ai-cards          { grid-template-columns: 1fr; }
  .web-case-grid         { grid-template-columns: 1fr; }
  .web-service-detail-grid { grid-template-columns: 1fr; }

  .web-flow-steps::before { display: none; }
  .web-flow-steps {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .web-flow-step { max-width: 260px; }
  .web-flow-step-num { margin-bottom: 12px; }

  .web-pricing-box  { padding: 36px 24px; }
  .web-pricing-price { font-size: 48px; }
  .web-cta-title    { font-size: 22px; }
}

@media screen and (max-width: 480px) {
  .web-hero-title  { font-size: 21px; }
  .web-hero-price-num { font-size: 30px; }
  .web-hero-stats  { gap: 0; }
  .web-hero-stat   { padding: 0 16px 0 0; margin-right: 16px; }
  .web-lineup-grid { grid-template-columns: 1fr; }
}