:root {

  --accent: #ff3366;

  --accent-light: #ff5c85;

  --accent-dim: #cc2952;

  --accent-glow: rgba(255, 51, 102, 0.45);

  --accent-subtle: rgba(255, 51, 102, 0.12);

  --accent-border: rgba(255, 51, 102, 0.25);

  --bg-black: #000000;

  --bg-dark: #0a0a0a;

  --bg-elevated: #111111;

  --bg-card: rgba(12, 12, 14, 0.92);

  --text-primary: #f0f0f2;

  --text-secondary: #a0a0a8;

  --text-muted: #6b6b75;

  --font-display: "Orbitron", "Segoe UI", sans-serif;

  --font-body: "DM Sans", "Segoe UI", sans-serif;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-body);

  line-height: 1.6;

  color: var(--text-primary);

  background: var(--bg-black);

  overflow-x: hidden;

}



body::before {

  content: "";

  position: fixed;

  inset: 0;

  background-image:

    linear-gradient(var(--accent-subtle) 1px, transparent 1px),

    linear-gradient(90deg, var(--accent-subtle) 1px, transparent 1px);

  background-size: 48px 48px;

  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 70%);

  pointer-events: none;

  z-index: 0;

}



body::after {

  content: "";

  position: fixed;

  inset: 0;

  background: radial-gradient(ellipse 60% 40% at 50% -10%,

      rgba(255, 51, 102, 0.08) 0%,

      transparent 55%);

  pointer-events: none;

  z-index: 0;

}



.section,

.header,

.footer,

.hero {

  position: relative;

  z-index: 1;

}



::selection {

  background: var(--accent);

  color: var(--bg-black);

}



a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



/* SVG icon system */

.icon-sprite {

  position: absolute;

  width: 0;

  height: 0;

  overflow: hidden;

  pointer-events: none;

}



.ui-icon {

  display: block;

  width: 26px;

  height: 26px;

  color: var(--accent);

  flex-shrink: 0;

  filter: drop-shadow(0 0 8px var(--accent-subtle));

  transition:

    color 0.25s ease,

    filter 0.25s ease,

    transform 0.25s ease;

}



.ui-icon--lg {

  width: 36px;

  height: 36px;

}



.ui-icon--sm {

  width: 18px;

  height: 18px;

}



.service-tab-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 52px;

  height: 52px;

  margin-bottom: 15px;

  background: rgba(255, 51, 102, 0.06);

  border: 1px solid var(--accent-border);

  transition:

    border-color 0.3s ease,

    box-shadow 0.3s ease,

    background 0.3s ease;

}



.service-tab-icon .ui-icon {

  width: 24px;

  height: 24px;

}



.service-tab:hover .service-tab-icon,

.service-tab.active .service-tab-icon {

  background: var(--accent-subtle);

  border-color: var(--accent);

  box-shadow: 0 0 20px var(--accent-subtle);

}



.service-tab:hover .ui-icon,

.service-tab.active .ui-icon {

  filter: drop-shadow(0 0 12px var(--accent-glow));

}



.service-content-icon .ui-icon,

.tech-icon .ui-icon,

.contact-icon .ui-icon {

  filter: drop-shadow(0 0 10px var(--accent-glow));

}



.tech-card:hover .ui-icon,

.contact-item:hover .ui-icon {

  transform: scale(1.06);

  filter: drop-shadow(0 0 14px var(--accent-glow));

}



.social-link .ui-icon {

  color: var(--text-secondary);

  filter: none;

}



.social-link:hover .ui-icon {

  color: var(--bg-black);

  filter: none;

  transform: scale(1.08);

}



/* Header Styles */

.header {

  position: fixed;

  top: 0;

  width: 100%;

  background: rgba(0, 0, 0, 0.75);

  backdrop-filter: blur(24px);

  border-bottom: 1px solid var(--accent-border);

  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), 0 1px 0 var(--accent-subtle);

  z-index: 1000;

  padding: 0 20px;

  transition: all 0.3s ease;

}



