/* ==========================================================================
   VAREVO — Design System
   A studio building the site AND the system behind it, for Irish SMBs.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---- Tokens -------------------------------------------------------------- */
:root{
  color-scheme: light;
  /* brand palette (from brand sheet) */
  --ink:   #0A1931;   /* headings, primary text-on-light, primary button */
  --deep:  #1A3D63;   /* gradient stop, hover states */
  --signal:#4A7FA7;   /* interactive accent — links, icons */
  --pale:  #B3CFE5;   /* tints, borders, chips */
  --frost: #F6FAFD;   /* page background */
  --void:  #12151E;   /* true dark, matched to the logo sheet's dark plate — footer / deep sections */

  /* derived, used sparingly */
  --line:        rgba(10,25,49,.12);
  --line-soft:   rgba(10,25,49,.07);
  --line-dark:   rgba(246,250,253,.14);
  --ink-70:      rgba(10,25,49,.72);
  --ink-55:      rgba(10,25,49,.55);
  --frost-70:    rgba(246,250,253,.72);
  --frost-50:    rgba(246,250,253,.55);
  --pale-20:     rgba(179,207,229,.22);
  --pale-12:     rgba(179,207,229,.12);
  --signal-14:   rgba(74,127,167,.14);
  --status-live: #2F8F6B; /* muted, used only inside the product mockup */

  /* type */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* layout */
  --container: 1220px;
  --container-narrow: 780px;
  --gutter: clamp(20px, 5vw, 56px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,25,49,.07), 0 1px 1px rgba(10,25,49,.04);
  --shadow-md: 0 12px 28px -8px rgba(10,25,49,.16);
  --shadow-lg: 0 28px 64px -12px rgba(10,25,49,.24);

  --ease: cubic-bezier(.16,.8,.3,1);
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: #F6FAFD; } /* literal value matching --frost: paints before custom properties are needed, belt-and-suspenders against auto-dark rendering */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }

body{
  background-color: #F6FAFD !important;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible{
  outline: 2.5px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Type ------------------------------------------------------------------ */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.eyebrow::before{
  content:'';
  width: 7px; height: 7px;
  background: var(--signal);
  border-radius: 50%;
  flex: none;
}
.eyebrow.on-dark{ color: var(--pale); }
.eyebrow.on-dark::before{ background: var(--pale); }

h1, .h1{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.03;
  font-size: clamp(2.5rem, 4.4vw + 1.1rem, 4.75rem);
  color: var(--ink);
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
  font-size: clamp(2rem, 2.4vw + 1.1rem, 3.05rem);
  color: var(--ink);
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.18;
  font-size: clamp(1.25rem, .8vw + 1.05rem, 1.6rem);
  color: var(--ink);
}
h4, .h4{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--frost); }

.lead{
  font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem);
  color: var(--ink-70);
  line-height: 1.6;
  max-width: 46ch;
}
.on-dark .lead{ color: var(--frost-70); }

p{ color: var(--ink-70); }
.on-dark p{ color: var(--frost-70); }

strong{ color: var(--ink); font-weight: 700; }
.on-dark strong{ color: var(--frost); }

/* ---- Layout ----------------------------------------------------------------- */
.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow{
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section{ position: relative; }
.section{ padding-block: clamp(64px, 9vw, 128px); background: var(--frost); }
.section-tight{ padding-block: clamp(44px, 6vw, 84px); background: var(--frost); }
.section-dark{ background: var(--void); color: var(--frost); }
.section-tint{ background-image: linear-gradient(180deg, var(--pale-12), transparent 60%); background-color: var(--frost); }

.grid{ display:grid; gap: var(--gutter); }
@media (min-width: 860px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.between{ justify-content: space-between; }
.center{ text-align:center; margin-inline:auto; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color: var(--frost);
  padding: .8em 1.2em; border-radius: var(--r-sm);
  z-index: 999;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ---- Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .96rem;
  padding: .95em 1.6em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn-primary{
  background: var(--ink);
  color: var(--frost);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--deep); }
.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--signal); background: var(--signal-14); }
.on-dark .btn-ghost{ border-color: var(--line-dark); color: var(--frost); }
.on-dark .btn-ghost:hover{ border-color: var(--pale); background: rgba(255,255,255,.06); }
.btn-light{ background: var(--frost); color: var(--ink); }
.btn-light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn svg{ width: 16px; height: 16px; transition: transform .28s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
.btn-row{ display:flex; gap: 14px; flex-wrap: wrap; align-items:center; }

/* ---- Nav ------------------------------------------------------------------------ */
.site-nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,250,253,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-nav.is-scrolled{ border-color: var(--line); box-shadow: 0 4px 24px rgba(10,25,49,.06); }
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
.brand{ display:flex; align-items:center; }
.brand img{ height: 38px; width:auto; }
.nav-links{ display:none; align-items:center; gap: 34px; }
.nav-links a{
  font-weight: 600; font-size: .95rem; color: var(--ink-70);
  position: relative; padding-block: 4px;
}
.nav-links a::before{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--signal); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-links a:hover::before{ transform: scaleX(1); }
.nav-links a:hover{ color: var(--ink); }
.nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--signal); border-radius: 2px;
}
.nav-cta{ display:none; }
.nav-actions{ display:flex; align-items:center; gap: 18px; }

