/* ---------------------------------------------
   Custom overrides

   We define overrides at the end of the stylesheet so they take
   precedence over earlier definitions. These adjustments enlarge
   the navigation logo, display the brand name in uppercase and
   harmonise sizes and spacing. */
.navLogo{
  width: 80px;
  height: 30px;
  margin-right: 0.2rem;
  vertical-align: middle;
}
.brandText{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  display: inline-block;  
}

/* Recolour various blue elements to a richer purple palette. By
   redefining these selectors at the end of the stylesheet we
   ensure they override earlier definitions without needing to
   modify the original lines above. */
.toggleBtn[aria-checked="true"]{
  background: rgba(126,99,163,.35);
}

/* Small dots used in hero meta information */
.dot{
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.8));
  box-shadow: 0 0 0 6px rgba(126,99,163,.08);
}

/* Bars in the signal graph */
.signalGraph .bar{
  background: linear-gradient(180deg, rgba(126,99,163,.55), rgba(96,73,142,.55));
}

/* Bullets used in lists */
.signalBullet{
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.75));
  box-shadow: 0 0 0 6px rgba(96,73,142,.08);
}

/* Service category dots */
.svcDot{
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.72));
  box-shadow: 0 0 0 9px rgba(96,73,142,.07);
}

/* Stylise the skill path strokes */
.slPath--a{ stroke: rgba(126,99,163,.38); }
.slPath--b{ stroke: rgba(96,73,142,.30); }
.chatToggle{
  background: linear-gradient(135deg, #77509A, #B9A6D6) !important;
}
/*
 * Custom overrides (December 2025)
 *
 * Adjust service card colours to be more marbled and subtle, refine chat widget
 * colours, and ensure hidden chat windows disappear correctly.
 */

/* Updated service cards gradient to a soft marbled purple/white appearance */
.svcCard{
  background: linear-gradient(180deg, rgba(244,240,250,0.68), rgba(232,227,247,0.55)) !important;
  border-color: rgba(200,187,225,0.32) !important;
}

body.dark .svcCard{
  background: linear-gradient(180deg, rgba(35,30,50,0.62), rgba(28,24,45,0.48)) !important;
  border-color: rgba(80,70,120,0.46) !important;
}

/*  chat window */
.chatWindow {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.chatWindow.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* Harmonise chat widget colours: match send button and user messages to chat toggle palette */
.chatForm button{
  background: linear-gradient(135deg, #77509A, #B9A6D6) !important;
}

.message.user{
  background: linear-gradient(135deg, #77509A, #B9A6D6) !important;
}
/* Synaptica Studio — Pure White Apple-like (Awwwards-grade)
   Notes:
   - Keep it breathable, precise, quiet.
   - AI switch increases intensity: glow, contrast, motion.
*/

:root{
  --bg:#ffffff;
  --ink:#0b0d10;
  --muted:#5f6773;
  --line:rgba(10,14,18,.10);

  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.40);
  --blur: 22px;

  --shadow: 0 18px 55px rgba(12,18,28,.10);
  --shadow2: 0 10px 25px rgba(12,18,28,.08);

  --accent: #0b0d10;
  --accent2:#1677ff; /* minimal electric hint */
  --mint:#00b3a4;    /* synaptic hint */

  --radius: 22px;
  --radius2: 18px;
  --max: 1180px;

  --t: 260ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  /* Fluid gradient background with subtle motion */
  background: linear-gradient(120deg, #f9fafb 0%, #f1f5f9 25%, #eef2f7 50%, #f9fafb 75%, #f1f5f9 100%);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:-0.01em;
  overflow-x:hidden;
}

/* keyframes for fluid background */
@keyframes gradientShift{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.mono{ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing:-0.02em; }
.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid rgba(10,14,18,.10);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* Canvas (ambient) */
#synapseCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events:none;
  opacity: .88;
  filter: saturate(.9);
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10,14,18,.08);
}

.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.brandMark{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Updated brand mark to use a darker purple palette instead of the original blue/green */
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.95), rgba(96,73,142,.75)) !important;
  box-shadow: 0 0 0 6px rgba(126,99,163,.08) !important;
}
.brandText{
  /* Use uppercase styling similar to the logotype and adjust size */
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

.navLinks{
  display:flex;
  gap: 18px;
  align-items:center;
}
.navLink{
  font-size: 14px;
  color: rgba(11,13,16,.78);
  padding: 10px 10px;
  border-radius: 999px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.navLink:hover{
  background: rgba(10,14,18,.045);
  color: rgba(11,13,16,.92);
}

.navControls{
  display:flex;
  align-items:center;
  gap: 14px;
}

.navCTA{
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.62);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.navCTA:hover{ transform: translateY(-1px); background: rgba(255,255,255,.8); }

/* Global button microinteractions */
.btn{
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(12,18,28,.12);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
}

/* Skip link: visible only when focused for screen readers */
.skip-link{
  position:absolute;
  left: -999px;
  top: -999px;
  background:#000;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  z-index:9999;
}
.skip-link:focus{
  left:8px;
  top:8px;
}



/* Organic blob decorative element */
.blob{
  position:absolute;
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, #00b3a4 0%, #1677ff 100%);
  border-radius: 58% 42% 48% 52% / 60% 35% 65% 40%;
  opacity: .5;
  filter: blur(60px);
  animation: blobMorph 18s ease-in-out infinite;
  pointer-events:none;
  z-index: 0;
}
@keyframes blobMorph{
  0%{
    transform: translate(0,0) scale(1) rotate(0deg);
    border-radius: 58% 42% 48% 52% / 60% 35% 65% 40%;
  }
  33%{
    transform: translate(-20px,15px) scale(1.15) rotate(30deg);
    border-radius: 50% 50% 40% 60% / 60% 50% 50% 40%;
  }
  66%{
    transform: translate(15px,-25px) scale(0.9) rotate(-20deg);
    border-radius: 60% 40% 55% 45% / 45% 65% 35% 55%;
  }
  100%{
    transform: translate(0,0) scale(1) rotate(0deg);
    border-radius: 58% 42% 48% 52% / 60% 35% 65% 40%;
  }
}

/* Progress bar styling */
.progressBar{
  width: 100%;
  height: 6px;
  background: rgba(10,14,18,.10);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.progressFill{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #1677ff 0%, #00b3a4 100%);
  transition: width 0.4s ease;
}

/* Chat widget styles */
.chatWidget{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}
.chatToggle{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border:none;
  font-size: 20px;
  color:#fff;
  /* Updated chat button to a refined purple/grey gradient inspired by the synaptic canvas */
  background: linear-gradient(135deg, #77509A, #B9A6D6);
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(12,18,28,.18);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chatToggle:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12,18,28,.22);
}
.chatWindow{
  position:absolute;
  bottom: 60px;
  right:0;
  width: 320px;
  max-height: 400px;
  display:flex;
  flex-direction:column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12,18,28,.28);
}
.chatHeader{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 16px;
  background: rgba(255,255,255,.68);
  border-bottom: 1px solid rgba(10,14,18,.08);
}
.chatTitle{
  font-weight:600;
  color:var(--ink);
}
.chatClose{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  color: rgba(11,13,16,.6);
}
.chatMessages{
  flex:1;
  padding:12px 16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: rgba(255,255,255,.42);
  backdrop-filter:blur(10px);
}
.message{
  max-width: 80%;
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.4;
  box-shadow: 0 4px 8px rgba(12,18,28,.12);
}
.message.bot{
  align-self:flex-start;
  background: #f1f5f9;
  color:var(--ink);
}
.message.user{
  align-self:flex-end;
  background: linear-gradient(135deg, #1677ff, #00b3a4);
  color:#fff;
}
.chatForm{
  display:flex;
  padding:10px 12px;
  background: rgba(255,255,255,.68);
  border-top:1px solid rgba(10,14,18,.08);
}
.chatForm input{
  flex:1;
  border:1px solid rgba(10,14,18,.14);
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  margin-right:8px;
}
.chatForm button{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  /* Match chat toggle color: purple/grey gradient */
  background: linear-gradient(135deg, #7E63A3, #AEA9CF);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chatForm button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(12,18,28,.20);
}

.toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.58);
}
.toggleLabel{
  font-size: 12px;
  color: rgba(11,13,16,.62);
}
.toggleText{
  font-size: 12px;
  color: rgba(11,13,16,.70);
  font-weight: 600;
  letter-spacing:-0.02em;
}
.toggleBtn{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.12);
  background: rgba(10,14,18,.10);
  position: relative;
  cursor:pointer;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.toggleBtn:hover{ transform: translateY(-1px); }
.toggleKnob{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  position:absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  transition: transform var(--t) var(--ease);
}

.toggleBtn[aria-checked="true"]{
  background: rgba(22,119,255,.35);
}
.toggleBtn[aria-checked="true"] .toggleKnob{
  transform: translateX(18px);
}

.toggleBtn--ai[aria-checked="true"]{
  background: rgba(0,179,164,.38);
}

.navBurger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.6);
  cursor:pointer;
}
.navBurger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(11,13,16,.78);
  margin: 0 auto;
  border-radius: 10px;
}
.navBurger span + span{ margin-top: 6px; }

