/* PC Genie styles. Source order preserves responsive and interaction overrides. */

:root {
  color-scheme: dark;
  --bg: #080c10;
  --panel: #10171d;
  --line: #26323c;
  --text: #f3f6f9;
  --muted: #a3b3c1;
  --cyan: #20c8f4;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  color: var(--text);
  font: 16px/1.65 Manrope,Arial,sans-serif;
}

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

button,input,textarea {
  font: inherit;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
}

header {
  max-width: 1360px;
  margin: auto;
  padding: 25px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #ffffff0c;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.brand-mark {
  display: block;
  position: relative;
  overflow: hidden;
  width: 46px;
  height: 44px;
  mix-blend-mode: screen;
}

.brand-mark img {
  position: absolute;
  width: 128px;
  height: auto;
  left: -5px;
  top: -4px;
  filter: invert(1) hue-rotate(180deg);
}

.cyan {
  color: var(--cyan);
}

nav {
  display: flex;
  align-items: center;
  gap: 35px;
  font-size: 14px;
  font-weight: 600;
}

nav>a:hover,.text-link:hover {
  color: var(--cyan);
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid var(--cyan);
  color: #071318;
  font-weight: 800;
  cursor: pointer;
}

.button:hover {
  background: #8ae6ff;
  transform: translateY(-2px);
}

.button.small {
  min-height: 44px;
  padding: 9px 22px;
  color: var(--text);
}

.hero {
  position: relative;
  max-width: 1360px;
  margin: auto;
  padding: 68px 48px 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  isolation: isolate;
}

.hero-copy {
  padding: 15px 0 45px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 700;
  margin: 0 0 24px;
}

h1 {
  font-size: clamp(76px,8.3vw,116px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.075em;
  margin: 0;
}

h1 .cyan {
  background: linear-gradient(100deg,#91eaff,#18bcef 75%);
  background-clip: text;
  color: transparent;
}

.hero-subhead {
  line-height: 1.22;
  letter-spacing: -.04em;
  font-weight: 600;
  margin: 28px 0 22px;
}

.intro {
  max-width: 425px;
  font-size: 17px;
  line-height: 1.8;
}

.actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 32px;
}

.text-link {
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #7893a1;
  padding: 8px 0;
}

.three-stage {
  position: relative;
  min-width: 0;
  perspective: 1000px;
}

.scene-aura {
  position: absolute;
  pointer-events: none;
  animation: aura 8s ease-in-out infinite;
}

.mascot-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

.mascot {
  display: block;
  max-width: 100%;
  height: auto;
}

.service-chip {
  position: absolute;
  padding: 11px 16px;
  border: 1px solid #40566688;
  border-radius: 8px;
  background: linear-gradient(120deg,#1c2d38e8,#101a25ed);
  box-shadow: 0 12px 35px #0005;
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .25s,border-color .25s,background .25s;
  z-index: 3;
}

.service-chip span {
  font-size: 12px;
  color: var(--cyan);
  margin-right: 8px;
}

.service-chip:hover {
  transform: translateY(-5px);
  border-color: var(--cyan);
  background: #173347;
}

.chip-one {
  left: 4%;
  top: 9%;
}

.chip-two {
  right: -1%;
  top: 22%;
}

.chip-three {
  right: -2%;
  bottom: 22%;
}

.chip-four {
  left: 0%;
  bottom: 15%;
}

.chip-five {
  left: -2%;
  top: 44%;
}

.scene-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: #91a8b9;
}

.three-pause {
  border: 1px solid #2b404f;
  border-radius: 6px;
  background: transparent;
  color: #b1c5d1;
  font-size: 12px;
  cursor: pointer;
}

.three-pause:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.motion-paused .mascot,.motion-paused .scene-aura {
  animation-play-state: paused;
}

.motion-paused .mascot-wrap {
  transition: none;
}

.hero-foot {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.hero-foot>span {
  font-size: 12px;
  letter-spacing: .12em;
  color: #d8e3ec;
  font-weight: 600;
}

.hero-foot p {
  margin: 0;
  font-size: 14px;
}

.hero-foot a {
  font-size: 14px;
  color: var(--cyan);
}

.services,.about,.contact {
  max-width: 1264px;
  margin: auto;
  padding: 100px 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.section-head>p {
  max-width: 350px;
  color: var(--muted);
  font-size: 16px;
}

h2 {
  font-size: clamp(36px,4.3vw,58px);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 600;
  margin: 0;
}

h3 {
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -.025em;
  margin: 15px 0;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  align-items: start;
}

.service-list details {
  grid-column: span 2;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg,#132029,#0d151c);
  overflow: hidden;
  transition: border-color .25s,background .25s;
}

.service-list details:nth-child(4),.service-list details:nth-child(5) {
  grid-column: span 3;
}

.service-list details:nth-child(5) {
  background: linear-gradient(120deg,#14364a,#11212e);
}

.service-list details:hover,.service-list details[open] {
  border-color: #4c8197;
}

.service-list details[open] {
  background: #162832;
}

summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 12px;
  padding: 28px;
  cursor: pointer;
  min-height: 220px;
}

summary::-webkit-details-marker {
  display: none;
}

.number {
  grid-column: 1;
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: .1em;
}

.service-title {
  grid-column: 1;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -.035em;
  font-weight: 600;
  align-self: end;
}

.service-short {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
  align-self: start;
}

.plus {
  grid-column: 2;
  grid-row: 1;
  font-size: 24px;
  line-height: 1;
  color: var(--cyan);
  text-align: right;
}

details[open] .plus {
  transform: rotate(45deg);
}

.service-content {
  color: var(--muted);
}

.service-content p {
  margin-top: 0;
}

.service-content a {
  color: var(--cyan);
  font-weight: 600;
  font-size: 14px;
}

.about {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about h2 {
  max-width: 900px;
}

.about-intro {
  max-width: 630px;
  color: var(--muted);
  font-size: 17px;
  margin: 28px 0 50px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
}

.steps article {
  border-top: 1px solid #3c5060;
  padding-top: 24px;
}

.steps span {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  font-weight: 700;
}

.steps p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 0;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding: 110px 0;
}

.contact>div>p:last-child {
  max-width: 350px;
  color: var(--muted);
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #111b23;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
}

label {
  font-size: 14px;
  font-weight: 600;
}

input,textarea {
  border: 1px solid #304556;
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  width: 100%;
  margin-bottom: 10px;
}

input:focus,textarea:focus {
  outline: 2px solid var(--cyan);
}

form .button {
  align-self: start;
}

.form-note,#feedback {
  font-size: 14px;
  color: var(--muted);
  margin: 7px 0 0;
}

footer {
  border-top: 1px solid var(--line);
  max-width: 1264px;
  margin: auto;
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-size: 14px;
}

footer img {
  width: 135px;
  height: auto;
  border-radius: 6px;
}

footer a {
  color: var(--cyan);
}

.reveal {
  opacity: 1;
}

.js-motion .reveal {
  opacity: 0;
}

.js-motion .reveal.visible {
  opacity: 1;
}

@keyframes float {
  0%,100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-16px) rotate(1deg);
  }
}

