/* ==========================================================================
   INFRANOVA — theme
   Colours sampled directly from infranova.ae:
     page #0B0C10 | band #1A1D24 | green #63F823 | text #FFFFFF
   Change them here; nothing else needs editing.
   ========================================================================== */

:root {
  --bg:        #0B0C10;   /* page background            */
  --band:      #1A1D24;   /* alternating section band   */
  --card:      #0B0C10;   /* card on a band             */
  --card-alt:  #171A21;   /* card on the page background*/
  --line:      rgba(255,255,255,.10);

  --green:     #63F823;
  --green-dk:  #4FD417;
  --green-lt:  #A9FF7C;
  --on-green:  #06210A;   /* text sitting ON green      */

  --text:      #FFFFFF;
  --body:      #D2D7DD;
  --muted:     #97A0AB;

  --font:      "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-logo: "Rajdhani", "Figtree", sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
  --nav-h: 78px;
  --r: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 800; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section        { padding-block: clamp(58px, 8vw, 104px); }
.section--band  { background: var(--band); }
.section--band .card { background: var(--card); }

.head        { margin-bottom: clamp(34px, 5vw, 56px); }
.head--center{ text-align: center; }
.head p      { margin: 14px auto 0; color: var(--body); max-width: 640px; }
.head--left p{ margin-inline: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px;
  background: transparent;            /* <button> would otherwise use the UA default */
  border: 1px solid transparent; border-radius: 12px;
  font-family: inherit;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: transform .18s, background .18s, box-shadow .18s, border-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn--green {
  background: var(--green); color: var(--on-green);
  box-shadow: 0 4px 26px rgba(99,248,35,.28);
}
.btn--green:hover { background: var(--green-lt); box-shadow: 0 8px 34px rgba(99,248,35,.42); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.22); color: var(--text); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(11,12,16,.86);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.header.is-stuck { background: var(--bg); border-bottom-color: var(--line); }
.header.has-open-nav { background: var(--bg); }

/* The header spans the full window rather than the 1180px content column,
   so the logo sits near the left edge on wide screens instead of being
   pushed inward by the centred wrap. */
.header__inner {
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: none;
  padding-inline: clamp(18px, 2.2vw, 40px);
}

/* nav and the action buttons sit together on the right */
.nav { margin-left: auto; }

.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Self Assessment - stays visible at every screen size, never inside the
   collapsing menu, so it is one tap away on any device. */
.btn--sa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 11px;
  border: 1px solid var(--green); color: var(--green);
  background: rgba(99, 248, 35, .08);
  font-size: .87rem; font-weight: 700; white-space: nowrap;
}
.btn--sa svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--sa:hover { background: var(--green); color: var(--on-green); transform: translateY(-2px); }
.btn--sa[aria-current="page"] { background: var(--green); color: var(--on-green); }

.logo {
  font-family: var(--font-logo); font-weight: 700;
  font-size: 1.42rem; letter-spacing: .2em;
  color: var(--green); flex-shrink: 0; white-space: nowrap;
}
.logo--sm { font-size: 1.2rem; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav__link {
  position: relative; font-size: .95rem; font-weight: 500;
  color: var(--text); white-space: nowrap; padding-block: 6px;
  transition: color .18s;
}
.nav__link:hover { color: var(--green); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--text);
}
.nav__cta { padding: 11px 22px; border-radius: 11px; font-size: .87rem; margin-left: 6px; white-space: nowrap; }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text);
  transition: transform .25s, top .2s;
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   Hero — photo band across the top, content on black beneath
   ========================================================================== */
.hero {
  position: relative;
  background: var(--bg);
  padding-top: calc(var(--nav-h) + 250px);
  padding-bottom: clamp(30px, 4vw, 52px);
}
/* photo band across the top, fading cleanly into the page colour.
   SWAP IN A REAL PHOTO: change the url() below. */
.hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 480px;
  background:
    linear-gradient(to bottom,
      rgba(11,12,16,.30) 0%, rgba(11,12,16,.52) 42%,
      rgba(11,12,16,.88) 74%, var(--bg) 100%),
    var(--hero-img, url("../img/hero.jpg")) center top / cover no-repeat;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 26px; max-width: 15ch; }
.hero p  { max-width: 560px; font-size: 1.02rem; color: var(--text); margin-bottom: 34px; }

/* ==========================================================================
   Why — centred, borderless, green titles
   ========================================================================== */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(34px, 5vw, 60px) clamp(24px, 4vw, 54px);
}
.why { text-align: center; }
.why__ico {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(99,248,35,.09); border: 1px solid rgba(99,248,35,.25);
  color: var(--green);
}
.why__ico svg { width: 24px; height: 24px; }
.why h3 { color: var(--green); margin-bottom: 12px; font-size: 1.22rem; }
.why p  { color: var(--text); font-size: .95rem; margin: 0; }

/* ==========================================================================
   Core solutions — cards with a visual panel on top
   ========================================================================== */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }

.card {
  background: var(--card-alt); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid transparent;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-5px); border-color: rgba(99,248,35,.4); box-shadow: 0 18px 44px rgba(0,0,0,.55); }

.card__visual {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 70% 20%, rgba(99,248,35,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
    linear-gradient(150deg, #23272F, #12151A);
  border-bottom: 1px solid rgba(99,248,35,.22);
}
.card__visual svg { width: 54px; height: 54px; color: var(--green); opacity: .92; }
.card__body { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 15px; }

.card__list { margin-bottom: 20px; flex: 1; }
.card__list li {
  position: relative; padding-left: 18px; padding-block: 4px;
  font-size: .93rem; color: var(--body);
}
.card__list li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--green);
}
.more {
  align-self: flex-start; font-weight: 700; font-size: .9rem;
  color: var(--text); border-bottom: 2px solid var(--green); padding-bottom: 3px;
  transition: color .18s;
}
.more:hover { color: var(--green); }

/* ==========================================================================
   Services — four columns split by green rules
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.svc { padding: 6px 26px; border-left: 2px solid var(--green); }
.svc:first-child { border-left: 0; padding-left: 0; }
.svc h3 { margin-bottom: 12px; }
.svc p  { font-size: .93rem; color: var(--body); margin: 0; }

/* AMC block */
.amc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.amc p { color: var(--body); margin-bottom: 0; }
.amc__panel {
  aspect-ratio: 16 / 10; border-radius: var(--r);
  background:
    radial-gradient(110% 90% at 72% 26%, rgba(99,248,35,.17), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 15px),
    linear-gradient(150deg, #23272F, #101317);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.amc__panel svg { width: 74px; height: 74px; color: var(--green); opacity: .85; }

/* ==========================================================================
   Partners — one panel, categories stacked
   ========================================================================== */
.partners { background: var(--card-alt); border-radius: var(--r); padding: clamp(26px, 4vw, 44px); }
.pcat + .pcat { margin-top: 26px; }
.pcat h3 { font-size: 1rem; margin-bottom: 7px; }
.pcat p  { margin: 0; color: var(--body); font-size: .95rem; }
.pcat span { color: var(--green); padding-inline: 5px; }

/* ==========================================================================
   Industries
   ========================================================================== */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ind {
  background: var(--band); border-radius: var(--r); border: 1px solid transparent;
  padding: 26px 18px; text-align: center;
  transition: border-color .22s, transform .22s;
}
.ind:hover { border-color: var(--green); transform: translateY(-4px); }
.ind svg { width: 28px; height: 28px; color: var(--green); margin: 0 auto 14px; }
.ind h3 { font-size: 1.02rem; }

/* ==========================================================================
   Approach — vertical chain
   ========================================================================== */
.flow { display: flex; flex-direction: column; align-items: center; }
.node {
  position: relative; z-index: 1;
  width: 148px; height: 148px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em;
}
.node--on  { background: var(--green); color: var(--on-green); }
.node--off { background: var(--bg); color: var(--green); border: 2px solid var(--green); }
.link {
  width: 2px; height: 46px; background: var(--green); opacity: .55;
  position: relative;
}
.link::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid var(--green);
}
.flow-note { text-align: center; max-width: 620px; margin: 44px auto 0; color: var(--body); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 76px); align-items: start; }
.contact h2 { margin-bottom: 30px; }
.cblock + .cblock { margin-top: 24px; }
.cblock h3 { font-size: 1.24rem; margin-bottom: 5px; }
.cblock p  { margin: 0; color: var(--body); }
.cblock a:hover { color: var(--green); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.field label .req { color: var(--green); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  background: transparent; border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px; font-size: .95rem; color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6C7581; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(99,248,35,.16);
}
.field.has-error input, .field.has-error textarea { border-color: #FF7070; }
.err { display: none; font-size: .78rem; color: #FF8B8B; margin-top: 5px; }
.field.has-error .err { display: block; }

.form__ok {
  display: none; padding: 14px 16px; margin-bottom: 16px; border-radius: 10px;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.4);
  color: var(--green-lt); font-size: .92rem;
}
.form__ok.is-shown { display: block; }
.form__note { font-size: .78rem; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding-block: 34px; }
.footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: none; padding-inline: clamp(18px, 2.2vw, 40px);
}
.footer__copy { font-size: .87rem; color: var(--body); text-align: center; flex: 1 1 auto; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card-alt); color: var(--text);
  transition: background .18s, color .18s;
}
.socials a:hover { background: var(--green); color: var(--on-green); }
.socials svg { width: 15px; height: 15px; }

