.welcome-page {
  min-width: 320px;
  color: #17212b;
  background:
    radial-gradient(circle at 88% 4%, rgb(228 244 241 / 82%), transparent 25rem),
    #f7f9fa;
}

.welcome-shell {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 28px 0 48px;
}

.welcome-hero {
  min-height: min(670px, calc(100vh - 76px));
  padding: 4px 0 58px;
}

.welcome-header {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.welcome-logo {
  display: block;
  width: 208px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.welcome-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
  padding-top: clamp(64px, 12vh, 138px);
}

.welcome-copy {
  max-width: 590px;
}

.welcome-eyebrow {
  margin: 0 0 18px;
  color: #0d7469;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-copy h1 {
  max-width: 570px;
  margin: 0;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.welcome-lead {
  max-width: 540px;
  margin: 24px 0 32px;
  color: #566473;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 13px 20px;
  border: 1px solid #0d7469;
  border-radius: 10px;
  color: #fff;
  background: #0d7469;
  box-shadow: 0 12px 24px rgb(13 116 105 / 20%);
  font-weight: 800;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.welcome-cta:hover {
  background: #0a6058;
  box-shadow: 0 15px 28px rgb(13 116 105 / 28%);
  transform: translateY(-1px);
}

.welcome-cta span {
  font-size: 21px;
  line-height: 1;
}

.welcome-dashboard {
  position: relative;
  overflow: hidden;
  min-height: 354px;
  padding: 22px;
  border: 1px solid #d7e2e1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 48px rgb(31 41 55 / 10%);
}

.welcome-dashboard::before {
  position: absolute;
  inset: 0;
  content: "";
  border-top: 5px solid #0d7469;
}

.welcome-dashboard-topline {
  display: flex;
  gap: 6px;
  margin-bottom: 34px;
}

.welcome-dashboard-topline span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5dde1;
}

.welcome-dashboard-topline span:first-child { background: #eb599b; }
.welcome-dashboard-topline span:nth-child(2) { background: #b4d8d2; }

.welcome-dashboard-heading,
.welcome-dashboard-heading div,
.welcome-kpis,
.welcome-kpis div {
  display: flex;
}

.welcome-dashboard-heading {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.welcome-dashboard-heading div {
  flex-direction: column;
  gap: 8px;
}

.welcome-dashboard i,
.welcome-dashboard b,
.welcome-dashboard small,
.welcome-dashboard em {
  display: block;
  border-radius: 99px;
  background: #e5ebee;
}

.welcome-dashboard-heading i { width: 120px; height: 12px; background: #263944; }
.welcome-dashboard-heading b { width: 78px; height: 8px; }
.welcome-dashboard-heading em { width: 54px; height: 28px; background: #e4f4f1; }

.welcome-kpis {
  gap: 10px;
}

.welcome-kpis div {
  flex: 1 1 0;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e3e9ec;
  border-radius: 10px;
}

.welcome-kpis i { width: 55%; height: 7px; }
.welcome-kpis b { width: 78%; height: 17px; background: #31444e; }
.welcome-kpis small { width: 45%; height: 7px; background: #bde1da; }
.welcome-kpis div:nth-child(2) small { background: #f6bfd6; }

.welcome-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 9px;
  height: 122px;
  margin-top: 25px;
  padding: 16px 8px 0;
  border-top: 1px solid #edf1f2;
  background: repeating-linear-gradient(to bottom, transparent 0 29px, #f0f3f4 30px);
}

.welcome-chart span {
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#57a79d, #0d7469);
}

.welcome-chart span:nth-child(1) { height: 35%; }
.welcome-chart span:nth-child(2) { height: 48%; }
.welcome-chart span:nth-child(3) { height: 42%; }
.welcome-chart span:nth-child(4) { height: 69%; }
.welcome-chart span:nth-child(5) { height: 61%; }
.welcome-chart span:nth-child(6) { height: 78%; }
.welcome-chart span:nth-child(7) { height: 100%; background: linear-gradient(#eb8ab6, #eb599b); }

.welcome-features {
  padding: 30px 0 0;
  border-top: 1px solid #dfe7e8;
}

.welcome-features h2 {
  margin: 0 0 18px;
  color: #667282;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.welcome-feature-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.welcome-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid #e0e7e9;
  border-radius: 12px;
  background: rgb(255 255 255 / 68%);
  color: #334150;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.feature-icon {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #e4f4f1;
}

.feature-icon::before,
.feature-icon::after {
  position: absolute;
  content: "";
}

.feature-icon-plan::before { inset: 8px; border: 2px solid #0d7469; border-radius: 3px; }
.feature-icon-plan::after { top: 13px; left: 12px; width: 8px; border-top: 2px solid #0d7469; box-shadow: 0 4px 0 #0d7469; }
.feature-icon-fact::before { bottom: 8px; left: 8px; width: 3px; height: 8px; background: #0d7469; box-shadow: 6px -5px 0 #0d7469, 12px -11px 0 #0d7469; }
.feature-icon-trend::before { top: 15px; left: 7px; width: 16px; height: 8px; border-top: 2px solid #0d7469; border-right: 2px solid #0d7469; transform: skewY(-28deg); }
.feature-icon-trend::after { top: 8px; right: 6px; border: 4px solid transparent; border-left-color: #0d7469; transform: rotate(-42deg); }
.feature-icon-team::before { top: 7px; left: 11px; width: 8px; height: 8px; border: 2px solid #0d7469; border-radius: 50%; box-shadow: -7px 8px 0 -2px #e4f4f1, -7px 8px 0 0 #0d7469, 7px 8px 0 -2px #e4f4f1, 7px 8px 0 0 #0d7469; }
.feature-icon-signal { background: #fff1f7; }
.feature-icon-signal::before { top: 7px; left: 9px; width: 12px; height: 14px; border: 2px solid #c73f7c; border-radius: 8px 8px 5px 5px; }
.feature-icon-signal::after { bottom: 6px; left: 13px; width: 4px; height: 2px; background: #c73f7c; }

@media (max-width: 900px) {
  .welcome-content { grid-template-columns: minmax(0, 1fr) minmax(330px, 0.78fr); gap: 36px; }
  .welcome-dashboard { min-height: 316px; padding: 18px; }
  .welcome-feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .welcome-shell { width: min(100% - 32px, 560px); padding: 16px 0 32px; }
  .welcome-hero { min-height: auto; padding-bottom: 46px; }
  .welcome-header { min-height: 54px; }
  .welcome-logo { width: 182px; height: 42px; }
  .welcome-content { grid-template-columns: 1fr; gap: 42px; padding-top: 62px; }
  .welcome-copy h1 { font-size: clamp(40px, 12vw, 56px); }
  .welcome-lead { margin: 20px 0 28px; font-size: 18px; }
  .welcome-cta { width: 100%; justify-content: center; }
  .welcome-dashboard { min-height: 300px; }
  .welcome-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-feature-list li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .welcome-kpis div { padding: 10px; }
  .welcome-chart { gap: 6px; }
  .welcome-feature-list { grid-template-columns: 1fr; }
  .welcome-feature-list li:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-cta { transition: none; }
  .welcome-cta:hover { transform: none; }
}