/* Universal Web Studio: electric blue, deep navy and crisp white. */
:root {
  --brand-blue: #0755d9;
  --brand-bright: #56b4ff;
  --brand-navy: #030b1c;
  --brand-panel: #0b1930;
  --brand-border: #243c61;
  --brand-text: #f5f8ff;
  --brand-muted: #aec0da;
  --bg: var(--brand-navy);
  --line: var(--brand-border);
  --accent: #8cc9ff;
}
html, body { background-color: var(--brand-navy); color: var(--brand-text); }
::selection { background: #145cd6; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #82c5ff;
  outline-offset: 4px;
}
.studio-theme { background: var(--brand-navy); }
.brand-atmosphere {
  background: radial-gradient(ellipse at 18% 15%, #0064ff25, transparent 55%),
    linear-gradient(to bottom, #030b1c55, #030b1cbf 55%, #030b1cef);
}
.studio-theme [class~="bg-[#050505]"], .studio-theme [class~="bg-black"] { background-color: #030b1c; }
.studio-theme [class~="bg-[#0A0A0A]"], .studio-theme [class~="bg-[#0E0E0E]"] { background-color: #0b1930; }
.studio-theme [class~="bg-[#111]"], .studio-theme [class~="bg-[#161616]"] { background-color: #132846; }
.studio-theme [class~="border-[#222]"], .studio-theme [class~="border-[#1a1a1a]"],
.studio-theme [class~="border-[#1c1c1c]"], .studio-theme [class~="border-[#1C1C1C]"],
.studio-theme [class~="border-[#1F1F1F]"] { border-color: var(--brand-border); }
.studio-theme [class~="text-[#666]"], .studio-theme [class~="text-[#777]"],
.studio-theme [class~="text-[#888]"], .studio-theme [class~="text-[#707070]"] { color: #9fb2ce; }
.studio-theme [class~="text-[#AAA]"], .studio-theme [class~="text-[#9A9A9A]"] { color: #b6c6df; }
.studio-theme header { background: #030b1ce8; border-color: #254574; }
.studio-theme #overview { background: radial-gradient(ellipse at 50% 32%, #0755d929, transparent 65%); }
.studio-theme #overview h1 > span {
  color: #8bc8ff;
  text-decoration-color: #2078ff;
}
.studio-theme #overview h1 { text-shadow: 0 10px 55px #0064ff22; }
.studio-theme #overview a[id^="chip-"] { background: #0b2042; border-color: #285c9a; }
.studio-theme #overview a[id^="chip-"] svg { color: #6dbaff; }
.studio-theme #overview a[id^="chip-"]:hover { background: #123667; border-color: #63b7ff; }
.studio-theme #hero-cta-quote,
.studio-theme #quote-section button[type="submit"],
.studio-theme #video-showcase button,
.studio-theme #footer-contact-btn {
  background: linear-gradient(115deg, #064dd2, #0769e8);
  color: #fff;
  box-shadow: 0 8px 32px #0064ff35;
}
.studio-theme #hero-cta-quote svg { color: #fff; }
.studio-theme #hero-cta-results { border-color: #80bbff; background: #0c2241; color: #edf7ff; }
.studio-theme #hero-cta-results:hover { background: #174581; }
.studio-theme #laptop-lid, .studio-theme #phone-body { border-color: #2c4d7a; box-shadow: 0 18px 65px #0064ff1f; }
.studio-theme #laptop-screen-content [class~="grayscale"],
.studio-theme #phone-screen-content [class~="grayscale"],
.studio-theme #case-study [class~="grayscale"] { filter: none; }
.studio-theme #case-study > div { background: linear-gradient(135deg, #0b1930, #061225 70%); border-color: #315382; }
.studio-theme #case-study h2 > span, .studio-theme #video-showcase h2 > span { color: #8fc8ff; }
.studio-theme #solutions-section .group { background: linear-gradient(145deg, #0e2549, #09172c); border-color: #294a78; }
.studio-theme #solutions-section .group > div > div:first-child svg { color: #69b6ff; }
.studio-theme #solutions-section .group h3 { color: #e9f4ff; }
.studio-theme #quote-section > div { border-color: #335887; background: linear-gradient(160deg, #0d2447, #071429); }
.studio-theme #quote-section input::placeholder, .studio-theme #quote-section textarea::placeholder { color: #879ab7; }
.studio-theme #video-showcase > div { background: linear-gradient(130deg, #0c1f40eb, #061225f5); border-color: #2a4c7d; }
.studio-theme #video-showcase [class~="bg-[#070707]/80"] { background-color: #07152ad9; }
.studio-theme footer > div:first-child {
  background: linear-gradient(120deg, #f4f8ff, #d9eaff);
  border-color: #fff;
  box-shadow: 0 15px 70px #0755d92e;
}
.studio-theme footer > div:first-child span { color: #122d54; }
.context-link { color: #95caff; text-decoration: underline; text-decoration-color: #528cc0; text-underline-offset: .22em; }
.context-link:hover { color: #fff; text-decoration-color: #c5e5ff; }
.primary-site-links { display: flex; align-items: center; gap: 20px; margin-inline: auto; padding-inline: 20px; }
.primary-site-links a { color: #c1d3eb; font-size: 13px; text-decoration: none; white-space: nowrap; }
.primary-site-links a:hover { color: #8fc8ff; }
.drawer-site-links { display: grid; gap: 0; margin-bottom: 26px; }
.drawer-site-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #294367; padding: 12px 0; font-size: 14px; color: #d4e6ff; }
.site-link-groups { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 36px; width: 100%; margin: 16px 0; text-align: left; }
.site-link-groups h2 { margin: 0 0 16px; color: #f2f7ff; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; }
.site-link-groups ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-link-groups a { color: #adbfda; font-size: 14px; line-height: 1.55; text-decoration: none; }
.site-link-groups a:hover { color: #8dccff; text-decoration: underline; text-underline-offset: 4px; }
.site-header { background: #030b1cee; border-color: #264267; }
.brand picture { display: flex; flex-shrink: 0; }
.site-header nav a { color: #bfd1e9; }
.site-header nav a:hover { color: #8fc8ff; }
.hero h1 { color: #f5f9ff; }
.hero .eyebrow, .kicker { color: #8dc7ff; }
.intro, .content-block > p { color: #b7c7de; }
.button { background: var(--brand-blue); color: #fff; border-color: #2078ff; box-shadow: 0 8px 28px #0064ff25; }
.button:hover { background: #0966f0; color: #fff; }
.text-link { color: #a2d1ff; }
.card, .tool-panel { background: linear-gradient(135deg, #0e2243, #08152a); border-color: #28436d; }
.card { overflow: hidden; }
.card p { color: #aebfd8; }
.card:hover { border-color: #579fea; }
.tool-panel label { color: #b9cbe4; }
.tool-panel input, .tool-panel select, .tool-panel textarea { background: #050f23; border-color: #34507c; color: #f2f7ff; }
.tool-panel .span-two { grid-column: 1 / -1; }
.tool-panel input[type="checkbox"] { accent-color: #0755d9; }
.tool-panel .result { border-color: #34507c; background: #061831; }
.cta { background: linear-gradient(125deg, #f6f9ff, #dbeaff); border: 1px solid #e9f4ff; box-shadow: 0 18px 70px #0755d928; }
.cta h2 { color: #061834; }
.cta p { color: #3b577e; }
.cta .button.inverse { background: var(--brand-blue); color: white; border-color: #0755d9; }
.breadcrumbs { flex-wrap: wrap; color: #a9bcd7; }
.breadcrumbs a { color: #9acaff; }
footer { grid-template-columns: 1fr; }
footer .site-link-groups { display: grid; }
footer .footer-intro strong { color: #f1f7ff; }
footer .footer-intro p, footer .copyright { color: #a1b4cf; }
.related-section { padding: 54px 0 20px; border-top: 1px solid #294366; }
.related-section > h2 { margin: 0 0 28px; color: #f4f8ff; font: 600 clamp(30px,4vw,44px)/1.1 var(--serif, Georgia, serif); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.related-grid article { padding: 24px; border: 1px solid #2d4b75; border-radius: 18px; background: #0a1b35; }
.related-grid h3 { margin: 0 0 14px; font: 600 18px/1.4 Inter,system-ui,sans-serif; }
.related-grid a { color: #a9d6ff; text-decoration: underline; text-underline-offset: 4px; }
.related-grid a:hover { color: #fff; }
.related-grid p { margin: 0; color: #afc0d9; font-size: 15px; line-height: 1.7; }
@media (max-width: 1100px) { .primary-site-links { gap: 12px; } }
@media (max-width: 1023px) { .primary-site-links { display: none; } }
@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav { display: flex; flex-basis: 100%; order: 3; flex-wrap: wrap; gap: 12px 18px; padding: 8px 0 2px; }
  .site-header nav a { font-size: 14px; }
  .related-grid { grid-template-columns: 1fr; }
  .site-link-groups { grid-template-columns: repeat(2,1fr); gap: 28px; }
}
@media (max-width: 520px) { .site-link-groups { grid-template-columns: 1fr; } }

.phone-landmark-hero { isolation: isolate; flex-shrink: 0; background: #163f69; }
.landmark-slideshow { position: absolute; inset: 0; overflow: hidden; }
.landmark-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease-in-out; }
.landmark-photo.is-active { opacity: 1; }
.landmark-text-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, #030b1cf5 0%, #030b1ce6 24%, #030b1c80 43%, transparent 67%); }
.landmark-toolbar { position: absolute; top: 7px; right: 7px; z-index: 20; display: flex; align-items: center; justify-content: flex-end; }
.landmark-pause { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 1px solid #ffffff65; border-radius: 50%; color: #fff; background: #030b1cd9; cursor: pointer; }
.landmark-pause:hover { background: #0755d9; }
@media (prefers-reduced-motion: reduce) { .landmark-photo { transition: none; } }