/* Drawer */
.drawer{
  position: fixed;
  inset: 64px 14px auto 14px;
  z-index: 60;
  display:none;
}
.drawer.isOpen{ display:block; }
.drawerInner{
  padding: 16px;
  border-radius: 18px;
}
.drawerLink{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(11,13,16,.86);
}
.drawerLink:hover{ background: rgba(10,14,18,.045); }
.drawerLink--cta{
  margin-top: 8px;
  font-weight: 700;
  border: 1px solid rgba(10,14,18,.12);
}
.drawerToggles{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,14,18,.08);
  display:grid;
  gap: 10px;
}
.drawerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.drawerRowLabel{
  font-size: 12px;
  color: rgba(11,13,16,.62);
}
.miniBtn{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.7);
  cursor:pointer;
}

/* Layout wrappers */
main{ position: relative; z-index: 2; }
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero */
.hero{
  position: relative;
  padding-top: 92px;
  min-height: 92vh;
  display:flex;
  align-items:center;
}
.heroGrid{
  width:100%;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 20px;
  align-items: center;
}
.heroPlate{
  border-radius: 28px;
  padding: 28px 28px 22px 28px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(10,14,18,.12);
  position: relative;
  transform: translateZ(0);
}
.kicker{
  font-size: 12px;
  color: rgba(11,13,16,.60);
  margin-bottom: 12px;
}
.heroTitle{
  margin: 0;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing:-0.035em;
}
.heroLead{
  margin: 14px 0 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11,13,16,.72);
  max-width: 60ch;
}
.heroCaps{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.cap{
  font-size: 13px;
  color: rgba(11,13,16,.72);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.62);
}
.heroActions{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 16px;
  border: 1px solid rgba(10,14,18,.12);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  cursor:pointer;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); }