.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height:40px; background:transparent; border:1.5px solid var(--line); border-radius: var(--r-sm);
  cursor:pointer;
}
.menu-btn span{ height:2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-btn span:nth-child(1){ width: 16px; margin-inline:auto; }
.menu-btn span:nth-child(2){ width: 20px; margin-inline:auto; }
.menu-btn span:nth-child(3){ width: 12px; margin-inline:auto; }
.mobile-panel{
  display:none; flex-direction:column; gap: 2px;
  background: var(--frost); border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 22px;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px); /* dvh accounts for mobile browser toolbars; falls back to vh above where unsupported */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-panel.is-open{ display:flex; }
.mobile-panel a{
  padding: 13px 4px; font-weight:600; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-70);
}
.mobile-panel a[aria-current="page"]{ color: var(--signal); }
.mobile-panel .btn{ margin-top: 14px; align-self: flex-start; flex-shrink:0; }
.mobile-panel a.btn{ color: var(--frost); border-bottom: none; padding: .95em 1.6em; }
.mobile-panel a.btn-ghost{ color: var(--ink); }

@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .menu-btn{ display:none; }
  .mobile-panel{ display:none !important; }
}

/* ---- Mega menu (Services / Industries) ------------------------------------------- */
.has-mega{ position:relative; }
.mega-trigger{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:.95rem; color:var(--ink-70); padding-block:4px;
}
.mega-trigger svg{ width:14px; height:14px; transition: transform .25s var(--ease); }
.has-mega:hover .mega-trigger, .has-mega:focus-within .mega-trigger{ color: var(--ink); }
.has-mega:hover .mega-trigger svg, .has-mega:focus-within .mega-trigger svg{ transform: rotate(180deg); }
.mega-panel{
  position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: min(640px, 88vw);
  background: var(--frost);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 22px; display:grid; grid-template-columns: repeat(2,1fr); gap: 4px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-mega:hover .mega-panel, .has-mega:focus-within .mega-panel, .has-mega.is-open .mega-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.has-mega.is-open .mega-trigger svg{ transform: rotate(180deg); }
.mega-item{ display:flex; gap:12px; padding:12px; border-radius: var(--r-sm); transition: background .2s; }
.mega-item:hover{ background: var(--pale-12); }
.mega-item-icon{
  width:36px; height:36px; border-radius: var(--r-sm); flex:none;
  background: linear-gradient(135deg, var(--signal-14), var(--pale-20)); color: var(--signal);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 8px -2px rgba(74,127,167,.3), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mega-item-icon svg{ width:18px; height:18px; transition: transform .35s var(--ease); }
.mega-item:hover .mega-item-icon{ transform: scale(1.12) rotate(-6deg); box-shadow: 0 6px 16px -3px rgba(74,127,167,.45); }
.mega-item:hover .mega-item-icon svg{ transform: scale(1.08); }
.mega-item h5{ font-family: var(--font-display); font-weight:700; font-size:.92rem; color: var(--ink); margin-bottom:2px; }
.mega-item p{ font-size:.8rem; color: var(--ink-55); line-height:1.4; }
.mega-panel-foot{
  grid-column: 1 / -1; margin-top:6px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; font-size:.85rem;
}
.mega-panel-foot a{ color:var(--signal); font-weight:700; }

/* Mobile: mega-menu items just flatten into the mobile panel as a plain list — see .mobile-sub */
.mobile-sub{ display:flex; flex-direction:column; }
.mobile-sub a{ padding-left: 18px; font-weight:500; font-size:.92rem; }
.mobile-group-label{
  padding: 13px 4px 6px; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-55);
}

/* ---- Page header (inner pages) --------------------------------------------------- */
.page-header{ padding-block: clamp(56px,8vw,104px) clamp(40px,5vw,64px); }
.page-header .eyebrow{ margin-bottom: 18px; }
.page-header h1{ font-size: clamp(2.25rem, 3.6vw + 1rem, 3.6rem); max-width: 16ch; }
.page-header .lead{ margin-top: 18px; max-width: 56ch; }

/* ---- Hero ------------------------------------------------------------------------- */
.hero{ padding-block: clamp(48px,7vw,88px) clamp(40px,6vw,80px); overflow: clip; background-color: #F6FAFD; }
.hero-grid{ display:grid; gap: 56px; align-items:center; }
.hero .eyebrow{ margin-bottom: 22px; }
.hero h1{ max-width: 15ch; }
.hero .lead{ margin-top: 22px; }
.hero .btn-row{ margin-top: 34px; }
.hero-proof{ margin-top: 40px; display:flex; align-items:center; gap:14px; }
.hero-proof span{ font-size:.85rem; color:var(--ink-55); font-weight:600; }

@media (min-width: 1040px){
  .hero-grid{ grid-template-columns: 1fr 1fr; }
}

/* signature element: connected system mockup */
.system-mock{
  --gap: 34px;
  position: relative;
  display:flex; flex-direction:column; gap: var(--gap);
  animation: mock-rise .9s var(--ease) both;
}
@keyframes mock-rise{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none; } }

.mock-window{
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-chrome{
  display:flex; align-items:center; gap:8px;
  padding: 11px 14px;
  background: var(--frost);
  border-bottom: 1px solid var(--line);
}
.mock-dot{ width:8px; height:8px; border-radius:50%; background: var(--pale); }
.mock-chrome-label{
  margin-left: 8px; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-55);
  background: #fff; border:1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 12px; flex:1;
}
.mock-body{ padding: 20px; }
.mock-site-hero{
  height: 15px; width: 62%; background: var(--ink); border-radius:3px; margin-bottom:10px;
}
.mock-site-sub{ height:8px; width:85%; background: var(--line); border-radius:3px; margin-bottom:6px; }
.mock-site-sub.short{ width: 55%; margin-bottom:18px; }
.mock-form{
  border: 1px dashed var(--pale); border-radius: var(--r-sm); padding: 14px; display:flex; flex-direction:column; gap:8px;
}
.mock-field{ height: 26px; border-radius:6px; background: var(--frost); border:1px solid var(--line); }
.btn-tiny{
  display:inline-block; background: var(--signal); color:#fff; font-family: var(--font-mono);
  font-size: .68rem; padding: 7px 14px; border-radius: var(--r-pill);
}
.mock-form .btn-tiny{ align-self:flex-start; margin-top:2px; }

.mock-flow{
  align-self:center; display:flex; flex-direction:column; align-items:center; color: var(--signal);
}
.mock-flow .dash{ width:1px; height: 32px; background: repeating-linear-gradient(180deg, var(--signal) 0 5px, transparent 5px 9px); position:relative; }
.mock-flow .dash::after{
  content:''; position:absolute; left:-2.5px; width:6px; height:6px; border-radius:50%; background: var(--signal);
  animation: pulse-move-y 2.2s linear infinite;
}
@keyframes pulse-move-y{ 0%{ top:-4px; opacity:0; } 14%{ opacity:1;} 86%{opacity:1;} 100%{ top: 34px; opacity:0; } }

.mock-crm .mock-chrome-label{ background: var(--void); border-color: var(--void); color: var(--pale); }
.mock-crm .mock-body{ background: var(--void); }
.mock-row{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius:8px; background: rgba(255,255,255,.04);
  border:1px solid var(--line-dark); margin-bottom:8px;
}
.mock-row.is-new{ border-color: var(--status-live); background: rgba(47,143,107,.08); }
.mock-avatar{ width:22px; height:22px; border-radius:50%; background: linear-gradient(135deg, var(--signal), var(--pale)); flex:none; }
.mock-row-text{ flex:1; min-width:0; }
.mock-row-title{ font-size:.74rem; color: var(--frost); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock-row-meta{ font-family: var(--font-mono); font-size:.64rem; color: var(--pale); margin-top:2px; }
.mock-chip{
  font-family: var(--font-mono); font-size:.6rem; padding:3px 8px; border-radius: var(--r-pill);
  background: var(--status-live); color:#fff; flex:none;
}
.mock-caption{
  text-align:center; font-family: var(--font-mono); font-size:.7rem; color: var(--ink-55);
  letter-spacing:.03em; margin-top:2px;
}

/* ---- Service-page preview mockups: same window-chrome language as the hero,
   different inner content per service. Illustrative, not real screenshots. --- */
.preview-frame{
  background:#fff; border-radius: var(--r-md); border:1px solid var(--line); box-shadow: var(--shadow-lg);
  overflow:hidden; max-width:560px; margin-inline:auto;
}
.preview-frame.is-dark .mock-chrome{ background: var(--void); border-color: var(--void); }
.preview-frame.is-dark .mock-chrome-label{ background: rgba(255,255,255,.06); border-color: var(--line-dark); color: var(--pale); }
.preview-frame.is-dark .preview-body{ background: var(--void); }
.preview-body{ padding:22px; }

/* Landing page: sparse, one focus */
.preview-landing{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:38px; gap:12px; }
.preview-landing .mock-site-hero{ width:70%; height:16px; margin:0; }
.preview-landing .mock-site-sub{ width:60%; margin:0; }
.preview-landing .btn-tiny{ margin-top:14px; }

/* Business Systems: dashboard stat tiles + table */
.preview-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.preview-stat{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:8px; padding:12px; }
.preview-stat .num{ height:12px; width:50%; background:var(--pale); border-radius:3px; margin-bottom:6px; }
.preview-stat .lbl{ height:6px; width:75%; background:rgba(255,255,255,.15); border-radius:3px; }
.preview-table{ border:1px solid var(--line-dark); border-radius:8px; overflow:hidden; }
.preview-table-row{ display:flex; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line-dark); }
.preview-table-row:last-child{ border-bottom:none; }
.preview-table-row span{ height:7px; background:rgba(255,255,255,.14); border-radius:3px; }
.preview-table-row span:nth-child(1){ width:20px; height:20px; border-radius:5px; background:var(--signal-14); flex:none; }
.preview-table-row span:nth-child(2){ width:30%; }
.preview-table-row span:nth-child(3){ width:18%; }
.preview-table-row span:nth-child(4){ margin-left:auto; width:15%; }

/* CRM: mini pipeline columns */
.preview-pipeline{ display:flex; gap:10px; }
.preview-pipe-col{ flex:1; min-width:0; }
.preview-pipe-head{ font-family:var(--font-mono); font-size:.6rem; color:var(--pale); letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.preview-pipe-card{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:7px; padding:8px 9px; margin-bottom:7px; }
.preview-pipe-card span{ display:block; height:6px; background:rgba(255,255,255,.18); border-radius:3px; }
.preview-pipe-card span:first-child{ width:80%; margin-bottom:5px; background:var(--pale); }
.preview-pipe-card span:last-child{ width:50%; }

/* Automation: trigger -> outcomes flow */
.preview-flow{ display:flex; flex-direction:column; align-items:center; gap:0; padding-block:8px; }
.preview-flow-node{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink); background:var(--frost);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 18px; text-align:center;
}
.preview-flow-node.is-trigger{ background:var(--ink); color:var(--frost); border-color:var(--ink); }
.preview-flow-arrow{ width:1px; height:24px; background:repeating-linear-gradient(180deg, var(--pale) 0 4px, transparent 4px 8px); }
.preview-flow-branches{ display:flex; gap:10px; margin-top:0; flex-wrap:wrap; justify-content:center; }

/* AI Integration: chat bubbles */
.preview-chat{ display:flex; flex-direction:column; gap:10px; }
.preview-bubble{ max-width:78%; padding:10px 14px; border-radius:14px; font-family:var(--font-mono); font-size:.72rem; line-height:1.5; }
.preview-bubble.from-visitor{ align-self:flex-start; background:rgba(255,255,255,.06); color:var(--pale); border-bottom-left-radius:4px; }
.preview-bubble.from-ai{ align-self:flex-end; background:var(--signal); color:#fff; border-bottom-right-radius:4px; }

/* Complete-system (services hub): compact site+admin pairing */
.preview-system{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.preview-system .preview-frame{ width:100%; }

/* ---- Glow / highlight system: soft luminosity in brand blue, not literal neon --- */
.glow-wrap{ position:relative; }
.glow-wrap::before{
  content:''; position:absolute; inset:-28px; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 50% 35%, var(--signal) 0%, transparent 68%);
  opacity:.35; filter:blur(38px);
}
.on-dark .glow-wrap::before{ opacity:.5; }
.glow-wrap .preview-frame, .glow-wrap .mock-window, .glow-wrap .sample-card, .glow-wrap .tier{
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px -12px rgba(74,127,167,.45), 0 0 40px -8px rgba(74,127,167,.3);
}
.glow-wrap .preview-frame.is-dark, .glow-wrap .mock-crm{
  box-shadow: 0 0 0 1px var(--line-dark), 0 18px 55px -10px rgba(74,127,167,.55), 0 0 46px -6px rgba(74,127,167,.4);
}

.key-highlight{
  font-family: var(--font-display); font-weight:800; color: var(--signal);
  text-shadow: 0 0 30px rgba(74,127,167,.35);
}

.example-label{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-55); margin-bottom:12px;
}
.example-label::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal); }
.on-dark .example-label{ color:var(--pale); }

