/* Light theme ------------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg2: #edf3f8;
  --panel: rgba(255, 255, 255, 0.9);
  --panel2: rgba(246, 249, 252, 0.9);
  --stroke: rgba(35, 70, 105, 0.15);
  --text: #13243a;
  --muted: #4d6278;
  --muted2: #71869b;
  --accent: #f2c522;
  --accent2: #168dcc;
  --good: #1ba46a;
  --shadow: 0 28px 80px rgba(25, 54, 84, 0.15);
  --shadow-soft: 0 18px 52px rgba(25, 54, 84, 0.1);
}

body {
  background:
    radial-gradient(900px 640px at 5% -8%, rgba(48, 163, 226, 0.2), transparent 68%),
    radial-gradient(820px 600px at 98% 5%, rgba(242, 197, 34, 0.16), transparent 64%),
    linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 48%, #f9fbfd 100%);
  color: var(--text);
}

body::before {
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(54, 103, 148, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 103, 148, 0.07) 1px, transparent 1px);
}

body::after {
  background: radial-gradient(520px circle at var(--pointer-x) var(--pointer-y), rgba(25, 146, 211, 0.1), transparent 72%);
}

::selection {
  color: #102238;
  background: #8edfff;
}

.scroll-progress {
  background: rgba(20, 57, 91, 0.06);
}

.site-header {
  background: rgba(250, 252, 254, 0.78);
  border-color: rgba(35, 70, 105, 0.13);
  box-shadow: 0 12px 40px rgba(29, 62, 94, 0.09);
}

.brand {
  color: #13243a;
}

.brand::before {
  border-color: rgba(22, 141, 204, 0.35);
  background: linear-gradient(145deg, rgba(66, 187, 236, 0.16), rgba(96, 132, 220, 0.08));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 8px 24px rgba(25, 126, 181, 0.1);
  color: #087ebd;
}

.nav a,
.nav-dropdown summary {
  color: #53697e;
}

.nav a:hover,
.nav a.is-active,
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  color: #10283f;
  border-color: rgba(22, 141, 204, 0.22);
  background: rgba(22, 141, 204, 0.08);
}

.nav a.lang {
  border-color: rgba(35, 70, 105, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #29435c;
}

.nav a.nav-contact {
  border-color: rgba(22, 141, 204, 0.3);
  background: linear-gradient(135deg, rgba(74, 190, 237, 0.18), rgba(101, 139, 224, 0.12));
  color: #10283f;
}

.nav a.nav-contact:hover {
  background: linear-gradient(135deg, rgba(74, 190, 237, 0.27), rgba(101, 139, 224, 0.18));
}

.nav-menu {
  border-color: rgba(35, 70, 105, 0.15);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 70px rgba(25, 54, 84, 0.16);
}

.tech-marquee {
  border-color: rgba(35, 70, 105, 0.11);
  background: rgba(244, 248, 252, 0.86);
}

.tech-marquee::before {
  background: linear-gradient(90deg, #f5f9fc, transparent);
}

.tech-marquee::after {
  background: linear-gradient(-90deg, #f5f9fc, transparent);
}

.tech-item {
  color: #687f94;
}

.tech-item:hover {
  color: #15324c;
  border-color: rgba(22, 141, 204, 0.2);
  background: rgba(22, 141, 204, 0.07);
}

.tech-item img {
  filter: saturate(0.94) brightness(0.98);
}

.hero::before {
  background: radial-gradient(closest-side, rgba(45, 151, 216, 0.12), transparent);
}

.kicker {
  flex-wrap: wrap;
  color: #5b7186;
}

.kicker-aegis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #24374a;
  font-weight: 700;
}

.kicker-aegis img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(20, 26, 32, 0.16));
}

h1 {
  color: #102238;
}

.gradient-text {
  background: linear-gradient(105deg, #0997d4 5%, #536fd0 50%, #c99400 94%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 12px 40px rgba(18, 139, 200, 0.12);
}

.lead {
  color: #4e6378;
}

.btn {
  border-color: rgba(35, 70, 105, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #18344e;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(26, 65, 99, 0.07);
}

.btn:hover {
  border-color: rgba(22, 141, 204, 0.34);
  background: #fff;
  box-shadow: 0 14px 32px rgba(25, 85, 124, 0.12);
}

.btn.primary {
  border-color: rgba(16, 131, 193, 0.34);
  background: linear-gradient(135deg, #63cff5, #7897ed);
  color: #071a2b;
  box-shadow: 0 13px 34px rgba(43, 139, 203, 0.22), inset 0 1px rgba(255, 255, 255, 0.62);
}

.btn.primary:hover {
  border-color: rgba(16, 131, 193, 0.54);
  background: linear-gradient(135deg, #78d9f8, #8ca7f2);
  box-shadow: 0 17px 40px rgba(43, 139, 203, 0.27);
}

.meta-card {
  border-color: rgba(35, 70, 105, 0.13);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 28px rgba(34, 69, 101, 0.06);
}

.meta-k {
  color: #087fbd;
}

.meta-v {
  color: #3f5870;
}

.hero-panel {
  border-color: rgba(52, 111, 155, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 251, 0.91)),
    #fff;
  box-shadow: 0 32px 90px rgba(30, 69, 104, 0.17), inset 0 1px rgba(255, 255, 255, 0.95);
}

.hero-panel::before {
  background: radial-gradient(circle, rgba(51, 172, 227, 0.18), transparent 68%);
}

.panel-title {
  color: #17334d;
}

.panel-sub,
.panel-card p,
.panel-note {
  color: #61768a;
}

.panel-card {
  border-color: rgba(49, 92, 130, 0.13);
  background: rgba(237, 244, 249, 0.7);
}

.panel-card:hover {
  border-color: rgba(22, 141, 204, 0.28);
  background: rgba(220, 240, 250, 0.72);
}

.panel-card h4 {
  color: #193650;
}

.panel-divider {
  background: linear-gradient(90deg, transparent, rgba(22, 141, 204, 0.28), transparent);
}

.diagram {
  border-color: rgba(46, 87, 123, 0.16);
  background: #0b1725;
  box-shadow: 0 10px 28px rgba(31, 63, 94, 0.1);
}

.section {
  border-color: rgba(51, 87, 119, 0.1);
}

.section.alt {
  background: linear-gradient(180deg, rgba(232, 241, 248, 0.62), rgba(247, 250, 252, 0.35));
}

.section-head h2,
.about-name {
  color: #12283e;
}

.section-head p {
  color: #53687d;
}

.section-lead {
  color: #0786c3;
}

.about-photo,
.about-card {
  border-color: rgba(45, 86, 121, 0.15);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(31, 69, 103, 0.12);
}

.about-photo::after {
  background: linear-gradient(180deg, transparent 68%, rgba(17, 39, 58, 0.16));
}

.about-role {
  color: #087fbd !important;
}

.about-body p {
  color: #4e6377;
}

.founder-callout {
  border-color: rgba(199, 155, 0, 0.3);
  background: linear-gradient(110deg, rgba(253, 216, 13, 0.18), rgba(255, 248, 205, 0.46));
  box-shadow: 0 12px 32px rgba(126, 99, 7, 0.08);
}

.founder-callout:hover {
  border-color: rgba(199, 155, 0, 0.48);
  background: linear-gradient(110deg, rgba(253, 216, 13, 0.25), rgba(255, 248, 205, 0.62));
}

.founder-mark {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.founder-mark img {
  display: block;
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(21, 25, 29, 0.18));
}

.founder-copy strong {
  color: #27303a;
}

.founder-copy small {
  color: #756b43;
}

.founder-arrow {
  color: #a97f00;
}

.about-tags span,
.pills span {
  border-color: rgba(49, 91, 128, 0.15);
  background: rgba(238, 244, 249, 0.78);
  color: #496176;
}

.about-tags span:hover,
.pills span:hover {
  border-color: rgba(22, 141, 204, 0.3);
  background: rgba(218, 239, 250, 0.82);
  color: #17334d;
}

.about-social-link,
.contact-item a {
  color: #087fbd;
}

.card,
.pillbox,
.service,
.footer-cta {
  border-color: rgba(45, 86, 121, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 251, 0.92));
  box-shadow: 0 18px 50px rgba(30, 67, 101, 0.09), inset 0 1px rgba(255, 255, 255, 0.92);
}

.card::before {
  background: rgba(22, 141, 204, 0.62);
  box-shadow: 0 0 16px rgba(22, 141, 204, 0.24);
}

.card:hover {
  border-color: rgba(22, 141, 204, 0.27);
  background: #fff;
  box-shadow: 0 28px 66px rgba(28, 76, 114, 0.14), 0 0 0 1px rgba(22, 141, 204, 0.03) inset;
}

.card h3,
.pillbox h3,
.t-body h3,
.footer-cta h3 {
  color: #19354f;
}

.card p,
.card li,
.pillbox p,
.t-body p,
.t-body li,
.footer-cta p {
  color: #576d81;
}

.card.featured {
  border-color: rgba(199, 155, 0, 0.24);
  background: linear-gradient(145deg, rgba(255, 252, 232, 0.96), rgba(248, 249, 245, 0.94));
}

.card.featured::after {
  background: radial-gradient(circle, rgba(242, 197, 34, 0.16), transparent 68%);
}

.badge {
  border-color: rgba(199, 155, 0, 0.28);
  background: rgba(242, 197, 34, 0.15);
  color: #755b00;
}

.logo-item {
  border-color: rgba(45, 86, 121, 0.14);
  background: rgba(255, 255, 255, 0.76);
  color: #60758a;
}

.logo-item:hover {
  border-color: rgba(22, 141, 204, 0.27);
  background: #fff;
  color: #19344d;
}

.service:hover,
.service[open] {
  border-color: rgba(22, 141, 204, 0.27);
  background: #fff;
}

.service-title {
  color: #19354f;
}

.service-sub,
.service-meta,
.service-body p,
.workflow li {
  color: #586e82;
}

.service-body {
  border-color: rgba(45, 86, 121, 0.12);
}

.service.featured,
.service.featured summary {
  border-color: rgba(199, 155, 0, 0.25);
  background: rgba(255, 249, 213, 0.38);
}

.workflow {
  border-color: rgba(45, 86, 121, 0.13);
  background: rgba(238, 244, 249, 0.65);
}

.workflow h4 {
  color: #1d3a54;
}

.t-dot {
  border-color: #f5f9fc;
  background: #1ca1dc;
  box-shadow: 0 0 0 5px rgba(28, 161, 220, 0.12), 0 0 22px rgba(28, 161, 220, 0.2);
}

.footer-cta {
  border-color: rgba(22, 141, 204, 0.2);
  background:
    radial-gradient(500px 220px at 0% 100%, rgba(76, 190, 235, 0.14), transparent),
    linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(237, 245, 250, 0.92));
}

.section-to-top {
  color: #687f94;
}

.site-footer {
  border-color: rgba(45, 86, 121, 0.12);
  background: #edf3f7;
}

.footer-brand {
  color: #18344e;
}

.footer-small {
  color: #70859a;
}