.btnPrimary{
  background: rgba(11,13,16,.92);
  color:#fff;
  border-color: rgba(11,13,16,.80);
  box-shadow: 0 10px 25px rgba(12,18,28,.16);
}
.btnPrimary:hover{ background: rgba(11,13,16,1); }
.btnGhost{
  background: rgba(255,255,255,.66);
  color: rgba(11,13,16,.88);
}
.heroMeta{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,14,18,.08);
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
}
.metaItem{
  display:flex;
  align-items:center;
  gap: 10px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Replace blue/green bullets with a rich purple gradient */
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.8)) !important;
  box-shadow: 0 0 0 6px rgba(126,99,163,.08) !important;
}
.metaText{
  font-size: 12px;
  color: rgba(11,13,16,.64);
}

/* Hero aside */
.heroAside{
  position: relative;
  display:grid;
  gap: 14px;
}
.signalCard{
  border-radius: 24px;
  padding: 18px;
  overflow:hidden;
  background: radial-gradient(circle at 30% 30%, rgba(148, 122, 183, 0.982), rgba(167, 159, 183, 0.8)) !important;
  box-shadow: 0 0 0 6px rgba(185, 166, 211, 0.08) !important;
  --blur: 22px
}
.signalTitle{
  font-weight: 700;
  letter-spacing:-0.03em;
  font-size: 18px;
}
.signalLine{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(11,13,16,.60);
}
.signalGraph{
  margin-top: 14px;
  display:flex;
  gap: 8px;
  align-items:flex-end;
  height: 46px;
}
.signalGraph .bar{
  width: 14px;
  border-radius: 10px;
  /* Dark purple gradient for the signal graph bars */
  background: linear-gradient(180deg, rgba(126,99,163,.55), rgba(96,73,142,.55)) !important;
  animation: barPulse 3.2s var(--ease) infinite;
  opacity: .9;
}
.signalGraph .bar:nth-child(2){ height: 60%; animation-delay: .2s; }
.signalGraph .bar:nth-child(3){ height: 85%; animation-delay: .45s; }
.signalGraph .bar:nth-child(4){ height: 55%; animation-delay: .7s; }
.signalGraph .bar:nth-child(1){ height: 75%; }
@keyframes barPulse{
  0%,100%{ transform: translateY(0); filter: saturate(1); }
  50%{ transform: translateY(-5px); filter: saturate(1.2); }
}

.microStack{
  border-radius: 24px;
  padding: 16px 16px;
}
.microRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
}
.microDot{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(11,13,16,.35);
}
.microText{
  font-size: 12px;
  color: rgba(11,13,16,.66);
}

/* Scroll hint */
.heroScrollHint{
  position:absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  opacity: .55;
}
.hintLine{
  width: 1px;
  height: 28px;
  background: rgba(10,14,18,.25);
  animation: hint 2.2s var(--ease) infinite;
}
@keyframes hint{
  0%,100%{ transform: translateY(0); opacity:.45; }
  50%{ transform: translateY(6px); opacity:.75; }
}
.hintText{
  font-size: 11px;
  color: rgba(11,13,16,.60);
}

/* Sections */
.section{
  padding: 86px 0;
  position: relative;
}
.sectionHead{
  display:grid;
  gap: 10px;
  margin-bottom: 22px;
}
.sectionTitle{
  margin:0;
  font-size: 22px;
  letter-spacing:-0.02em;
}
.sectionLead{
  margin:0;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing:-0.03em;
  color: rgba(11,13,16,.88);
}
.sectionSub{
  margin:0;
  font-size: 14px;
  color: rgba(11,13,16,.64);
}

/* Section 1 pills */
.pillRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pill{
  border-radius: 22px;
  padding: 18px 18px 16px 18px;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.pill:hover{ transform: translateY(-2px); }
.pillTitle{
  margin:0;
  font-size: 14px;
  font-weight: 700;
}
.pillText{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: rgba(11,13,16,.66);
  line-height: 1.6;
}

/* Section 2 manifesto */
.sectionWork{ padding-top: 64px; }
.manifesto{
  display:grid;
  gap: 24px;
}
.manifestoLine{
  padding: 18px 0;
  border-top: 1px solid rgba(10,14,18,.08);
}
.manifestoLine:first-child{ border-top: 0; }
.manifestoTitle{
  margin:0;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing:-0.03em;
}
.manifestoText{
  margin: 10px 0 0 0;
  font-size: 14px;
  color: rgba(11,13,16,.62);
}

/* Section 3 systems */
.systemsGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.sysCard{
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  transition: transform var(--t) var(--ease);
}
.sysCard:hover{ transform: translateY(-2px); }
.sysCard h3{
  margin:0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing:-0.02em;
  border-color: rgba(92,80,146,0.38) !important;
}
.sysCard p{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: rgba(11,13,16,.66);
  line-height: 1.6;
}
.sysMeta{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(11,13,16,.52);
}

/* Section 4 signals */
.signalsGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.signal{
  border-radius: 18px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.signalBullet{
  width: 9px; height: 9px; border-radius: 50%;
  /* Dark purple bullets instead of blue/green */
  background: radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.75)) !important;
  box-shadow: 0 0 0 6px rgba(96,73,142,.08) !important;
  
}
.signalText{
  font-size: 13px;
  color: rgba(11,13,16,.74);
}