.examples-grid{ display:grid; gap:28px; margin-top:8px; }
@media (min-width:820px){ .examples-grid{ grid-template-columns:1fr 1fr; } }

/* Dark spotlight section — glow-on-dark for visual rhythm/contrast between sections */
.section-spotlight{
  background: var(--void); color:var(--frost); position:relative; overflow:hidden;
}
.section-spotlight::before{
  content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:640px; height:500px; background: radial-gradient(circle, var(--signal) 0%, transparent 72%);
  opacity:.28; filter:blur(70px); pointer-events:none;
}
.section-spotlight .wrap{ position:relative; z-index:1; }

/* ---- Trust strip ------------------------------------------------------------------ */
.trust{ padding-block: 30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--frost); }
.trust .wrap{ display:flex; flex-wrap:wrap; gap: 14px 40px; align-items:center; justify-content:space-between; }
.trust-label{ font-family: var(--font-mono); font-size:.72rem; color: var(--ink-55); letter-spacing:.06em; text-transform:uppercase; }
.trust-places{ display:flex; flex-wrap:wrap; gap: 10px 28px; font-weight:700; color: var(--ink-70); }

/* ---- Pillars (dark) ----------------------------------------------------------------- */
.pillars{ display:flex; flex-wrap:wrap; justify-content:center; gap: 22px; margin-top: 52px; }
.pillars .pillar{ flex:1 1 100%; }
@media (min-width: 640px){ .pillars .pillar{ flex:1 1 calc(50% - 11px); max-width:calc(50% - 11px); } }
@media (min-width: 860px){ .pillars .pillar{ flex:1 1 calc(33.333% - 15px); max-width:calc(33.333% - 15px); } }
.pillar{
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: 30px 26px; background: rgba(255,255,255,.03);
  transition: transform .3s var(--ease), background .3s;
}
.pillar:hover{ transform: translateY(-4px); background: rgba(255,255,255,.055); }
.pillar-icon{
  width: 44px; height:44px; border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(179,207,229,.16), rgba(179,207,229,.05)); color: var(--pale); margin-bottom: 22px;
  box-shadow: 0 2px 12px -3px rgba(74,127,167,.3), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar-icon svg{ width:22px; height:22px; transition: transform .4s var(--ease); }