@keyframes aura {
  0%,100% {
    opacity: .7;
  }

  50% {
    opacity: 1;
  }
}

@media(max-width:1360px) {
  .services,.about,.contact,footer {
    margin-left: 48px;
    margin-right: 48px;
  }
}

@media(max-width:1050px) {
  header {
    padding: 22px 32px;
  }

  .hero {
    padding: 50px 32px 0;
    grid-template-columns: 1fr 1fr;
  }

  .service-chip {
    padding: 9px 10px;
  }

  .service-chip span {
    display: none;
  }

  .chip-five {
    left: 0;
  }

  .chip-two {
    right: 0;
  }

  .chip-three {
    right: 0;
  }

  .services,.about,.contact,footer {
    margin-left: 32px;
    margin-right: 32px;
  }

  .contact {
    gap: 48px;
  }

  .service-title {
    font-size: 23px;
  }

  summary {
    padding: 24px;
    min-height: 235px;
  }

  .hero-foot {
    margin-top: 42px;
  }
}

@media(max-width:800px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-copy {
    max-width: 620px;
  }

  h1 {
    font-size: clamp(72px,14vw,106px);
  }

  .hero-subhead br {
    display: none;
  }

  .intro {
    max-width: 520px;
  }

  .three-stage {
    max-width: 620px;
    width: 100%;
    justify-self: center;
  }

  .service-chip {
    font-size: 14px;
    padding: 10px 14px;
  }

  .chip-one {
    top: 10%;
    left: 5%;
  }

  .chip-two {
    right: 1%;
    top: 25%;
  }

  .chip-five {
    left: 2%;
  }

  .chip-three {
    right: 2%;
    bottom: 23%;
  }

  .chip-four {
    left: 4%;
    bottom: 15%;
  }

  .hero-foot {
    margin-top: 40px;
  }

  .hero-foot p {
    display: none;
  }

  .section-head {
    display: block;
  }

  .section-head>p {
    max-width: 550px;
  }

  .service-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .service-list details,.service-list details:nth-child(4) {
    grid-column: span 1;
  }

  .service-list details:nth-child(5) {
    grid-column: span 2;
  }

  summary {
    min-height: 210px;
  }

  .steps {
    gap: 24px;
  }

  .steps h3 {
    font-size: 20px;
  }

  .contact {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .services {
    padding: 80px 0;
  }

  .about {
    padding: 65px 0;
  }

  footer {
    flex-wrap: wrap;
  }
}

@media(max-width:520px) {
  header {
    padding: 20px;
  }

  .brand {
    font-size: 25px;
  }

  .brand-mark {
    width: 38px;
  }

  nav {
    gap: 16px;
  }

  nav>a:nth-child(2) {
    display: none;
  }

  nav .button.small {
    padding: 8px 14px;
    min-height: 40px;
  }

  nav>a:first-child {
    display: none;
  }

  .hero {
    padding: 40px 22px 0;
  }

  .eyebrow {
    font-size: 12px;
    margin-bottom: 20px;
  }

  h1 {
    font-size: 80px;
  }

  .hero-subhead {
    margin-top: 24px;
  }

  .intro {
    font-size: 16px;
  }

  .actions {
    gap: 24px;
    margin-top: 26px;
  }

  .button {
    padding: 13px 22px;
  }

  .chip-one {
    left: 1%;
    top: 6%;
  }

  .chip-two {
    right: 0;
    top: 22%;
  }

  .chip-five {
    left: -1%;
    top: 42%;
  }

  .chip-three {
    right: 0;
    bottom: 23%;
  }

  .chip-four {
    left: 0;
    bottom: 12%;
  }

  .scene-bottom {
    font-size: 12px;
    gap: 10px;
  }

  .scene-bottom>span {
    max-width: 150px;
  }

  .three-pause {
    white-space: nowrap;
    font-size: 12px;
  }

  .hero-foot {
    align-items: flex-start;
  }

  .hero-foot>span {
    max-width: 160px;
    line-height: 1.8;
    font-size: 12px;
  }

  .hero-foot a {
    padding-top: 4px;
  }

  .services,.about,.contact,footer {
    margin-left: 22px;
    margin-right: 22px;
  }

  .services {
    padding: 65px 0;
  }

  .service-list {
    grid-template-columns: 1fr;
  }

  .service-list details,.service-list details:nth-child(4),.service-list details:nth-child(5) {
    grid-column: span 1;
  }

  summary {
    min-height: 180px;
    padding: 24px;
  }

  .service-title {
    font-size: 25px;
  }

  .service-short {
    font-size: 14px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .steps h3 {
    font-size: 23px;
  }

  .about-intro {
    font-size: 16px;
  }

  .contact {
    padding: 70px 0;
  }

  footer span {
    order: 3;
    width: 100%;
  }

  h2 {
    font-size: 39px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  .mascot-wrap,.button {
    transition: none;
  }
}

@media(max-width:1050px) {
  .service-chip {
    font-size: 14px;
  }
}

@media(max-width:520px) {
  .service-chip {
    font-size: 14px;
    padding: 8px 10px;
  }

  .hero-foot a {
    font-size: 14px;
  }
}

.mascot {
  max-height: 100%;
  object-fit: contain;
}

.floating-services {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border: 1px solid #3b5668;
  overflow: hidden;
  backdrop-filter: blur(16px);
  z-index: 3;
}

.floating-services .service-chip {
  position: static;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  transform: none;
  white-space: normal;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.floating-services .service-chip:nth-child(odd):not(:last-child) {
  border-right: 1px solid #2c4353;
}

.floating-services .service-chip:nth-child(-n+4) {
  border-bottom: 1px solid #2c4353;
}

.floating-services .service-chip-ai {
  grid-column: 1/-1;
  color: #81e4ff;
}

.floating-services .service-chip:hover {
  transform: none;
  background: #1c4358;
  color: #8ce8ff;
}

.service-list .service-short {
  align-self: start;
}

@media(max-width:1050px) {
  .floating-services {
    width: 100%;
    bottom: 32px;
  }
}

@media(max-width:800px) {
  .floating-services {
    width: min(100%,460px);
  }
}

@media(max-width:520px) {
  .floating-services {
    width: 100%;
  }

  .floating-services .service-chip {
    min-height: 47px;
  }
}

.service-content h3 {
  line-height: 1.3;
  color: var(--text);
  margin: 26px 0 12px;
  letter-spacing: -.025em;
}

.service-content .offer-model {
  font-size: 14px;
  line-height: 1.65;
  color: #bdd7e5;
  border-left: 2px solid var(--cyan);
  padding-left: 12px;
  margin: 18px 0 24px;
}

.offer-examples {
  padding-left: 20px;
  margin: 16px 0 20px;
}

.offer-examples li {
  padding: 3px 0;
}

.offer-examples li::marker {
  color: var(--cyan);
}

body {
  background: radial-gradient(ellipse at 85% 0%,#102435 0,transparent 30%),#070c12;
  overflow-x: clip;
}

header {
  position: relative;
  z-index: 5;
  min-height: 95px;
}

.brand {
  font-size: 30px;
}

nav a:not(.button) {
  position: relative;
}

nav a:not(.button)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}

nav a:hover::after {
  transform: scaleX(1);
}

.hero {
  padding-top: 78px;
  gap: 0 42px;
}

.hero-copy .eyebrow {
  display: inline-block;
  border: 1px solid #487b944d;
  background: #13334b40;
  border-radius: 50px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: .12em;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(80px,8.5vw,120px);
  letter-spacing: -.075em;
}

.hero h1 .cyan {
  background: linear-gradient(125deg,#e7fcff,#64defd 30%,#00b6f2 75%);
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 70px #17b9ff20;
}

.hero-subhead {
  font-size: clamp(28px,3vw,40px);
  color: #d8e5f0;
}

.intro {
  color: #9caebe;
}

.button {
  border-radius: 7px;
  background: linear-gradient(130deg,#91e8ff,#20c8f4 55%,#10a9e7);
  box-shadow: inset 0 1px 0 #dcf9ff99,0 6px 30px #00aeef16;
  transition: box-shadow .25s,transform .25s;
}

.button:hover {
  box-shadow: inset 0 1px 0 #fff,0 10px 40px #00aeef35;
}

.button.small {
  background: linear-gradient(130deg,#243b4e,#10202c);
  border-color: #3a596d;
  box-shadow: inset 0 1px 0 #7091a52b;
}

.hero-foot {
  border-bottom: 0;
  position: relative;
  margin-top: 50px;
}

.hero-foot:before {
  content: '';
  height: 1px;
  position: absolute;
  left: 15%;
  right: 15%;
  top: -1px;
  background: linear-gradient(90deg,transparent,#5de1ff70,transparent);
}

.three-stage {
  height: 640px;
  isolation: isolate;
}

#depth-scene {
  position: absolute;
  inset: -10% -8%;
  width: 116%;
  height: 90%;
  pointer-events: none;
  z-index: -1;
}

.scene-aura {
  inset: -6% -15% 15%;
  background: radial-gradient(ellipse at 50% 44%,#007aaf50,transparent 62%);
  filter: blur(10px);
}

.mascot-wrap {
  inset: -25px -25px 178px;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(30px);
}

.mascot {
  width: 490px;
  filter: drop-shadow(0 35px 40px #00a6e525);
  animation: float 8s ease-in-out infinite;
}

.floating-services {
  bottom: 30px;
  width: min(100%,460px);
  border-radius: 14px;
  border-color: #4d768f80;
  background: linear-gradient(120deg,#1b354ae8,#0d1b28ef);
  box-shadow: inset 0 1px 0 #bfedff28,0 22px 65px #0008,0 0 45px #007bb014;
}

.floating-services .service-chip {
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 20px;
  min-height: 54px;
  font-weight: 500;
  color: #d4e6f1;
}

.service-chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #64d9ff;
}

.floating-services .service-chip-ai {
  justify-content: center;
  background: linear-gradient(90deg,#0d557c22,#157ea738,#0d557c22);
}

.scene-bottom {
  font-size: 12px;
  bottom: -17px;
}

.three-pause {
  min-height: 36px;
  padding: 7px 12px;
}

.services {
  padding-top: 110px;
}

.section-head {
  margin-bottom: 42px;
}

.section-head h2 {
  font-weight: 600;
}

.service-list {
  gap: 20px;
  perspective: 1400px;
}

.service-list .premium-card {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 0 0,#263f5260,transparent 60%),linear-gradient(135deg,#14222f,#0a141f);
  border: 1px solid #304659;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #a4cde614,0 12px 32px #0002;
  transform: perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));
  transition: border-color .25s,box-shadow .25s,transform .3s;
  overflow: hidden;
}

.premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(450px circle at var(--light-x,50%) var(--light-y,0%),#38c9ff18,transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: -1;
}

.premium-card::after {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,#9feaff99,transparent);
  pointer-events: none;
}

.service-list .premium-card:hover,.service-list .premium-card[open] {
  border-color: #568fab;
  box-shadow: 0 18px 40px #0004,inset 0 1px 0 #a4cde628;
}

.premium-card:hover::before,.premium-card[open]::before {
  opacity: 1;
}

.service-list .premium-card:nth-child(5) {
  background: radial-gradient(ellipse at 100% 0,#146e9c50,transparent 60%),linear-gradient(135deg,#142e43,#0d1b2e);
  border-color: #315f7e;
}

.service-list summary {
  grid-template-columns: 1fr 38px;
  grid-template-rows: 76px auto 1fr;
  gap: 12px;
  padding: 30px;
  min-height: 285px;
}

.service-icon {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg,#244c63,#133047);
  border: 1px solid #47758e;
  box-shadow: inset 0 1px 0 #a8e8ff5c,0 5px 0 #071724,0 12px 25px #0004;
  color: #9be7ff;
  transform: perspective(450px) rotateY(-13deg) rotateX(10deg);
  transition: transform .4s,box-shadow .4s;
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.premium-card:hover .service-icon {
  transform: perspective(450px) rotateY(0) rotateX(0) translateY(-4px);
  box-shadow: inset 0 1px 0 #b8eeff77,0 5px 0 #071724,0 15px 28px #00a6e522;
}

.service-list .service-title {
  grid-row: 2;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.03em;
  align-self: start;
}

.service-list .service-short {
  grid-row: 3;
  color: #a2b9cb;
  font-size: 15px;
  max-width: 300px;
  line-height: 1.7;
}

.service-list .plus {
  grid-row: 1;
  align-self: start;
  border: 1px solid #38556a;
  background: #172c3d77;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  color: #b9ddef;
  transition: transform .3s,background .3s;
}

.premium-card[open] .plus {
  background: #21638080;
}

.service-content {
  padding: 0 30px 30px;
  line-height: 1.8;
  font-size: 16px;
}

.service-content>p:first-child {
  border-top: 1px solid #345166;
  padding-top: 22px;
}

.service-content h3 {
  font-size: 20px;
}

.service-content a {
  display: inline-block;
  border-bottom: 1px solid #3f748d;
  padding-bottom: 3px;
}

.about {
  background: radial-gradient(ellipse at 95% 20%,#14416555,transparent 58%);
  padding: 90px 0;
}

.steps article {
  position: relative;
  border-top-color: #355970;
}

.steps article:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 55px;
  height: 2px;
  background: #59d5ff;
  box-shadow: 0 0 14px #21bdff66;
}

.steps h3 {
  font-size: 25px;
}

.contact form {
  background: linear-gradient(135deg,#162637,#0c1825);
  border-color: #30485e;
  box-shadow: 0 20px 60px #0003,inset 0 1px 0 #99ccea18;
  padding: 36px;
  border-radius: 16px;
}

.contact h2 {
  font-size: clamp(42px,4.5vw,62px);
}

input,textarea {
  background: #08131ee0;
  border-color: #30475a;
}

.js-motion .reveal {
  transform: translateY(25px);
  transition: opacity .85s,transform .85s;
}

.js-motion .reveal.visible {
  transform: none;
}

.motion-paused .premium-card,.motion-paused .service-icon {
  transform: none;
}

@media(max-width:1050px) {
  .hero {
    gap: 0 24px;
  }

  .three-stage {
    height: 600px;
  }

  .mascot-wrap {
    inset: 0 -12px 190px;
  }

  .mascot {
    width: 430px;
  }

  .floating-services .service-chip {
    padding: 14px 12px;
    gap: 8px;
  }

  .service-list summary {
    padding: 24px;
    min-height: 285px;
  }

  .service-content {
    padding: 0 24px 26px;
  }
}

@media(max-width:800px) {
  .hero {
    padding-top: 50px;
  }

  .hero-copy {
    padding-bottom: 25px;
  }

  .three-stage {
    height: 630px;
    margin-top: 16px;
  }

  .mascot-wrap {
    inset: -15px 0 180px;
  }

  .mascot {
    width: 480px;
  }

  .floating-services {
    bottom: 25px;
  }

  .floating-services .service-chip {
    padding: 16px 20px;
  }

  .service-list summary {
    min-height: 275px;
  }

  .hero h1 {
    font-size: clamp(78px,13vw,110px);
  }

  .services {
    padding-top: 80px;
  }

  .service-list .premium-card {
    transform: none;
  }
}

@media(max-width:520px) {
  .hero {
    padding-top: 35px;
  }

  .hero h1 {
    font-size: clamp(66px,18vw,88px);
  }

  .hero-copy .eyebrow {
    font-size: 10px;
  }

  .hero-subhead {
    font-size: 30px;
  }

  .three-stage {
    height: 550px;
    margin-top: 10px;
  }

  .mascot-wrap {
    inset: -5px -8px 180px;
  }

  .mascot {
    width: 380px;
  }

  .floating-services {
    bottom: 20px;
  }

  .floating-services .service-chip {
    padding: 14px 10px;
    gap: 8px;
    font-size: 14px;
  }

  .service-chip svg {
    width: 16px;
    height: 16px;
  }

  .scene-bottom {
    bottom: -23px;
  }

  .service-list summary {
    min-height: 250px;
    padding: 26px;
    grid-template-rows: 70px auto 1fr;
  }

  .service-list .service-title {
    font-size: 27px;
  }

  .service-list .service-short {
    font-size: 16px;
  }

  .service-content {
    padding: 0 26px 28px;
  }

  .contact form {
    padding: 26px;
  }

  .hero-foot {
    margin-top: 65px;
  }

  .about {
    padding: 70px 0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .service-list .premium-card,.service-icon,.mascot-wrap,.premium-card:hover .service-icon {
    transform: none;
    transition: none;
  }

  .mascot,.scene-aura {
    animation: none;
  }

  .js-motion .reveal {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.genie-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 490px;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transform-origin: 50% 68%;
  border-radius: 35%;
  isolation: isolate;
}

.genie-button .mascot {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.genie-button:focus-visible {
  outline: 2px dashed #9beaff;
  outline-offset: 5px;
}

.genie-button.tickled {
  animation: genie-tickle .85s ease-in-out both;
}

.genie-reaction {
  position: absolute;
  left: 50%;
  top: 3%;
  transform: translate(-50%,8px);
  border: 1px solid #5fa1bf;
  background: #102b3def;
  border-radius: 14px 14px 14px 3px;
  padding: 8px 15px;
  color: #dff8ff;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s,transform .2s;
  z-index: 5;
  box-shadow: 0 8px 25px #0004;
}

.genie-reaction.show {
  opacity: 1;
  transform: translate(-50%,0);
}

.tickle-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.tickle-sparkles i {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  animation: tickle-pop .7s ease-out both;
}

@keyframes genie-tickle {
  0%,100% {
    transform: rotate(0) scale(1);
  }

  12% {
    transform: rotate(-5deg) scale(1.03,.97);
  }

  26% {
    transform: rotate(6deg) scale(.98,1.04);
  }

  40% {
    transform: rotate(-6deg) translateY(-8px);
  }

  54% {
    transform: rotate(5deg) scale(1.03,.98);
  }

  68% {
    transform: rotate(-3deg) translateY(-4px);
  }

  82% {
    transform: rotate(2deg);
  }
}

@keyframes tickle-pop {
  0% {
    opacity: 0;
    transform: translate(0,0) scale(.3);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--spark-x),var(--spark-y)) rotate(130deg) scale(.2);
  }
}

@media(hover:hover) {
  .genie-button:hover .mascot {
    filter: drop-shadow(0 25px 45px #00baff50);
  }
}

@media(max-width:1050px) {
  .genie-button {
    width: 430px;
  }
}

@media(max-width:800px) {
  .genie-button {
    width: 480px;
  }
}

@media(max-width:520px) {
  .genie-button {
    width: 380px;
  }

  .genie-reaction {
    top: 0;
    font-size: 14px;
  }
}

.motion-paused .genie-button.tickled {
  animation: none;
}

.motion-paused .tickle-sparkles {
  display: none;
}

@media(prefers-reduced-motion:reduce) {
  .genie-button.tickled {
    animation: none;
  }

  .tickle-sparkles {
    display: none;
  }

  .genie-reaction {
    transition: none;
    transform: translateX(-50%);
  }

  .genie-reaction.show {
    transform: translateX(-50%);
  }
}

.three-stage.user-motion-enabled .mascot {
  animation: float 8s ease-in-out infinite;
}

.three-stage.user-motion-enabled .scene-aura {
  animation: aura 8s ease-in-out infinite;
}

.three-stage.user-motion-enabled .mascot-wrap {
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(30px);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.three-stage.user-motion-enabled .genie-button.tickled,.three-stage .genie-button.direct-tickle.tickled {
  animation: genie-tickle .85s ease-in-out both;
}

.three-stage.user-motion-enabled .tickle-sparkles,.three-stage .direct-tickle .tickle-sparkles {
  display: block;
}

@keyframes tickle-gentle {
  0%,100% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-2deg);
  }

  65% {
    transform: rotate(2deg);
  }
}

@media(prefers-reduced-motion:reduce) {
  .three-stage:not(.user-motion-enabled) .genie-button.direct-tickle.tickled {
    animation: tickle-gentle .4s ease-in-out both;
  }
}

.tickle-sparkles {
  z-index: 4;
}

.tickle-sparkles i {
  background: #effcff;
  box-shadow: 0 0 5px #ffffff,0 0 12px #39d2ff;
}

.scene-offscreen .mascot,.scene-offscreen .scene-aura,.page-hidden .mascot,.page-hidden .scene-aura {
  animation-play-state: paused!important;
}
/* Software licence enquiries and device-local cart. */
.cart-open{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #36556a;border-radius:8px;color:var(--text);padding:9px 14px;font:inherit;font-size:14px;cursor:pointer}.cart-open span{min-width:22px;border-radius:6px;background:#204e67;color:#a4eaff;padding:0 5px;text-align:center}.software-shop{max-width:1264px;margin:0 auto;padding:30px 0 100px}.software-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.software-card{display:flex;flex-direction:column;border:1px solid #31526b;border-radius:16px;background:linear-gradient(135deg,#142a3c,#0b1622);padding:30px;box-shadow:inset 0 1px 0 #a4e7ff20}.software-card h3{font-size:25px;margin:0 0 18px}.software-card>p:not(.eyebrow){color:var(--muted)}.software-card .software-price{color:#83ddff!important;font-weight:700;margin-top:auto;padding-top:24px}.software-card .button{align-self:flex-start;margin-top:8px}.shop-note,.shop-feedback{font-size:14px;color:var(--muted);margin-top:24px}.shop-feedback{color:var(--cyan)}
#software-cart{width:min(600px,calc(100% - 32px));max-height:85dvh;overflow:auto;color:var(--text);border:1px solid #416681;border-radius:18px;padding:30px;background:linear-gradient(140deg,#172d40,#0a1420);box-shadow:0 30px 100px #0009}#software-cart::backdrop{background:#02080dc9;backdrop-filter:blur(6px)}.cart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.cart-heading h2{font-size:36px}.cart-heading .eyebrow{margin-bottom:10px}.cart-close{background:#21394d;border:1px solid #416681;border-radius:8px;color:white;font-size:26px;line-height:1;width:40px;height:40px;cursor:pointer}.cart-row{padding:24px 0;border-bottom:1px solid #304b60}.cart-row h3{font-size:20px;margin:0}.cart-price{font-size:14px;color:var(--muted)}.cart-controls{display:grid;grid-template-columns:1fr 85px auto;gap:12px;align-items:center}.cart-controls input{margin:0}.cart-remove{background:none;border:0;color:#9de5ff;cursor:pointer;font-size:14px}.cart-total{display:flex;justify-content:space-between;gap:20px;margin-top:24px}.cart-total strong{color:#9de5ff}#cart-summary>p,.cart-storage-note,.cart-empty p{font-size:14px;color:var(--muted)}.cart-empty{padding:30px 0}.cart-storage-note{margin-top:24px}
@media(max-width:1360px){.software-shop{margin-left:48px;margin-right:48px}}@media(max-width:1050px){.software-shop{margin-left:32px;margin-right:32px}header nav{gap:16px}}@media(max-width:800px){.software-grid{grid-template-columns:1fr}.software-card .software-price{padding-top:8px}.software-shop{padding-bottom:70px}}@media(max-width:520px){.software-shop{margin-left:22px;margin-right:22px}.software-card{padding:26px}.cart-open{padding:8px 10px}nav{gap:10px}nav .button.small{display:none}nav>a:nth-child(2){display:block}.cart-controls{grid-template-columns:1fr 75px}.cart-remove{grid-column:1/-1;justify-self:start;padding:5px 0}#software-cart{padding:24px}}

.contact-trap { display: none; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.email-copy{align-self:flex-start;background:none;border:0;padding:8px 0;color:var(--cyan);cursor:pointer;font-size:14px;text-decoration:underline}.email-copy[hidden]{display:none}.contact>div a{color:var(--cyan)}
/* Outcome-led AI services page. */
.ai-hero{max-width:1360px;margin:auto;padding:85px 48px 65px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}.ai-hero h1{font-size:clamp(48px,5.2vw,74px);line-height:1.08;letter-spacing:-.055em}.ai-hero .intro{max-width:580px;font-size:18px}.ai-hero .actions{flex-wrap:wrap;gap:18px}.ai-trust{font-size:14px;color:var(--muted);margin-top:26px}.ai-art{position:relative;text-align:center;background:radial-gradient(ellipse,#075b8144,transparent 65%)}.ai-art img{width:100%;max-width:430px;height:auto}.ai-art p{color:#aee7fa;font-size:14px;margin-top:-10px}.ai-section{max-width:1264px;margin:auto;padding:75px 0}.ai-section>p:not(.eyebrow){max-width:780px;color:var(--muted);font-size:17px}.ai-problem,.ai-how,.ai-audience{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ai-benefits{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.ai-benefits span{border:1px solid #36566b;border-radius:8px;padding:10px 16px;color:#c7ebfa;font-size:14px;background:#132b3b}.ai-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.ai-service,.ai-package{border:1px solid #34576e;border-radius:16px;background:linear-gradient(135deg,#172e41,#0c1723);padding:30px}.ai-service h3{margin:0 0 18px;font-size:23px}.ai-service p,.ai-package p,.ai-package li{color:var(--muted);font-size:16px;line-height:1.8}.ai-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}.ai-package{display:flex;flex-direction:column}.ai-package:nth-child(2){border-color:#5597b4;background:linear-gradient(135deg,#164866,#102237)}.ai-package h3{margin-top:0;font-size:26px}.ai-package ul{padding-left:20px;margin:8px 0 20px}.ai-package li{padding:4px 0}.ai-package li::marker{color:var(--cyan)}.ai-package .ai-scope{margin-top:auto;font-size:14px;color:#8ee3ff}.ai-package .button{font-size:14px;min-height:55px;padding:14px 18px;text-align:center}.ai-how>p{margin:30px 0 45px}.ai-faq details{border-top:1px solid var(--line)}.ai-faq details:last-child{border-bottom:1px solid var(--line)}.ai-faq summary{display:flex;justify-content:space-between;gap:24px;padding:24px 0;min-height:0;font-size:20px;font-weight:600}.ai-faq summary span{color:var(--cyan)}.ai-faq details>p{max-width:850px;color:var(--muted);padding-bottom:24px;margin:0;font-size:16px}.ai-final{background:radial-gradient(ellipse at 80% 40%,#0b456a55,transparent 60%)}.ai-final .button{margin-top:15px}.ai-final .ai-booking-note{font-size:14px}select{font:inherit;background:#08131e;color:var(--text);border:1px solid #30475a;border-radius:6px;padding:12px;margin-bottom:10px;width:100%}select:focus-visible{outline:2px solid var(--cyan)}
@media(max-width:1360px){.ai-section{margin-left:48px;margin-right:48px}}@media(max-width:1050px){header nav{gap:14px}.ai-hero{padding:60px 32px}.ai-section{margin-left:32px;margin-right:32px}.ai-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-packages{grid-template-columns:1fr}.ai-package ul{columns:2;column-gap:40px}.ai-package .button{align-self:flex-start}.ai-package .ai-scope{margin-top:12px}}@media(max-width:800px){.ai-hero{grid-template-columns:1fr}.ai-art img{max-width:300px}.ai-service-grid{grid-template-columns:1fr}.ai-hero h1{font-size:56px}}@media(max-width:520px){.ai-page nav a:first-child{display:block}.ai-page nav a:nth-child(2){display:none}.ai-hero{padding:45px 22px}.ai-hero h1{font-size:45px}.ai-hero .intro{font-size:17px}.ai-section{margin-left:22px;margin-right:22px;padding:60px 0}.ai-service,.ai-package{padding:26px}.ai-package ul{columns:1}.ai-faq summary{font-size:18px}.ai-page footer .brand{font-size:24px}.ai-page nav .button.small{display:none}}

@media(max-width:720px){header{flex-wrap:wrap}header nav{flex-wrap:wrap;gap:12px}body:not(.ai-page) header nav{width:100%;justify-content:flex-end}}

.field-hint,.field-error{font-size:13px;line-height:1.5;margin:0 0 12px}.field-hint{color:var(--muted)}.field-error{color:#ffb6bc}.field-error[hidden]{display:none}#phone[aria-invalid="true"]{border-color:#ff8996}

/* Full-width changes in tone keep the long page visually varied. */
.services,.software-shop,.about,.contact,.ai-problem,.ai-how,.ai-final {
  position: relative;
  isolation: isolate;
}
.services::before,.software-shop::before,.about::after,.contact::before,
.ai-problem::before,.ai-how::before,.ai-final::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.services::before {
  background: radial-gradient(ellipse 80% 35% at 80% 50%,#14547380,transparent 100%),linear-gradient(180deg,#080c10 0%,#102b40 35%,#102b40 80%,#0d2334 100%);
}
.software-shop::before {
  background: linear-gradient(180deg,#0d2334,#102d43);
}
.about,.ai-how {
  --text: #f3f6f9;
  --muted: #b8cbd9;
  --cyan: #65d8fa;
  color: var(--text);
  background: none;
  border: 0;
}
.about::after,.ai-how::before {
  background: radial-gradient(ellipse 80% 35% at 85% 50%,#28557580,transparent 100%),linear-gradient(180deg,#0d2334 0%,#17364c 30%,#1b3b52 55%,#17384e 75%,#123247 100%);
}
.about .eyebrow,.ai-how .eyebrow { color: #65d8fa; }
.about .steps article { border-top-color: #57778d; }
.about .steps article::before { background: #65d8fa; box-shadow: none; }
.about .steps span { color: #65d8fa; }
.contact::before,.ai-final::before {
  background: radial-gradient(ellipse 85% 35% at 0% 50%,#17547a85,transparent 100%),linear-gradient(180deg,#123247,#0b1c2b 85%,#080c10);
}
.contact>div>p:last-child { color: #bdd2df; }
.contact form { background: linear-gradient(135deg,#193a51,#102438); border-color: #476779; }
.ai-problem::before { background: linear-gradient(180deg,#080c10,#102b40); }
.ai-how>p { color: var(--muted); }

.contact-page .contact{min-height:75vh;padding-top:70px}.contact-page h1{font-size:clamp(48px,6vw,80px);line-height:1.08;letter-spacing:-.055em;margin:18px 0 28px}.contact-page .contact-intro{font-size:24px;color:var(--text)}.contact-page nav .button.small{display:inline-flex}.contact-page .contact::before{background:radial-gradient(ellipse 85% 35% at 0% 50%,#17547a85,transparent 100%),linear-gradient(180deg,#080c10,#123247 30%,#0b1c2b 85%,#080c10)}@media(max-width:720px){.contact-page .contact{padding-top:40px}.contact-page nav{width:100%;justify-content:flex-end}.contact-page header nav>a{display:inline-flex}}
@media(max-width:520px){header nav a.button.small{display:inline-flex;padding:9px 14px;min-height:40px}}

.software-page .software-shop{min-height:72vh;padding-top:70px}.software-page h1{font-size:clamp(44px,5vw,68px);line-height:1.1;letter-spacing:-.055em;margin:0}.software-page .software-shop::before{background:radial-gradient(ellipse 80% 35% at 80% 50%,#14547380,transparent 100%),linear-gradient(180deg,#080c10,#102b40 35%,#102b40 75%,#080c10)}@media(max-width:520px){.software-page .software-shop{padding-top:45px}.software-page header nav>a{display:inline-flex}}

/* Display the supplied horizontal logo directly from the brand sheet. */
.brand-art{display:block;flex:none;width:205px;height:68px;background-image:url('brand-logo-sheet.png');background-repeat:no-repeat;background-size:2048px 282px;background-position:-264px -8px;mix-blend-mode:screen}.brand:has(.brand-art){gap:0}footer .brand-art{width:184.5px;height:61.2px;background-size:1843.2px 253.8px;background-position:-237.6px -7.2px}@media(max-width:520px){header .brand-art{width:184.5px;height:61.2px;background-size:1843.2px 253.8px;background-position:-237.6px -7.2px}}

.skip-link{position:fixed;top:12px;left:12px;z-index:1000;background:#a5eaff;color:#08131e;padding:10px 18px;border-radius:6px;font-weight:700;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}