/* CTA */
.sectionCTA{ padding-bottom: 110px; }
.ctaCard{
  border-radius: 28px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.ctaTitle{
  margin:0;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing:-0.03em;
}
.ctaText{
  margin: 12px 0 0 0;
  font-size: 14px;
  color: rgba(11,13,16,.66);
  line-height: 1.7;
  max-width: 70ch;
}
.ctaActions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footerNote{
  margin-top: 18px;
  font-size: 11px;
  color: rgba(11,13,16,.48);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(11,13,16,.92);
  color: #fff;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  opacity: 0;
  pointer-events:none;
  z-index: 90;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.isOn{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Reveal animations (quiet, Apple-like) */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: transform, opacity;
}
.reveal.isIn{
  opacity: 1;
  transform: translateY(0);
}

/* AI Mode (intense, still premium) */
body.aiOn{
  --blur: 26px;
}
body.aiOn #synapseCanvas{
  opacity: 1;
  filter: saturate(1.15) contrast(1.08);
}
body.aiOn .topbar{
  background: rgba(255,255,255,.78);
  border-bottom-color: rgba(0,179,164,.18);
}
body.aiOn .brandMark{
  box-shadow: 0 0 0 7px rgba(0,179,164,.10), 0 0 50px rgba(22,119,255,.08);
}
body.aiOn .heroPlate{
  box-shadow: 0 22px 70px rgba(12,18,28,.12);
}
body.aiOn .btnPrimary{
  box-shadow: 0 18px 45px rgba(22,119,255,.14);
}
body.aiOn .glass,
body.aiOn .sysCard{
  border-color: rgba(0,179,164,.16);
}
body.aiOn .cap{
  border-color: rgba(0,179,164,.18);
}
body.aiOn::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 1;
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(22,119,255,.09), transparent 55%),
    radial-gradient(800px 520px at 78% 38%, rgba(0,179,164,.08), transparent 58%),
    radial-gradient(900px 700px at 50% 90%, rgba(10,14,18,.04), transparent 60%);
  mix-blend-mode: normal;
}

/* Responsive */
@media (max-width: 940px){
  .navLinks{ display:none; }
  .navControls{ display:none; }
  .navBurger{ display:block; }
  .brand{ min-width: auto; }
  .heroGrid{ grid-template-columns: 1fr; }
  .heroAside{ grid-template-columns: 1fr 1fr; }
  .pillRow{ grid-template-columns: 1fr; }
  .systemsGrid{ grid-template-columns: 1fr; }
  .signalsGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .heroPlate{ padding: 22px; border-radius: 24px; }
  .heroAside{ grid-template-columns: 1fr; }
  .nav{ padding: 12px 14px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition: none; transform: none; opacity: 1; }
  .signalGraph .bar, .hintLine{ animation: none; }
  .btn, .navCTA, .pill, .sysCard{ transition: none; }
}


/* micro services line (ultra minimal) */
.microServices{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(11,13,16,.50);
}


/* OPTION B — AI hover microinteractions (AI ON only)
   Adds premium sheen + subtle pointer-follow highlight on system cards.
*/
body.aiOn .sysCard{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
body.aiOn .sysCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  background: radial-gradient(520px 240px at var(--mx,50%) var(--my,50%),
    rgba(0,179,164,.13),
    rgba(22,119,255,.08) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events:none;
}
body.aiOn .sysCard::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width: 120%;
  height: 200%;
  transform: rotate(18deg) translateX(-20%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity: 0;
  pointer-events:none;
}
body.aiOn .sysCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(12,18,28,.14);
  border-color: rgba(0,179,164,.18);
}
body.aiOn .sysCard:hover::before{
  opacity: 1;
}
body.aiOn .sysCard:hover::after{
  opacity: 1;
  animation: sheen 900ms var(--ease) 1;
}
@keyframes sheen{
  0%{ transform: rotate(18deg) translateX(-28%); opacity: 0; }
  25%{ opacity: .55; }
  100%{ transform: rotate(18deg) translateX(38%); opacity: 0; }
}


/* UI Signal Line (AI ON only)
   Minimal drawn line that appears once in Signals section (AI mode).
*/
.signalLineFx{
  width: 100%;
  height: 120px;
  margin-top: 14px;
  margin-bottom: 10px;
  opacity: 0;
  pointer-events:none;
  display:block;
}
.slPath{
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 10px 18px rgba(12,18,28,.08));
}
.slPath--a{ stroke: rgba(22,119,255,.38); }
.slPath--b{ stroke: rgba(0,179,164,.30); }

