/* ==========================================================================
   Company Search / Corporate Search / Court Search Landing Page Styles
   ========================================================================== */

/* ── CSS custom properties ─────────────────────────────────────────────────── */
:root {
  --cs-primary:        #696cff;
  --cs-primary-hover:  #5f61e6;
  --cs-primary-soft:   #eeedff;
  --cs-success:        #71dd37;
  --cs-info:           #03c3ec;
  --cs-warning:        #ffab00;
  --cs-danger:         #ff3e1d;
  --cs-secondary:      #8592a3;
  --cs-dark-accent:    #232448;
  --cs-radius:         12px;
  --cs-radius-sm:      8px;
  --cs-shadow:         0 2px 24px rgba(105,108,255,.10);
}

/* ── Wrapper ───────────────────────────────────────────────────────────────── */
.cs-landing {
  padding-top: 0;
}

/* ── Section typography helpers ────────────────────────────────────────────── */
.cs-kicker {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cs-primary);
  margin-bottom: .5rem;
}

.cs-kicker--light {
  color: rgba(255,255,255,.7);
}

.cs-section-head {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.cs-section-title {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2d2d3a;
  margin-bottom: .75rem;
}

.cs-section-lead {
  font-size: 1rem;
  color: #6d7580;
  line-height: 1.7;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.cs-hero {
  background: linear-gradient(135deg, #f5f4ff 0%, #eef9ff 100%);
  border-radius: var(--cs-radius);
  padding: 4rem 2rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.cs-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.cs-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cs-primary);
  margin-bottom: 1rem;
  display: block;
}

.cs-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a2e;
  margin-bottom: 1.25rem;
}

.cs-title span {
  display: block;
}

.cs-title-sub {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--cs-primary);
  margin-top: .5rem;
}

.cs-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4a4a6a;
  margin-bottom: 1.5rem;
}

.cs-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.cs-tag {
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Hero Visual ───────────────────────────────────────────────────────────── */
.cs-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cs-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-search-icon {
  font-size: 7rem;
  color: var(--cs-primary);
  opacity: .85;
  filter: drop-shadow(0 4px 24px rgba(105,108,255,.25));
}

.cs-search-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--cs-primary);
  opacity: .12;
  animation: csPulse 3s ease-in-out infinite;
}
.cs-search-ring--1 { width: 120px; height: 120px; animation-delay: 0s; }
.cs-search-ring--2 { width: 160px; height: 160px; animation-delay: .6s; }
.cs-search-ring--3 { width: 200px; height: 200px; animation-delay: 1.2s; }

@keyframes csPulse {
  0%, 100% { transform: scale(1); opacity: .12; }
  50%       { transform: scale(1.08); opacity: .22; }
}

.cs-stat-chips {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  max-width: 320px;
}

.cs-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border-radius: var(--cs-radius-sm);
  padding: .55rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #3d3d7a;
  box-shadow: var(--cs-shadow);
}

.cs-chip i {
  font-size: 1.2rem;
  color: var(--cs-primary);
}

/* ── Definition block ──────────────────────────────────────────────────────── */
.cs-definition {
  background: #fff;
  border: 1px solid #e9e9ff;
  border-radius: var(--cs-radius);
  padding: 2.5rem 2rem;
  margin-bottom: 1.5rem;
}

.cs-definition-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.cs-def-item h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #3d3d7a;
  margin-bottom: .75rem;
}

.cs-def-item p {
  font-size: .9rem;
  line-height: 1.75;
  color: #555;
  margin-bottom: 0;
}

/* ── Problem card ──────────────────────────────────────────────────────────── */
.cs-problem-card {
  background: #fafafe;
  border: 1px solid #ebebff;
  border-radius: var(--cs-radius);
  padding: 1.75rem;
  height: 100%;
}

.cs-problem-icon {
  font-size: 2.2rem;
  color: var(--cs-primary);
  margin-bottom: .75rem;
  display: block;
}

.cs-problem-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #2d2d3a;
}

.cs-problem-card p {
  font-size: .9rem;
  color: #6d7580;
  margin-bottom: 0;
  line-height: 1.65;
}

/* ── Feature cards ─────────────────────────────────────────────────────────── */
.cs-feature-card {
  padding: 1.75rem;
  border-radius: var(--cs-radius);
  background: #fafafe;
  border: 1px solid #ebebff;
  transition: box-shadow .2s;
}

.cs-feature-card:hover {
  box-shadow: var(--cs-shadow);
}