.header.scrolled {

  background: rgba(0, 0, 0, 0.92);

  backdrop-filter: blur(28px);

  box-shadow:

    0 8px 40px rgba(0, 0, 0, 0.8),

    0 1px 0 var(--accent-border);

}



.nav-container {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 0;

}



.logo-container {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

}



.logo-svg {

  width: 40px;

  height: 40px;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

}



.logo-mark {

  width: 10px;

  height: 10px;

  background: var(--accent);

  box-shadow: 0 0 12px var(--accent-glow);

  flex-shrink: 0;

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}



.logo-text {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  color: var(--text-primary);

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.logo-accent {

  color: var(--accent);

  text-shadow: 0 0 24px var(--accent-glow);

}



.nav-menu {

  display: flex;

  list-style: none;

  gap: 4px;

  background: rgba(255, 51, 102, 0.06);

  padding: 6px;

  border-radius: 4px;

  backdrop-filter: blur(10px);

  border: 1px solid var(--accent-border);

}



.nav-menu li {

  position: relative;

}



.nav-menu a {

  color: var(--text-secondary);

  text-decoration: none;

  transition: all 0.3s ease;

  font-weight: 600;

  font-size: 13px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 10px 20px;

  border-radius: 2px;

  position: relative;

  display: block;

}



.nav-menu a:hover {

  color: var(--accent);

  background: var(--accent-subtle);

}



.nav-menu a.active {

  color: var(--bg-black);

  background: var(--accent);

  box-shadow: 0 0 20px var(--accent-glow);

}



.hamburger {

  display: none;

  flex-direction: column;

  cursor: pointer;

  background: none;

  border: none;

  padding: 8px;

  border-radius: 8px;

  transition: background 0.3s ease;

}



.hamburger:hover {

  background: var(--accent-subtle);

}



.hamburger span {

  width: 25px;

  height: 2px;

  background: var(--accent);

  margin: 3px 0;

  transition: 0.3s;

  border-radius: 2px;

}



.hamburger.active span:nth-child(1) {

  transform: rotate(-45deg) translate(-5px, 6px);

}



.hamburger.active span:nth-child(2) {

  opacity: 0;

}



.hamburger.active span:nth-child(3) {

  transform: rotate(45deg) translate(-5px, -6px);

}



/* Hero Section with Slider */

.hero {

  margin-top: 80px;

  min-height: 100vh;

  background:

    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 51, 102, 0.15) 0%, transparent 60%),

    var(--bg-black);

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  position: relative;

}



.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(0deg,

      transparent,

      transparent 2px,

      rgba(255, 51, 102, 0.03) 2px,

      rgba(255, 51, 102, 0.03) 4px);

  pointer-events: none;

  animation: scanlines 8s linear infinite;

}



@keyframes scanlines {

  0% {

    transform: translateY(0);

  }



  100% {

    transform: translateY(4px);

  }

}



.slider-container {

  width: 1197px;

  /* 1200px set as 1197px to prevent showing up some slicing lines */

  height: 700px;

  position: relative;

  perspective: 1500px;

  transform-style: preserve-3d;

  overflow: visible;

  box-shadow:

    0 0 0 1px var(--accent-border),

    0 0 60px var(--accent-subtle);

}



.slider-stage {

  width: 100%;

  height: 600px;

  position: relative;

  display: flex;

  transform-style: preserve-3d;

}



.slice-container {

  flex: 1;

  height: 100%;

  position: relative;

  transform-style: preserve-3d;

  overflow: hidden;

}



.slice-cube {

  width: 100%;

  height: 100%;

  position: relative;

  transform-style: preserve-3d;

  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  transform-origin: center center;

}



.slice-cube {

  transform: translateZ(-300px) rotateX(0deg);

}



.slice-cube.rotate-1 {

  transform: translateZ(-300px) rotateX(90deg);

}



.slice-cube.rotate-2 {

  transform: translateZ(-300px) rotateX(180deg);

}



.slice-cube.rotate-3 {

  transform: translateZ(-300px) rotateX(270deg);

}