body.aiOn .signalLineFx.isOn{ opacity: 1; }
body.aiOn .signalLineFx.play .slPath--a{ animation: slDraw 1400ms var(--ease) 1 forwards; }
body.aiOn .signalLineFx.play .slPath--b{ animation: slDraw 1500ms var(--ease) 1 forwards; animation-delay: 90ms; }

@keyframes slDraw{
  0%{ stroke-dashoffset: 1200; opacity: 0.0; }
  20%{ opacity: 1; }
  100%{ stroke-dashoffset: 0; opacity: 1; }
}
body.aiOn .signalLineFx.fadeOut{
  transition: opacity 520ms var(--ease);
  opacity: 0;
}
body:not(.aiOn) .signalLineFx{ display:none; }


/* Experience Control Panel (AI ON only) */
.xpPanel{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  border-radius: 22px;
  z-index: 88;
  border: 1px solid rgba(0,179,164,.16);
  box-shadow: 0 28px 80px rgba(12,18,28,.14);
  padding: 14px 14px 12px 14px;
  display: none;
  user-select: none;
}
body.aiOn .xpPanel{ display: block; }
.xpPanel.isHidden{ display:none !important; }

.xpHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.xpTitle{
  font-weight: 800;
  letter-spacing:-0.03em;
  font-size: 14px;
}
.xpSub{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(11,13,16,.50);
  line-height: 1.3;
}
.xpActions{ display:flex; gap: 8px; }
.xpIconBtn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.72);
  cursor: pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.xpIconBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.86); }
.xpIcon{
  display:block;
  width: 14px; height: 14px;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(11,13,16,.45);
  opacity: .75;
}
.xpIcon--x{
  width: 12px; height: 12px; border: 0;
  position: relative;
}
.xpIcon--x::before, .xpIcon--x::after{
  content:"";
  position:absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: rgba(11,13,16,.55);
  border-radius: 2px;
  transform-origin: center;
}
.xpIcon--x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.xpIcon--x::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.xpBody{ margin-top: 10px; display:grid; gap: 12px; }
.xpRow{ display:grid; gap: 8px; }
.xpLabel{ font-size: 11px; color: rgba(11,13,16,.50); }
.xpSeg{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.xpSeg--2{ grid-template-columns: repeat(2, 1fr); }
.xpSegBtn{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.68);
  font-size: 12px;
  color: rgba(11,13,16,.72);
  cursor:pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.xpSegBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.86); }
.xpSegBtn.isOn{
  background: rgba(0,179,164,.10);
  border-color: rgba(0,179,164,.22);
  color: rgba(11,13,16,.84);
}

.xpRow--cta{ padding-top: 8px; border-top: 1px solid rgba(10,14,18,.08); }
.xpBtn{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(10,14,18,.12);
  background: rgba(11,13,16,.92);
  color: #fff;
  cursor:pointer;
  font-weight: 700;
  letter-spacing:-0.02em;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.xpBtn:hover{ transform: translateY(-1px); background: rgba(11,13,16,1); box-shadow: 0 16px 40px rgba(12,18,28,.16); }
.xpHint{ font-size: 11px; color: rgba(11,13,16,.48); }

.xpFoot{
  display:flex; align-items:center; gap: 10px;
  padding-top: 8px; border-top: 1px solid rgba(10,14,18,.08);
  font-size: 11px; color: rgba(11,13,16,.48);
}
.xpInfoDot{
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(22,119,255,.9), rgba(0,179,164,.75));
  box-shadow: 0 0 0 7px rgba(0,179,164,.07);
}

.xpDragHandle{
  position:absolute;
  left: 14px; right: 14px; top: 10px;
  height: 34px;
  border-radius: 16px;
  cursor: grab;
  opacity: 0;
  z-index: 1;
}
.xpPanel.isDocked .xpDragHandle{ display:none; }
.xpPanel:not(.isDocked) .xpDragHandle{ display:block; }
.xpHead, .xpBody{ position: relative; z-index: 2; }
.xpPanel.isDragging .xpDragHandle{ cursor: grabbing; }
.xpPanel.isDocked{
  right: 10px;
  top: auto;
  bottom: 14px;
  transform: none;
}

/* UX Highlight mode (brief) */
body.xpHighlightOn .navLink,
body.xpHighlightOn .btn,
body.xpHighlightOn .cap,
body.xpHighlightOn .sysCard,
body.xpHighlightOn .signal{
  box-shadow: 0 0 0 6px rgba(0,179,164,.08);
  border-color: rgba(0,179,164,.20) !important;
}
body.xpHighlightOn .btnPrimary{
  box-shadow: 0 18px 45px rgba(22,119,255,.14), 0 0 0 6px rgba(0,179,164,.08);
}

/* Experience vars controlled by panel */
:root{
  --xp-intensity: 1;
  --xp-motion: 1;
}
body.xpLow{ --xp-intensity: .75; }
body.xpMed{ --xp-intensity: 1; }
body.xpHigh{ --xp-intensity: 1.25; }

body.xpCalm{ --xp-motion: .85; }
body.xpImmersive{ --xp-motion: 1.15; }