.cs-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cs-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.cs-feature-icon--primary   { background: #eeedff; color: var(--cs-primary); }
.cs-feature-icon--info      { background: #e0f9ff; color: var(--cs-info); }
.cs-feature-icon--success   { background: #e8ffdb; color: #5cb85c; }
.cs-feature-icon--warning   { background: #fff8e0; color: var(--cs-warning); }
.cs-feature-icon--danger    { background: #ffe8e5; color: var(--cs-danger); }
.cs-feature-icon--secondary { background: #f0f2f5; color: var(--cs-secondary); }

.cs-feature-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #2d2d3a;
}

.cs-feature-text {
  font-size: .88rem;
  color: #6d7580;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ── Three pillars (HK / Mainland / Court) ─────────────────────────────────── */
.cs-pillar-section {
  background: linear-gradient(135deg, #2a2d5e 0%, #3f42a3 100%);
  border-radius: var(--cs-radius);
  padding: 3rem 2rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.cs-pillar-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cs-pillar-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--cs-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s;
}

.cs-pillar-card:hover {
  background: rgba(255,255,255,.14);
}

.cs-pillar-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.cs-pillar-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: .4rem;
}

.cs-pillar-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: #fff;
}

.cs-pillar-text {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  margin-bottom: 1rem;
}

.cs-pillar-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}

.cs-pillar-tag {
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  padding: .2rem .65rem;
  font-size: .72rem;
  color: rgba(255,255,255,.85);
}

/* ── Workflow ───────────────────────────────────────────────────────────────── */
.cs-workflow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
}

.cs-workflow-num {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: .9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cs-workflow-connector {
  position: absolute;
  left: 23px;
  top: 48px;
  width: 2px;
  height: 2rem;
  background: #e0dfff;
}

.cs-workflow-body {
  padding-bottom: 2.5rem;
}

.cs-workflow-body h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .3rem;
  color: #2d2d3a;
}

.cs-workflow-body p {
  font-size: .88rem;
  color: #6d7580;
  margin-bottom: 0;
  line-height: 1.65;
}

/* ── Checklist ─────────────────────────────────────────────────────────────── */
.cs-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid #f0f0ff;
  font-size: .9rem;
  color: #3d3d5a;
  line-height: 1.55;
}

.cs-checklist-item:last-child {
  border-bottom: none;
}

.cs-check-icon {
  font-size: 1.1rem;
  color: var(--cs-primary);
  margin-top: .1rem;
  flex-shrink: 0;
}

/* ── Screenshot ────────────────────────────────────────────────────────────── */
.cs-screenshot-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.cs-screenshot {
  border-radius: var(--cs-radius);
  width: 100%;
  display: block;
}

.cs-screenshot-badge {
  position: absolute;
  bottom: -12px;
  right: -12px;
  background: var(--cs-primary);
  color: #fff;
  border-radius: var(--cs-radius-sm);
  padding: .45rem .85rem;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 4px 12px rgba(105,108,255,.4);
}

/* ── Data sources ──────────────────────────────────────────────────────────── */
.cs-source-card {
  background: #fafafe;
  border: 1px solid #ebebff;
  border-radius: var(--cs-radius-sm);
  padding: 1.25rem;
  text-align: center;
  height: 100%;
}

.cs-source-code {
  font-size: .75rem;
  font-weight: 800;
  color: var(--cs-primary);
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

.cs-source-name {
  font-size: .88rem;
  font-weight: 700;
  color: #2d2d3a;
  margin-bottom: .25rem;
}

.cs-source-desc {
  font-size: .75rem;
  color: #8592a3;
  line-height: 1.4;
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.cs-faq-item {
  border-bottom: 1px solid #f0f0ff;
  padding: 1.25rem 0;
}

.cs-faq-item:last-child {
  border-bottom: none;
}

.cs-faq-q {
  font-size: 1rem;
  font-weight: 700;
  color: #2d2d3a;
  margin-bottom: .5rem;
}

.cs-faq-a {
  font-size: .9rem;
  color: #6d7580;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.cs-cta {
  background: linear-gradient(135deg, var(--cs-primary) 0%, #8b5cf6 100%);
  border-radius: var(--cs-radius);
  padding: 3.5rem 2rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1.5rem;
}

.cs-cta-title {
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: .75rem;
  color: #fff;
}

.cs-cta-lead {
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.cs-cta .btn-light {
  background: #fff;
  color: var(--cs-primary);
  border: none;
  font-weight: 700;
  padding: .75rem 2rem;
  border-radius: 8px;
}

.cs-cta .btn-light:hover {
  background: #f5f4ff;
  color: var(--cs-primary-hover);
}

.cs-cta .btn-outline-light {
  font-weight: 600;
  padding: .75rem 2rem;
  border-radius: 8px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .cs-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cs-hero-visual {
    display: none;
  }
  .cs-definition-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cs-pillar-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 576px) {
  .cs-hero {
    padding: 2.5rem 1.25rem;
  }
  .cs-title {
    font-size: 1.65rem;
  }
  .cs-pillar-section {
    padding: 2rem 1.25rem;
  }
  .cs-cta {
    padding: 2.5rem 1.25rem;
  }
  .cs-cta-title {
    font-size: 1.45rem;
  }
}