/* ==========================================================================
   Surface layer: frosted glass panels + soft (neumorphic) controls.
   Loaded after style.css; colour tokens and layout come from there.
   ========================================================================== */

:root {
  --bg: #E9F0EF;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-line: rgba(12, 26, 31, 0.08);
  --glass-shadow: 0 1px 1px rgba(12, 26, 31, 0.04), 0 18px 40px -18px rgba(12, 60, 66, 0.25);
  --blur: saturate(160%) blur(18px);

  --neu-light: rgba(255, 255, 255, 0.9);
  --neu-dark: rgba(120, 145, 150, 0.38);
  --neu-raised: -6px -6px 14px var(--neu-light), 6px 6px 14px var(--neu-dark);
  --neu-raised-sm: -3px -3px 8px var(--neu-light), 3px 3px 8px var(--neu-dark);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);

  --dark-glass: rgba(255, 255, 255, 0.06);
  --dark-glass-edge: rgba(255, 255, 255, 0.12);
}

body { background: var(--bg); }

/* Ambient colour field behind the glass */
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(43, 179, 177, 0.38), transparent 70%),
    radial-gradient(34vmax 34vmax at 92% 18%, rgba(125, 196, 228, 0.40), transparent 70%),
    radial-gradient(40vmax 40vmax at 78% 92%, rgba(240, 196, 160, 0.38), transparent 70%),
    radial-gradient(30vmax 30vmax at 8% 78%, rgba(10, 107, 112, 0.16), transparent 70%),
    var(--bg);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  to { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); }
}

