html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; }
body { overflow-x: hidden; }

.glass { background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); }
.dark .glass { background: rgba(17,24,39,0.5); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform:none; transition:none; } }

/* Interactive emerald highlights */
.lift, .service-card, .process-card, .cta-tile, header nav a, button, a {
  transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.service-card:hover, .process-card:hover, .cta-tile:hover, .lift:hover {
  box-shadow: 0 10px 30px rgba(16,185,129,.20), 0 1px 1px rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.55) !important;
  transform: translateY(-2px);
}
header nav a:hover, header nav a:focus-visible {
  color: rgb(5 150 105);
  text-shadow: 0 0 12px rgba(16,185,129,.35);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(16,185,129,.6);
  outline-offset: 3px;
}
.service-card:active, .process-card:active, .cta-tile:active, .lift:active { transform: translateY(0); }

/* Remove hover hues/lift inside services */
body.tech-canvas #services .service-card:hover,
body.tech-canvas #services .service-card:focus-visible{
  box-shadow: none !important; border-color: rgba(226,232,240,.55) !important; transform:none !important;
}

/* Strong green hue on all other boxes (rounded + border + shadow), excluding service cards */
body.tech-canvas :where(article,div,aside,section)[class*="rounded-"][class*="border"][class*="shadow"]:not(#services .service-card):not(#services .service-card *):not(.no-green){
  box-shadow: 0 12px 36px rgba(16,185,129,.28), 0 1px 1px rgba(0,0,0,.05);
  border-color: rgba(16,185,129,.5) !important;
}

/* Mobile: make cards solid for stronger contrast */
@media (max-width: 640px){
  body.tech-canvas :where(article,div,aside)[class*="bg-white/"]{ background:#ffffff !important }
  .dark body.tech-canvas :where(article,div,aside)[class*="bg-slate-900/"]{ background:#020617 !important }
}

/* Directional reveals for timeline cards */
.reveal.from-left { transform: translateX(-24px); }
.reveal.from-right { transform: translateX(24px); }
.reveal.in.from-left, .reveal.in.from-right { transform: translateX(0); }

.tap { min-height: 44px; min-width: 44px; }

#mobileMenu { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
#mobileMenuContent { opacity: 0; transition: opacity .2s ease; }
#mobileMenu.open #mobileMenuContent { opacity: 1; }

:root{
  --svc-card-minh: 19rem;
  --svc-icon-size: 10rem;
  --section-accent: linear-gradient(90deg, rgba(16,185,129,.5), rgba(16,185,129,0));
}
@media (min-width: 640px){
  :root{ --svc-card-minh: 20rem; }
}

.service-card{
  position: relative;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: var(--svc-card-minh);
  color: #0f172a;
  border-radius: .75rem;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}
.dark .service-card{ background: transparent; }

.service-card .rotator{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  will-change: transform;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.service-card.is-flipped .rotator{ transform: rotateY(180deg); }

.service-card .face{
  position: absolute; inset: 0;
  display: flex;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  border-radius: inherit;
  border: 0;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.12);
  outline: 1px solid transparent;
  z-index: 1;
}
.dark .service-card .face{ border: 0; background: rgb(2 6 23 / 1); box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35); }

/* Remove container underlay so the grey tech background shows mid-flip */
body.tech-canvas #services .service-card{ position: relative; background: transparent !important }
body.tech-canvas #services .service-card::before{ content:none }

.service-card .front{ transform: rotateY(0); }
.service-card .back { transform: rotateY(180deg); }

.service-card .content{
  width: 100%; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  text-align: center; line-height: 1.5;
}
.service-card .content-front{ min-height: var(--svc-card-minh); justify-content: center; }
.service-card .content-back{ min-height: var(--svc-card-minh); justify-content: center; }
.service-card .content-back ul{ text-align: left; align-self: stretch; margin-top: .25rem; }

.service-card .icon{
  width: var(--svc-icon-size); height: var(--svc-icon-size);
  object-fit: contain; object-position: center; display: block;
  background: transparent !important; padding: 0 !important; border-radius: 0 !important;
  filter: drop-shadow(0 6px 12px rgba(16,24,40,.15));
}

@media (prefers-color-scheme: dark) {
  .service-card, .service-card h3, .service-card p { color: #0f172a !important; }
}

.service-card::after{ content:none }

#services .cards-grid > *{ min-height: var(--svc-card-minh); }
#services .cta-tile{
  min-height: var(--svc-card-minh); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 1.5rem; border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(16,185,129,.35);
}

.reveal.in .spark-draw { animation: drawline 900ms cubic-bezier(.22,1,.36,1) forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  .reveal.in .spark-draw { animation: none; stroke-dashoffset: 0; }
}

/* GLOBAL tech canvas – unifies sections and floats surfaces */
body.tech-canvas section{ background:transparent !important; border-color:transparent !important; backdrop-filter:none !important }
body.tech-canvas section > [aria-hidden="true"][class*="absolute"][class*="-z-10"]{ display:none !important }
body.tech-canvas .grad-rule{ opacity:.08 !important }

/* Make white/light surfaces glassy (avoid buttons/anchors) */
body.tech-canvas :where(article,div,aside)[class*="bg-white"],
body.tech-canvas :where(article,div,aside)[class*="bg-slate-50"],
body.tech-canvas :where(article,div,aside)[class*="bg-slate-100"]{
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(12px) saturate(110%);
  border-color:rgba(148,163,184,.28) !important;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.12);
}
.dark body.tech-canvas :where(article,div,aside)[class*="bg-white"],
.dark body.tech-canvas :where(article,div,aside)[class*="bg-slate-50"],
.dark body.tech-canvas :where(article,div,aside)[class*="bg-slate-100"]{
  background:rgba(2,6,23,.5) !important;
  border-color:rgba(30,41,59,.6) !important;
  box-shadow:0 1px 1px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
}

/* Reset service card container to be transparent by default */
body.tech-canvas .service-card{ background:transparent !important }

/* Hero/banner: use original colours (no dimming) */
/* (intentionally no overrides here) */


/* (removed forced opaque faces/underlay in services to avoid flash during flip) */

/* Remove any forced underlay in services to avoid white flash */
body.tech-canvas #services .service-card .rotator{ position: relative }
body.tech-canvas #services .service-card .rotator::before{ content:none }

/* Flip hint badge */
.service-card .front .flip-hint,
.service-card .back .flip-hint{
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  pointer-events: none;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 9999px;
  color: #065f46;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
  box-shadow: 0 2px 8px rgba(16,185,129,.20);
  backdrop-filter: saturate(110%);
  opacity: 0.95;
  transition: opacity .25s ease, transform .25s ease;
}
.dark .service-card .front .flip-hint,
.dark .service-card .back .flip-hint{
  color: #34d399;
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.45);
}
.service-card:hover .front .flip-hint,
.service-card:focus-within .front .flip-hint,
.service-card:hover .back .flip-hint,
.service-card:focus-within .back .flip-hint{
  transform: translateY(-2px);
}
/* Keep hint always visible (no auto-hide) */