/* Cinematic motion layer */
:root {
  --glow: #70ffe1;
  --ice: #76c7ff;
  --ink: #06121e;
  --line: #b8e7ff20;
}

body {
  background: var(--ink);
  color: #e9f6ff;
}

header {
  background: #06121edb;
  box-shadow: 0 8px 40px #0003;
  border-bottom: 1px solid var(--line);
  transition:
    padding 0.3s,
    background 0.3s;
}

header.scrolled {
  background: #06121ef5;
  padding-top: 12px;
  padding-bottom: 12px;
}

nav a:hover {
  color: var(--glow);
}

.nav-contact,
.action.primary {
  background: linear-gradient(115deg, #9dffe1, #67d8f0);
  box-shadow: 0 0 30px #70ffe124;
}

.hero {
  min-height: 690px;
  max-height: 960px;
}

.hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 1.4s ease,
    transform 7s linear;
  filter: saturate(1.15);
}

.hero .slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero:after {
  background:
    linear-gradient(90deg, #04101ff2 0%, #051423ce 36%, #05142315 80%),
    linear-gradient(0deg, #06121e, transparent 45%);
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 75% 35%, #58eaff15, transparent 45%);
  box-shadow: inset 0 0 160px #030b1680;
}

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

.hero h1 {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.25;
  letter-spacing: -2px;
  text-shadow: 0 8px 40px #0006;
}

.hero h1 b {
  background: linear-gradient(100deg, #aaffdd, #6de3ff 60%, #a4b5ff);
  color: transparent;
  background-clip: text;
}

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

.hero-copy > p {
  color: #c0d1df;
}

.hero-actions .action {
  position: relative;
  overflow: hidden;
}

.action:before,
.nav-contact:before {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(
    110deg,
    transparent 42%,
    #ffffff45 50%,
    transparent 58%
  );
  transform: translateX(-70%);
  transition: transform 0.7s;
  pointer-events: none;
}

.action:hover:before,
.nav-contact:hover:before {
  transform: translateX(70%);
}

.nav-contact {
  position: relative;
  overflow: hidden;
}

.action.secondary {
  backdrop-filter: blur(14px);
  border-color: #c4eeff40;
}

.hero-controls {
  position: absolute;
  bottom: 38px;
  left: 5vw;
  right: 5vw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0b2339a8;
  border: 1px solid #ffffff35;
  color: #fff;
  backdrop-filter: blur(12px);
  transition:
    background 0.25s,
    box-shadow 0.25s;
}

.hero-controls button:hover {
  background: #23536b;
  box-shadow: 0 0 24px #70ffe140;
}

.hero-controls .slide-dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #ffffff35;
}

.hero-controls .slide-dot[aria-current="true"] {
  background: var(--glow);
  box-shadow: 0 0 16px #70ffe180;
}

.slide-caption {
  margin-left: auto;
  color: #b8d5e4;
  font-size: 11px;
  letter-spacing: 2px;
}

.slide-count {
  color: var(--glow);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ambient-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  right: 9%;
  top: 19%;
  border: 1px solid #8bffff28;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    0 0 80px #70ffe10c,
    inset 0 0 80px #70ffe10c;
  animation: orbit 16s linear infinite;
}

.ambient-orb:before {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px dashed #b1eeff30;
  border-radius: 50%;
}

.ambient-orb:after {
  content: "";
  position: absolute;
  top: 40px;
  left: 40px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 25px 5px #70ffe180;
}

.motion-ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: #0c1d2b;
  padding: 22px 0;
  color: #9bafbe;
  font-size: 12px;
  letter-spacing: 4px;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 35s linear infinite;
}

.ticker-track span {
  white-space: nowrap;
  padding-right: 55px;
}

.ticker-track b {
  color: var(--glow);
  margin-right: 55px;
}

.solution-quicklinks {
  background: transparent;
  padding-top: 35px;
}

.solution-quicklinks a,
.solution-quicklinks a:first-child {
  background: linear-gradient(135deg, #142b3d, #0c1c2b);
  border: 1px solid var(--line) !important;
  color: #e4f5ff;
  box-shadow: 0 15px 45px #0002;
}

.solution-quicklinks small {
  color: #9bb4c6;
}

.solution-quicklinks a:hover {
  background: #16384a;
}

.solution-section {
  background:
    radial-gradient(ellipse at 100% 30%, #123b493b, transparent 55%), #06121e;
}

.solution-section h2,
#services h2,
.faq-section h2 {
  color: #e8f5ff;
}

.portfolio-item,
.portfolio-grid .portfolio-item:first-child,
.portfolio-grid .portfolio-item:last-child {
  background: linear-gradient(140deg, #132b3e, #0b1c2b);
  border: 1px solid var(--line);
  box-shadow: 0 18px 45px #0004;
}

.portfolio-content h3,
.portfolio-grid .portfolio-item:first-child h3 {
  color: #edfaff;
}

.portfolio-content p,
.portfolio-grid .portfolio-item:first-child p {
  color: #a7bfce;
}

.portfolio-item {
  position: relative;
  transition:
    transform 0.4s,
    box-shadow 0.4s,
    border-color 0.4s;
}

.portfolio-item:hover {
  border-color: #70ffe160;
  box-shadow:
    0 25px 65px #0006,
    0 0 35px #70ffe114;
  transform: perspective(1000px) rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg)) translateY(-7px);
}

.portfolio-item img {
  transition:
    transform 0.8s,
    filter 0.8s;
}

.portfolio-item:hover img {
  transform: scale(1.055);
  filter: saturate(1.2);
}

.portfolio-item:after,
.card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 0%),
    #99ffff15,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s;
}

