:root {
  --ink: #153247;
  --muted: #557085;
  --paper: #f4f8fb;
  --white: #ffffff;
  --lime: #0f6b6f;
  --mint: #dff1f2;
  --green: #0f6b6f;
  --deep: #102b3e;
  --line: #d5e0e8;
  --peach: #e8f0fb;
  --radius: 22px;
  --shadow: 0 18px 40px rgba(21, 50, 71, 0.08);
}

body {
  background: linear-gradient(180deg, #eef3fb 0, #f8fbfd 12%, #fff 42%, #f8fbfd 100%);
  color: var(--ink);
}

.shell { width: min(1200px, calc(100% - 48px)); }

.site-header {
  top: 14px;
  width: min(1200px, calc(100% - 48px));
  margin: 14px auto 0;
  border: 1px solid rgba(21, 50, 71, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 36px rgba(21, 50, 71, .10);
}

.header-inner { width: 100%; height: 66px; padding: 0 18px 0 22px; }
.brand { color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.brand img { display: block; width: 40px; height: 40px; object-fit: contain; }
.header-nav { margin-left: auto; }
.header-nav a { color: var(--ink); font-weight: 650; padding: 10px 12px; border-radius: 999px; }
.header-nav a:hover { background: rgba(223, 241, 242, .78); color: var(--green); }
.button-dark { background: #4974d1; box-shadow: 0 12px 28px rgba(73, 116, 209, .22); }
.button-primary { background: #4974d1; color: #fff; box-shadow: 0 16px 34px rgba(73, 116, 209, .24); }
.button-light { color: var(--ink); }
.button { border-radius: 999px; }

.hero {
  margin-top: -82px;
  padding: 176px 0 92px;
  background:
    radial-gradient(circle at 12% 24%, rgba(73, 116, 209, .16), transparent 32%),
    radial-gradient(circle at 82% 42%, rgba(15, 107, 111, .13), transparent 29%),
    linear-gradient(180deg, #eef3fb 0%, #f8fbfd 68%, #ffffff 100%);
}

.hero-grid { grid-template-columns: .96fr 1.04fr; gap: 54px; }
.hero h1 { color: var(--ink); font-size: clamp(48px, 5vw, 72px); letter-spacing: -.045em; line-height: 1.02; }
.hero-lead { color: var(--muted); }
.text-link { color: var(--ink); border-color: #9cafbd; }
.proof-list { color: var(--muted); }
.proof-list li:before { background: var(--green); }

.product-window {
  transform: none;
  border: 1px solid rgba(21, 50, 71, .08);
  border-radius: 32px;
  box-shadow: 0 26px 60px rgba(21, 50, 71, .13);
  padding: 14px;
  background: rgba(255, 255, 255, .92);
}
.window-top { padding: 8px 8px 15px; }
.visit-card { background: linear-gradient(135deg, #153247, #225a68); border-radius: 20px; }
.waveform { background: rgba(255, 255, 255, .10); }
.waveform i { background: #bce2dd; }
.status-dot { color: #d9f4ef; border-color: rgba(255, 255, 255, .22); }
.summary-grid article { background: #f4f8fb; }
.icon { background: var(--mint); }
.icon:after { border-color: var(--green); }
.avatar { background: #e9effb; }
.pill { background: #edf4f7; }
.float-card { border-color: rgba(21, 50, 71, .08); box-shadow: 0 18px 42px rgba(21, 50, 71, .14); }
.float-card-one span { color: #4974d1; font-size: 22px; }
.float-card-two b { background: var(--mint); color: var(--green); }

.audience-strip { background: rgba(255,255,255,.88); }
.audience-grid p { color: #365267; }
.section-heading h2, .integration-copy h2, .security-grid h2, .contact-card h2 { letter-spacing: -.035em; line-height: 1.06; }

.intro-section { background: #fff; }
.platform-flow { border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.platform-flow article { min-height: 230px; }
.platform-flow article>span { color: #7891a4; }

.solutions-section { background: #f4f8fb; }
.solution-grid { gap: 18px; }
.solution-card {
  border: 1px solid rgba(21, 50, 71, .08);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(21, 50, 71, .055);
}
.solution-card:after { background: #edf5f7; }
.solution-icon { background: var(--mint); color: var(--green); }
.solution-number { color: #e7eef3; }
.solution-card li:before { background: #6ba3a2; }
.solution-card summary { color: var(--green); }
.accent-card { background: #eaf2ff; }
.accent-card:after { background: #dce9fb; }
.dark-card { background: linear-gradient(145deg, #153247, #174c59); }
.dark-card:after { background: rgba(255, 255, 255, .045); }
.dark-card>p { color: #c5d6df; }
.dark-card .solution-number { color: rgba(255,255,255,.09); }
.dark-card .solution-icon { background: #fff; color: #4974d1; }
.dark-card summary { color: #bfe4e1; }
.dark-card li:before { background: #9ed4ce; }

.packages-section { background: #fff; }
.package-grid article { border-color: var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(21,50,71,.05); }
.package-grid article>span, .case-grid span { color: var(--green); }
.package-grid a { color: var(--green); }
.package-main {
  background: linear-gradient(145deg, #e2ecff, #e0f2f1);
  border-color: rgba(73, 116, 209, .18) !important;
}
.package-main li { border-color: rgba(21, 50, 71, .10); }

.integration-section { background: linear-gradient(135deg, #112d42, #125865); }
.integration-points { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.integration-points div { background: rgba(16,43,62,.74); }
.orbit-ring { border-color: rgba(207,231,235,.34); }
.orbit-core { background: #fff; color: var(--ink); box-shadow: 0 20px 65px rgba(0,0,0,.22); }
.orbit-core img { width: 48px; height: 48px; object-fit: contain; }
.orbit-core b { margin-top: 4px; }
.orbit-core small { color: var(--muted); }
.orbit-node { color: var(--ink); }

.security-section { background: #eaf4f5; }
.security-list article { background: rgba(255,255,255,.84); border: 1px solid rgba(21,50,71,.06); }
.launch-section { background: #fff; }
.launch-steps span { background: #4974d1; }
.launch-steps li:not(:last-child):after { background: #cddbe4; }
.use-cases-section { background: #f4f8fb; }
.case-grid article { border: 1px solid rgba(21,50,71,.07); box-shadow: 0 10px 30px rgba(21,50,71,.045); }

.contact-section { background: #f4f8fb; }
.contact-card {
  background:
    radial-gradient(circle at 88% 10%, rgba(105, 153, 230, .42), transparent 30%),
    linear-gradient(135deg, #153247, #154e61);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(21,50,71,.16);
}
.site-footer { background: #102637; color: #fff; }
.site-footer .brand { color: #fff; }
.footer-top p, .footer-bottom { color: #b8c8d3; }
.footer-bottom { border-color: rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .site-header { width: min(100% - 28px, 1200px); border-radius: 24px; }
  .header-inner { padding: 0 14px 0 17px; }
  .menu-button { background: #4974d1; }
  .mobile-nav { border-radius: 0 0 24px 24px; background: #fff; }
  .hero { margin-top: -80px; padding-top: 152px; }
  .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .shell { width: min(100% - 30px, 1200px); }
  .site-header { top: 8px; margin-top: 8px; width: calc(100% - 20px); }
  .brand { font-size: 19px; }
  .brand img { width: 34px; height: 34px; }
  .hero { padding-top: 136px; }
  .hero h1 { font-size: 42px; letter-spacing: -.04em; }
  .solution-card { box-shadow: none; }
}