@media (max-width: 560px){
  .xpPanel{ width: min(340px, calc(100vw - 16px)); right: 8px; }
}


/* Services — category cards (compact, no overload) */
.svcCats{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px;}
.svcCard{grid-column:span 6;border-radius:22px;padding:18px 18px 14px;border:1px solid rgba(0,179,164,.14);
  box-shadow:0 20px 60px rgba(12,18,28,.10);transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position:relative;overflow:hidden;}
.svcCard::after{content:"";position:absolute;inset:-40%;
  background:radial-gradient(circle at 25% 25%, rgba(22,119,255,.10), transparent 55%),
           radial-gradient(circle at 70% 40%, rgba(0,179,164,.10), transparent 55%);
  opacity:.7;pointer-events:none;}
body.aiOn .svcCard:hover{transform:translateY(-2px);box-shadow:0 28px 80px rgba(12,18,28,.14);}
.svcTop{display:flex;align-items:center;gap:10px;position:relative;z-index:1;}
.svcIcon{width:34px;height:34px;border-radius:14px;border:1px solid rgba(10,14,18,.10);background:rgba(255,255,255,.70);
  display:grid;place-items:center;}
.svcDot{width:10px;height:10px;border-radius:50%;
  /* Updated to a dark purple gradient and matching shadow */
  background:radial-gradient(circle at 30% 30%, rgba(126,99,163,.9), rgba(96,73,142,.72)) !important;
  box-shadow:0 0 0 9px rgba(96,73,142,.07) !important;}
.svcTitle{margin:0;font-size:14px;font-weight:800;letter-spacing:-0.03em;}
.svcList{margin:12px 0 10px;padding-left:18px;color:rgba(11,13,16,.72);line-height:1.55;position:relative;z-index:1;font-size:13px;}
.svcMore{width:100%;text-align:left;padding:10px 12px;border-radius:16px;border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.66);cursor:pointer;transition:transform var(--t) var(--ease), background var(--t) var(--ease);
  position:relative;z-index:1;}
.svcMore:hover{transform:translateY(-1px);background:rgba(255,255,255,.85);}
.svcMorePanel{margin-top:10px;border-radius:16px;border:1px solid rgba(10,14,18,.08);background:rgba(255,255,255,.62);
  padding:10px 12px;color:rgba(11,13,16,.58);position:relative;z-index:1;}
@media (max-width:860px){.svcCard{grid-column:span 12;}}