.slice-face {

  position: absolute;

  width: 100%;

  height: 100%;

  overflow: hidden;

  backface-visibility: hidden;

}



.slice-face.face-1 {

  transform: rotateX(0deg) translateZ(300px);

}



.slice-face.face-2 {

  transform: rotateX(-90deg) translateZ(300px);

}



.slice-face.face-3 {

  transform: rotateX(-180deg) translateZ(300px);

}



.slice-face.face-4 {

  transform: rotateX(-270deg) translateZ(300px);

}



.slice-image {

  position: absolute;

  height: 100%;

  background-size: cover;

  background-position: center;

}



.slice-container:nth-child(1) .slice-cube {

  transition-delay: 0s;

}



.slice-container:nth-child(2) .slice-cube {

  transition-delay: 0.04s;

}



.slice-container:nth-child(3) .slice-cube {

  transition-delay: 0.08s;

}



.slice-container:nth-child(4) .slice-cube {

  transition-delay: 0.12s;

}



.slice-container:nth-child(5) .slice-cube {

  transition-delay: 0.16s;

}



.slice-container:nth-child(6) .slice-cube {

  transition-delay: 0.2s;

}



.slice-container:nth-child(7) .slice-cube {

  transition-delay: 0.24s;

}



.slice-container:nth-child(8) .slice-cube {

  transition-delay: 0.28s;

}



.slice-container:nth-child(9) .slice-cube {

  transition-delay: 0.32s;

}



.slice-container:nth-child(10) .slice-cube {

  transition-delay: 0.36s;

}



.text-overlay {

  position: absolute;

  bottom: 100px;

  left: 0;

  right: 0;

  height: 120px;

  background: linear-gradient(90deg,

      rgba(0, 0, 0, 0.85) 0%,

      rgba(0, 0, 0, 0.6) 100%);

  backdrop-filter: blur(16px);

  border-top: 1px solid var(--accent-border);

  border-left: 3px solid var(--accent);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 0 40px;

  z-index: 102;

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.4s ease,

    transform 0.4s ease;

}



.text-overlay.hiding {

  opacity: 0;

  transform: translateY(10px);

}



.slide-title {

  font-family: var(--font-display);

  color: var(--text-primary);

  font-size: 28px;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin: 0 0 8px 0;

  text-shadow: 0 0 30px var(--accent-glow);

}



.slide-description {

  color: rgba(255, 255, 255, 0.9);

  font-size: 16px;

  line-height: 1.4;

  margin: 0;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

}



.controls {

  position: absolute;

  top: 20px;

  right: 20px;

  display: flex;

  gap: 15px;

  z-index: 103;

}



.control-btn {

  width: 65px;

  height: 65px;

  border: 1px solid var(--accent-border);

  background: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(10px);

  border-radius: 4px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

  color: white;

  font-size: 26px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

  padding: 0;

  position: relative;

}



.control-btn:hover:not(:disabled) {

  background: var(--accent-subtle);

  transform: scale(1.05);

  box-shadow: 0 0 24px var(--accent-glow);

  border-color: var(--accent);

}



.nav-arrow {

  position: absolute;

  top: 300px;

  transform: translateY(-50%);

  width: 70px;

  height: 70px;

  border: 1px solid var(--accent-border);

  background: rgba(0, 0, 0, 0.75);

  backdrop-filter: blur(10px);

  border-radius: 4px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

  color: white;

  z-index: 102;

  opacity: 0.8;

  padding: 0;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

}



.nav-arrow:before {

  content: "";

  display: block;

  width: 0;

  height: 0;

  border-style: solid;

  transition: transform 0.2s ease;

}



.nav-arrow.prev:before {

  border-width: 13px 15px 13px 0;

  border-color: transparent var(--accent) transparent transparent;

  margin-right: 2px;

}



.nav-arrow.next:before {

  border-width: 13px 0 13px 15px;

  border-color: transparent transparent transparent var(--accent);

  margin-left: 2px;

}



