/* ============================================================
   Customer Center Landing — stg
   Ported from Claude Design "Customer Center Landing.dc.html".
   Design tokens resolved from assets/simutech/colors_and_type.css
   (source: SimuTrain themes.css + dashboard-redesign.css).
   ============================================================ */

:root {
  /* Brand palette */
  --stg-blue-900: #1e3a5f;
  --stg-blue-800: #2e527c;
  --stg-blue-700: #3c6ba1;
  --stg-blue-600: #5885b8;
  --stg-blue-200: #b8d4f1;
  --stg-blue-100: #e6eef8;

  /* Neutrals (light) */
  --fg-1: #0f172a;
  --fg-2: #475569;
  --fg-3: #64748b;
  --fg-on-primary: #ffffff;

  --bg-page:   #f5f7fb;
  --bg-paper:  #ffffff;
  --bg-tint:   #eaf1fb;

  --border-1: rgba(15, 23, 42, .08);
  --border-2: rgba(15, 23, 42, .14);

  /* Radii */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(20, 30, 60, .06), 0 1px 1px rgba(20, 30, 60, .04);
  --shadow-2: 0 6px 20px -10px rgba(20, 30, 60, .18);
  --shadow-3: 0 18px 40px -18px rgba(20, 30, 60, .35);

  /* Type */
  --font-sans: 'Cabin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.08em;

  --fs-h1: 32px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .25, 1);
  --dur-base: 220ms;
}

/* ---------- Base ---------- */
body { margin: 0; background: var(--bg-page); }
a { color: inherit; }

/* ---------- Interactions (scoped to landing) ---------- */
#cc-page a.nav-link { position: relative; text-decoration: none; }
#cc-page a.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--stg-blue-700);
  transition: right var(--dur-base) var(--ease-out);
}
#cc-page a.nav-link:hover::after { right: 0; }

#cc-page .btn-primary {
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
#cc-page .btn-primary:hover { transform: translateY(-2px); }

#cc-page .btn-ghost {
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

#cc-page .sol-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  cursor: pointer;
}
#cc-page .sol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--stg-blue-200);
}
#cc-page .sol-card:hover .sol-arrow { transform: translateX(4px); }
#cc-page .sol-arrow { transition: transform var(--dur-base) var(--ease-out); }

#cc-page .link-cta { transition: gap var(--dur-base) var(--ease-out); }
#cc-page .link-cta:hover { gap: 12px; }

/* ---------- Entrance animation ---------- */
@keyframes ccFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
#cc-page .rise   { opacity: 0; animation: ccFadeUp .7s cubic-bezier(.2,.7,.25,1) both; }
#cc-page .fadein { opacity: 0; animation: ccFadeIn 1.1s ease both; }

@media (prefers-reduced-motion: reduce) {
  #cc-page .rise, #cc-page .fadein { animation: none; opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  #cc-page .cc-nav-links { display: none !important; }
  #cc-page .cc-hero-content { padding: 52px 24px 60px !important; }
  #cc-page .cc-hero-intro {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
  }
  #cc-page .cc-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #cc-page .cc-solutions-grid,
  #cc-page .cc-benefits-grid { grid-template-columns: 1fr !important; }
  #cc-page .cc-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  #cc-page .cc-stats-grid { grid-template-columns: 1fr 1fr !important; }
  #cc-page .cc-footer-grid { grid-template-columns: 1fr !important; }
  #cc-page .cc-hero-content { padding: 40px 20px 48px !important; }
  #cc-page .cc-hero-intro { font-size: 15px !important; }
}