/* Theme — Dark mode (visual rest, still premium) */
body.dark{
  --bg: #0b0d10;
  --bg2: #0f141a;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);
  --border: rgba(255,255,255,.12);
  --shadow: 0 28px 90px rgba(0,0,0,.45);
  /* Replace glow colours with dark purples for a cohesive palette */
  --glowA: rgba(126,99,163,.18);
  --glowB: rgba(96,73,142,.16);
  /* Adjust the ambient gradients to use our purple shades */
  background: radial-gradient(900px 600px at 20% 10%, rgba(126,99,163,.14), transparent 60%),
              radial-gradient(900px 600px at 80% 40%, rgba(96,73,142,.12), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

body.dark .glass{
  background: rgba(20,24,30,.55) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}

body.dark .nav{
  background: rgba(10,12,14,.55);
  border-bottom-color: rgba(255,255,255,.10);
}

body.dark .toggleLabel{ opacity:.86; }
body.dark .svcList{ color: rgba(255,255,255,.72); }
body.dark .svcMore{ background: rgba(20,24,30,.55); border-color: rgba(255,255,255,.12); }
body.dark .svcMorePanel{ background: rgba(20,24,30,.50); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.62); }


/* Experience reopen chip */
.xpReopen{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(12,18,28,.16);
  color: rgba(11,13,16,.78);
  cursor:pointer;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
body.aiOn .xpReopen.isOn{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.dark .xpReopen{
  background: rgba(20,24,30,.55);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}


/* =========================
   Editorial body surfaces
   ========================= */
body.dark .card,
body.dark .panel,
body.dark .svcCard,
body.dark .svcMore,
body.dark .svcMorePanel,
body.dark .kpiCard,
body.dark .featureCard,
body.dark .gridCard{
  background: #121821 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 48px rgba(0,0,0,.35) !important;
}

body.dark .card:hover,
body.dark .svcCard:hover{
  box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
}

/* =========================
   Typography contrast
   ========================= */
body.dark{
  --text: rgba(248,250,252,.95);
  --muted: rgba(210,218,228,.70);
}

body.dark h1,
body.dark h2,
body.dark h3{
  color: rgba(250,252,255,.98) !important;
}

body.dark p,
body.dark li,
body.dark .muted,
body.dark .sub{
  color: var(--muted) !important;
}

/* =========================
   Nebula balance
   ========================= */
body.dark #synapseCanvas{
  opacity: .45 !important;
  filter: saturate(.85) contrast(.92) !important;
}




/* =========================
   HERO — Pure White Glass (Apple-like)
   ========================= */

/* Light mode hero glass */
.hero .glass,
.heroGlass{
  background: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(26px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.12) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 40px 120px rgba(15,23,42,.12),
    0 10px 28px rgba(15,23,42,.08) !important;
}

/* Hero typography contrast in light */
.hero h1{ color: #0b1220 !important; }
.hero p, .hero .sub, .hero .muted{ color: #475569 !important; }

/* Dark mode hero glass */
body.dark .hero .glass,
body.dark .heroGlass{
  background: rgba(18,22,28,.58) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.45) !important;
}
body.dark .hero h1{ color: rgba(250,252,255,.98) !important; }
body.dark .hero p, body.dark .hero .sub, body.dark .hero .muted{ color: rgba(210,218,228,.72) !important; }

/* Ensure hero section has calm light backdrop */
.hero{
  background: radial-gradient(1200px 520px at 50% -10%, rgba(56,189,248,.12), transparent 60%),
              radial-gradient(900px 480px at 20% 10%, rgba(99,102,241,.10), transparent 62%),
              linear-gradient(180deg, rgba(248,250,252,1), rgba(248,250,252,0.88)) !important;
}
body.dark .hero{
  background: radial-gradient(1200px 520px at 50% -10%, rgba(90,120,255,.10), transparent 65%),
              radial-gradient(900px 480px at 80% 20%, rgba(70,200,190,.08), transparent 70%),
              linear-gradient(180deg, rgba(11,15,20,1), rgba(14,19,26,1)) !important;
}

/* Canvas balance: subtle in light, more present in dark */
#synapseCanvas{ opacity: .14 !important; }
body.dark #synapseCanvas{ opacity: .45 !important; }



/* =========================
   Hero layout tuning (less vertical)
   ========================= */
.hero{
  min-height: clamp(520px, 72vh, 680px) !important;
  padding-top: 86px !important;
  padding-bottom: 42px !important;
}
@media (max-width: 900px){
  .hero{
    min-height: 560px !important;
    padding-top: 84px !important;
    padding-bottom: 34px !important;
  }
}

/* Hero side cards — softer presence */
.hero .sideCard,
.hero .heroSideCard,
.hero .miniPanel,
.hero .rightCard,
.hero .heroWidget{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: 0 18px 60px rgba(15,23,42,.10) !important;
}
body.dark .hero .sideCard,
body.dark .hero .heroSideCard,
body.dark .hero .miniPanel,
body.dark .hero .rightCard,
body.dark .hero .heroWidget{
  background: rgba(18,22,28,.46) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.38) !important;
}

/* =========================
   Micro-interactions (Awwwards subtle)
   ========================= */
.microCard,
.svcCard,
.sysCard,
.signalCard,
.kpiCard,
.featureCard{
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms cubic-bezier(.2,.8,.2,1), border-color 420ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.microCard:hover,
.svcCard:hover,
.sysCard:hover,
.signalCard:hover,
.kpiCard:hover,
.featureCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 80px rgba(15,23,42,.12) !important;
  border-color: rgba(56,189,248,.22) !important;
}
body.dark .microCard:hover,
body.dark .svcCard:hover,
body.dark .sysCard:hover,
body.dark .signalCard:hover,
body.dark .kpiCard:hover,
body.dark .featureCard:hover{
  box-shadow: 0 28px 90px rgba(0,0,0,.46) !important;
  border-color: rgba(92,160,255,.22) !important;
}

.microCard:focus-within,
.svcCard:focus-within,
.sysCard:focus-within,
.signalCard:focus-within{
  outline: 2px solid rgba(56,189,248,.35);
  outline-offset: 2px;
}

/* =========================
   Canvas visibility (slightly stronger, still subtle)
   ========================= */
#synapseCanvas{ opacity: .18 !important; }
body.dark #synapseCanvas{ opacity: .52 !important; }
.hero #synapseCanvas{ opacity: .20 !important; }
body.dark .hero #synapseCanvas{ opacity: .58 !important; }



/* =========================
   Hero horizontal cards — subtle translucency
   ========================= */
.hero .glass,
.hero .heroCard,
.hero .heroPanel{
  background: rgba(255,255,255,.64) !important; /* was ~.76 */
  backdrop-filter: blur(26px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.08) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
}

body.dark .hero .glass,
body.dark .hero .heroCard,
body.dark .hero .heroPanel{
  background: rgba(18,22,28,.50) !important; /* slightly more translucent */
  border-color: rgba(255,255,255,.12) !important;
}



/* =========================
   Canvas baseline visibility +10% (non-Synapse)
   ========================= */
#synapseCanvas{
  opacity: .20 !important; /* was ~.18 */
}
.hero #synapseCanvas{
  opacity: .22 !important; /* was ~.20 */
}
body.dark #synapseCanvas{
  opacity: .57 !important; /* was ~.52 */
}
body.dark .hero #synapseCanvas{
  opacity: .62 !important; /* was ~.58 */
}


/* =========================
   Canvas visibility — improved when Synapse OFF
   ========================= */
body:not(.aiOn) #synapseCanvas{ opacity: .26 !important; }
body:not(.aiOn) .hero #synapseCanvas{ opacity: .28 !important; }

/* Synapse ON keeps intensity but more neutral palette handled in canvas.js */


/* =========================
   Canvas visibility boost — Synapse OFF
   ========================= */
body:not(.aiOn) #synapseCanvas{ opacity: .34 !important; }
body:not(.aiOn) .hero #synapseCanvas{ opacity: .36 !important; }