.nav-arrow:hover:not(:disabled) {

  opacity: 1;

  background: var(--accent-subtle);

  transform: translateY(-50%) scale(1.05);

  box-shadow: 0 0 28px var(--accent-glow);

  border-color: var(--accent);

}



.nav-arrow.prev {

  left: 40px;

}



.nav-arrow.next {

  right: 40px;

}



.play-pause-btn {

  position: relative;

}



.play-pause-btn::before {

  content: "";

  position: absolute;

  top: -3px;

  left: -3px;

  right: -3px;

  bottom: -3px;

  border-radius: 4px;

  background: linear-gradient(45deg,

      transparent,

      var(--accent),

      transparent);

  opacity: 0;

  z-index: -1;

  animation: rotate 1.5s linear infinite;

}



.play-pause-btn:not(.paused)::before {

  opacity: 1;

}



@keyframes rotate {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



.play-icon,

.pause-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transition:

    opacity 0.2s ease,

    transform 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

}



.play-icon:before {

  content: "";

  display: block;

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 11px 0 11px 18px;

  border-color: transparent transparent transparent var(--accent);

  margin-left: 4px;

}



.pause-icon:before {

  content: "";

  display: block;

  width: 20px;

  height: 20px;

  background: linear-gradient(to right,

      var(--accent) 35%,

      transparent 35%,

      transparent 65%,

      var(--accent) 65%);

}



.play-icon {

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.8);

}



.pause-icon {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}



.play-pause-btn.paused .play-icon {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}



.play-pause-btn.paused .pause-icon {

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.8);

}



.dots {

  position: absolute;

  top: 20px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 15px;

  z-index: 103;

}



.thumbnails-container {

  position: absolute;

  bottom: 0px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 15px;

  z-index: 104;

}



.thumbnail {

  width: 120px;

  height: 80px;

  border-radius: 2px;

  overflow: hidden;

  cursor: pointer;

  border: 3px solid transparent;

  transition: all 0.3s ease;

  background-size: cover;

  background-position: center;

  position: relative;

}



.thumbnail::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.3);

  transition: all 0.3s ease;

}



.thumbnail:hover::after {

  background: rgba(0, 0, 0, 0.1);

}



.thumbnail.active {

  border-color: var(--accent);

  transform: scale(1.05);

  box-shadow: 0 0 20px var(--accent-glow);

}



.thumbnail.active::after {

  background: rgba(0, 0, 0, 0);

}



.dot {

  width: 8px;

  height: 8px;

  border-radius: 0;

  background: rgba(255, 51, 102, 0.25);

  border: 1px solid var(--accent-border);

  cursor: pointer;

  transition: all 0.2s ease;

}



.dot:hover {

  background: var(--accent-subtle);

  transform: scale(1.2);

}



.dot.active {

  background: var(--accent);

  transform: scale(1.2);

  box-shadow: 0 0 16px var(--accent-glow);

}



.progress-ring {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: rgba(0, 0, 0, 0.2);

  z-index: 101;

}



.progress-bar {

  height: 100%;

  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-light));

  width: 0;

  animation: none;

  box-shadow: 0 0 12px var(--accent-glow);

}



.progress-bar.active {

  animation: fillProgress 3.5s linear forwards;

}



@keyframes fillProgress {

  from {

    width: 0%;

  }



  to {

    width: 100%;

  }

}



.progress-bar.reset {

  animation: none;

  width: 0;

}



/* Section Styles */

.section {

  padding: 120px 20px;

  position: relative;

}



.section-container {

  max-width: 1200px;

  margin: 0 auto;

}



.section-header {

  text-align: center;

  margin-bottom: 80px;

}



.section-title {

  font-family: var(--font-display);

  font-size: 42px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-bottom: 20px;

  color: var(--text-primary);

}



.section-title::after {

  content: "";

  display: block;

  width: 48px;

  height: 3px;

  background: var(--accent);

  margin: 16px auto 0;

  box-shadow: 0 0 16px var(--accent-glow);

}



.section-subtitle {

  font-size: 18px;

  color: var(--text-secondary);

  max-width: 600px;

  margin: 0 auto;

  line-height: 1.7;

}