.portfolio-item:hover:after,
.card:hover:after {
  opacity: 1;
}

.view-more-btn {
  color: var(--glow);
  border-color: #70ffe155;
}

.view-more-btn:hover {
  background: #70ffe115;
  box-shadow: 0 0 30px #70ffe115;
}

#about {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 90% 45%, #14627360, transparent 60%), #091c2d;
  border-block: 1px solid var(--line);
}

.about-image {
  box-shadow:
    20px 20px 0 #70ffe109,
    0 30px 80px #0007;
  border: 1px solid #a7f4ff30;
}

#services {
  background: transparent;
}

.card,
.card:last-child {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #112a3e, #0b1b2c);
  border: 1px solid var(--line);
  box-shadow: 0 15px 40px #0003;
}

.card:hover {
  background: #143248;
  box-shadow: 0 20px 50px #0005;
}

.card h3 {
  color: #e8faff;
}

.card p {
  color: #a7bfce;
}

.card .number {
  color: var(--glow);
}

.workflow {
  background: linear-gradient(120deg, #0d2c3d, #102136);
  border-block: 1px solid var(--line);
}

.workflow-top p {
  color: #a7bfce;
}

.workflow-steps span {
  color: var(--glow);
}

.workflow-steps small {
  color: #7cdcc9;
}

.faq-section > div > p {
  color: #a7bfce;
}

.faq-list details,
.faq-list details:first-child {
  background: #102537;
  border: 1px solid var(--line);
  transition:
    background 0.3s,
    border-color 0.3s;
}

.faq-list details[open] {
  background: #143347;
  border-color: #70ffe150;
}

.faq-list p {
  color: #acc6d4;
}

.faq-list summary:after,
.faq-num {
  color: var(--glow);
}

.contact-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 10% 10%, #397a8770, transparent 60%),
    linear-gradient(110deg, #123d47, #122039);
  border-block: 1px solid #70ffe135;
  color: #edffff;
}

.contact-banner .action {
  background: var(--glow);
  color: #062131;
  box-shadow: 0 0 40px #70ffe125;
}

.contact-btn,
.hotmail-btn {
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.contact-btn:hover,
.hotmail-btn:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 30px #70ffe145;
}

footer {
  background: #040e18;
}

.portfolio-page-title {
  background:
    radial-gradient(ellipse at 80% 0, #17637765, transparent 70%), #091a2a;
}

.modal-content {
  color: #123342;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2200;
  background: linear-gradient(90deg, #70ffe1, #87aaff);
  box-shadow: 0 0 15px #70ffe1;
  pointer-events: none;
}

.reveal-ready {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 0.8s,
    translate 0.8s;
  transition-delay: var(--delay, 0ms);
}

.reveal-ready.is-visible {
  opacity: 1;
  translate: 0 0;
}

.hero-copy {
  animation: hero-enter 1s both;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: 690px;
  }

  .hero-copy {
    padding: 65px 24px 135px;
  }

  .hero h1 {
    font-size: clamp(38px, 9vw, 58px);
    letter-spacing: -1px;
  }

  .hero-controls {
    left: 24px;
    right: 24px;
    bottom: 30px;
    gap: 10px;
  }

  .slide-caption {
    display: none;
  }

  .hero-controls button {
    width: 40px;
    height: 40px;
  }

  .hero-controls .slide-dot {
    width: 23px;
  }

  .ambient-orb {
    width: 220px;
    height: 220px;
    right: -80px;
    top: 70px;
    opacity: 0.5;
  }

  .hero-copy .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .motion-ticker {
    padding: 17px 0;
    font-size: 10px;
  }

  .about-image {
    box-shadow: 8px 8px 0 #70ffe109;
  }

  .hero:after {
    background:
      linear-gradient(90deg, #04101fed, #05142380),
      linear-gradient(0deg, #06121e, transparent 80%);
  }

  .solution-quicklinks a:hover {
    background: #16384a;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready {
    opacity: 1;
    translate: none;
  }

  .hero .slide {
    transform: none;
  }

  .ticker-track {
    animation: none;
  }

  .ambient-orb {
    animation: none;
  }

  .portfolio-item:hover {
    transform: none;
  }
}