.board,
.industry,
.form-card,
.ccard,
.stack-grid,
.commitments,
.faq,
.svc .fit,
.next-steps {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Header: floating glass bar */
.site-header {
  top: 12px;
  margin: 12px auto 0;
  width: min(calc(100% - 24px), calc(var(--container) + 24px));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.site-header.is-scrolled { border-color: var(--glass-edge); background: rgba(255, 255, 255, 0.72); }
.site-header .nav { height: 64px; padding: 0 12px 0 18px; }
.mobile-menu { background: transparent; border-top-color: var(--glass-line); border-radius: 0 0 18px 18px; }
.nav-links a:hover { background: rgba(255, 255, 255, 0.7); box-shadow: var(--neu-raised-sm); }

.ruler { opacity: .35; }

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, #16343B, var(--ink));
  box-shadow: 0 10px 24px -10px rgba(12, 26, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-primary:hover { background: linear-gradient(180deg, #0E7178, var(--teal-strong)); }
.btn-ghost {
  background: var(--bg);
  border-color: transparent;
  box-shadow: var(--neu-raised);
}
.btn-ghost:hover { border-color: transparent; box-shadow: var(--neu-raised-sm); color: var(--teal-strong); }
.btn-ghost:active { box-shadow: var(--neu-inset); }
.btn-light { background: rgba(255, 255, 255, 0.92); }
.btn-outline-light {
  background: var(--dark-glass);
  border-color: var(--dark-glass-edge);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }

.menu-toggle { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.menu-open .menu-toggle { box-shadow: var(--neu-inset); }

/* Hero */
.hero-visual { position: relative; }
.board { border-radius: 22px; }
.board-top { border-bottom-color: var(--glass-line); background: rgba(255, 255, 255, 0.35); }
.board-note, .chip { background: rgba(255, 255, 255, 0.6); }
.phase { border-top-color: rgba(12, 26, 31, 0.1); }
.phase-dot { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.phase.is-done .phase-dot { box-shadow: 0 6px 14px -6px rgba(10, 107, 112, 0.7); }
.phase.is-active .phase-dot { background: var(--bg); box-shadow: var(--neu-inset), 0 0 0 4px rgba(43, 179, 177, 0.18); }
.bar { background: var(--bg); box-shadow: var(--neu-inset); height: 8px; }
.bar i { background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }


/* Commitments: one glass panel */
.commitments { border-radius: 20px; }
.commitment { padding: 28px; }
.commitment + .commitment { border-left-color: var(--glass-line); }
.commitment h3 { display: flex; align-items: center; gap: 10px; }
.commitment h3::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(43, 179, 177, 0.18);
}

/* Service rows: glass on hover, soft arrow buttons */
.service-list { border-top-color: rgba(12, 26, 31, 0.25); }
.service-row { border-bottom-color: var(--glass-line); }
.service-row::before {
  inset: 6px calc(var(--gutter) * -0.5);
  border-radius: 18px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.service-row .arrow { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.service-row:hover .arrow { background: var(--ink); box-shadow: 0 8px 18px -8px rgba(12, 26, 31, .6); }

/* Dark band: deep glass */
.dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0B1C21;
  margin: 0 12px;
  border-radius: 28px;
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 10% 0%, rgba(43, 179, 177, 0.35), transparent 70%),
    radial-gradient(35% 55% at 95% 100%, rgba(125, 196, 228, 0.22), transparent 70%);
}
.process { border-top: 0; gap: 16px; }
.step,
.step + .step,
.model {
  padding: 28px 24px;
  border: 1px solid var(--dark-glass-edge);
  border-radius: 20px;
  background: var(--dark-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.step li, .model li { border-top-color: rgba(255, 255, 255, 0.08); }

/* Tech stack */
.stack-grid { gap: 0; border-radius: 20px; }
.stack-cell { background: transparent; }
.stack-cell + .stack-cell { border-left: 1px solid var(--glass-line); }

/* Industries */
.industry { border-radius: 20px; }
.industry:hover { border-color: var(--glass-edge); transform: translateY(-4px); background: var(--glass-strong); }
.industry .eg { border-top-color: rgba(12, 26, 31, 0.12); }
.industry .ico,
.ccard .ico {
  background: var(--bg);
  color: var(--teal);
  box-shadow: var(--neu-raised-sm);
  border-radius: 12px;
}

/* Principles + FAQ */
.principle, .principle:last-child { border-color: var(--glass-line); }
.principle .n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--bg);
  box-shadow: var(--neu-raised-sm);
  font-size: 12px;
}
.faq { border-radius: 20px; padding: 4px 24px; }
.faq details { border-bottom-color: var(--glass-line); }
.faq details:last-child { border-bottom: 0; }
.faq summary .pm { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.faq details[open] summary .pm { background: var(--ink); box-shadow: none; }

/* CTA band */
.cta-band {
  border-radius: 28px;
  background:
    radial-gradient(50% 80% at 0% 0%, rgba(43, 179, 177, 0.45), transparent 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(240, 196, 160, 0.25), transparent 70%),
    #0B1C21;
  box-shadow: 0 30px 60px -30px rgba(12, 26, 31, 0.6);
}

/* Services page */
.svc, .svc:first-of-type { border-top-color: var(--glass-line); }
.svc .fit { border-radius: 14px; }
.ticks li { border-top-color: var(--glass-line); }
.svc-jump a { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.svc-jump a:hover { box-shadow: var(--neu-inset); color: var(--teal-strong); }
.svc .num {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
}

/* About */
.facts { border-top: 0; gap: 16px; }
.fact,
.fact + .fact {
  padding: 22px 24px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-shadow);
}
.not-list li, .not-list li:last-child { border-color: var(--glass-line); }

/* Contact: soft inset fields */
.form-card { border-radius: 24px; }
.field input,
.field select,
.field textarea {
  background-color: var(--bg);
  border-color: transparent;
  box-shadow: var(--neu-inset);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background-color: #F4F8F8;
  border-color: var(--teal);
  box-shadow: var(--neu-inset), 0 0 0 3px rgba(43, 179, 177, 0.2);
}
.chips label { background: var(--bg); border-color: transparent; box-shadow: var(--neu-raised-sm); }
.chips input:checked + label { background: var(--ink); color: #fff; box-shadow: var(--neu-inset); }
.ccard { border-radius: 18px; transition: transform .25s var(--ease), background-color .25s var(--ease); }
a.ccard:hover { border-color: var(--glass-edge); background: var(--glass-strong); transform: translateY(-2px); }
.next-steps { border-style: solid; }

/* Footer: dark glass card */
.site-footer {
  position: relative;
  isolation: isolate;
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 12px;
  border-radius: 28px;
  background: #0B1C21;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(45% 60% at 100% 0%, rgba(43, 179, 177, 0.25), transparent 70%);
}
.wordmark { -webkit-text-stroke-color: rgba(255, 255, 255, 0.12); }

.wa-float {
  background: rgba(12, 26, 31, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 1024px) {
  .stack-cell:nth-child(3) { border-left: 0; }
  .stack-cell:nth-child(n+3) { border-top: 1px solid var(--glass-line); }
  .step:nth-child(3) { padding-left: 24px; border-left: 1px solid var(--dark-glass-edge); }
  .step:nth-child(n+3) { margin-top: 0; border-top: 1px solid var(--dark-glass-edge); }
}

@media (max-width: 860px) {
  .facts { gap: 12px; }
  .fact + .fact { border-top: 1px solid var(--glass-edge); }
  .commitment:nth-child(3) { padding-left: 28px; }
  .commitment:nth-child(n+3) { border-top-color: var(--glass-line); }
  .dark, .site-footer { margin-left: 8px; margin-right: 8px; border-radius: 22px; }
}

@media (max-width: 600px) {
  .site-header { top: 8px; margin-top: 8px; width: calc(100% - 16px); }
  .commitment, .commitment + .commitment { padding: 22px; }
  .commitment + .commitment { border-top-color: var(--glass-line); }
  .stack-cell + .stack-cell { border-left: 0; border-top: 1px solid var(--glass-line); }
  .step, .step + .step { padding: 24px 20px; border: 1px solid var(--dark-glass-edge); }
  .process { gap: 12px; }
  .faq { padding: 0 18px; }
}

/* Browsers without backdrop-filter get solid, readable panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .board, .industry, .form-card, .ccard, .stack-grid, .commitments, .faq, .fact, .site-header {
    background: rgba(255, 255, 255, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}