/* Services Section */

.services {

  background: var(--bg-dark);

  position: relative;

  overflow: hidden;

  border-top: 1px solid var(--accent-border);

}



.services::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: radial-gradient(circle at 80% 20%,

      rgba(255, 51, 102, 0.06) 0%,

      transparent 45%);

  pointer-events: none;

}



.services-container {

  display: grid;

  grid-template-columns: 350px 1fr;

  gap: 60px;

  margin-top: 60px;

  position: relative;

  z-index: 2;

}



.services-tabs {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.service-tab {

  padding: 25px 30px;

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  position: relative;

  overflow: hidden;

}



.service-tab::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 3px;

  height: 100%;

  background: var(--accent);

  transform: scaleY(0);

  transition: transform 0.3s ease;

  box-shadow: 0 0 12px var(--accent-glow);

}



.service-tab::after {

  content: "";

  position: absolute;

  top: 8px;

  right: 8px;

  width: 6px;

  height: 6px;

  border-top: 1px solid var(--accent-border);

  border-right: 1px solid var(--accent-border);

  opacity: 0;

  transition: opacity 0.3s ease;

}



.service-tab:hover::before,

.service-tab.active::before {

  transform: scaleY(1);

}



.service-tab:hover::after,

.service-tab.active::after {

  opacity: 1;

}



.service-tab:hover {

  transform: translateX(10px);

  border-color: var(--accent);

  box-shadow: 0 0 24px var(--accent-subtle);

}



.service-tab.active {

  background: rgba(255, 51, 102, 0.08);

  border-color: var(--accent);

  box-shadow: 0 0 32px var(--accent-subtle);

}





.service-tab h3 {

  font-family: var(--font-display);

  font-size: 15px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-bottom: 8px;

  color: var(--accent);

  font-weight: 600;

}



.service-tab p {

  font-size: 14px;

  color: var(--text-muted);

  margin: 0;

  line-height: 1.4;

}



.services-content {

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  border-radius: 2px;

  padding: 60px 50px;

  border: 1px solid var(--accent-border);

  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);

  position: relative;

  overflow: hidden;

}



.services-content::before {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 200px;

  height: 200px;

  background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 70%);

  transform: translate(50%, -50%);

}



.service-content {

  display: none;

  position: relative;

  z-index: 2;

}



.service-content.active {

  display: block;

  animation: fadeInUp 0.5s ease;

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.service-content-icon {

  width: 80px;

  height: 80px;

  background: var(--accent-subtle);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 30px;

  box-shadow: 0 0 24px var(--accent-subtle);

}



.service-content h2 {

  font-family: var(--font-display);

  font-size: 28px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-bottom: 20px;

  color: var(--text-primary);

  font-weight: 700;

}



.service-content p {

  font-size: 17px;

  color: var(--text-secondary);

  line-height: 1.8;

  margin-bottom: 25px;

}



.service-features {

  list-style: none;

  margin-top: 30px;

}



.service-features li {

  padding: 10px 0;

  padding-left: 28px;

  position: relative;

  color: var(--text-secondary);

  font-size: 15px;

}



.service-features li::before {

  content: "▸";

  position: absolute;

  left: 0;

  color: var(--accent);

  font-weight: bold;

  font-size: 14px;

}



/* About Section - Futuristic Design */

.about {

  background: var(--bg-black);

  position: relative;

  overflow: hidden;

  color: var(--text-primary);

  border-top: 1px solid var(--accent-border);

}



.about::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background:

    radial-gradient(circle at 20% 50%,

      rgba(255, 51, 102, 0.08) 0%,

      transparent 50%),

    radial-gradient(circle at 80% 20%,

      rgba(255, 51, 102, 0.05) 0%,

      transparent 50%);

  pointer-events: none;

}



.about .section-subtitle {

  color: var(--text-secondary);

}



.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  margin-top: 80px;

  position: relative;

  z-index: 2;

}



.about-timeline {

  position: relative;

}



