/* Glass-inspired web surfaces. Typography and layout remain in style.css. */
:root {
  --line: rgba(91, 115, 150, .17);
  --line-dark: rgba(91, 115, 150, .3);
  --border-panel: rgba(118, 146, 185, .28);
  --surface-soft: #edf3fb;
  --glass-fill: linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 36px rgba(45,72,112,.07), 0 2px 6px rgba(45,72,112,.03);
}
.site-header {
  background: rgba(248,251,255,.82);
  border-bottom: 1px solid rgba(118,146,185,.2);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}
.hero, .home-hero {
  background:
    radial-gradient(ellipse at 90% 18%, rgba(151,204,244,.33), transparent 48%),
    radial-gradient(ellipse at 5% 12%, rgba(192,188,244,.2), transparent 48%),
    linear-gradient(135deg,#f8faff,#eaf3fc);
  background-size: auto;
}
.hero-diagnostic,
.main-process-section .process-step,
.service-detail-block,
.service-block,
.service-cta,
.contact-panel,
.contact-page .contact-panel,
.dashboard-mock,
.work-start-flow article,
.work-start-flow article:last-child,
.modal-panel {
  border: 1px solid var(--border-panel);
  border-radius: 22px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}
/* Blur only outer navigation/hero surfaces; avoid nested full-page filters. */
.hero-diagnostic {
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.service-detail-columns > div,
.service-detail-columns > div:last-child {
  border: 1px solid rgba(118,146,185,.18);
  border-radius: 16px;
  background: rgba(237,243,251,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.process-note,
.contact-form,
.contact-page .contact-form {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(237,243,251,.8);
}
.main-process-section .process-step span,
.service-detail-head > span,
.work-start-flow span {
  border: 1px solid rgba(118,146,185,.3);
  background: linear-gradient(145deg,#fff,#e9f2ff);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(45,72,112,.05);
}
.main-process-section .process-step:hover,
.work-start-flow article:hover,
.work-start-flow article:last-child:hover {
  color: var(--ink);
  border-color: rgba(89,133,193,.42);
  background: linear-gradient(140deg,#fff,#eaf3ff);
  box-shadow: inset 0 1px 0 #fff,0 14px 32px rgba(45,72,112,.1);
}
.main-process-section .process-step:hover span,
.main-process-section .process-step:hover h3,
.main-process-section .process-step:hover p,
.work-start-flow article:hover span,
.work-start-flow article:hover h3,
.work-start-flow article:hover p { color: var(--ink); }
.main-process-section .process-step:hover span,
.work-start-flow article:hover span { background: #e4efff; border-color: rgba(89,133,193,.4); }
.btn { border-radius: 999px; padding: 10px 20px; min-height: 42px; }
.btn:hover { opacity: 1; }
.btn.secondary,
.hero .btn.secondary,
.contact-panel .btn.secondary,
.contact-page .contact-panel .btn.secondary {
  background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.68));
  border-color: var(--border-panel);
  box-shadow: inset 0 1px 0 #fff,0 3px 10px rgba(45,72,112,.05);
}
.btn.primary,
.hero .btn.primary,
.contact-panel .btn.primary,
.contact-page .contact-panel .btn.primary {
  color: #fff;
  background: linear-gradient(150deg,#316be4,#2454bd);
  border-color: #2454bd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 5px 14px rgba(36,84,189,.17);
}
.field input,
.field textarea,
.contact-page .field input,
.contact-page .field textarea {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(91,115,150,.38);
  border-radius: 10px;
}
.field input:focus,
.field textarea:focus,
.contact-page .field input:focus,
.contact-page .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.top-button { background: rgba(255,255,255,.9); border-color: var(--border-panel); box-shadow: var(--glass-shadow); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .hero-diagnostic { background: #f8fbff; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-fill: #fff; --glass-shadow: none; --line: #9aaabd; --border-panel: #71859e; }
  .site-header,.hero-diagnostic,.top-button { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero,.home-hero { background: #edf3fb; }
  .service-detail-columns > div,.contact-form,.contact-page .contact-form { background: #edf3fb; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .process-step, .work-start-flow article { transition: none; }
  .btn:hover { transform: none; }
}