/* Light sky-blue variant; style.css retains the shared layout. */
:root {
  --ink: #244964;
  --deep: #277fb8;
  --deep-2: #eaf8ff;
  --cream: #f7fbfe;
  --muted: #5f7b90;
  --line: #dcecf5;
  --blue: #197fbd;
  --shadow: 0 20px 70px rgba(57, 137, 185, .1);
}
body { background: var(--cream); }
.site-header { background: transparent; color: #255977; backdrop-filter: none; border-bottom: 0; }
.site-header.scrolled { background: rgba(249,253,255,.97); color: #255977; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(125,193,230,.24); box-shadow: 0 4px 24px rgba(49,119,165,.08); }
.brand-mark { background: #e2f5ff; color: #1987c5; }
.nav-cta { border-color: #82c2e6; color: #186fa6; }
.nav-cta:hover { background: #e6f6ff; color: #135f90; }

.hero { background: #eaf8ff; color: #244964; }
.hero-shade { background: linear-gradient(90deg, rgba(226,246,255,.97) 0%, rgba(230,247,255,.91) 29%, rgba(230,247,255,.48) 55%, rgba(230,247,255,.04) 100%); }
.eyebrow { color: #4b9dcc; }
.eyebrow.light { color: #388dbc; }
.hero h1 em { color: #329bd4; }
.hero-lead { color: #526f83; }
.hero .text-link { color: #2d769f; }
.hero-caption { color: #416780; background: rgba(250,254,255,.82); border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(8px); }
.button-primary { background: #197fbd; color: #fff; }
.button-primary:hover { background: #116fa9; color: #fff; }

.intro-band { background: #eff9ff; border-bottom-color: #d9edf8; }
.intro-tags { color: #5b91b1; }
.intro-tags i { background: #86c4e5; }
.experience, .future-section { background: #f7fbfe; }
.story-photo { background: linear-gradient(0deg, rgba(30,88,123,.56), rgba(30,88,123,0) 55%), url('/assets/family-hero.png') 65% center / cover no-repeat; }
.journey-item .step { color: #2796d0; }
.journey-glyph { color: #8dc8e9; }

.capability-section { background: #fff; }
.card-a { background: #ecf8ff; }
.card-b { background: #f1faff; }
.card-c { background: #f5fbff; }
.card-head { color: #4e8eb7; }
.icon-circle { border-color: rgba(70,158,211,.3); }
.device-demo, .phone-demo, .console-demo { border-color: #6ab7df; box-shadow: 0 17px 28px rgba(61,141,190,.13); }
.device-demo { color: #286281; }
.device-demo:after, .phone-notch { background: #5ca9d2; }
.demo-reminder { background: #fff8f2; }
.person-row { background: #eff9ff; }
.person-avatar { background: #dff4ff; color: #168f9b; }
.console-side { background: #64b2db; }
.console-side span { background: #dbf3ff; }
.console-stats div { background: #eaf7ff; }
.console-chart span { background: #8bcce9; }
.demo-bars span, .console-table i { background: #e2f2fb; }

.partner-section { background: #dff3ff; color: #244964; }
.partner-intro>p:not(.eyebrow) { color: #5d7d91; }
.partner-cards { border-top-color: #c5e5f5; }
.partner-cards article { border-bottom-color: #c5e5f5; }
.partner-number { color: #3d9bc9; }
.partner-cards p { color: #658198; }
.button-outline { border-color: #79badd; color: #2478aa; }
.button-outline:hover { background: #fff; color: #176d9f; }

.roadmap article { border-color: #e0eef6; box-shadow: 0 10px 28px rgba(64,139,183,.04); }
.roadmap-top { color: #5d95b8; }
.status.plan { background: #edf7fd; color: #6d9fba; }
.principles { background: #edf9ff; }

.closing { background: linear-gradient(135deg, #eaf9ff 0%, #ccecff 100%); color: #244964; }
.closing:before { border-color: rgba(255,255,255,.68); box-shadow: 0 0 0 60px rgba(255,255,255,.1), 0 0 0 130px rgba(255,255,255,.07); }
.closing p:not(.eyebrow) { color: #5d7d91; }
.closing .text-link { color: #287fad; }
.site-footer { background: #f5fbff; color: #69849a; border-top: 1px solid #dceef7; }
.footer-brand strong { color: #245475; }
.footer-brand small { color: #789bb2; }
.footer-inner a:hover { color: #167db8; }
.footer-copy { flex: 1; font-size: 12px; line-height: 1.9; }
.footer-copy > span { display: block; }
.footer-copy .icp-link { display: inline-block; margin-left: 8px; white-space: nowrap; }
.footer-note { color: #789bb2; }

@media (max-width: 800px) {
  .menu-toggle { border-color: #8ac5e5; color: #287fae; }
  .site-nav { background: rgba(250,254,255,.98); border-color: #d2eaf7; }
  .hero-shade { background: linear-gradient(90deg, rgba(229,247,255,.94), rgba(231,248,255,.76) 65%, rgba(235,249,255,.25)); }
}
@media (max-width: 520px) {
  .brand { font-size: 16px; }
  .footer-copy { flex-basis: 100%; }
  .hero-shade { background: linear-gradient(0deg, rgba(231,247,255,.98) 0%, rgba(232,248,255,.93) 46%, rgba(235,248,255,.28) 83%, rgba(235,248,255,.08) 100%); }
  .hero-caption { background: rgba(250,254,255,.75); }
}