.timeline-line {

  position: absolute;

  left: 30px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: linear-gradient(180deg, var(--accent-dim), var(--accent), var(--accent-light));

  box-shadow: 0 0 8px var(--accent-glow);

}



.timeline-item {

  position: relative;

  padding-left: 80px;

  margin-bottom: 50px;

}



.timeline-dot {

  position: absolute;

  left: 20px;

  top: 10px;

  width: 18px;

  height: 18px;

  background: var(--accent);

  border-radius: 0;

  border: 2px solid var(--bg-black);

  box-shadow: 0 0 16px var(--accent-glow);

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}



.timeline-year {

  font-family: var(--font-display);

  font-size: 12px;

  letter-spacing: 0.15em;

  color: var(--accent);

  font-weight: 600;

  margin-bottom: 8px;

}



.timeline-title {

  font-size: 18px;

  color: var(--text-primary);

  font-weight: 600;

  margin-bottom: 10px;

}



.timeline-description {

  font-size: 15px;

  color: var(--text-secondary);

  line-height: 1.6;

}



.about-tech {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



.tech-card {

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  padding: 30px;

  position: relative;

  overflow: hidden;

  transition: all 0.3s ease;

}



.tech-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      var(--accent-subtle),

      transparent);

  transition: left 0.8s ease;

}



.tech-card:hover::before {

  left: 100%;

}



.tech-card:hover {

  border-color: var(--accent);

  transform: translateY(-5px);

  box-shadow: 0 0 32px var(--accent-subtle);

}



.tech-icon {

  width: 60px;

  height: 60px;

  background: var(--accent-subtle);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  box-shadow: 0 0 20px var(--accent-subtle);

}



.tech-title {

  font-family: var(--font-display);

  font-size: 16px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--text-primary);

  font-weight: 600;

  margin-bottom: 10px;

}



.tech-description {

  font-size: 15px;

  color: var(--text-secondary);

  line-height: 1.6;

}



.stats-futuristic {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

  margin-top: 80px;

  position: relative;

  z-index: 2;

}



.stat-futuristic {

  text-align: center;

  padding: 30px 20px;

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  position: relative;

  overflow: hidden;

}



.stat-futuristic::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: var(--accent);

  box-shadow: 0 0 12px var(--accent-glow);

}



.stat-futuristic h4 {

  font-family: var(--font-display);

  font-size: 32px;

  color: var(--accent);

  text-shadow: 0 0 24px var(--accent-glow);

  margin-bottom: 10px;

  font-weight: 700;

}



.stat-futuristic p {

  font-size: 13px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--text-muted);

  margin: 0;

  font-weight: 500;

}



/* Contact Section */

.contact {

  background: var(--bg-dark);

  position: relative;

  border-top: 1px solid var(--accent-border);

}



.contact-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  margin-top: 60px;

}



.contact-form {

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  padding: 60px 50px;

  border-radius: 2px;

  border: 1px solid var(--accent-border);

  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);

}



.form-group {

  margin-bottom: 30px;

}



.form-group label {

  display: block;

  margin-bottom: 8px;

  color: var(--text-secondary);

  font-weight: 600;

  font-size: 12px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



.form-group input,

.form-group textarea {

  width: 100%;

  padding: 16px 18px;

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  font-size: 16px;

  font-family: var(--font-body);

  color: var(--text-primary);

  transition: all 0.3s ease;

  background: rgba(0, 0, 0, 0.5);

}



.form-group input::placeholder,

.form-group textarea::placeholder {

  color: var(--text-muted);

}



.form-group input:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--accent);

  box-shadow: 0 0 0 2px var(--accent-subtle), 0 0 20px var(--accent-subtle);

  background: rgba(0, 0, 0, 0.7);

}



.form-group textarea {

  height: 140px;

  resize: vertical;

  font-family: inherit;

  font-weight: 400;

  line-height: 1.5;

}



.submit-btn {

  font-family: var(--font-display);

  background: var(--accent);

  color: var(--bg-black);

  padding: 18px 40px;

  border: none;

  border-radius: 2px;

  font-size: 14px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.3s ease;

  width: 100%;

  position: relative;

  overflow: hidden;

  box-shadow: 0 0 24px var(--accent-glow);

}