/* ==========================================================================
   Sub-page hero
   ========================================================================== */
.subhero { padding-top: calc(var(--nav-h) + 76px); padding-bottom: 66px; border-bottom: 1px solid var(--line); }
.crumb { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.crumb a:hover { color: var(--green); }
.crumb span { color: var(--green); }
.subhero p { max-width: 640px; margin: 16px 0 0; color: var(--body); }
.notice {
  display: flex; gap: 13px; max-width: 780px; margin-top: 42px;
  padding: 20px 22px; border: 1px dashed rgba(255,255,255,.22); border-radius: var(--r);
  background: var(--card-alt); color: var(--body); font-size: .93rem;
}
.notice svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: 3px; }
.notice strong { display: block; color: var(--text); margin-bottom: 3px; }

/* ==========================================================================
   Reveal + a11y
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.reveal.is-in { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--green); color: var(--on-green);
  border-radius: 0 0 8px 8px; font-weight: 700; transition: top .2s;
}
.skip:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .why-grid, .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .svc:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .amc, .contact { grid-template-columns: 1fr; }
  .amc__panel { max-height: 260px; }
}

@media (max-width: 1180px) {
  /* the nav becomes an overlay here, so nothing is left to push the action
     buttons across — anchor them to the right edge explicitly */
  .nav { margin-left: 0; }
  .header__actions { margin-left: auto; }
  /* backdrop-filter/containing-block safe: header stays a solid bar here */
  .header { background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 110;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px var(--gutter) 34px;
    background: var(--bg); overflow-y: auto;
    transform: translateX(100%); opacity: 0; visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s, visibility 0s linear .3s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav__link { padding: 16px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__link.is-active::after { display: none; }
  .nav__cta { margin: 20px 0 0; padding: 15px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .logo { font-size: 1.16rem; letter-spacing: .13em; }
  .header__actions { gap: 7px; }
  .btn--sa { padding: 9px 13px; font-size: .8rem; gap: 6px; }
  .btn--sa svg { width: 15px; height: 15px; }
  .hero { padding-top: calc(var(--nav-h) + 150px); }
  .hero::before { height: 320px; }
  .why-grid, .sol-grid, .svc-grid, .ind-grid { grid-template-columns: 1fr; }
  .svc { border-left: 0; padding-left: 0; border-top: 2px solid var(--green); padding-top: 20px; }
  .svc:first-child { border-top: 0; padding-top: 0; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__inner { justify-content: center; }
  .node { width: 128px; height: 128px; font-size: .98rem; }
}

/* ==========================================================================
   INNER-PAGE COMPONENTS
   ========================================================================== */

.eyebrow {
  display: block; color: var(--green);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 18px;
}

/* placeholder visual panel — replace with <img> when real photos exist */
.visual {
  border-radius: var(--r); overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 68% 22%, rgba(99,248,35,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    linear-gradient(150deg, #23272F, #12151A);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.visual svg { width: 62px; height: 62px; color: var(--green); opacity: .9; }
.visual--wide { aspect-ratio: 16 / 9; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.split--rev > *:first-child { order: 2; }
.split p:last-child { margin-bottom: 0; }

.page-hero { padding-top: calc(var(--nav-h) + 66px); padding-bottom: clamp(50px, 7vw, 86px); }
.page-hero h1 { margin-bottom: 24px; }
.page-hero p { color: var(--body); max-width: 46ch; margin-bottom: 30px; }

/* bordered feature cards with a small icon */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat {
  background: var(--card); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 24px 22px;
  transition: border-color .22s, transform .22s;
}
.feat:hover { border-color: var(--green); transform: translateY(-4px); }
.feat__ico {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.28); color: var(--green);
}
.feat__ico svg { width: 19px; height: 19px; }
.feat h3 { font-size: 1.06rem; margin-bottom: 9px; }
.feat p { font-size: .88rem; color: var(--body); margin: 0; }

/* green-titled bordered cards */
.feat--green h3 { color: var(--green); }
.feat--green .more { margin-top: 14px; display: inline-block; }

/* numbered 01-04 process row */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step4__n {
  display: flex; align-items: center; gap: 14px;
  color: var(--green); font-size: 2.5rem; font-weight: 800; line-height: 1;
  margin-bottom: 16px;
}
.step4__n::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.22); }
.step4 h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step4 p { font-size: .87rem; color: var(--body); margin: 0; }

/* white section */
.section--white { background: #FFFFFF; color: #2A2F35; }
.section--white h1, .section--white h2, .section--white h3, .section--white h4 { color: #0A0C10; }
.section--white p { color: #4A525C; }

.spec { border-top: 1px solid #E2E6EB; }
.spec__row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid #E2E6EB; }
.spec__k { color: var(--green-dk); font-weight: 700; font-size: .87rem; }
.spec__v { color: #2A2F35; font-size: .93rem; }

/* blue band */
.section--blue { background: #004AAC; color: #FFFFFF; }
.section--blue h2, .section--blue h3 { color: #FFFFFF; }
.section--blue p { color: rgba(255,255,255,.9); }
.band-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.band-split .visual { border-radius: 0; border: 0; aspect-ratio: auto; min-height: 330px; }
.band-split__text { padding: clamp(34px, 5vw, 66px); display: flex; flex-direction: column; justify-content: center; }

/* image-top cards with a pill action */
.pill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pill-card { text-align: center; }
.pill-card .visual { aspect-ratio: 16 / 10; margin-bottom: 18px; }
.pill-card h3 { margin-bottom: 10px; }
.pill-card p { font-size: .9rem; color: var(--body); margin-bottom: 16px; }
.btn--pill { border-radius: 999px; padding: 11px 28px; font-size: .88rem; }

/* rules around a centred heading */
.ruled { text-align: center; }
.ruled h2 { padding-block: 22px; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }

/* full-bleed feature band */
.showcase {
  position: relative; text-align: center;
  padding: clamp(64px, 10vw, 128px) var(--gutter);
  background:
    linear-gradient(rgba(11,12,16,.72), rgba(11,12,16,.72)),
    radial-gradient(90% 120% at 30% 40%, rgba(99,248,35,.2), transparent 60%),
    linear-gradient(140deg, #1B2430, #0B0C10);
}
.showcase h2 { margin-bottom: 16px; }
.showcase p { max-width: 620px; margin: 0 auto 26px; color: var(--body); }

/* marquee */
.marquee {
  overflow: hidden; border-block: 1px solid rgba(99,248,35,.3);
  background: rgba(99,248,35,.05); padding-block: 12px;
}
.marquee__track {
  display: flex; gap: 44px; width: max-content;
  animation: slide 26s linear infinite;
}
.marquee span {
  color: var(--green); font-weight: 700; font-size: .84rem;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* logo lock-up */
.lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.lockup__x {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center;
  color: #fff;
}
.lockup__x svg { width: 16px; height: 16px; }
.lockup__partner {
  font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.lockup__partner em { color: #34D3C0; font-style: normal; }

/* contact detail labels */
.kv + .kv { margin-top: 22px; }
.kv h4 { color: var(--green); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 5px; }
.kv p { margin: 0; color: var(--body); }

/* fieldset groups in the long gaming form */
.group { margin-bottom: 18px; }
.group > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.opts { display: grid; gap: 8px; }
.opts--2 { grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--body); cursor: pointer; }
.opt input { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }

@media (max-width: 1000px) {
  .feat-grid, .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .steps4 { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .split, .band-split { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
  .spec__row { grid-template-columns: 150px 1fr; }
}
@media (max-width: 640px) {
  .feat-grid, .pill-grid, .steps4 { grid-template-columns: 1fr; }
  .opts--2 { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   SELF ASSESSMENT
   ========================================================================== */

.btn--sm { padding: 11px 22px; font-size: .88rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

#sa-root { min-height: 40vh; }

.sa-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--green); font-weight: 600; font-size: .88rem;
  border-bottom: 1px solid transparent; font-family: inherit;
}
.sa-link:hover { border-bottom-color: var(--green); }
.sa-link--quiet { color: var(--muted); display: block; margin: 22px auto 0; }
.sa-link--quiet:hover { color: var(--green); border-bottom-color: transparent; }

.sa-back {
  background: none; border: 0; padding: 0 0 18px; cursor: pointer;
  color: var(--muted); font-size: .87rem; font-family: inherit;
}
.sa-back:hover { color: var(--green); }

/* ---------- landing ---------- */
.sa-landing { max-width: 780px; }
.sa-lead { font-size: 1.05rem; color: var(--text); margin-bottom: 30px; }
.sa-lead-sm { color: var(--body); font-size: .95rem; margin-bottom: 24px; }

.sa-benefits {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 11px 26px; margin-bottom: 34px;
}
.sa-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .94rem; color: var(--body);
}
.sa-benefits svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 3px; }

.sa-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sa-time {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 24px 0 0; font-size: .87rem; color: var(--muted);
}
.sa-time svg { width: 16px; height: 16px; color: var(--green); }

/* ---------- category cards ---------- */
.sa-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.sa-cat {
  background: var(--card-alt); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); padding: 26px 24px;
  transition: border-color .22s, transform .22s;
}
.sa-cat:hover { border-color: rgba(99,248,35,.5); transform: translateY(-4px); }
.sa-cat.is-open { border-color: var(--green); transform: none; }
.sa-cat__ico {
  width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.3); color: var(--green);
}
.sa-cat__ico svg { width: 22px; height: 22px; }
.sa-cat__ico--lg { width: 58px; height: 58px; }
.sa-cat__ico--lg svg { width: 27px; height: 27px; }
.sa-cat h3 { margin-bottom: 10px; }
.sa-cat p { font-size: .9rem; color: var(--body); margin-bottom: 14px; }
.sa-cat__meta { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.sa-cat__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sa-cat__actions .btn { width: 100%; }
.sa-cat__panel { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.sa-cat__panel h4 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 18px 0 8px;
}
.sa-cat__panel h4:first-child { margin-top: 0; }
.sa-cat__panel p { font-size: .88rem; }
.sa-covers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.sa-covers li {
  font-size: .76rem; color: var(--body);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px;
}

/* ---------- shared panel ---------- */
.sa-panel {
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(26px, 4vw, 42px);
  max-width: 760px; margin-inline: auto;
}
.sa-intro { text-align: center; }
.sa-intro .sa-back { float: left; }
.sa-intro .sa-cat__ico { margin-inline: auto; }
.sa-intro h2 { margin-bottom: 14px; }
.sa-intro p { color: var(--body); }

.sa-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin: 26px 0 22px;
}
.sa-facts > div { background: var(--card-alt); padding: 16px 10px; }
.sa-facts span { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.sa-facts strong { font-size: .96rem; color: var(--text); }

.sa-privacy {
  display: inline-flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: .82rem; color: var(--muted); margin-bottom: 26px;
}
.sa-privacy svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ---------- progress ---------- */
.sa-progress { margin-bottom: 26px; }
.sa-progress__row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .8rem; color: var(--muted); margin-bottom: 9px;
}
.sa-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.sa-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .35s ease; }
.sa-bar--ok i   { background: var(--green); }
.sa-bar--good i { background: #9BE84E; }
.sa-bar--warn i { background: #F5C542; }
.sa-bar--bad i  { background: #FF7A5C; }

.sa-q { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 22px; }
.sa-hint { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- options ---------- */
.sa-opts { display: grid; gap: 10px; }
.sa-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 17px; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px; color: var(--text); font-size: .95rem; font-family: inherit;
  transition: border-color .18s, background .18s;
}
.sa-opt:hover { border-color: var(--green); }
.sa-opt.is-on { border-color: var(--green); background: rgba(99,248,35,.08); }
.sa-opt__box {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); position: relative; transition: border-color .18s;
}
.sa-opt__box--sq { border-radius: 5px; }
.sa-opt.is-on .sa-opt__box { border-color: var(--green); background: var(--green); }
.sa-opt.is-on .sa-opt__box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid var(--on-green);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.sa-rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.sa-rate {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 15px 8px; cursor: pointer; font-family: inherit;
  background: var(--bg); border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px; color: var(--body); font-size: .76rem; text-align: center;
  transition: border-color .18s, background .18s, color .18s;
}
.sa-rate span {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); font-weight: 800; font-size: .92rem; color: var(--text);
}
.sa-rate:hover { border-color: var(--green); }
.sa-rate.is-on { border-color: var(--green); background: rgba(99,248,35,.08); color: var(--text); }
.sa-rate.is-on span { background: var(--green); border-color: var(--green); color: var(--on-green); }

.sa-text {
  width: 100%; padding: 14px 16px; border-radius: 11px;
  background: var(--bg); border: 1px solid rgba(255,255,255,.2);
  color: var(--text); font-size: .95rem; resize: vertical;
}
.sa-text:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(99,248,35,.16); }

.sa-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

/* ---------- results ---------- */
.sa-h3 {
  font-size: 1.35rem; margin: 52px 0 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sa-score {
  display: grid; grid-template-columns: 190px 1fr; gap: 34px; align-items: center;
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(24px, 4vw, 38px);
}
.sa-gauge { position: relative; width: 190px; height: 190px; }
.sa-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sa-gauge circle { fill: none; stroke-width: 11; }
.sa-gauge__bg { stroke: rgba(255,255,255,.1); }
.sa-gauge__fg { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.sa-gauge__num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.sa-gauge__num strong { font-size: 3rem; font-weight: 800; color: var(--text); line-height: 1; }
.sa-gauge__num span { font-size: .82rem; color: var(--muted); }

.sa-level {
  display: inline-block; padding: 7px 16px; border-radius: 100px;
  background: rgba(99,248,35,.12); border: 1px solid var(--green);
  color: var(--green); font-weight: 700; font-size: .9rem; margin-bottom: 14px;
}
.sa-score__text p { color: var(--body); margin-bottom: 18px; }
.sa-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-scale span {
  font-size: .74rem; padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
}
.sa-scale span.is-on { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; }

.sa-dims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; }
.sa-dim__top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .93rem; }
.sa-dim__top strong { color: var(--text); }
.sa-dim__status { font-size: .78rem; margin-top: 7px; }
.sa-dim__status.ok   { color: var(--green); }
.sa-dim__status.good { color: #9BE84E; }
.sa-dim__status.warn { color: #F5C542; }
.sa-dim__status.bad  { color: #FF7A5C; }

.sa-strengths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; }
.sa-strengths li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .93rem; color: var(--body);
}
.sa-strengths svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 3px; }

.sa-recs { display: grid; gap: 18px; }
.sa-rec {
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px;
}
.sa-rec__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sa-rec h4 { font-size: 1.1rem; }
.sa-pri {
  flex-shrink: 0; padding: 4px 12px; border-radius: 100px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.sa-pri--critical { background: #FF5C4D; color: #250602; }
.sa-pri--high     { background: #FF9F43; color: #2A1400; }
.sa-pri--medium   { background: #F5C542; color: #2A2000; }
.sa-pri--low      { background: var(--green); color: var(--on-green); }

.sa-rec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.sa-k {
  display: block; font-size: .71rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); margin-bottom: 6px;
}
.sa-rec__grid p { font-size: .89rem; color: var(--body); margin: 0; }
.sa-rec__grid ul { display: grid; gap: 4px; }
.sa-rec__grid li { font-size: .89rem; color: var(--body); padding-left: 14px; position: relative; }
.sa-rec__grid li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

.sa-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sa-mcol { background: var(--card-alt); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; }
.sa-mcol h4 { display: flex; align-items: center; gap: 9px; font-size: .95rem; margin-bottom: 8px; }
.sa-mcol h4 i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.sa-mcol--critical h4 i { background: #FF5C4D; }
.sa-mcol--high h4 i     { background: #FF9F43; }
.sa-mcol--medium h4 i   { background: #F5C542; }
.sa-mcol--low h4 i      { background: var(--green); }
.sa-mnote { font-size: .78rem; color: var(--muted); margin-bottom: 12px; }
.sa-mcol li { font-size: .85rem; color: var(--body); padding: 5px 0; border-top: 1px solid var(--line); }

.sa-bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sa-ben { background: var(--card-alt); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.sa-ben h4 { font-size: 1rem; color: var(--green); margin-bottom: 7px; }
.sa-ben p { font-size: .87rem; color: var(--body); margin: 0; }

.sa-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sa-road__step {
  background: var(--card-alt); border: 1px solid var(--line);
  border-top: 3px solid var(--green); border-radius: 12px; padding: 20px 18px;
}
.sa-road__when { font-weight: 800; color: var(--text); margin-bottom: 4px; }
.sa-road__theme { font-size: .8rem; color: var(--green); margin-bottom: 12px; }
.sa-road__step li { font-size: .85rem; color: var(--body); padding: 5px 0; border-top: 1px solid var(--line); }

.sa-none { background: var(--card-alt); border: 1px solid rgba(99,248,35,.35); border-radius: var(--r); padding: 28px; }
.sa-none h3 { color: var(--green); margin-bottom: 8px; }
.sa-none p { color: var(--body); margin: 0; }

.sa-cta {
  margin-top: 52px; text-align: center;
  background: var(--card-alt); border: 1px solid rgba(99,248,35,.35);
  border-radius: var(--r); padding: clamp(28px, 5vw, 46px);
}
.sa-cta h3 { font-size: 1.6rem; margin-bottom: 12px; }
.sa-cta p { max-width: 640px; margin: 0 auto 24px; color: var(--body); }
.sa-cta .sa-actions { justify-content: center; }
.sa-restart { display: flex; justify-content: center; gap: 26px; margin-top: 26px; }

/* ---------- enquiry ---------- */
.sa-summary {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px; margin-bottom: 26px;
}
.sa-summary h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.sa-summary dl { display: grid; gap: 11px; margin: 0; }
.sa-summary div { display: grid; grid-template-columns: 160px 1fr; gap: 14px; }
.sa-summary dt { font-size: .85rem; color: var(--muted); }
.sa-summary dd { margin: 0; font-size: .89rem; color: var(--text); }

.sa-thanks { text-align: center; }
.sa-tick {
  width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(99,248,35,.12); border: 1px solid var(--green); color: var(--green);
}
.sa-tick svg { width: 28px; height: 28px; }
.sa-thanks p { color: var(--body); max-width: 480px; margin: 0 auto 26px; }
.sa-thanks .sa-actions { justify-content: center; }

@media (max-width: 1000px) {
  .sa-cats, .sa-bens { grid-template-columns: repeat(2, 1fr); }
  .sa-matrix, .sa-road { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .sa-benefits, .sa-dims, .sa-strengths, .sa-rec__grid { grid-template-columns: 1fr; }
  .sa-cats, .sa-bens, .sa-matrix, .sa-road { grid-template-columns: 1fr; }
  .sa-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sa-scale { justify-content: center; }
  .sa-rating { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .sa-rate { padding: 11px 3px; font-size: .6rem; }
  .sa-facts { grid-template-columns: 1fr; }
  .sa-summary div { grid-template-columns: 1fr; gap: 2px; }
  .sa-actions .btn { width: 100%; }
  .sa-nav .btn { flex: 1; }
}

@media print {
  .header, .footer, .sa-nav, .sa-cta, .sa-restart, .sa-back, .sa-link { display: none !important; }
  body { background: #fff; color: #000; }
  .sa-panel, .sa-rec, .sa-score, .sa-mcol, .sa-ben, .sa-road__step { border-color: #ccc; background: #fff; }
  h1, h2, h3, h4, .sa-gauge__num strong, .sa-dim__top strong { color: #000 !important; }
  p, li, dd { color: #333 !important; }
}


/* Very narrow phones: shrink the Self Assessment button to its icon so the
   header never wraps. The label stays available to screen readers. */
.sa-label--short { display: none; }

/* Narrow phones: shorten the label rather than dropping it. */
@media (max-width: 520px) {
  .sa-label--full  { display: none; }
  .sa-label--short { display: inline; }
}

/* Very narrow: icon only, label kept for screen readers. */
@media (max-width: 348px) {
  .logo { font-size: .98rem; letter-spacing: .08em; }
  .btn--sa { padding: 10px; gap: 0; }
  .btn--sa span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- Self Assessment: details capture ---------- */
.sa-details { max-width: 720px; }
.sa-details h2 { margin-bottom: 10px; }
.sa-details .sa-lead { margin-bottom: 26px; }
.sa-consent {
  margin: 6px 0 20px;
  font-size: .9rem; color: var(--body);
  align-items: flex-start; gap: 10px;
}
.sa-consent input { margin-top: 3px; }
.sa-privacy--sm { font-size: .8rem; margin-top: 14px; margin-bottom: 0; }

/* ==========================================================================
   IT SOLUTIONS MEGA MENU
   ========================================================================== */
.has-drop { position: relative; }

/* Invisible bridge across the gap between the button and the panel, so the
   pointer never leaves .has-drop on its way down and the menu stays open. */
.has-drop::after {
  content: ""; position: absolute; top: 100%; left: -20px; right: -20px;
  height: 22px; display: none;
}
.has-drop[aria-expanded="true"]::after { display: block; }
.nav__link--drop { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; }
.nav__link--drop svg { width: 13px; height: 13px; transition: transform .22s; }
.has-drop[aria-expanded="true"] .nav__link--drop svg { transform: rotate(180deg); }

.drop {
  /* anchored to the button's left edge, not centred on it: the panel is wide
     and centring pushed it off the left of the screen */
  position: absolute; top: calc(100% + 16px); left: 0; transform: translateY(-8px);
  width: min(680px, 92vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px;
  padding: 26px 28px;
  background: #0F1218; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  z-index: 130;
}
.has-drop[aria-expanded="true"] .drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0); transition-delay: 0s;
}
.drop h4 {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 12px; font-weight: 700;
}
.drop a {
  display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px;
  font-size: .89rem; color: var(--body); transition: background .16s, color .16s;
}
.drop a:hover { background: rgba(99,248,35,.09); color: #fff; }
.drop__all {
  grid-column: 1 / -1; margin-top: 10px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.drop__all a { color: var(--green); font-weight: 700; }

/* ==========================================================================
   SERVICE PILLAR CARDS (10 across the home page)
   ========================================================================== */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.pillar {
  position: relative; overflow: hidden;
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 22px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.pillar::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.pillar:hover { transform: translateY(-5px); border-color: rgba(99,248,35,.45); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.pillar:hover::after { transform: scaleX(1); }
.pillar__ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 15px;
  display: grid; place-items: center;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.26); color: var(--green);
}
.pillar__ico svg { width: 20px; height: 20px; }
.pillar h3 { font-size: 1.02rem; margin-bottom: 8px; }
.pillar p { font-size: .86rem; color: var(--body); margin: 0; }

/* the software pillars get extra emphasis so they are not overlooked */
.pillar--accent {
  background: linear-gradient(160deg, rgba(99,248,35,.09), var(--card-alt) 60%);
  border-color: rgba(99,248,35,.35);
}
/* All pillar icons share one treatment. The software cards are still marked
   out by their tinted card background and the SOFTWARE tag, which is enough
   distinction without two different icon styles on the same grid. */
.pillar--accent .pillar__ico { background: rgba(99,248,35,.1); color: var(--green); border-color: rgba(99,248,35,.26); }
.tagline {
  display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 99px;
  background: rgba(99,248,35,.14); color: var(--green);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ==========================================================================
   PROCESS TIMELINE (Understand -> Support)
   ========================================================================== */
.timeline { position: relative; display: grid; gap: 4px; }
.timeline::before {
  content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--green), rgba(99,248,35,.15));
}
.tl {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 22px;
  padding: 16px 0; align-items: start;
}
.tl__dot {
  width: 48px; height: 48px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: var(--bg); border: 2px solid var(--green); color: var(--green);
  font-weight: 800; font-size: .95rem;
  transition: background .25s, color .25s;
}
.tl:hover .tl__dot { background: var(--green); color: var(--on-green); }
.tl h3 { font-size: 1.08rem; margin-bottom: 5px; }
.tl p { margin: 0; font-size: .92rem; color: var(--body); }

/* ==========================================================================
   INTEGRATION DIAGRAM
   ========================================================================== */
.integration { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
.intdiag { width: 100%; height: auto; }
.intdiag .node { fill: #1C2230; stroke: #39424F; stroke-width: 1.5; }
.intdiag .node-label { fill: #D2D7DD; font-size: 15px; font-weight: 500; font-family: Figtree, sans-serif; }
.intdiag .hub { fill: rgba(99,248,35,.12); stroke: #63F823; stroke-width: 2; }
.intdiag .hub-label { fill: #63F823; font-size: 17px; font-weight: 700; font-family: Figtree, sans-serif; }
.intdiag .link { stroke: #2F3742; stroke-width: 1.5; fill: none; }
.intdiag .pulse { stroke: #63F823; stroke-width: 2; fill: none; stroke-dasharray: 5 90; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .intdiag .pulse { animation: flow 3.4s linear infinite; }
}
@keyframes flow { to { stroke-dashoffset: -95; } }

/* ==========================================================================
   DEVICE MOCKUPS
   ========================================================================== */
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; }
.device { background: #1A1F27; border: 1px solid #2C333D; border-radius: 12px; padding: 10px; }
.device--laptop { width: min(420px, 100%); border-radius: 12px 12px 4px 4px; }
.device--tablet { width: 190px; }
.device--phone  { width: 120px; border-radius: 18px; padding: 8px; }
.device__screen { background: #0B0E13; border-radius: 6px; overflow: hidden; }
.device--phone .device__screen { border-radius: 12px; }
.device__bar { display: flex; gap: 4px; padding: 7px 9px; background: #12161D; border-bottom: 1px solid #222932; }
.device__bar i { width: 7px; height: 7px; border-radius: 50%; background: #333B45; }
.device__bar i:first-child { background: #63F823; opacity: .7; }
.device--laptop::after { content: ""; display: block; height: 8px; margin: 10px -22px -10px; background: #232A33; border-radius: 0 0 10px 10px; }

/* ==========================================================================
   CHIP LIST (customization capabilities)
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips span {
  padding: 8px 16px; border-radius: 99px; font-size: .86rem; font-weight: 600;
  background: var(--card-alt); border: 1px solid var(--line); color: var(--body);
  transition: border-color .2s, color .2s, transform .2s;
}
.chips span:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* ==========================================================================
   RICHER SCROLL ANIMATIONS
   ========================================================================== */
.reveal-up    { opacity: 0; transform: translateY(30px); }
.reveal-left  { opacity: 0; transform: translateX(-34px); }
.reveal-right { opacity: 0; transform: translateX(34px); }
.reveal-in    { opacity: 0; transform: scale(.94); }
.reveal-up, .reveal-left, .reveal-right, .reveal-in {
  transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
}
.reveal-up.is-in, .reveal-left.is-in, .reveal-right.is-in, .reveal-in.is-in {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-in { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1180px) {
  .drop {
    position: static; transform: none; width: 100%;
    grid-template-columns: 1fr; gap: 0; padding: 6px 0 14px;
    background: transparent; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
  }
  .has-drop[aria-expanded="true"] .drop { display: block; transform: none; }
  .nav__link--drop { width: 100%; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .drop h4 { margin-top: 14px; }
  .drop a { padding: 11px 14px; margin-left: 0; }
}
@media (max-width: 900px) {
  .integration { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 40px 1fr; gap: 16px; }
  .tl__dot { width: 40px; height: 40px; font-size: .85rem; }
  .timeline::before { left: 19px; }
}

a.pillar { display: block; color: inherit; }
a.pillar h3 { transition: color .2s; }
a.pillar:hover h3 { color: var(--green); }

/* CMS-managed imagery */
.banner {
  width: 100%; height: clamp(180px, 26vw, 300px);
  object-fit: cover; border-radius: var(--r);
  border: 1px solid var(--line); display: block;
}
img.visual { object-fit: cover; padding: 0; }


/* photo inside a solution card */
.card__visual { padding: 0; overflow: hidden; }
.card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.8,.3,1); }
.card:hover .card__visual img { transform: scale(1.06); }

/* ==========================================================================
   SCROLL MOTION
   Sections lift over the one before them as you scroll, and the outgoing
   section eases back — the "content overlapping" effect.
   ========================================================================== */

/* each stacking section sits above the previous one and carries its own
   background, so the overlap is visible at the seam */
.stack {
  position: relative;
  z-index: 1;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -26px 60px rgba(0, 0, 0, .55);
  will-change: transform;
}
.stack + .stack { margin-top: -28px; }
.stack--flat { border-radius: 0; box-shadow: none; margin-top: 0; }

/* the hero is pinned while the next section rides up over it */
.hero-pin { position: sticky; top: 0; z-index: 0; }

/* parallax: the hero photo drifts slower than the page */
@media (prefers-reduced-motion: no-preference) {
  .hero { background-attachment: scroll; }
  .is-parallax { transition: none; }
}

/* fade + scale the outgoing hero as the next panel covers it */
.hero__inner-fade { transition: opacity .25s linear, transform .25s linear; }

/* card entrances stagger within their grid */
.stagger > * { opacity: 0; transform: translateY(26px); }
.stagger > *.is-in { opacity: 1; transform: none; }
.stagger > * {
  transition: opacity .65s cubic-bezier(.22,.8,.3,1),
              transform .65s cubic-bezier(.22,.8,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .stack { box-shadow: none; }
  .hero-pin { position: static; }
  .stagger > * { opacity: 1; transform: none; }
}

@media (max-width: 780px) {
  .stack { border-radius: 20px 20px 0 0; }
  .stack + .stack { margin-top: -20px; }
  .hero-pin { position: static; }   /* sticky heroes are awkward on phones */
}

/* ==========================================================================
   SHOWCASE BAND — full-bleed photo with a dark content card sitting over it
   ========================================================================== */
.showcase {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(420px, 56vw, 640px);
  padding: clamp(40px, 6vw, 80px) var(--gutter);
  background-color: #0B0C10;
  background-image: var(--showcase-img);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.showcase::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,12,16,.55), rgba(11,12,16,.25) 45%, rgba(11,12,16,.55));
}
.showcase__card {
  position: relative; z-index: 1;
  max-width: 620px; width: 100%;
  padding: clamp(32px, 5vw, 56px) clamp(26px, 4vw, 52px);
  background: rgba(9, 10, 13, .90);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.showcase__card h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  letter-spacing: -.01em; margin-bottom: 20px;
}
.showcase__card p { color: var(--body); margin-bottom: 28px; }
.showcase__card .btn { border-radius: 0; letter-spacing: .06em; padding: 16px 34px; }

/* ==========================================================================
   MEDIA FRAME — image or embedded video, same shape either way
   ========================================================================== */
.frame {
  position: relative; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: #0E1117; aspect-ratio: 16 / 10;
}
.frame img, .frame iframe, .frame video { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; background: #000; }
.frame--wide { aspect-ratio: 16 / 9; }

/* images slide up into place as they arrive */
.frame img { transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.frame:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) { .frame:hover img { transform: none; } }

/* ==========================================================================
   MEDIA REVEAL — the picture slides up inside its frame on first view.
   NOTE: do not clip the observed element to zero (e.g. clip-path: inset(100%)).
   IntersectionObserver accounts for clipping, so the element would never be
   reported visible and the reveal could never trigger. Animate the INNER image
   instead and keep the container's box intact.
   ========================================================================== */
.frame, .card__visual { overflow: hidden; }

.frame img, .card__visual img {
  transform: translateY(100%);
  transition: transform .9s cubic-bezier(.22, .8, .28, 1);
}
.frame.is-shown img, .card__visual.is-shown img { transform: none; }

/* a bare <img> banner has no frame to slide inside, so it fades and lifts */
.banner {
  opacity: 0; transform: translateY(26px) scale(1.015);
  transition: opacity .8s cubic-bezier(.22,.8,.28,1), transform .8s cubic-bezier(.22,.8,.28,1);
}
.banner.is-shown { opacity: 1; transform: none; }

/* gentle zoom on hover, once revealed */
.frame.is-shown:hover img, .card:hover .card__visual.is-shown img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .frame img, .card__visual img, .banner { transform: none !important; opacity: 1; transition: none; }
}

/* icon slots that hold an uploaded picture rather than an inline SVG */
.why__ico--img { background: transparent; border: 0; width: 64px; height: 64px; padding: 0; }
.why__ico--img img { width: 100%; height: 100%; object-fit: contain; }
.ind__ico { display: block; width: 46px; height: 46px; margin: 0 auto 14px; }
.ind__ico img { width: 100%; height: 100%; object-fit: contain; }

/* taller media frame, matching the Tek Locker hero proportions */
.frame--tall { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .frame--tall { aspect-ratio: 4 / 3; } }

/* Logo. It is a wide wordmark (roughly 9.5:1), so height alone does not
   control how much room it takes. max-width caps its share of narrow screens
   and the aspect ratio keeps the height in proportion. */
.logo img {
  height: 18px; width: auto; display: block;
  max-width: 170px; object-fit: contain; object-position: left center;
}
.logo--sm img { height: 17px; max-width: 160px; }

@media (max-width: 900px) { .logo img { height: 17px; max-width: 155px; } }
@media (max-width: 640px) { .logo img { height: 15px; max-width: 138px; } }
@media (max-width: 420px) { .logo img { height: 14px; max-width: 118px; } }
@media (max-width: 360px) { .logo img { height: 13px; max-width: 104px; } }

/* ==========================================================================
   DEPTH / 3D
   Surfaces are lit from above: a bright hairline on the top edge, a darker one
   beneath, and layered shadows for real distance. Cards tilt very slightly
   toward the pointer so the page reads as physical rather than flat.
   ========================================================================== */

:root {
  --lift-1: 0 1px 2px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.28);
  --lift-2: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.42);
  --lift-3: 0 4px 8px rgba(0,0,0,.45), 0 22px 48px rgba(0,0,0,.55);
  --bevel: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.5);
  --bevel-green: inset 0 1px 0 rgba(160,255,120,.28);
}

/* --- raised surfaces ---------------------------------------------------- */
.pillar, .card, .feat, .ind, .partners, .frame, .showcase__card,
.step4, .form, .sa-panel {
  box-shadow: var(--lift-1), var(--bevel);
  background-image: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 42%);
}

/* --- interactive tilt --------------------------------------------------- */
.tilt-wrap { perspective: 900px; }
.pillar, .card, .feat, .ind {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.8,.3,1),
              box-shadow .35s cubic-bezier(.22,.8,.3,1),
              border-color .3s;
  will-change: transform;
}
.pillar:hover, .card:hover, .feat:hover, .ind:hover {
  transform: translateY(-6px) rotateX(2.2deg) rotateY(-2.2deg) scale(1.012);
  box-shadow: var(--lift-3), var(--bevel);
}

/* --- icon plates sit proud of the card ---------------------------------- */
.pillar__ico, .feat__ico, .why__ico, .tl__dot {
  box-shadow: var(--lift-1), var(--bevel-green);
  transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s;
}
.pillar:hover .pillar__ico, .feat:hover .feat__ico {
  transform: translateZ(22px) scale(1.06);
  box-shadow: var(--lift-2), var(--bevel-green);
}

/* --- buttons get a pressable feel --------------------------------------- */
.btn--green {
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 -2px 0 rgba(0,0,0,.28) inset,
              0 6px 18px rgba(99,248,35,.26),
              0 2px 4px rgba(0,0,0,.4);
}
.btn--green:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
              0 -2px 0 rgba(0,0,0,.28) inset,
              0 12px 28px rgba(99,248,35,.4),
              0 4px 8px rgba(0,0,0,.45);
}
.btn--green:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(99,248,35,.3); }

.btn--sa, .btn--ghost { box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.05); }

/* --- stacking sections gain a lit top edge ------------------------------ */
.stack { box-shadow: 0 -28px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }

/* --- media frames sit in a well ----------------------------------------- */
.frame, .card__visual { box-shadow: var(--lift-2), inset 0 0 0 1px rgba(255,255,255,.05); }

/* --- header floats above the page --------------------------------------- */
.header.is-stuck { box-shadow: 0 2px 20px rgba(0,0,0,.55); }
.drop { box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.07); }

@media (prefers-reduced-motion: reduce) {
  .pillar:hover, .card:hover, .feat:hover, .ind:hover { transform: none; }
  .pillar:hover .pillar__ico, .feat:hover .feat__ico { transform: none; }
}

/* tilt is a pointer affordance; on touch it just gets in the way */
@media (hover: none) {
  .pillar:hover, .card:hover, .feat:hover, .ind:hover { transform: none; }
}

/* ==========================================================================
   SHOW THE WHOLE IMAGE
   The containers above set a fixed aspect ratio and used object-fit: cover,
   which crops. Where a container holds a still image, let it take the image's
   own proportions instead. Video keeps a fixed ratio, because a player needs
   a stable box before the file loads.
   ========================================================================== */

.banner {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* .frame--img and .card__visual--img are added by main.js to any container
   holding a still image, so the rule cannot affect video frames. */
.frame--img,
.card__visual--img {
  aspect-ratio: auto;
  height: auto;
  display: block;
}
.frame--img img,
.card__visual--img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* keep the solution cards level with each other even when the pictures
   differ slightly in proportion */
.sol-grid, .pillars { align-items: stretch; }


/* ==========================================================================
   OUR APPROACH — rotating flow
   Each step spins into place, one after another, slowly enough to watch.
   Once settled, an orbiting ring keeps turning around every step so the
   diagram stays alive without being distracting.
   ========================================================================== */

.flow .node { position: relative; cursor: default; }

/* ---- orbiting ring ---- */
.flow .node::before {
  content: "";
  position: absolute; inset: -15px;
  border-radius: 50%;
  border: 2px dashed rgba(99, 248, 35, .45);
  opacity: 0;
  transition: opacity .6s ease .5s;
  pointer-events: none;
}
/* a second, slower ring for depth */
.flow .node::after {
  content: "";
  position: absolute; inset: -28px;
  border-radius: 50%;
  border: 1px dotted rgba(99, 248, 35, .22);
  opacity: 0;
  transition: opacity .7s ease .7s;
  pointer-events: none;
}
.flow .node.is-in::before,
.flow .node.is-in::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .flow .node.is-in::before { animation: orbit 14s linear infinite; }
  .flow .node.is-in::after  { animation: orbitBack 22s linear infinite; }
}
@keyframes orbit     { to { transform: rotate(360deg); } }
@keyframes orbitBack { to { transform: rotate(-360deg); } }

/* ---- entrance: spin in from small ---- */
.flow .node {
  opacity: 0;
  transform: rotate(-215deg) scale(.25);
  transition: opacity .7s ease,
              transform 1.05s cubic-bezier(.2, 1.25, .35, 1);
}
.flow .node.is-in { opacity: 1; transform: rotate(0deg) scale(1); }

/* the label counter-rotates so the words never appear upside down */
.flow .node > span,
.flow .node { transform-origin: center center; }

/* ---- connectors draw downward ---- */
.flow .link {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .7s cubic-bezier(.45, 0, .25, 1);
}
.flow .link.is-in { transform: scaleY(1); }
.flow .link::after { opacity: 0; transform: translateX(-50%) scale(.4); transition: opacity .4s ease .5s, transform .4s ease .5s; }
.flow .link.is-in::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---- resting state ---- */
@media (prefers-reduced-motion: no-preference) {
  .flow .node--on.is-in { animation: nodeGlow 5s ease-in-out infinite; }
}
@keyframes nodeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,248,35,.30), var(--lift-2); }
  50%      { box-shadow: 0 0 0 20px rgba(99,248,35,0), var(--lift-2); }
}

/* ---- hover ---- */
.flow .node.is-in:hover {
  transform: scale(1.09) rotate(6deg);
  transition: transform .45s cubic-bezier(.2, 1.2, .35, 1);
  z-index: 3;
}
.flow .node.is-in:hover::before { animation-duration: 4s; border-color: rgba(99,248,35,.9); }
.flow .node.is-in:hover::after  { animation-duration: 7s; }
.flow .node--off.is-in:hover { background: rgba(99,248,35,.1); }

/* rings need breathing room so they do not collide with neighbours */
.flow .link { height: 62px; }

@media (prefers-reduced-motion: reduce) {
  .flow .node, .flow .link { opacity: 1; transform: none; transition: none; animation: none; }
  .flow .node::before, .flow .node::after { opacity: 1; animation: none; }
  .flow .link::after { opacity: 1; transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .flow .node::after { inset: -20px; }
  .flow .link { height: 54px; }
}

/* ==========================================================================
   HERO — living server lights
   A canvas sits over the hero photograph and blinks LEDs on it. Positions are
   sampled from the image itself, so it adapts to whatever photo is uploaded.
   ========================================================================== */
.hero { position: relative; }

#hero-leds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;   /* lights add to the photo rather than sitting on it */
  opacity: 0;
  transition: opacity 1.2s ease .3s;
}
#hero-leds.is-lit { opacity: 1; }

/* hero text must stay above the light layer */
.hero .wrap { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) { #hero-leds { display: none; } }

/* ==========================================================================
   FLOATING SELF ASSESSMENT BUTTON
   Fixed to the right edge, stays put while scrolling, expands on hover.
   ========================================================================== */
.sa-fab {
  position: fixed; right: 22px; bottom: 26px; z-index: 140;
  display: flex; align-items: center;
  height: 62px; border-radius: 999px;
  background: linear-gradient(135deg, var(--green), #46d80f);
  color: var(--on-green);
  box-shadow: 0 8px 30px rgba(99,248,35,.38), 0 4px 12px rgba(0,0,0,.5);
  transform: translateY(120px) scale(.7); opacity: 0;
  transition: transform .6s cubic-bezier(.2,1.2,.35,1), opacity .5s ease, box-shadow .3s ease;
}
.sa-fab.is-ready { transform: none; opacity: 1; }

.sa-fab__icon {
  flex: 0 0 62px; width: 62px; height: 62px;
  display: grid; place-items: center; position: relative; z-index: 1;
}
.sa-fab__icon svg { width: 26px; height: 26px; }

.sa-fab__label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-weight: 800; font-size: .95rem; position: relative; z-index: 1;
  transition: max-width .45s cubic-bezier(.2,1,.35,1), opacity .3s ease, padding .45s;
}
.sa-fab:hover, .sa-fab:focus-visible { box-shadow: 0 14px 42px rgba(99,248,35,.55), 0 6px 16px rgba(0,0,0,.55); }
.sa-fab:hover .sa-fab__label,
.sa-fab:focus-visible .sa-fab__label { max-width: 260px; opacity: 1; padding-right: 26px; }

.sa-fab::before, .sa-fab::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--green); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sa-fab.is-ready::before { animation: fabPulse 2.8s ease-out infinite; }
  .sa-fab.is-ready::after  { animation: fabPulse 2.8s ease-out infinite 1.4s; }
}
@keyframes fabPulse {
  0%   { transform: scale(1); opacity: .65; }
  100% { transform: scale(2.1); opacity: 0; }
}
.sa-fab:hover::before, .sa-fab:hover::after { animation-duration: 1.4s; }

.sa-fab__free {
  position: absolute; top: -7px; left: -8px; z-index: 3;
  background: #fff; color: #06210A;
  font-size: .58rem; font-weight: 800; letter-spacing: .09em;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  opacity: 0; transform: scale(.5);
  transition: opacity .4s ease .9s, transform .5s cubic-bezier(.2,1.5,.4,1) .9s;
}
.sa-fab.is-ready .sa-fab__free { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .sa-fab { right: 14px; bottom: 16px; height: 54px; }
  .sa-fab__icon { flex-basis: 54px; width: 54px; height: 54px; }
  .sa-fab::before, .sa-fab::after { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .sa-fab { transform: none; opacity: 1; } }

/* ==========================================================================
   WELCOME MODAL
   ========================================================================== */
.sa-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,9,.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.sa-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.sa-modal__card {
  position: relative; isolation: isolate;
  width: min(700px, 100%); max-height: 88vh; overflow-y: auto;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 22px;
  background: linear-gradient(165deg, #151A22, #0B0C10 72%);
  box-shadow: 0 40px 100px rgba(0,0,0,.78);
  transform: translateY(44px) scale(.93); opacity: 0;
  transition: transform .6s cubic-bezier(.2,1.15,.35,1), opacity .45s ease;
}
.sa-modal.is-open .sa-modal__card { transform: none; opacity: 1; }

/* animated gradient edge */
.sa-modal__card::before {
  content: ""; position: absolute; inset: -2px; border-radius: 24px; z-index: -2;
  background: conic-gradient(from 0deg, var(--green), #0d4d00, var(--green), #0d4d00, var(--green));
}
.sa-modal__card::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; z-index: -1;
  background: linear-gradient(165deg, #151A22, #0B0C10 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .sa-modal.is-open .sa-modal__card::before { animation: edgeSpin 7s linear infinite; }
}
@keyframes edgeSpin { to { transform: rotate(360deg); } }

.sa-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, transform .3s;
}
.sa-modal__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
.sa-modal__close svg { width: 16px; height: 16px; }

.sa-modal__eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(99,248,35,.14); color: var(--green);
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.sa-modal__card h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin-bottom: 12px; }
.sa-modal__intro { color: var(--body); margin-bottom: 22px; }

.sa-modal__list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.sa-modal__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .92rem; color: var(--body);
  opacity: 0; transform: translateX(-14px);
}
.sa-modal.is-open .sa-modal__list li { animation: itemIn .55s cubic-bezier(.2,1,.35,1) forwards; }
.sa-modal.is-open .sa-modal__list li:nth-child(1){animation-delay:.30s}
.sa-modal.is-open .sa-modal__list li:nth-child(2){animation-delay:.38s}
.sa-modal.is-open .sa-modal__list li:nth-child(3){animation-delay:.46s}
.sa-modal.is-open .sa-modal__list li:nth-child(4){animation-delay:.54s}
.sa-modal.is-open .sa-modal__list li:nth-child(5){animation-delay:.62s}
.sa-modal.is-open .sa-modal__list li:nth-child(6){animation-delay:.70s}
.sa-modal.is-open .sa-modal__list li:nth-child(7){animation-delay:.78s}
@keyframes itemIn { to { opacity: 1; transform: none; } }
.sa-modal__list svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 3px; }

.sa-modal__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sa-modal__later {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--muted); font-size: .88rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.sa-modal__later:hover { color: #fff; }
.sa-modal__time { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .82rem; margin-top: 18px; }
.sa-modal__time svg { width: 15px; height: 15px; }

@media (max-width: 620px) { .sa-modal__list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sa-modal__card { transform: none; }
  .sa-modal__list li { opacity: 1; transform: none; animation: none !important; }
}

/* ==========================================================================
   SOLUTION PAGE VISUALS
   An orbiting core for the hero, and a lattice of tiles that light in
   sequence for the technology section. Both are pure CSS, so they scale
   perfectly and cost nothing to load.
   ========================================================================== */
.solorb {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 420px; margin-inline: auto;
  display: grid; place-items: center;
}
.solorb__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(99,248,35,.28);
  pointer-events: none;
}
.solorb__ring--a { inset: 6%;  border-style: dashed; border-width: 2px; }
.solorb__ring--b { inset: 20%; border-style: dotted; }
@media (prefers-reduced-motion: no-preference) {
  .solorb__ring--a { animation: orbit 18s linear infinite; }
  .solorb__ring--b { animation: orbitBack 26s linear infinite; }
}

.solorb__core {
  position: relative;
  width: 44%; aspect-ratio: 1/1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1d2530, #0C0F14 72%);
  border: 1px solid rgba(99,248,35,.4);
  color: var(--green);
  box-shadow: 0 0 60px rgba(99,248,35,.18), var(--lift-3), inset 0 1px 0 rgba(255,255,255,.08);
}
.solorb__core svg { width: 42%; height: 42%; }
@media (prefers-reduced-motion: no-preference) {
  .solorb__core { animation: coreBreathe 5s ease-in-out infinite; }
}
@keyframes coreBreathe {
  0%,100% { box-shadow: 0 0 50px rgba(99,248,35,.14), var(--lift-3), inset 0 1px 0 rgba(255,255,255,.08); }
  50%     { box-shadow: 0 0 90px rgba(99,248,35,.30), var(--lift-3), inset 0 1px 0 rgba(255,255,255,.08); }
}

.solorb__tag {
  position: absolute; bottom: 4%;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(11,12,16,.9); border: 1px solid rgba(99,248,35,.35);
  color: var(--green); font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}

/* lattice of tiles */
.solgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 400px; margin-inline: auto;
}
.solgrid__cell {
  aspect-ratio: 1/1; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #1A1F27, #0E1116);
  border: 1px solid var(--line);
  color: var(--green);
  box-shadow: var(--lift-1), var(--bevel);
  transition: transform .35s cubic-bezier(.2,1.2,.35,1), border-color .35s, box-shadow .35s;
}
.solgrid__cell svg { width: 34%; height: 34%; }
@media (prefers-reduced-motion: no-preference) {
  .solgrid__cell { animation: cellGlow 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes cellGlow {
  0%, 70%, 100% { border-color: var(--line); }
  35%           { border-color: rgba(99,248,35,.55); }
}
.solgrid__cell:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--green);
  box-shadow: var(--lift-3), var(--bevel-green);
}

@media (max-width: 900px) {
  .solorb { max-width: 320px; }
  .solgrid { max-width: 320px; }
}

/* ==========================================================================
   INDUSTRY PAGES
   ========================================================================== */
.indcats { display: grid; gap: 20px; }
.indcat {
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 24px;
  box-shadow: var(--lift-1), var(--bevel);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.indcat:hover { border-color: rgba(99,248,35,.4); box-shadow: var(--lift-2), var(--bevel); transform: translateY(-3px); }
.indcat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.indcat__ico {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.3);
  color: var(--green); box-shadow: var(--bevel-green);
}
.indcat__ico svg { width: 21px; height: 21px; }
.indcat__head h3 { margin: 0; flex: 1; }
.indcat__count {
  font-family: var(--font-logo); font-size: 1.6rem; font-weight: 700;
  color: rgba(99,248,35,.35); line-height: 1;
}
.indcat .chips span {
  background: rgba(255,255,255,.035);
  font-size: .84rem; padding: 7px 14px;
}
.indcat .chips span:hover { background: rgba(99,248,35,.1); }

/* industry tiles on the overview page */
.indtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.indtile {
  display: block; color: inherit;
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px 24px;
  box-shadow: var(--lift-1), var(--bevel);
  transition: transform .35s cubic-bezier(.2,1.2,.35,1), border-color .3s, box-shadow .3s;
}
.indtile:hover {
  transform: translateY(-6px);
  border-color: var(--green);
  box-shadow: var(--lift-3), var(--bevel-green);
}
.indtile__ico {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px;
  background: rgba(99,248,35,.1); border: 1px solid rgba(99,248,35,.3);
  color: var(--green); box-shadow: var(--bevel-green);
  transition: transform .35s cubic-bezier(.2,1.2,.35,1);
}
.indtile__ico svg { width: 26px; height: 26px; }
.indtile:hover .indtile__ico { transform: scale(1.08) rotate(-5deg); }
.indtile h3 { margin-bottom: 9px; font-size: 1.12rem; }
.indtile p { font-size: .88rem; color: var(--body); margin-bottom: 16px; }
.indtile .more { display: inline-block; }

/* the dropdown carries two columns of links now */
.drop { width: min(760px, calc(100vw - 48px)); }
.drop__col-tall a { padding-block: 6px; }

@media (max-width: 1180px) { .drop { width: 100%; } }

/* ==========================================================================
   PRIVACY NOTICE
   ========================================================================== */
.privacy-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  font-size: .82rem; color: var(--body);
  text-align: center; margin: 14px 0 0; line-height: 1.5;
}
.privacy-line svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* a clear, obviously-clickable control rather than faint underlined text */
.privacy-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; margin: 0 2px;
  background: rgba(99, 248, 35, .1);
  border: 1px solid rgba(99, 248, 35, .45);
  border-radius: 999px;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--green); cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.privacy-open:hover,
.privacy-open:focus-visible {
  background: var(--green); color: var(--on-green);
  border-color: var(--green); transform: translateY(-1px);
}

.privacy-modal {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,9,.76);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.privacy-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.privacy-modal__card {
  position: relative;
  width: min(620px, 100%); max-height: 86vh; overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 20px;
  background: linear-gradient(165deg, #151A22, #0B0C10 72%);
  border: 1px solid rgba(99,248,35,.28);
  box-shadow: 0 40px 100px rgba(0,0,0,.78);
  transform: translateY(30px) scale(.96); opacity: 0;
  transition: transform .45s cubic-bezier(.2,1.15,.35,1), opacity .35s ease;
}
.privacy-modal.is-open .privacy-modal__card { transform: none; opacity: 1; }
.privacy-modal__card h2 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin-bottom: 16px; }
.privacy-modal__body { color: var(--body); font-size: .93rem; line-height: 1.7; margin-bottom: 26px; }

/* the policy block on the About page */
.policy {
  background: var(--card-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--lift-1), var(--bevel);
}
.policy h3 { margin: 22px 0 8px; font-size: 1.05rem; }
.policy h3:first-child { margin-top: 0; }
.policy p { color: var(--body); margin-bottom: 12px; }
.policy ul { margin: 0 0 14px; padding: 0; list-style: none; }
.policy li {
  position: relative; padding-left: 20px; padding-block: 4px;
  color: var(--body); font-size: .93rem;
}
.policy li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.policy a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .privacy-modal__card { transform: none; } }


/* the padlock line on the assessment forms carries the link inline */
.sa-privacy { display: block; }
.sa-privacy .privacy-open {
  margin: 8px 0 0 0; vertical-align: middle;
  white-space: nowrap;          /* keep it a pill, never an oval */
}
.privacy-open { white-space: nowrap; }

/* pillar icon holding an uploaded image rather than an inline SVG */
.pillar__ico--img { padding: 9px; }
.pillar__ico--img img { width: 100%; height: 100%; object-fit: contain; display: block; }