.pillar:hover .pillar-icon{ transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 24px -4px rgba(74,127,167,.45), inset 0 1px 0 rgba(255,255,255,.16); }
.pillar:hover .pillar-icon svg{ transform: scale(1.08); }
.pillar .eyebrow.on-dark{ margin-bottom:10px; }
.pillar h3{ margin-bottom: 10px; }
.pillar p{ font-size:.96rem; }
.pillar-list{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.pillar-list li{ font-size:.86rem; color: var(--frost-70); display:flex; gap:9px; }
.pillar-list li::before{ content:'—'; color: var(--pale); flex:none; }

/* ---- Comparison ------------------------------------------------------------------- */
.compare{ display:grid; gap: 20px; margin-top: 48px; }
@media (min-width:860px){ .compare{ grid-template-columns:1fr 1fr; } }
.compare-col{ border-radius: var(--r-lg); padding: 32px 30px; }
.compare-col.old{ background: #fff; border: 1px solid var(--line); }
.compare-col.new{ background: var(--ink); color: var(--frost); box-shadow: var(--shadow-lg); }
.compare-col h4{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; margin-bottom:22px; }
.compare-col.old h4{ color: var(--ink-55); }
.compare-col.new h4{ color: var(--pale); }
.compare-list{ display:flex; flex-direction:column; gap:16px; }
.compare-list li{ display:flex; gap:12px; font-size:.98rem; line-height:1.45; }
.compare-col.old li{ color: var(--ink-70); }
.compare-col.new li{ color: var(--frost-70); }
.compare-list li svg{ width:18px; height:18px; flex:none; margin-top:2px; }
.compare-col.old svg{ color: var(--ink-55); }
.compare-col.new svg{ color: var(--status-live); }

/* ---- Process ------------------------------------------------------------------------ */
.process{ margin-top: 52px; }
.process-row{
  display:grid; grid-template-columns: 40px 1fr; gap: 18px 22px;
  padding-block: 30px; border-top: 1px solid var(--line);
}
.process-row:last-child{ border-bottom: 1px solid var(--line); }
.process-num{ font-family: var(--font-mono); font-size:1.1rem; color: var(--signal); }
.process-content h3{ margin-bottom:8px; }
.process-content p{ max-width: 58ch; }
@media (min-width: 760px){
  .process-row{ grid-template-columns: 90px 220px 1fr; align-items:baseline; gap: 22px; }
  .process-content{ display:contents; }
}

/* ---- Cards (services / work) --------------------------------------------------------- */
.cards{ display:flex; flex-wrap:wrap; justify-content:center; gap: 24px; margin-top: 48px; }
.cards > *{ flex:1 1 100%; }
@media (min-width: 700px){ .cards-2 > *{ flex:1 1 calc(50% - 12px); max-width:calc(50% - 12px); } }
@media (min-width: 860px){ .cards-3 > *{ flex:1 1 calc(33.333% - 16px); max-width:calc(33.333% - 16px); } }
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.on-dark .card{ background: rgba(255,255,255,.04); border-color: var(--line-dark); }
.on-dark .card:hover{ background: rgba(255,255,255,.06); }
.on-dark .card-foot{ border-color: var(--line-dark); color: var(--frost-50); }
.card-tag{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--signal); background: var(--signal-14); display:inline-block;
  padding: 5px 11px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.on-dark .card-tag{ color: var(--pale); background: rgba(179,207,229,.14); }
.card h3{ margin-bottom: 10px; }
.card p{ font-size:.96rem; }
.card-foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--ink-55); }
.card-foot a{ color: var(--signal); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.card-foot a svg{ width:13px; height:13px; transition: transform .28s var(--ease); }
.card-foot a:hover svg{ transform: translateX(3px); }
/* Same look as .card-foot a, but a plain span — used when the whole card is
   already the clickable link, so this text isn't a second, invalidly-nested <a>. */
.card-foot-link{ color: var(--signal); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.card-foot-link svg{ width:13px; height:13px; transition: transform .28s var(--ease); }
.card:hover .card-foot-link svg{ transform: translateX(3px); }

/* work sample cards */
.sample-card{
  border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#fff;
}
.sample-visual{
  height: 148px; position:relative; background: linear-gradient(135deg, var(--ink), var(--deep));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center;
}
.sample-visual span{ font-family:var(--font-mono); font-size:.7rem; color: var(--pale); letter-spacing:.05em; }
.sample-visual strong{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:#fff; line-height:1.15; }
.sample-body{ padding: 24px 26px 28px; }
.sample-body .card-tag{ margin-bottom:14px; }

/* ---- CTA card -------------------------------------------------------------------------- */
.cta-card{
  background: var(--ink);
  background-image: radial-gradient(120% 140% at 100% 0%, var(--deep), var(--ink) 60%);
  color: var(--frost);
  border-radius: var(--r-lg);
  padding: clamp(40px,6vw,72px);
  text-align:center;
  box-shadow: var(--shadow-lg);
}
.cta-card h2{ color:var(--frost); max-width: 20ch; margin-inline:auto; }
.cta-card p{ color: var(--frost-70); margin-top:14px; max-width:52ch; margin-inline:auto; }
.cta-card .btn-row{ margin-top: 30px; justify-content:center; }

/* ---- Footer --------------------------------------------------------------------------- */
.site-footer{ background: var(--void); color: var(--frost-70); padding-block: 64px 30px; }
.footer-top{ display:grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 760px){ .footer-top{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img{ height: 26px; margin-bottom: 16px; }
.footer-brand p{ max-width: 34ch; font-size:.92rem; }
.footer-col h4{ color: var(--frost); font-size:.78rem; font-family:var(--font-mono); letter-spacing:.07em; text-transform:uppercase; margin-bottom:16px; font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.92rem; color: var(--frost-70); }
.footer-col a:hover{ color: var(--frost); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top: 26px; font-size:.82rem; color: var(--ink-55); color: rgba(246,250,253,.42); }

/* ---- Forms ---------------------------------------------------------------------------- */
.form-grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form-2col{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.86rem; font-weight:700; color: var(--ink); }
.field .req{ color: var(--signal); font-weight:500; }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:.98rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .85em 1em; background:#fff; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-14); outline:none;
}
.field textarea{ resize:vertical; min-height: 120px; }
.field-note{ font-size:.8rem; color: var(--ink-55); }
.form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px,4vw,44px); box-shadow: var(--shadow-md); }

/* contact info tiles */
.info-tile{ display:flex; gap:16px; padding-block:22px; border-top:1px solid var(--line); }
.info-tile:last-child{ border-bottom:1px solid var(--line); }
.info-icon{
  width:40px; height:40px; border-radius:var(--r-sm);
  background: linear-gradient(135deg, var(--signal-14), var(--pale-20)); color: var(--signal);
  display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow: 0 2px 10px -3px rgba(74,127,167,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.info-icon svg{ width:19px; height:19px; transition: transform .4s var(--ease); }
.info-tile:hover .info-icon{ transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 20px -4px rgba(74,127,167,.5); }
.info-tile:hover .info-icon svg{ transform: scale(1.08); }
.info-tile h4{ margin-bottom:4px; }
.info-tile p{ font-size:.92rem; }

/* ---- .reveal: fully visible by default — content must never depend on JS to
   become visible (crawlers, slow scripts, reduced motion, JS failures all get
   the static fallback for free). Only when JS successfully runs does it add
   .js-armed to <html>, which opts these elements into a scroll-triggered
   entrance. Anything already in view on load reveals immediately (see main.js). */
.reveal{ }
.js-armed .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-armed .reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js-armed .reveal{ opacity:1; transform:none; transition:none; }
}

/* Icon entrance: an extra flourish once a card has revealed — entirely dependent on
   the safe reveal system above, so it can never hide an icon. Worst case (JS/reveal
   never fires) icons simply sit at their normal resting scale the whole time. */
.js-armed .reveal.is-visible .point-icon,
.js-armed .reveal.is-visible .pillar-icon,
.js-armed .reveal.is-visible .info-icon{
  animation: icon-pop-in .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: .12s;
}
@keyframes icon-pop-in{
  from{ transform: scale(.55) rotate(-18deg); }
  to{ transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .js-armed .reveal.is-visible .point-icon,
  .js-armed .reveal.is-visible .pillar-icon,
  .js-armed .reveal.is-visible .info-icon{ animation:none; }
}

/* ---- FAQ / accordion (services & contact) ------------------------------------------------ */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; text-align:left; padding: 22px 2px; cursor:pointer;
}
.faq-q h4{ font-size:1.02rem; }
.faq-q svg{ width:18px; height:18px; flex:none; color: var(--signal); transition: transform .3s var(--ease); }
.faq-item.is-open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a p{ padding: 0 2px 22px; max-width:64ch; }

/* ---- misc chips / badges ---------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  border:1px solid var(--line); border-radius: var(--r-pill); padding:6px 13px; color: var(--ink-70);
}
.pillar-grid-icon{ display:flex; }

/* ---- Point grid (problem→solution, why VAREVO, industries) ------------------------------ */
.point-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:44px; }
.point-grid .point{ flex:1 1 100%; }
@media (min-width:700px){ .point-grid.cols-2 .point{ flex:1 1 calc(50% - 8px); max-width:calc(50% - 8px); } }
@media (min-width:860px){ .point-grid.cols-3 .point{ flex:1 1 calc(33.333% - 11px); max-width:calc(33.333% - 11px); } }
.point{
  display:flex; gap:16px; padding:22px; border-radius: var(--r-md); border:1px solid var(--line);
  background:#fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.point:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.on-dark .point{ background: rgba(255,255,255,.03); border-color: var(--line-dark); }
.point-icon{
  width:38px; height:38px; border-radius:var(--r-sm); flex:none;
  background: linear-gradient(135deg, var(--signal-14), var(--pale-20)); color:var(--signal);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 10px -3px rgba(74,127,167,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.point-icon svg{ width:19px; height:19px; transition: transform .4s var(--ease); }
.point:hover .point-icon{ transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 22px -4px rgba(74,127,167,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.point:hover .point-icon svg{ transform: scale(1.08); }
.on-dark .point-icon{ background: linear-gradient(135deg, rgba(179,207,229,.16), rgba(179,207,229,.06)); box-shadow: 0 2px 12px -3px rgba(74,127,167,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.point h4{ margin-bottom:5px; font-size:.98rem; }
.point p{ font-size:.88rem; }

/* ---- Pricing tiers --------------------------------------------------------------------- */
.tiers{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:48px; }
.tiers .tier, .tiers .glow-wrap{ flex:1 1 100%; }
@media (min-width:860px){ .tiers .tier, .tiers .glow-wrap{ flex:1 1 calc(33.333% - 15px); max-width:calc(33.333% - 15px); } }
.tiers .glow-wrap .tier{ height:100%; width:100%; max-width:none; flex:none; }
.tier{
  border-radius: var(--r-lg); border:1px solid var(--line); background:#fff; padding:32px 28px;
  display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tier:hover{ transform:translateY(-4px); box-shadow: var(--shadow-md); }
.tier.is-featured{ border-color: var(--signal); box-shadow: var(--shadow-lg); position:relative; }
.tier-badge{
  position:absolute; top:-13px; left:28px; background: var(--signal); color:#fff;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px; border-radius: var(--r-pill);
}
.tier h3{ margin-bottom:6px; }
.tier-price{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; color:var(--ink); margin:10px 0 4px; }
.tier-price span{ font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--ink-55); }
.tier-desc{ font-size:.88rem; color:var(--ink-55); margin-bottom:20px; }
.tier-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; }
.tier-list li{ display:flex; gap:10px; font-size:.9rem; color:var(--ink-70); }
.tier-list svg{ width:16px; height:16px; flex:none; margin-top:2px; color: var(--signal); }

/* ---- Kinetic hero headline: subtle word-stagger load-in, pure CSS, one-time ------------- */
.kinetic-line{ display:block; overflow:hidden; }
.kinetic-word{
  display:inline-block; animation: word-rise .7s var(--ease) both;
  animation-delay: calc(var(--w, 0) * 70ms + 80ms);
}
@keyframes word-rise{ from{ opacity:0; transform: translateY(100%) rotate(2deg); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .kinetic-word{ animation:none; opacity:1; } }

/* ---- utilities ---------------------------------------------------------------------------- */
.mt-0{ margin-top:0 !important; }
.section-head{ max-width: 640px; }
.section-head.center{ max-width: 620px; }
.divider{ height:1px; background: var(--line); border:none; margin: 0; }