.submit-btn::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, 0.2),

      transparent);

  transition: left 0.6s ease;

}



.submit-btn:hover::before {

  left: 100%;

}



.submit-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 0 40px var(--accent-glow);

  background: var(--accent-light);

}



.contact-info {

  padding: 60px 40px;

}



.contact-item {

  display: flex;

  align-items: flex-start;

  margin-bottom: 40px;

  padding: 25px;

  background: var(--bg-card);

  backdrop-filter: blur(20px);

  border-radius: 2px;

  border: 1px solid var(--accent-border);

  transition: all 0.3s ease;

}



.contact-item:hover {

  transform: translateX(10px);

  border-color: var(--accent);

  box-shadow: 0 0 24px var(--accent-subtle);

}



.contact-icon {

  width: 60px;

  height: 60px;

  background: var(--accent-subtle);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 25px;

  flex-shrink: 0;

  box-shadow: 0 0 16px var(--accent-subtle);

}



.contact-details h4 {

  font-family: var(--font-display);

  font-size: 14px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 8px;

  color: var(--accent);

  font-weight: 600;

}



.contact-details p {

  font-size: 15px;

  color: var(--text-secondary);

  margin: 0;

  line-height: 1.6;

}



/* Footer */

.footer {

  background: var(--bg-black);

  color: var(--text-primary);

  padding: 60px 20px 30px;

  position: relative;

  border-top: 1px solid var(--accent-border);

}



.footer::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: radial-gradient(circle at 50% 0%,

      rgba(255, 51, 102, 0.08) 0%,

      transparent 50%);

  pointer-events: none;

}



.footer-content {

  max-width: 1200px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

}



.footer-main {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 40px;

  margin-bottom: 40px;

}



.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

}



.footer-logo-text {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--text-primary);

}



.footer-description {

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 20px;

}



.footer-social {

  display: flex;

  gap: 15px;

}



.social-link {

  width: 40px;

  height: 40px;

  background: var(--accent-subtle);

  border: 1px solid var(--accent-border);

  border-radius: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-secondary);

  text-decoration: none;

  transition: all 0.3s ease;

}



.social-link:hover {

  background: var(--accent);

  color: var(--bg-black);

  transform: translateY(-3px);

  box-shadow: 0 0 20px var(--accent-glow);

}



.footer-section {

  display: flex;

  flex-direction: column;

}



.footer-section h4 {

  font-family: var(--font-display);

  color: var(--text-primary);

  font-size: 14px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  font-weight: 600;

  margin-bottom: 20px;

  position: relative;

}



.footer-section h4::after {

  content: "";

  position: absolute;

  bottom: -8px;

  left: 0;

  width: 30px;

  height: 2px;

  background: var(--accent);

  box-shadow: 0 0 8px var(--accent-glow);

}