/* =========================
   Canvas visibility boost (LIGHT + Synapse OFF) — stronger
   ========================= */
body:not(.dark):not(.aiOn) #synapseCanvas{ opacity: .46 !important; }
body:not(.dark):not(.aiOn) .hero #synapseCanvas{ opacity: .48 !important; }


/* =========================
   Synapsis ON — clearer distinction
   ========================= */
body.aiOn #synapseCanvas{ opacity: .68 !important; }
body.aiOn .hero #synapseCanvas{ opacity: .72 !important; }


/* =========================
   Canvas visibility boost (LIGHT + Synapsis OFF) — stronger again
   ========================= */
body:not(.dark):not(.aiOn) #synapseCanvas{ opacity: .56 !important; }
body:not(.dark):not(.aiOn) .hero #synapseCanvas{ opacity: .58 !important; }


/* =========================
   Synapsis ON — hero "powered" illumination (persistent)
   ========================= */
body.aiOn .hero{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(155,140,255,.20), transparent 60%),
    radial-gradient(900px 520px at 78% 20%, rgba(90,120,255,.10), transparent 62%),
    radial-gradient(1100px 620px at 50% -10%, rgba(120,220,210,.07), transparent 68%),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(248,250,252,0.90)) !important;
}
body.aiOn .hero .glass,
body.aiOn .heroGlass{
  box-shadow:
    0 48px 140px rgba(15,23,42,.14),
    0 16px 46px rgba(15,23,42,.10),
    0 0 0 1px rgba(155,140,255,.10),
    0 0 70px rgba(155,140,255,.16),
    0 0 90px rgba(90,120,255,.07) !important;
}


/* =========================
   Canvas visibility boost (LIGHT + Synapsis OFF)
   ========================= */
body:not(.dark):not(.aiOn) #synapseCanvas{ opacity: .56 !important; }
body:not(.dark):not(.aiOn) .hero #synapseCanvas{ opacity: .58 !important; }


/* Synapsis-as-default: hide toggle + experience UI (non-destructive) */
#aiToggleWrap, #aiToggle, #synapseToggle, #synapsisToggle, #synapseSwitch, #aiSwitch,
[data-ui="synapsis"], .synapsis-toggle, .synapse-toggle, .ai-toggle,
#experienceBtn, .experience-btn, #experienceModal, .experience-modal, [data-ui="experience"]{
  display: none !important;
}

/* Hide experience panel and quick reopen chip permanently since AI toggle is removed */
#xpPanel,
#xpReopen{
  display: none !important;
}

/* Contact form custom styles */
.contactForm{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:1rem;
}
.contactForm input,
.contactForm textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(10,14,18,.14);
  font-size:15px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--ink);
}
.contactForm textarea{
  resize:vertical;
  min-height:100px;
}
.contactForm button{
  align-self:flex-start;
  margin-top:8px;
}
.contactForm label{
  font-size:12px;
  color:rgba(11,13,16,.70);
  font-weight:600;
  letter-spacing:-0.01em;
}

/* ==================================================
   Custom colors for service cards
   Applies a purple/grey gradient inspired by the canvas connections
   ================================================== */
/* Service cards: subtle purple tint mixed with white for a soft “marbled” effect */
.svcCard{
  background: linear-gradient(180deg, rgba(229,223,246,0.62), rgba(217,209,240,0.50)) !important;
  border-color: rgba(173,150,217,0.28) !important;
}

body.dark .svcCard{
  background: linear-gradient(180deg, rgba(48,41,70,0.68), rgba(38,30,58,0.58)) !important;
  border-color: rgba(92,80,146,0.38) !important;
}

/* Ensure the decorative circle next to the logo remains hidden across the site */
.topbar .brandMark {
  display: none !important;
}

/* Chat Widget Styles */
.chatWidget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.chatToggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, #77509A, #B9A6D6); /* Same gradient as buttons */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(12,18,28,.18);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.chatToggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12,18,28,.22);
}

/* Chat Window Styles */
.chatWindow {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12,18,28,.28);
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.chatWindow.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Message Styles */
.message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 8px rgba(12,18,28,.12);
}

.message.bot {
  align-self: flex-start;
  background: #f1f5f9; /* Light background for bot messages */
  color: var(--ink);
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #77509A, #B9A6D6); /* Matching gradient for user messages */
  color: #fff;
}

/* Chat Form Styling */
.chatForm {
  display: flex;
  padding: 10px 12px;
  background: rgba(255,255,255,.68);
  border-top: 1px solid rgba(10,14,18,.08);
}

.chatForm input {
  flex: 1;
  border: 1px solid rgba(10,14,18,.14);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  margin-right: 8px;
}

.chatForm button {
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #77509A, #B9A6D6); /* Same gradient for button */
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.chatForm button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(12,18,28,.20);
}

/* Mobile Responsiveness */
@media (max-width: 560px) {
  .chatWindow {
    width: 100%;
    max-width: 100%;
    bottom: 10px;
  }

  .message {
    font-size: 13px;
  }

  .chatForm input {
    font-size: 12px;
  }

  .chatForm button {
    font-size: 12px;
  }
}