/* ===== Index3 — System-Driven Landing Page ===== */

/* ===== System Flow Section ===== */
.i3-system { padding: 5rem 0; }
@media (min-width: 1024px) { .i3-system { padding: 7rem 0; } }

.i3-system-grid {
  display: grid; gap: 1.5rem; position: relative;
}
@media (min-width: 640px) { .i3-system-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .i3-system-grid { grid-template-columns: repeat(4, 1fr); } }

.i3-system-card {
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: var(--radius); padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.i3-system-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.i3-system-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--primary); opacity: 0;
  transition: opacity 0.3s ease;
}
.i3-system-card:hover::before { opacity: 1; }

.i3-system-step {
  font-size: 0.6875rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.75rem;
}

.i3-system-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(58,122,92,0.1); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; transition: background 0.2s;
}
.i3-system-card:hover .i3-system-icon { background: rgba(58,122,92,0.18); }
.i3-system-icon svg { width: 24px; height: 24px; color: var(--primary); }

.i3-system-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.i3-system-card p { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.65; }

/* Flow connector arrows (desktop) */
.i3-flow-connector {
  display: none; position: absolute; top: 56px;
  width: 32px; height: 32px; z-index: 2;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 50%; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
  .i3-flow-connector { display: flex; }
  .i3-flow-connector:nth-of-type(1) { left: calc(25% - 16px); }
  .i3-flow-connector:nth-of-type(2) { left: calc(50% - 16px); }
  .i3-flow-connector:nth-of-type(3) { left: calc(75% - 16px); }
}
.i3-flow-connector svg { width: 16px; height: 16px; color: var(--primary); }

/* ===== Audience Segment Section ===== */
.i3-audience { padding: 5rem 0; background: rgba(243,240,234,0.3); }
@media (min-width: 1024px) { .i3-audience { padding: 7rem 0; } }

.i3-audience-cards { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .i3-audience-cards { grid-template-columns: repeat(3, 1fr); } }

.i3-audience-card {
  display: flex; gap: 1.25rem; padding: 1.75rem;
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.i3-audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.i3-audience-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.i3-audience-icon.family { background: rgba(58,122,92,0.1); }
.i3-audience-icon.family svg { color: var(--primary); }
.i3-audience-icon.pro { background: rgba(212,149,106,0.12); }
.i3-audience-icon.pro svg { color: var(--accent); }
.i3-audience-icon.expert { background: rgba(58,122,92,0.1); }
.i3-audience-icon.expert svg { color: var(--primary); }

.i3-audience-icon svg { width: 26px; height: 26px; }

.i3-audience-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.375rem; }
.i3-audience-card > div p { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.65; }

.i3-audience-tags {
  display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem;
}
.i3-audience-tag {
  font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem;
  border-radius: 999px; background: var(--bg-secondary); color: var(--fg-muted);
}

/* ===== Beyond / Scale Section ===== */
.i3-scale { padding: 5rem 0; }
@media (min-width: 1024px) { .i3-scale { padding: 7rem 0; } }

.i3-scale-grid {
  display: grid; gap: 1.5rem;
}
@media (min-width: 768px) { .i3-scale-grid { grid-template-columns: repeat(3, 1fr); } }

.i3-scale-card {
  padding: 1.75rem 1.5rem; border: 1px solid var(--border);
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.i3-scale-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.i3-scale-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem;
  background: linear-gradient(135deg, rgba(58,122,92,0.1), rgba(212,149,106,0.1));
  display: flex; align-items: center; justify-content: center;
}
.i3-scale-icon svg { width: 26px; height: 26px; color: var(--primary); }

.i3-scale-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.i3-scale-card p { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.65; }

/* ===== Feature Clusters ===== */
.i3-features { padding: 5rem 0; background: rgba(243,240,234,0.3); }
@media (min-width: 1024px) { .i3-features { padding: 7rem 0; } }

.i3-cluster { margin-bottom: 3rem; }
.i3-cluster:last-child { margin-bottom: 0; }

.i3-cluster-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--primary);
  padding: 0.375rem 0.875rem; border-radius: 999px;
  background: rgba(58,122,92,0.08); margin-bottom: 1.25rem;
}
.i3-cluster-label svg { width: 14px; height: 14px; }

.i3-cluster-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .i3-cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .i3-cluster-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ===== Refined CTA ===== */
.i3-cta { padding: 5rem 0; }
@media (min-width: 1024px) { .i3-cta { padding: 7rem 0; } }

.i3-cta-inner {
  text-align: center; padding: 4rem 2rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 20px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.i3-cta-inner::before {
  content: ''; position: absolute; inset: 0; opacity: 0.08;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.8) 1px, transparent 0);
  background-size: 32px 32px;
}

.i3-cta-inner h2 { color: var(--primary-fg); position: relative; }
.i3-cta-inner > p {
  color: rgba(255,255,255,0.8); margin: 1rem auto 2rem;
  max-width: 560px; font-size: 1.05rem; position: relative;
}

.i3-cta-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  position: relative;
}

.i3-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg); color: var(--primary); font-weight: 700;
  padding: 0.875rem 2rem; border-radius: 8px; font-size: 1rem;
  transition: all 0.2s ease; border: none; cursor: pointer;
  font-family: var(--font-sans);
}
.i3-cta-btn-primary:hover {
  background: var(--bg-card); transform: translateY(-2px); box-shadow: var(--shadow-lg);
}

.i3-cta-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; color: var(--primary-fg); font-weight: 600;
  padding: 0.875rem 2rem; border-radius: 8px; font-size: 1rem;
  border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer;
  transition: all 0.2s ease; font-family: var(--font-sans);
}
.i3-cta-btn-secondary:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5);
}

.i3-cta-note {
  display: block; margin-top: 1rem; position: relative;
  font-size: 0.8125rem; color: rgba(255,255,255,0.6);
}