.footer-links {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.footer-link {

  color: var(--text-secondary);

  text-decoration: none;

  transition: all 0.3s ease;

  padding: 5px 0;

  position: relative;

}



.footer-link:hover {

  color: var(--accent);

  padding-left: 10px;

}



.footer-link::before {

  content: "";

  position: absolute;

  left: -15px;

  top: 50%;

  transform: translateY(-50%);

  width: 0;

  height: 2px;

  background: var(--accent);

  transition: width 0.3s ease;

}



.footer-link:hover::before {

  width: 8px;

}



.footer-bottom {

  border-top: 1px solid var(--accent-border);

  padding-top: 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 20px;

}



.footer-copyright {

  font-size: 14px;

  color: var(--text-muted);

}



.footer-credits {

  font-size: 14px;

  color: var(--text-muted);

}



.footer-credits a {

  color: var(--accent);

  text-decoration: none;

  transition: all 0.3s ease;

}



.footer-credits a:hover {

  color: var(--accent-light);

  text-decoration: underline;

}



/* Mobile Styles */

@media (max-width: 768px) {

  .nav-menu {

    position: fixed;

    left: -100%;

    top: 80px;

    flex-direction: column;

    background: rgba(0, 0, 0, 0.96);

    backdrop-filter: blur(25px);

    width: 100%;

    text-align: center;

    transition: 0.3s;

    gap: 0;

    padding: 30px 20px;

    border-radius: 0;

    border: none;

    border-bottom: 1px solid var(--accent-border);

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);

  }



  .nav-menu.active {

    left: 0;

  }



  .nav-menu li {

    padding: 10px 0;

    width: 100%;

  }



  .nav-menu a {

    width: 100%;

    text-align: center;

    padding: 15px 30px;

    border-radius: 15px;

  }



  .hamburger {

    display: flex;

  }



  .logo-text {

    font-size: 24px;

  }



  .logo-svg {

    width: 35px;

    height: 35px;

  }



  .slider-container {

    width: 95vw;

    height: calc(47.5vw + 100px);

  }



  .slider-stage {

    height: 47.5vw;

  }



  .text-overlay {

    height: 100px;

    padding: 0 20px;

    bottom: 75px;

  }



  .slide-title {

    font-size: 20px;

    margin-bottom: 6px;

  }



  .slide-description {

    font-size: 14px;

    line-height: 1.3;

  }



  .nav-arrow {

    width: 48px;

    height: 48px;

    top: min(calc(23.75vw), 300px);

  }



  .nav-arrow.prev {

    left: 15px;

  }



  .nav-arrow.next {

    right: 15px;

  }



  .control-btn {

    width: 45px;

    height: 45px;

    font-size: 18px;

  }



  .controls {

    top: 15px;

    right: 15px;

    gap: 12px;

  }



  .dots {

    top: 15px;

    gap: 12px;

  }



  .dot {

    width: 10px;

    height: 10px;

  }



  .thumbnail {

    width: 80px;

    height: 53px;

  }



  .thumbnails-container {

    gap: 10px;

    bottom: 0px;

  }



  .slice-cube {

    transform: translateZ(-150px) rotateX(0deg);

  }



  .slice-cube.rotate-1 {

    transform: translateZ(-150px) rotateX(90deg);

  }



  .slice-cube.rotate-2 {

    transform: translateZ(-150px) rotateX(180deg);

  }



  .slice-cube.rotate-3 {

    transform: translateZ(-150px) rotateX(270deg);

  }



  .slice-face.face-1 {

    transform: rotateX(0deg) translateZ(150px);

  }



  .slice-face.face-2 {

    transform: rotateX(-90deg) translateZ(150px);

  }



  .slice-face.face-3 {

    transform: rotateX(-180deg) translateZ(150px);

  }



  .slice-face.face-4 {

    transform: rotateX(-270deg) translateZ(150px);

  }



  .section {

    padding: 80px 20px;

  }



  .section-title {

    font-size: 32px;

  }



  .section-subtitle {

    font-size: 16px;

  }



  .services-container {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .services-tabs {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px;

  }



  .service-tab:hover,

  .service-tab.active {

    transform: translateX(0);

  }



  .services-content {

    padding: 40px 30px;

  }



  .service-content h2 {

    font-size: 28px;

  }



  .about-grid {

    grid-template-columns: 1fr;

    gap: 50px;

  }



  .timeline-item {

    padding-left: 60px;

    margin-bottom: 40px;

  }



  .timeline-line {

    left: 20px;

  }



  .timeline-dot {

    left: 10px;

  }



  .stats-futuristic {

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 50px;

  }



  .stat-futuristic {

    padding: 25px 15px;

  }



  .stat-futuristic h4 {

    font-size: 24px;

  }



  .contact-content {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .contact-form {

    padding: 40px 30px;

  }



  .contact-info {

    padding: 40px 20px;

  }



  .footer-main {

    grid-template-columns: 1fr;

    gap: 30px;

    text-align: center;

  }



  .footer-bottom {

    flex-direction: column;

    text-align: center;

    gap: 15px;

  }



  .footer-copyright,

  .footer-credits {

    font-size: 13px;

  }

}