/*
  iRalinK platform skin for the showcase website.
  This file intentionally keeps the existing landing structure intact and only
  aligns the visual language with the app theme: colors, surfaces and borders.
*/

:root {
  --blue: #1646a9;
  --blue-dark: #10357f;
  --blue-light: #eff4ff;
  --ink: #0d0f13;
  --gray: #666666;
  --bg-soft: #eff4ff;
  --border: #e0e0e0;
  --text-muted: #666666;
  --text-hint: #8a8a8a;
  --surface: #ffffff;
  --surface-alt: #f3f4f6;
  --surface-soft: #f7f7f8;
  --line: #dcdcdc;
  --success: #37c871;
  --pending: #ffb300;
  --danger: #e57373;
}

body {
  background: var(--surface-alt);
  color: var(--ink);
}

nav,
header {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
}

.nav-logo,
.logo,
.s-title,
.hero h1,
.page-hero h1,
.sphere-page-hero h1,
.org-page-hero h1,
.investor-page-hero h1,
.talent-page-hero h1,
.feat-title,
.sphere-section-head h2,
.org-section-head h2,
.investor-section-head h2,
.talent-section-head h2,
.cta-box h2,
.cta-content h2,
.strip-text h2,
.features-head h2 {
  color: var(--ink);
}

.nav-links a,
nav a,
.btn-ghost,
.lang-toggle,
.feat-list li,
.point,
.org-chip,
.sphere-feature-card p,
.org-feature-card p,
.investor-feature-card p,
.talent-feature-card p,
.card p,
.hero p,
.page-hero p,
.sphere-page-hero p,
.org-page-hero p,
.investor-page-hero p,
.talent-page-hero p,
.strip-text p {
  color: var(--text-muted);
}

.nav-links a:hover,
.nav-links a.active,
nav a.active,
.lang-toggle:hover,
.btn-ghost:hover,
.s-label,
.feat-tag,
.strip-text span.tag,
.sphere-eyebrow .icon,
.org-eyebrow .icon,
.investor-eyebrow .icon,
.talent-eyebrow .icon,
.word-slider span,
.proj-sc,
.metric-box .num,
.skill-tag,
.logo-item:hover {
  color: var(--blue);
}

.btn-primary,
.btn-hero,
.btn-hp,
.sphere-eyebrow,
.org-eyebrow,
.investor-eyebrow,
.talent-eyebrow,
.page-hero .chip,
.eyebrow,
.step-num,
.msg-r,
.n-center,
.sphere-mini-chat .bubble.blue,
.sphere-mini-sidebar span:first-child,
.sphere-kanban-col.highlight .sphere-kanban-title,
.sphere-score-ring::before,
.point .dot,
.btn-primary.blue {
  background: var(--blue);
  color: #ffffff;
}

.btn-primary:hover,
.btn-hp:hover,
.btn-primary.blue:hover {
  background: var(--blue-dark);
  box-shadow: 0 8px 20px rgba(22, 70, 169, 0.18);
}

.btn-ghost,
.lang-toggle,
.btn-hs,
.org-chip,
.card,
.feat-card,
.trust-card,
.c-card,
.sphere-feature-card,
.org-feature-card,
.investor-feature-card,
.talent-feature-card,
.metric-box,
.talent-card,
.proj-row,
.msg-l,
.sphere-mini-sidebar,
.sphere-mini-chat {
  background: var(--surface);
  border-color: var(--line);
}

.hero,
.cta-sec,
.features,
.sphere-page-features,
.org-page-features,
.investor-page-features,
.talent-page-features {
  background: var(--surface);
}

.logos-band,
.tab-section,
.trust-sec,
.steps-sec,
.feat-visual,
.sphere-card-visual,
.sphere-page-hero,
.org-page-hero,
.investor-page-hero,
.talent-page-hero,
.page-hero,
.hero {
  background: var(--surface-alt);
}

.hero::before,
.cta-box::before {
  background: none;
}

.hero-badge,
.skill-tag,
.c-card-ico,
.avatar,
.proj-ico-solar,
.sphere-mini-sidebar span:first-child,
.sphere-card-visual,
.card .visual,
.icon-box,
.metric-box {
  background: var(--blue-light);
}

.hero-badge,
.sphere-feature-card:hover,
.org-feature-card:hover,
.investor-feature-card:hover,
.talent-feature-card:hover,
.card:hover,
.feat-card:hover,
.trust-card:hover,
.c-card:hover,
.talent-card:hover,
.btn-ghost:hover,
.lang-toggle:hover {
  border-color: rgba(22, 70, 169, 0.38);
}

.card:hover,
.feat-card:hover,
.trust-card:hover,
.c-card:hover,
.sphere-feature-card:hover,
.org-feature-card:hover,
.investor-feature-card:hover,
.talent-feature-card:hover {
  box-shadow: 0 10px 28px rgba(13, 15, 19, 0.07);
}

.tabs-row {
  border-color: var(--line);
}

.tab-btn {
  color: var(--text-hint);
}

.tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.step-line {
  background: #d8e0ef;
}

.sphere-orbit-node > circle:first-child,
.org-orbit-node > circle:first-child,
.investor-orbit-node > circle:first-child,
.talent-orbit-node > circle:first-child {
  fill: var(--surface);
  stroke: var(--blue);
}

.n-investor,
.n-startup,
.n-talent,
.n-org,
.n-incubator {
  background: var(--ink);
}

.proj-ico-mobile,
.sphere-kanban-col.done,
.org-badge.success,
.investor-badge.success,
.talent-badge.success {
  background: rgba(55, 200, 113, 0.14);
}

.proj-ico-bank,
.sphere-kanban-col.progress,
.org-badge.warning,
.investor-badge.warning,
.talent-badge.warning {
  background: rgba(255, 179, 0, 0.16);
}

.cta-box,
.stats-sec,
footer,
.cta {
  background: var(--ink);
}

.cta-box p,
.cta-content p,
.f-brand p,
.f-col ul li a,
.footer-bot p,
.cta-note2 {
  color: #9ca3af;
}

.btn-w {
  background: #ffffff;
  color: var(--ink);
}

.btn-ow,
.cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.footer-bot {
  border-color: rgba(255, 255, 255, 0.08);
}

.f-brand .flogo img {
  filter: none;
}

.logo svg circle,
.logo svg path,
.icon-box svg {
  stroke: var(--blue);
}

.logo svg rect,
.sphere-mini-chat .bubble.blue,
.dot {
  fill: var(--blue);
  background: var(--blue);
}