/* =============================================
   JAVOHIR GAYBULLAYEV — ULTRA-PREMIUM PORTFOLIO
   style.css — v3.0
   ============================================= */

:root {
  --bg: #020408;
  --bg2: #060d14;
  --bg3: #030810;
  --cyan: #00f5ff;
  --blue: #0080ff;
  --purple: #7b2fff;
  --pink: #f0abfc;
  --glow-cyan: 0 0 20px rgba(0,245,255,0.5), 0 0 60px rgba(0,245,255,0.2);
  --glow-blue: 0 0 20px rgba(0,128,255,0.5), 0 0 60px rgba(0,128,255,0.2);
  --glow-purple: 0 0 20px rgba(123,47,255,0.5), 0 0 60px rgba(123,47,255,0.2);
  --glass: rgba(255,255,255,0.035);
  --glass-border: rgba(0,245,255,0.15);
  --text: #e8f4f8;
  --text-dim: #6b8fa3;
  --font-display: 'Orbitron', monospace;
  --font-body: 'Syne', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}
::selection { background: rgba(0,245,255,0.2); color: #fff; }
img { max-width: 100%; height: auto; }


/* ========================
   ENTRY GATE
   ======================== */
body.entry-locked { overflow: hidden; }
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,245,255,0.16), transparent 25%),
    radial-gradient(circle at 64% 60%, rgba(0,128,255,0.12), transparent 34%),
    linear-gradient(135deg, #020408 0%, #04111d 52%, #020408 100%);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1), visibility 0.65s;
}
.entry-gate.hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  pointer-events: none;
}
.entry-gate::before,
.entry-gate::after {
  content: '';
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(0,245,255,0.18);
  clip-path: polygon(0 0, 24% 0, 24% 1px, 1px 1px, 1px 24%, 0 24%, 0 0,
                     76% 0, 100% 0, 100% 24%, calc(100% - 1px) 24%, calc(100% - 1px) 1px, 76% 1px,
                     76% 0, 100% 76%, 100% 100%, 76% 100%, 76% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 76%,
                     100% 76%, 24% 100%, 0 100%, 0 76%, 1px 76%, 1px calc(100% - 1px), 24% calc(100% - 1px));
  z-index: 2;
  filter: drop-shadow(0 0 18px rgba(0,245,255,0.32));
  pointer-events: none;
}
.entry-gate::after {
  inset: 16%;
  opacity: 0.55;
  transform: rotate(180deg);
}
.entry-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.44;
  filter: brightness(0.58) contrast(1.15) saturate(1.15);
  pointer-events: none;
  z-index: 0;
}
.entry-gate-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,245,255,0.22) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px, 120px 120px;
  mask-image: radial-gradient(circle at center, #000 0 58%, transparent 82%);
  animation: entryGrid 18s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.entry-gate-core {
  position: relative;
  z-index: 5;
  width: min(92vw, 520px);
  padding: 42px 34px;
  text-align: center;
  background: rgba(3,10,19,0.58);
  border: 1px solid rgba(0,245,255,0.25);
  box-shadow: 0 0 50px rgba(0,245,255,0.14), inset 0 0 40px rgba(0,245,255,0.04);
  backdrop-filter: blur(20px);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.entry-gate-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 22px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  border: 1px solid rgba(0,245,255,0.28);
  background: rgba(0,245,255,0.045);
}
.entry-gate-mark span { color: var(--blue); }
.entry-gate-line {
  width: min(220px, 60%);
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
  box-shadow: var(--glow-cyan);
}
.entry-gate h1 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 2.45rem);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #fff, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.entry-gate p {
  max-width: 390px;
  margin: 0 auto 28px;
  color: rgba(232,244,248,0.72);
  line-height: 1.65;
  font-size: 0.92rem;
}
.entry-start {
  position: relative;
  width: min(100%, 260px);
  height: 58px;
  border: 1px solid rgba(0,245,255,0.45);
  background: rgba(0,245,255,0.055);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.35em;
  overflow: hidden;
  cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 26px rgba(0,245,255,0.22), inset 0 0 20px rgba(0,245,255,0.04);
}
.entry-start span { position: relative; z-index: 2; }
.entry-start i {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 34%, rgba(0,245,255,0.42) 50%, transparent 66% 100%);
  transform: translateX(-120%);
  animation: entryButtonSweep 2.1s ease-in-out infinite;
}
.entry-start:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(0,245,255,0.8);
  box-shadow: 0 0 36px rgba(0,245,255,0.42), 0 0 90px rgba(0,128,255,0.18);
}
.entry-start:active { transform: translateY(0) scale(0.98); }

.entry-start.entry-start-hidden {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  border-width: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
}
.entry-loading {
  width: min(100%, 340px);
  height: 0;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.28s ease, height 0.32s ease, visibility 0.28s ease;
}
.entry-loading.show {
  height: 56px;
  opacity: 1;
  visibility: visible;
}
.entry-loading-track {
  position: relative;
  height: 5px;
  border: 1px solid rgba(0,245,255,0.35);
  background: rgba(0,245,255,0.045);
  box-shadow: 0 0 22px rgba(0,245,255,0.18), inset 0 0 14px rgba(0,245,255,0.08);
  overflow: hidden;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.entry-loading-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan));
  box-shadow: 0 0 24px rgba(0,245,255,0.72);
  animation: entryLoadFill 1.65s cubic-bezier(0.16,1,0.3,1) forwards;
}
.entry-loading-track::after {
  content: '';
  position: absolute;
  inset: -4px auto -4px 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  transform: translateX(-120%);
  animation: entryLoadSweep 0.72s ease-in-out infinite;
}
.entry-loading em {
  display: block;
  margin-top: 14px;
  color: rgba(232,244,248,0.68);
  font-family: var(--font-code);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

@keyframes entryGrid { to { background-position: 90px 90px, 90px 90px, 120px 120px; } }
@keyframes entryButtonSweep { 0%{transform:translateX(-120%);} 46%,100%{transform:translateX(120%);} }
@keyframes entryLoadFill { 0%{width:0%;} 72%{width:86%;} 100%{width:100%;} }
@keyframes entryLoadSweep { 0%{transform:translateX(-120%);} 100%{transform:translateX(340%);} }


/* ========================
   CURSOR
   ======================== */
.cursor {
  width: 12px; height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 200001;
  transition: transform 0.08s ease, opacity 0.08s ease, width 0.2s ease, height 0.2s ease;
  box-shadow: var(--glow-cyan);
  mix-blend-mode: screen;
  will-change: left, top;
}
.cursor-trail {
  width: 40px; height: 40px;
  border: 1px solid rgba(0,245,255,0.4);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 200000;
  transition: transform 0.08s ease, border-color 0.3s ease;
  will-change: left, top;
}

/* ========================
   LOADER
   ======================== */
#loader { display: none !important;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.loader-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--blue), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.25em;
  animation: pulse 1.5s ease-in-out infinite;
}
.loader-bar-wrap {
  width: clamp(220px, 40vw, 320px); height: 2px;
  background: rgba(0,245,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  width: 0%;
  animation: load 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
  box-shadow: var(--glow-cyan);
}
.loader-text {
  font-family: var(--font-code);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.35em;
}
.loader-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, rgba(0,245,255,0.5) 50%, transparent 90%);
  top: 0;
  animation: loaderScan 1.8s linear infinite;
}
@keyframes loaderScan {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.loader-corners { position: absolute; inset: 30px; pointer-events: none; }
.lc {
  position: absolute;
  width: 24px; height: 24px;
  border-color: rgba(0,245,255,0.4);
  border-style: solid;
  animation: cornerPulse 2s ease-in-out infinite;
}
.lc.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.lc.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.lc.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.lc.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
@keyframes cornerPulse { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
@keyframes load { to { width: 100%; } }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

/* ========================
   TOAST
   ======================== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(6,13,20,0.95);
  border: 1px solid rgba(0,245,255,0.3);
  backdrop-filter: blur(20px);
  padding: 14px 28px;
  font-family: var(--font-code);
  font-size: 0.8rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  z-index: 99998;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow: var(--glow-cyan);
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.error {
  border-color: rgba(255,80,80,0.4);
  color: #ff6b6b;
  box-shadow: 0 0 20px rgba(255,80,80,0.3);
}
.toast.success {
  border-color: rgba(0,245,100,0.4);
  color: #00ff6a;
  box-shadow: 0 0 20px rgba(0,255,100,0.3);
}


/* Scroll progress: subtle premium line */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 0 14px rgba(0,245,255,0.8), 0 0 28px rgba(123,47,255,0.35);
  z-index: 100002;
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.08s linear;
}
body.entry-locked .scroll-progress { opacity: 0; }

/* ========================
   NAVBAR
   ======================== */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2,4,8,0.7);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(0,245,255,0.07);
  transition: all 0.4s ease;
}
nav.scrolled {
  background: rgba(2,4,8,0.97);
  border-bottom-color: rgba(0,245,255,0.14);
  box-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
}
.logo-dot {
  -webkit-text-fill-color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
}
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.3s;
  font-family: var(--font-code);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width 0.3s ease;
  box-shadow: 0 0 8px var(--cyan);
}
.nav-links a:hover,
.nav-links a.active { color: var(--cyan); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.mobile-nav a.active {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0,245,255,0.55);
}
.mobile-nav a.active span { color: var(--text); }
.nav-cta {
  padding: 9px 26px;
  border: 1px solid rgba(0,245,255,0.5);
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-display);
  transition: all 0.3s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  transform: translateX(-101%);
  transition: transform 0.35s ease;
}
.nav-cta:hover { color: var(--bg); box-shadow: var(--glow-cyan); }
.nav-cta:hover::before { transform: translateX(0); }
.nav-cta span { position: relative; z-index: 1; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: var(--cyan); transition: all 0.3s; display: block; }

/* ========================
   MOBILE MENU
   ======================== */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  z-index: 9000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-menu.open { display: flex; }
.mobile-menu-bg {
  position: absolute; inset: 0;
  background: rgba(2,4,8,0.98);
  backdrop-filter: blur(30px);
}
.mobile-menu-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,245,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 700;
  color: rgba(232,244,248,0.6);
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
}
.mobile-nav a span {
  font-size: 0.65rem;
  color: var(--cyan);
  font-family: var(--font-code);
}
.mobile-nav a:hover { color: var(--cyan); letter-spacing: 0.15em; }
.mobile-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: 1px solid rgba(0,245,255,0.2);
  color: var(--cyan);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 3;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.mobile-close:hover { background: rgba(0,245,255,0.1); }
.mobile-footer {
  position: absolute;
  bottom: 32px;
  font-family: var(--font-code);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  z-index: 2;
}

/* ========================
   HERO
   ======================== */
#hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.028) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPulse 5s ease-in-out infinite;
  z-index: 2;
}
.hero-rays {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.ray {
  position: absolute;
  bottom: -20%;
  width: 1px;
  height: 70%;
  background: linear-gradient(to top, transparent, rgba(0,245,255,0.12), transparent);
  transform-origin: bottom center;
  filter: blur(1px);
}
.ray-1 { left: 25%; transform: rotate(-15deg); animation: rayPulse 6s ease-in-out infinite; }
.ray-2 { left: 50%; transform: rotate(5deg); animation: rayPulse 6s ease-in-out infinite 2s; height: 80%; }
.ray-3 { left: 75%; transform: rotate(20deg); animation: rayPulse 6s ease-in-out infinite 4s; }
@keyframes rayPulse {
  0%,100% { opacity: 0; }
  40%,60% { opacity: 1; }
}
.hero-content {
  position: relative;
  z-index: 10;
  padding: 0 5vw;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-top: 100px;
}
.hero-left { display: flex; flex-direction: column; gap: 20px; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--cyan);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(20px);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
  animation: eyebrowDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes eyebrowDot { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:0.6;} }
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 5.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(30px);
}
.name-first { color: var(--text); }
.name-last {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(0,245,255,0.4));
}
.hero-role-wrap {
  height: clamp(2rem, 3vw, 2.6rem);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
}
.hero-role {
  font-family: var(--font-code);
  font-size: clamp(0.9rem, 1.7vw, 1.3rem);
  line-height: 1.4;
  color: var(--cyan);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
}
.hero-role::before {
  content: '▶';
  color: var(--purple);
  font-size: 0.7em;
  line-height: clamp(2rem, 3vw, 2.6rem);
  flex: 0 0 auto;
}
@keyframes roleSlide {
  0%,22% { transform: translateY(0); }
  30%,52% { transform: translateY(-25%); }
  60%,82% { transform: translateY(-50%); }
  90%,100% { transform: translateY(-75%); }
}
.role-inner {
  display: flex;
  flex-direction: column;
  animation: roleSlide 6s ease-in-out infinite;
  will-change: transform;
}
.role-inner span {
  height: clamp(2rem, 3vw, 2.6rem);
  line-height: clamp(2rem, 3vw, 2.6rem);
  white-space: nowrap;
}
.hero-tagline {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 500px;
  opacity: 0;
  transform: translateY(20px);
}
.hero-tagline strong { color: var(--text); }
.hero-sub {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
}
.hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  margin-top: 4px;
}
.hstat { text-align: center; }
.hstat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,245,255,0.5);
}
.hstat em {
  display: block;
  font-style: normal;
  font-family: var(--font-code);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.hstat-div {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(0,245,255,0.3), transparent);
}

/* BUTTONS */
.btn-primary {
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.22);
  transform: translateX(-101%);
  transition: transform 0.4s;
}
.btn-primary:hover::after { transform: translateX(101%); }
.btn-primary:hover { box-shadow: var(--glow-cyan), 0 10px 30px rgba(0,0,0,0.4); transform: translateY(-2px); }
.btn-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.3), transparent 70%);
  pointer-events: none;
}
.btn-secondary {
  padding: 14px 36px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(0,245,255,0.25);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  transition: all 0.3s;
}
.btn-secondary:hover {
  border-color: rgba(0,245,255,0.7);
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

/* HERO RIGHT */
.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(40px);
}
.hero-photo-frame {
  position: relative;
  width: 380px;
  height: 460px;
}
.frame-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: ringPulse 3s ease-in-out infinite;
  pointer-events: none;
}
.ring-1 {
  inset: -20px;
  border-color: rgba(0,245,255,0.15);
  animation-delay: 0s;
}
.ring-2 {
  inset: -40px;
  border-color: rgba(0,128,255,0.08);
  animation-delay: 1s;
}
@keyframes ringPulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
.hero-photo-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center,
    rgba(0,245,255,0.18) 0%, rgba(0,128,255,0.08) 40%, transparent 70%);
  animation: glowPulse 3.5s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.6;} 50%{transform:scale(1.08);opacity:1;} }
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  filter: brightness(0.88) contrast(1.12) saturate(0.85);
  position: relative;
  z-index: 2;
  transition: filter 0.4s;
}
.hero-photo:hover {
  filter: brightness(1) contrast(1.2) saturate(1.1) drop-shadow(0 0 20px rgba(0,245,255,0.5));
}
.hero-photo-border {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  background: linear-gradient(135deg,
    rgba(0,245,255,0.28), rgba(0,128,255,0.08), rgba(123,47,255,0.25));
  z-index: 3;
  pointer-events: none;
}
.hero-photo-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--cyan);
  border-style: solid;
  z-index: 4;
}
.hero-photo-corner.tl { top: -2px; left: -2px; border-width: 2px 0 0 2px; box-shadow: -3px -3px 15px var(--cyan); }
.hero-photo-corner.tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; box-shadow: 3px -3px 15px var(--cyan); }
.hero-photo-corner.bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; box-shadow: -3px 3px 15px var(--cyan); }
.photo-badge {
  position: absolute;
  bottom: 20px; right: -24px;
  background: rgba(6,13,20,0.92);
  border: 1px solid rgba(0,245,255,0.35);
  backdrop-filter: blur(12px);
  padding: 12px 18px;
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%);
  box-shadow: var(--glow-cyan);
}
.badge-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
}
.badge-label {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  font-family: var(--font-code);
  margin-top: 4px;
}
.floating-tag {
  position: absolute;
  font-family: var(--font-code);
  font-size: 0.62rem;
  padding: 6px 12px;
  border: 1px solid;
  backdrop-filter: blur(12px);
  animation: floatTag 3s ease-in-out infinite;
  z-index: 5;
  letter-spacing: 0.05em;
}
.floating-tag.t1 {
  top: 28px; left: -36px;
  color: var(--cyan); border-color: rgba(0,245,255,0.35);
  background: rgba(0,245,255,0.06);
}
.floating-tag.t2 {
  top: 48%; right: -44px;
  color: var(--purple); border-color: rgba(123,47,255,0.35);
  background: rgba(123,47,255,0.06);
  animation-delay: 1s;
}
.floating-tag.t3 {
  bottom: 60px; left: -36px;
  color: var(--blue); border-color: rgba(0,128,255,0.35);
  background: rgba(0,128,255,0.06);
  animation-delay: 2s;
}
@keyframes floatTag {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.scroll-indicator {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  animation: fadeInUp 1s ease 3.5s forwards;
}
.scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: scrollDrop 1.5s ease-in-out infinite;
}
@keyframes scrollDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-text {
  font-family: var(--font-code);
  font-size: 0.58rem;
  color: var(--text-dim);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* ========================
   SECTIONS BASE
   ======================== */
section {
  padding: 120px 5vw;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.section-label {
  font-family: var(--font-code);
  font-size: 0.68rem;
  color: var(--cyan);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before { content: '//'; color: var(--purple); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 60px;
}
.section-title span {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================
   ABOUT
   ======================== */
#about {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
#about::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
}
.about-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.about-photos {
  position: relative;
  height: 600px;
}
.about-photo-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 70%; height: 75%;
}
.about-photo-main {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.85) contrast(1.1) saturate(0.9);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
  border: 1px solid rgba(0,245,255,0.2);
  transition: all 0.5s;
  display: block;
}
.about-photo-main:hover {
  filter: brightness(1) contrast(1.2) drop-shadow(0 0 20px rgba(0,245,255,0.4));
}
.about-photo-frame-deco {
  position: absolute; inset: -6px;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
  border: 1px solid rgba(0,245,255,0.15);
  pointer-events: none;
}
.about-photo-sec {
  position: absolute;
  bottom: 0; right: 0;
  width: 55%; height: 55%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.8) contrast(1.1);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
  border: 1px solid rgba(123,47,255,0.35);
  box-shadow: var(--glow-purple);
  transition: all 0.5s;
}
.about-photo-sec:hover {
  filter: brightness(0.95) contrast(1.2);
}
.about-photo-accent {
  position: absolute;
  top: 5px; left: 5px;
  width: calc(70% - 10px); height: calc(75% - 10px);
  border: 1px solid rgba(0,245,255,0.25);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
  pointer-events: none;
  z-index: 3;
}
.about-exp-badge {
  position: absolute;
  bottom: 50%; right: 8%;
  transform: translateY(50%);
  background: rgba(6,13,20,0.92);
  border: 1px solid rgba(0,245,255,0.35);
  backdrop-filter: blur(12px);
  padding: 16px 20px;
  text-align: center;
  z-index: 10;
  clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
  box-shadow: 0 0 30px rgba(0,245,255,0.15);
}
.exp-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 20px var(--cyan);
}
.exp-label {
  font-family: var(--font-code);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-top: 6px;
  line-height: 1.5;
}
.about-text-wrap {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(232,244,248,0.78);
}
.about-highlight {
  padding: 20px 24px;
  background: rgba(0,245,255,0.03);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(10px);
  font-family: var(--font-code);
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.85;
  box-shadow: inset 0 0 30px rgba(0,245,255,0.03);
}
.about-highlight strong { color: var(--cyan); }

.about-cockpit {
  position: relative;
  border-left: 0;
  border: 1px solid rgba(0,245,255,0.18);
  background:
    linear-gradient(135deg, rgba(0,245,255,0.055), rgba(123,47,255,0.035)),
    rgba(2,8,16,0.58);
  overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.about-cockpit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(0,245,255,0.16), transparent),
    radial-gradient(circle at 12% 20%, rgba(0,245,255,0.12), transparent 34%);
  transform: translateX(-115%);
  animation: cockpitSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}
.about-cockpit::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(0,245,255,0.07);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
}
.cockpit-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.cockpit-topline span {
  color: rgba(0,245,255,0.7);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-cockpit p {
  margin: 0;
  position: relative;
  z-index: 1;
}
.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.cockpit-grid div {
  min-height: 96px;
  padding: 14px 13px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(0,245,255,0.10);
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.cockpit-grid div:hover {
  transform: translateY(-4px);
  border-color: rgba(0,245,255,0.34);
  background: rgba(0,245,255,0.045);
}
.cockpit-grid em {
  display: block;
  font-style: normal;
  color: rgba(0,245,255,0.55);
  font-size: 0.58rem;
  margin-bottom: 8px;
  letter-spacing: 0.18em;
}
.cockpit-grid b {
  display: block;
  color: var(--text);
  font-size: 0.77rem;
  margin-bottom: 6px;
}
.cockpit-grid span {
  display: block;
  color: var(--text-dim);
  font-size: 0.66rem;
  line-height: 1.55;
}
.about-profile-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.profile-chip {
  padding: 14px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(0,245,255,0.10);
  border-radius: 14px;
  box-shadow: inset 0 0 20px rgba(0,245,255,0.025);
}
.profile-chip span {
  display: block;
  font-family: var(--font-code);
  color: var(--text-dim);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  margin-bottom: 7px;
}
.profile-chip b {
  display: block;
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.72rem;
  font-weight: 600;
}
@keyframes cockpitSweep {
  0%, 42% { transform: translateX(-115%); opacity: 0; }
  52% { opacity: 1; }
  70%, 100% { transform: translateX(115%); opacity: 0; }
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.skill-item { display: flex; flex-direction: column; gap: 6px; }
.skill-name {
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
}
.skill-name span { color: var(--cyan); }
.skill-bar {
  height: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 2px;
  width: 0%;
  transition: width 1.6s cubic-bezier(0.23,1,0.32,1);
  box-shadow: 0 0 10px var(--cyan);
}
.about-values {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.av-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--glass);
  border: 1px solid rgba(0,245,255,0.07);
  transition: all 0.3s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.av-item:hover {
  border-color: rgba(0,245,255,0.25);
  background: rgba(0,245,255,0.04);
  transform: translateX(4px);
}
.av-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.av-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 3px;
}
.av-item p {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ========================
   SERVICES
   ======================== */
#services {
  max-width: 100%;
  background:
    radial-gradient(circle at 12% 12%, rgba(0,245,255,0.06), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(123,47,255,0.055), transparent 32%),
    linear-gradient(180deg, var(--bg) 0%, #03080f 100%);
  position: relative;
  overflow: hidden;
}
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, black 0 45%, transparent 78%);
  pointer-events: none;
}
#services::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(980px, 96vw); height: min(980px, 96vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0,245,255,0.08);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(0,245,255,0.035), 0 0 90px rgba(0,128,255,0.035);
  pointer-events: none;
}
.services-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.services-lead {
  max-width: 760px;
  margin: -14px auto 42px;
  text-align: center;
  color: rgba(232,244,248,0.68);
  font-size: clamp(0.9rem, 1.35vw, 1.06rem);
  line-height: 1.85;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  perspective: 1200px;
}
.service-card {
  min-height: 305px;
  padding: 26px 24px 24px;
  background:
    linear-gradient(145deg, rgba(7,18,32,0.88), rgba(2,7,14,0.72)),
    radial-gradient(circle at 18% 12%, rgba(0,245,255,0.13), transparent 34%);
  border: 1px solid rgba(0,245,255,0.12);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  cursor: default;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card.service-wide { grid-column: span 2; }
.service-card:hover {
  border-color: rgba(0,245,255,0.48);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.52),
    0 0 42px rgba(0,245,255,0.12),
    inset 0 0 40px rgba(0,245,255,0.035);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(115deg, transparent 0 26%, rgba(0,245,255,0.11) 36%, transparent 48% 100%),
    radial-gradient(circle at 85% 18%, rgba(0,128,255,0.22), transparent 24%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card::after {
  content: '';
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(0,245,255,0.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,245,255,0.075), transparent 62%);
  filter: blur(0.2px);
  transition: transform 0.45s, opacity 0.45s;
  opacity: 0.78;
}
.service-card:hover::after { transform: scale(1.15) rotate(18deg); opacity: 1; }
.card-border-sweep {
  position: absolute;
  inset: -80% 0 auto 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,245,255,0.04) 40%,
    rgba(0,245,255,0.22) 50%,
    rgba(123,47,255,0.08) 58%,
    transparent 100%
  );
  transform: translateY(-60%);
  pointer-events: none;
  opacity: 0;
}
.service-card:hover .card-border-sweep {
  opacity: 1;
  animation: borderSweep 0.8s ease forwards;
}
.service-circuit {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 24px, rgba(0,245,255,0.06) 25px, transparent 26px) 0 40px / 90px 90px,
    linear-gradient(0deg, transparent 0 24px, rgba(0,245,255,0.04) 25px, transparent 26px) 22px 0 / 90px 90px;
  opacity: 0.34;
  mask-image: linear-gradient(140deg, black 0 30%, transparent 72%);
  pointer-events: none;
}
.service-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.service-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background:
    linear-gradient(145deg, rgba(0,245,255,0.12), rgba(0,128,255,0.035)),
    rgba(0,0,0,0.22);
  border: 1px solid rgba(0,245,255,0.22);
  box-shadow: 0 0 24px rgba(0,245,255,0.18), inset 0 0 18px rgba(0,245,255,0.06);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.service-card:hover .service-icon {
  transform: translateY(-4px) rotate(-3deg) scale(1.06);
  border-color: rgba(0,245,255,0.55);
  box-shadow: 0 0 34px rgba(0,245,255,0.34), inset 0 0 22px rgba(0,245,255,0.12);
}
.service-num {
  font-family: var(--font-display);
  font-size: 0.66rem;
  color: rgba(232,244,248,0.38);
  letter-spacing: 0.24em;
}
.service-title {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.055em;
  margin-bottom: 14px;
  color: var(--text);
  transition: color 0.3s, text-shadow 0.3s;
}
.service-card:hover .service-title {
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(0,245,255,0.32);
}
.service-desc {
  position: relative;
  z-index: 3;
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(232,244,248,0.67);
  min-height: 88px;
}
.service-terminal {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  padding: 10px 12px;
  color: rgba(232,244,248,0.62);
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(0,245,255,0.10);
  font-family: var(--font-code);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-terminal span { color: var(--cyan); }
.service-tags {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.service-tags span {
  padding: 6px 9px;
  color: rgba(232,244,248,0.62);
  font-family: var(--font-code);
  font-size: 0.58rem;
  border: 1px solid rgba(0,245,255,0.10);
  background: rgba(0,245,255,0.035);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.service-line {
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  transform: scaleX(0.18);
  opacity: 0.35;
  transform-origin: center;
  transition: transform 0.45s ease, opacity 0.45s ease;
  box-shadow: 0 0 14px var(--cyan);
}
.service-card:hover .service-line { transform: scaleX(1); opacity: 1; }
.service-accent {
  background:
    linear-gradient(145deg, rgba(8,14,32,0.92), rgba(3,7,18,0.78)),
    radial-gradient(circle at 20% 14%, rgba(123,47,255,0.18), transparent 35%);
  border-color: rgba(123,47,255,0.20);
}
.services-flow {
  margin: 34px auto 0;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: rgba(2,8,16,0.62);
  border: 1px solid rgba(0,245,255,0.13);
  box-shadow: inset 0 0 32px rgba(0,245,255,0.025);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.services-flow span {
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.services-flow strong {
  font-family: var(--font-display);
  color: rgba(232,244,248,0.92);
  letter-spacing: 0.08em;
  font-size: clamp(0.82rem, 1.2vw, 1rem);
}
.services-flow em {
  color: rgba(232,244,248,0.56);
  font-style: normal;
  font-size: 0.76rem;
  line-height: 1.6;
  text-align: right;
}
@keyframes borderSweep {
  from { transform: translateY(-80%); }
  to { transform: translateY(130%); }
}

/* ========================
   TECH STACK (Earth)
   ======================== */
#techstack {
  max-width: 100%;
  background:
    radial-gradient(circle at 65% 45%, rgba(0,245,255,0.07), transparent 34%),
    radial-gradient(circle at 78% 28%, rgba(123,47,255,0.07), transparent 28%),
    linear-gradient(180deg, var(--bg2) 0%, #03070c 100%);
  position: relative;
  overflow: hidden;
  padding-top: 110px;
}
#techstack::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,245,255,0.55) 1px, transparent 1.4px),
    linear-gradient(rgba(0,245,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.025) 1px, transparent 1px);
  background-size: 160px 160px, 58px 58px, 58px 58px;
  background-position: 12px 32px, 0 0, 0 0;
  opacity: 0.42;
  pointer-events: none;
  animation: techStarsDrift 22s linear infinite;
}
.techstack-inner { max-width: 1500px; margin: 0 auto; position: relative; z-index: 2; }
.tech-earth-title { margin-bottom: 38px; }
.earth-showcase {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(560px, 1.35fr);
  align-items: center;
  gap: 40px;
  position: relative;
}
.earth-info-panel { display: flex; flex-direction: column; gap: 28px; padding-bottom: 30px; }
.earth-desc { max-width: 390px; color: rgba(232,244,248,0.75); font-size: 1rem; line-height: 1.8; }
.earth-card {
  position: relative;
  width: min(100%, 360px);
  padding: 26px 26px 34px;
  background: rgba(4,12,22,0.66);
  border: 1px solid rgba(0,245,255,0.28);
  box-shadow: 0 0 32px rgba(0,245,255,0.10), inset 0 0 36px rgba(0,245,255,0.025);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 18px);
  overflow: hidden;
}
.earth-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,245,255,0.28) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.10;
}
.earth-card-icon {
  font-family: var(--font-code);
  color: var(--cyan);
  font-size: 1.75rem;
  margin-bottom: 12px;
  text-shadow: var(--glow-cyan);
}
.earth-card strong { display: block; color: var(--text); font-size: 0.95rem; line-height: 1.5; margin-bottom: 8px; }
.earth-card span { display: block; color: var(--text-dim); font-size: 0.82rem; line-height: 1.6; }
.earth-progress {
  position: absolute;
  left: 24px; right: 24px; bottom: 18px;
  height: 8px;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 5px, transparent 5px 9px);
}
.earth-progress i {
  display: block; width: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--blue));
  box-shadow: var(--glow-cyan);
  animation: earthProgress 2.4s ease-in-out infinite alternate;
}
.earth-stats {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  border: 1px solid rgba(0,245,255,0.18);
  background: rgba(2,7,14,0.52);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.earth-stats div { padding: 22px 14px; text-align: center; border-right: 1px solid rgba(0,245,255,0.14); }
.earth-stats div:last-child { border-right: 0; }
.earth-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  color: var(--text);
  margin-bottom: 6px;
}
.earth-stats span { display: block; color: var(--text-dim); font-size: 0.72rem; }
.earth-stage {
  position: relative;
  min-height: 760px;
  overflow: visible;
  isolation: isolate;
}
.earth-stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 54%;
  width: min(950px, 105vw); height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0,245,255,0.09) 0%, rgba(0,128,255,0.04) 38%, transparent 68%);
  pointer-events: none;
}
.earth-stage::after {
  content: '';
  position: absolute;
  right: 5%;
  top: 15%;
  width: min(760px, 74vw);
  height: 70%;
  background:
    linear-gradient(rgba(0,245,255,0.14), rgba(0,245,255,0.14)) 84% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(0,245,255,0.10), rgba(0,245,255,0.10)) 0 86% / 100% 1px no-repeat,
    radial-gradient(circle at 28% 32%, rgba(0,245,255,0.18), transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(0,245,255,0.045) 88px 89px, transparent 89px 176px);
  opacity: 0.62;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(0,245,255,0.18));
  pointer-events: none;
  z-index: 1;
}
.earth-globe {
  --earth-size: clamp(360px, 31vw, 520px);
  position: absolute;
  left: 50%; top: 45%;
  width: var(--earth-size); height: var(--earth-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 6;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  isolation: isolate;
  animation: earthFloat 5.8s ease-in-out infinite;
}
.earth-globe::before {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(0,245,255,0.06) 18px 19px, transparent 19px 34px),
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.28), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(0,245,255,0.28));
  animation: neonSweep 7s linear infinite;
  pointer-events: none;
  z-index: 7;
}
.earth-globe::after {
  content: '';
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,0.24);
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(0,245,255,0.24) 16%, transparent 19% 42%, rgba(110,220,255,0.18) 46%, transparent 50% 73%, rgba(0,245,255,0.20) 78%, transparent 82%),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,245,255,0.05) 22px 23px);
  opacity: 0.58;
  filter: blur(0.4px) drop-shadow(0 0 18px rgba(0,245,255,0.30));
  animation: hudRotate 18s linear infinite;
  pointer-events: none;
  z-index: 4;
}
.real-earth-canvas {
  position: absolute;
  inset: -7%;
  width: 114%; height: 114%;
  display: block;
  z-index: 5;
  filter: drop-shadow(0 0 20px rgba(0,245,255,0.55)) drop-shadow(0 0 60px rgba(0,128,255,0.18));
}
.earth-atmosphere {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 43%, rgba(0,245,255,0.30) 50%, rgba(0,128,255,0.14) 60%, transparent 72%) !important;
  filter: blur(6px);
  z-index: 4;
  animation: atmospherePulse 3s ease-in-out infinite;
}
.earth-scan { display: none !important; }
.earth-shade {
  position: absolute; inset: 0;
  z-index: 8;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.1), transparent 18%, transparent 45%, rgba(0,0,0,0.42) 78%, rgba(0,0,0,0.84) 100%) !important;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.earth-orbit {
  position: absolute;
  left: 50%; top: 47%;
  border-radius: 50%;
  border-width: 1px !important;
  border-style: solid;
  transform: translate(-50%, -50%) rotate(var(--rot));
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(0,245,255,0.40));
  animation: orbitPulse 4s ease-in-out infinite;
}
.orbit-a { --rot: 8deg; width: min(920px, 80vw); height: 260px; border-color: rgba(0,245,255,0.28); }
.orbit-b { --rot: -13deg; width: min(1050px, 88vw); height: 370px; border-color: rgba(0,128,255,0.22); animation-delay: -1.2s; }
.orbit-c { --rot: 16deg; width: min(1180px, 96vw); height: 500px; border-color: rgba(123,47,255,0.3); border-style: dashed; animation-delay: -2s; }
.earth-base {
  position: absolute;
  left: 50%;
  top: calc(47% + min(350px, 23vw));
  width: min(560px, 48vw); height: 110px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}
.earth-base::before {
  content: '';
  position: absolute;
  left: 50%; top: -140px;
  width: 90px; height: 180px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(0,245,255,0.22), transparent);
  filter: blur(6px);
}
.earth-base span {
  position: absolute;
  inset: auto 0 0 0; margin: auto;
  border: 1px solid rgba(0,245,255,0.35);
  border-radius: 50%;
  transform: rotateX(70deg);
  box-shadow: 0 0 20px rgba(0,245,255,0.28), inset 0 0 18px rgba(0,128,255,0.14);
  animation: baseSpin 5s linear infinite;
}
.earth-base span:nth-child(1) { width: 100%; height: 100%; }
.earth-base span:nth-child(2) { width: 76%; height: 76%; animation-duration: 4s; }
.earth-base span:nth-child(3) { width: 48%; height: 48%; animation-duration: 3s; }
.tech-orb {
  position: absolute;
  left: 50%; top: 45%;
  width: 96px; min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 8;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, filter 0.25s ease;
  will-change: transform, left, top, opacity;
}
.tech-orb img {
  width: 70px; height: 70px;
  object-fit: contain;
  padding: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18), rgba(5,13,28,0.88) 62%, rgba(0,0,0,0.92));
  border: 1.5px solid rgba(0,245,255,0.4);
  box-shadow: 0 0 30px rgba(0,245,255,0.58), inset 0 0 24px rgba(0,245,255,0.12);
  backdrop-filter: blur(8px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tech-orb:hover img {
  transform: scale(1.15);
  box-shadow: 0 0 40px rgba(0,245,255,0.8), inset 0 0 22px rgba(0,245,255,0.2);
}
.tech-orb small {
  font-family: var(--font-body);
  color: rgba(232,244,248,0.92);
  font-size: 0.82rem;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 0 12px rgba(0,245,255,0.4);
  white-space: nowrap;
}
.tech-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  position: relative; z-index: 5;
  margin-top: -18px;
}
.tech-pill {
  padding: 11px 22px;
  background: var(--glass);
  border: 1px solid rgba(0,245,255,0.1);
  font-family: var(--font-code);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  transition: all 0.3s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  cursor: default;
  position: relative; overflow: hidden;
}
.tech-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(123,47,255,0.1));
  opacity: 0; transition: opacity 0.3s;
}
.tech-pill:hover { color: var(--cyan); border-color: rgba(0,245,255,0.5); box-shadow: var(--glow-cyan); transform: scale(1.05); }
.tech-pill:hover::before { opacity: 1; }
@keyframes techStarsDrift { to { background-position: 172px 192px, 58px 58px, 58px 58px; } }
@keyframes earthFloat { 0%,100%{transform:translate(-50%,-50%) translateY(0) scale(1);} 50%{transform:translate(-50%,-50%) translateY(-12px) scale(1.018);} }
@keyframes atmospherePulse { 0%,100%{opacity:0.72;transform:scale(1);} 50%{opacity:1;transform:scale(1.05);} }
@keyframes earthScan { 0%,100%{top:18%;opacity:0;} 18%,82%{opacity:1;} 50%{top:78%;} }
@keyframes orbitPulse { 0%,100%{opacity:0.45;} 50%{opacity:0.92;} }
@keyframes baseSpin { to{transform:rotateX(70deg) rotateZ(360deg);} }
@keyframes earthProgress { from{transform:translateX(-28%);} to{transform:translateX(0);} }
@keyframes neonSweep { 0%{transform:rotate(0deg) scale(0.98);opacity:0.52;} 50%{transform:rotate(6deg) scale(1.01);opacity:0.92;} 100%{transform:rotate(0deg) scale(0.98);opacity:0.52;} }
@keyframes hudRotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ========================
   PROJECTS
   ======================== */
#projects {
  max-width: 100%;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,245,255,0.06), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(123,47,255,0.08), transparent 32%),
    var(--bg);
  position: relative;
  overflow: hidden;
}
#projects::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
  pointer-events: none;
}
.projects-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.projects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}
.projects-lead {
  max-width: 680px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-top: -12px;
}
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.project-filter {
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(0,245,255,0.16);
  background: rgba(2,8,16,0.64);
  color: rgba(232,244,248,0.68);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: transform 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, background 0.25s;
}
.project-filter:hover,
.project-filter.active {
  color: var(--cyan);
  border-color: rgba(0,245,255,0.55);
  background: rgba(0,245,255,0.06);
  box-shadow: 0 0 26px rgba(0,245,255,0.12);
  transform: translateY(-2px);
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.project-card {
  background: linear-gradient(180deg, rgba(6,16,30,0.78), rgba(2,6,12,0.94));
  border: 1px solid rgba(0,245,255,0.11);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.25s, transform 0.3s;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  min-height: 100%;
}
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 32%, rgba(0,245,255,0.08) 42%, transparent 52% 100%);
  transform: translateX(-130%);
  transition: transform 0.8s cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
  z-index: 16;
}
.project-card:hover::before { transform: translateX(130%); }
.project-card:hover {
  border-color: rgba(0,245,255,0.48);
  box-shadow: 0 30px 90px rgba(0,0,0,0.58), 0 0 46px rgba(0,245,255,0.10);
}
.project-card.is-hidden { display: none; }
.project-featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
}
.card-glow-frame {
  position: absolute; inset: 0;
  opacity: 0;
  background:
    linear-gradient(to right, rgba(0,245,255,0.9), transparent 4%),
    linear-gradient(to left, rgba(123,47,255,0.75), transparent 4%),
    linear-gradient(to bottom, rgba(0,245,255,0.8), transparent 4%),
    linear-gradient(to top, rgba(123,47,255,0.75), transparent 4%);
  pointer-events: none;
  transition: opacity 0.4s;
  mix-blend-mode: screen;
  z-index: 20;
}
.project-card:hover .card-glow-frame { opacity: 0.18; }
.project-preview {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.24);
}
.project-preview-large { height: 100%; min-height: 340px; }
.project-preview-bg {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.23,1,0.32,1), filter 0.7s;
  position: relative;
}
.proj-visual-1 { background: radial-gradient(circle at 40% 35%, rgba(0,245,255,0.20), transparent 24%), linear-gradient(135deg, #050a18, #001833, #03101e); }
.proj-visual-2 { background: radial-gradient(circle at 78% 22%, rgba(123,47,255,0.24), transparent 26%), linear-gradient(135deg, #07061a, #071b2a, #020712); }
.proj-visual-3 { background: radial-gradient(circle at 34% 25%, rgba(0,245,255,0.18), transparent 26%), linear-gradient(135deg, #030d10, #001a20, #001015); }
.proj-visual-4 { background: radial-gradient(circle at 52% 52%, rgba(0,245,255,0.22), transparent 30%), linear-gradient(135deg, #020714, #001320, #030612); }
.proj-visual-5 { background: radial-gradient(circle at 72% 38%, rgba(0,245,255,0.18), transparent 28%), linear-gradient(135deg, #001515, #002222, #001020); }
.proj-visual-6 { background: radial-gradient(circle at 28% 20%, rgba(123,47,255,0.20), transparent 30%), linear-gradient(135deg, #080014, #150026, #0a0020); }
.project-preview-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.34;
}
.project-preview-bg::after {
  content: '';
  position: absolute;
  left: -20%; right: -20%; top: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.70), transparent);
  box-shadow: 0 0 20px rgba(0,245,255,0.45);
  animation: projectScan 3.4s ease-in-out infinite;
}
.project-card:hover .project-preview-bg { transform: scale(1.055); filter: saturate(1.18); }
.proj-number {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.34);
  letter-spacing: 0.1em;
  z-index: 5;
}
.project-overlay {
  position: absolute; inset: 0;
  background: rgba(2,4,8,0.76);
  opacity: 0;
  transition: opacity 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(7px);
  z-index: 10;
}
.project-card:hover .project-overlay { opacity: 1; }
.proj-btn {
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  clip-path: polygon(7px 0%, 100% 0%, calc(100% - 7px) 100%, 0% 100%);
}
.proj-btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.proj-btn.secondary { border-color: rgba(255,255,255,0.34); color: var(--text); }
.proj-btn:hover { transform: scale(1.06); box-shadow: 0 0 24px rgba(0,245,255,0.18); }
.project-info { padding: 26px 28px 28px; position: relative; z-index: 2; }
.project-topline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-code);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232,244,248,0.45);
}
.project-topline em { color: var(--cyan); font-style: normal; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.proj-tag {
  font-family: var(--font-code);
  font-size: 0.56rem;
  padding: 4px 10px;
  border: 1px solid rgba(0,245,255,0.22);
  color: var(--cyan);
  letter-spacing: 0.09em;
  background: rgba(0,245,255,0.045);
}
.project-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  color: var(--text);
  transition: color 0.3s;
}
.project-featured .project-name { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.project-card:hover .project-name { color: var(--cyan); text-shadow: 0 0 18px rgba(0,245,255,0.18); }
.project-desc { font-size: 0.82rem; line-height: 1.75; color: var(--text-dim); }
.project-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 22px;
}
.project-metrics span {
  border: 1px solid rgba(0,245,255,0.13);
  background: rgba(0,245,255,0.035);
  padding: 12px 10px;
  text-align: center;
}
.project-metrics b {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.86rem;
  margin-bottom: 4px;
}
.project-metrics em {
  display: block;
  color: var(--text-dim);
  font-style: normal;
  font-size: 0.65rem;
}
.project-command {
  margin-top: 16px;
  padding: 10px 12px;
  color: rgba(0,245,255,0.78);
  border-left: 2px solid rgba(0,245,255,0.42);
  background: rgba(0,245,255,0.035);
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.project-hud,
.dashboard-mock,
.login-mock,
.planet-mock,
.automation-mock,
.analytics-mock {
  position: relative;
  z-index: 2;
}
.project-hud { width: 78%; max-width: 460px; }
.hud-top {
  display: flex; justify-content: space-between;
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.hud-top b { color: #80ffdf; }
.bot-radar {
  width: 190px; height: 190px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,0.28);
  box-shadow: inset 0 0 30px rgba(0,245,255,0.08), 0 0 24px rgba(0,245,255,0.14);
  position: relative;
  background: radial-gradient(circle, rgba(0,245,255,0.12), transparent 58%);
}
.bot-radar i {
  position: absolute; inset: 18%;
  border: 1px solid rgba(0,245,255,0.16);
  border-radius: 50%;
}
.bot-radar i:nth-child(2) { inset: 34%; }
.bot-radar i:nth-child(3) { inset: 48%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.bot-radar em {
  position: absolute; left: 50%; top: 50%;
  width: 50%; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform-origin: left center;
  animation: radarSpin 3s linear infinite;
}
.terminal-mini {
  padding: 14px 16px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(0,245,255,0.16);
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: rgba(232,244,248,0.76);
}
.terminal-mini p { margin: 6px 0; }
.terminal-mini span { color: var(--cyan); margin-right: 6px; }
.dashboard-mock {
  width: 74%; height: 64%;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0,245,255,0.22);
  background: rgba(0,0,0,0.24);
  box-shadow: 0 0 34px rgba(0,245,255,0.10);
}
.dash-sidebar { background: linear-gradient(var(--cyan), transparent); opacity: 0.28; }
.dash-main { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; align-items: end; }
.dash-main i { display: block; height: 54px; background: rgba(0,245,255,0.14); border: 1px solid rgba(0,245,255,0.18); }
.dash-main i:nth-child(2) { height: 78px; }
.dash-main i:nth-child(3) { height: 42px; }
.dash-main span { grid-column: 1/4; height: 36px; background: linear-gradient(90deg, rgba(0,245,255,0.32), transparent); }
.login-mock {
  width: 170px; height: 124px;
  border: 1px solid rgba(0,245,255,0.24);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 35px rgba(0,245,255,0.13);
  padding: 18px;
}
.login-mock span, .login-mock b, .login-mock i, .login-mock em { display: block; }
.login-mock span { width: 52px; height: 6px; background: var(--cyan); margin-bottom: 18px; }
.login-mock b, .login-mock i { height: 8px; background: rgba(255,255,255,0.14); margin-bottom: 12px; }
.login-mock em { height: 20px; width: 82px; background: rgba(0,245,255,0.22); margin-top: 12px; }
.planet-mock { width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(0,245,255,0.28); box-shadow: 0 0 35px rgba(0,245,255,0.18); }
.planet-mock i { position:absolute; inset: 22%; border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(0,245,255,0.55), rgba(0,25,50,0.9)); }
.planet-mock span { position:absolute; left:50%; top:50%; width: 260px; height: 54px; border:1px solid rgba(0,245,255,0.18); border-radius:50%; transform:translate(-50%,-50%) rotate(15deg); }
.planet-mock span:nth-child(3) { transform:translate(-50%,-50%) rotate(-18deg); width: 300px; height: 82px; }
.planet-mock span:nth-child(4) { transform:translate(-50%,-50%) rotate(35deg); width: 240px; height: 118px; border-style:dashed; }
.automation-mock { width: 220px; height: 120px; }
.automation-mock i { position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(0,245,255,0.35); background:rgba(0,245,255,0.08); box-shadow:0 0 20px rgba(0,245,255,0.15); }
.automation-mock i:nth-child(1) { left:0; top:36px; }
.automation-mock i:nth-child(2) { left:86px; top:0; }
.automation-mock i:nth-child(3) { right:0; top:56px; }
.automation-mock span { position:absolute; left:20px; right:20px; top:58px; height:1px; background:linear-gradient(90deg, var(--cyan), rgba(123,47,255,0.6), var(--cyan)); box-shadow:0 0 15px rgba(0,245,255,0.35); }
.analytics-mock { width: 230px; height: 130px; display:flex; align-items:end; gap:12px; padding:16px; border-bottom:1px solid rgba(0,245,255,0.28); }
.analytics-mock i { width: 30px; background: linear-gradient(to top, rgba(0,245,255,0.42), rgba(123,47,255,0.28)); border:1px solid rgba(0,245,255,0.14); }
.analytics-mock i:nth-child(1){height:42px}.analytics-mock i:nth-child(2){height:88px}.analytics-mock i:nth-child(3){height:62px}.analytics-mock i:nth-child(4){height:106px}
.analytics-mock span { position:absolute; left:16px; right:16px; top:22px; height:1px; background:rgba(0,245,255,0.30); box-shadow:0 0 18px rgba(0,245,255,0.35); }
@keyframes projectScan { 0%,100%{ transform: translateY(-86px); opacity:0; } 45%,55%{ opacity:1; } 50%{ transform: translateY(86px); } }
@keyframes radarSpin { to { transform: rotate(360deg); } }

/* ========================
   WORKFLOW
   ======================== */
#workflow { max-width: 100%; background: var(--bg2); overflow: hidden; position: relative; }
.workflow-inner { max-width: 1400px; margin: 0 auto; }
.workflow-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding-top: 20px;
}
.workflow-path {
  position: absolute;
  top: 68px; left: 80px; right: 80px;
  height: 2px;
  pointer-events: none;
  z-index: 0;
}
.workflow-path-line {
  position: absolute; inset: 0;
  background: rgba(0,245,255,0.1);
}
.workflow-path-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 0 12px var(--cyan);
  width: 0%;
  transition: width 1.5s ease;
}
.workflow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}
.workflow-step:hover { transform: translateY(-10px); }
.step-connector {
  position: absolute;
  top: 40px; left: 0; right: 0;
  height: 1px;
  background: transparent;
}
.step-num {
  width: 80px; height: 80px;
  border: 1px solid rgba(0,245,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--cyan);
  background: var(--bg);
  position: relative;
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  transition: all 0.3s;
  z-index: 2;
}
.workflow-step:hover .step-num {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: var(--bg);
  box-shadow: var(--glow-cyan);
  border-color: transparent;
}
.step-icon { font-size: 1.5rem; }
.step-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
}
.step-desc {
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--text-dim);
  text-align: center;
}

/* ========================
   TRUST / GUARANTEES
   ======================== */
#testimonials {
  max-width: 100%;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,245,255,0.08), transparent 32%),
    radial-gradient(circle at 82% 70%, rgba(123,47,255,0.11), transparent 34%),
    var(--bg);
  position: relative;
  overflow: hidden;
}
#testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.025) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 72%);
  pointer-events: none;
}
.testimonials-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; }
.trust-lead {
  max-width: 760px;
  margin: -18px auto 48px;
  text-align: center;
  color: rgba(232,244,248,0.72);
  font-size: 0.98rem;
  line-height: 1.9;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}
.trust-grid-premium { align-items: stretch; }
.trust-card {
  padding: 32px 28px;
  background: var(--glass);
  border: 1px solid rgba(0,245,255,0.07);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: all 0.3s;
}
.trust-card-premium {
  min-height: 282px;
  background:
    linear-gradient(145deg, rgba(5,15,28,0.88), rgba(2,7,15,0.68)),
    radial-gradient(circle at 16% 0%, rgba(0,245,255,0.12), transparent 36%);
  border-color: rgba(0,245,255,0.14);
  box-shadow: inset 0 0 30px rgba(0,245,255,0.025), 0 18px 50px rgba(0,0,0,0.24);
}
.trust-card:hover {
  border-color: rgba(0,245,255,0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(0,245,255,0.06);
}
.trust-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(0,245,255,0.10) 42%, transparent 70%);
  transform: translateX(-125%);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.3s;
}
.trust-card::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(0,245,255,0.13);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(0,245,255,0.10);
  opacity: 0.8;
}
.trust-card:hover::before { opacity: 1; transform: translateX(125%); }
.trust-code {
  font-family: var(--font-code);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  color: rgba(0,245,255,0.62);
  margin-bottom: 16px;
}
.trust-icon { font-size: 2rem; margin-bottom: 16px; filter: drop-shadow(0 0 8px rgba(0,245,255,0.4)); }
.trust-icon-code {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cyan);
  border: 1px solid rgba(0,245,255,0.34);
  background: radial-gradient(circle at 35% 20%, rgba(255,255,255,0.15), rgba(0,245,255,0.07) 52%, rgba(0,0,0,0.22));
  clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
  box-shadow: 0 0 24px rgba(0,245,255,0.16), inset 0 0 20px rgba(0,245,255,0.07);
}
.trust-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.trust-text { font-size: 0.82rem; line-height: 1.8; color: var(--text-dim); margin-bottom: 18px; }
.trust-stat {
  font-family: var(--font-code);
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(0,245,255,0.1);
  padding-top: 14px;
  margin-top: auto;
}
.trust-stat b { color: var(--cyan); font-weight: 700; }
.delivery-panel {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(280px, 0.92fr);
  gap: 24px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(0,245,255,0.13);
  background: rgba(3,10,19,0.62);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28), inset 0 0 42px rgba(0,245,255,0.025);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 20px);
}
.delivery-terminal {
  border: 1px solid rgba(0,245,255,0.15);
  background:
    linear-gradient(180deg, rgba(0,245,255,0.045), transparent 24%),
    rgba(0,0,0,0.30);
  overflow: hidden;
}
.terminal-topline {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(0,245,255,0.12);
  font-family: var(--font-code);
  color: rgba(232,244,248,0.72);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}
.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,245,255,0.58);
  box-shadow: 0 0 12px rgba(0,245,255,0.54);
}
.delivery-code-lines { padding: 22px 22px 24px; }
.delivery-code-lines p {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0,245,255,0.07);
  font-family: var(--font-code);
  color: rgba(232,244,248,0.86);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.delivery-code-lines p:last-child { border-bottom: 0; }
.delivery-code-lines span {
  color: var(--cyan);
  margin-right: 14px;
  text-shadow: var(--glow-cyan);
}
.delivery-code-lines em {
  color: rgba(232,244,248,0.44);
  font-style: normal;
  margin-left: 8px;
}
.delivery-side {
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(123,47,255,0.14);
  background:
    radial-gradient(circle at 78% 18%, rgba(123,47,255,0.18), transparent 36%),
    linear-gradient(145deg, rgba(8,16,32,0.78), rgba(2,7,15,0.55));
}
.delivery-badge {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 13px;
  font-family: var(--font-code);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0,245,255,0.22);
  background: rgba(0,245,255,0.045);
}
.delivery-side h3 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.35;
  color: var(--text);
}
.delivery-side h3 span { color: var(--cyan); text-shadow: var(--glow-cyan); }
.delivery-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.delivery-metrics div {
  padding: 16px 10px;
  text-align: center;
  border: 1px solid rgba(0,245,255,0.12);
  background: rgba(0,0,0,0.20);
}
.delivery-metrics b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  color: var(--text);
}
.delivery-metrics span {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-family: var(--font-code);
}
.delivery-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 14px 20px;
  border: 1px solid rgba(0,245,255,0.32);
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,245,255,0.055);
  box-shadow: 0 0 24px rgba(0,245,255,0.08);
}
.delivery-cta:hover { box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.stars { color: #ffd700; }

/* ========================
   CONTACT
   ======================== */
#contact {
  max-width: 100%;
  background:
    radial-gradient(circle at 18% 24%, rgba(123,47,255,0.13), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(0,245,255,0.12), transparent 36%),
    var(--bg2);
  position: relative;
  overflow: hidden;
}
#contact::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent);
}
.contact-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 55% 45%, black, transparent 72%);
  pointer-events: none;
}
.contact-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.18fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.contact-left { display: flex; flex-direction: column; gap: 34px; }
.contact-ending {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.35vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.contact-ending span {
  background: linear-gradient(135deg, var(--cyan), var(--blue), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(0,245,255,0.18));
}
.contact-subtitle {
  margin-top: 18px;
  max-width: 520px;
  color: rgba(232,244,248,0.68);
  line-height: 1.8;
  font-size: 0.96rem;
}
.contact-status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 520px);
  padding: 18px 20px;
  background: rgba(2, 9, 18, 0.58);
  border: 1px solid rgba(0,245,255,0.18);
  box-shadow: 0 0 34px rgba(0,245,255,0.08), inset 0 0 30px rgba(0,245,255,0.03);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 8px rgba(0,245,255,0.08), 0 0 28px rgba(0,245,255,0.8);
  animation: statusPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.contact-status-card strong {
  display: block;
  font-family: var(--font-code);
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.contact-status-card span {
  display: block;
  color: rgba(232,244,248,0.68);
  font-size: 0.84rem;
  line-height: 1.55;
}
.contact-links { display: grid; gap: 12px; width: min(100%, 520px); }
.contact-link {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(0,245,255,0.11);
  text-decoration: none;
  transition: all 0.3s;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  position: relative;
  overflow: hidden;
}
.contact-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.09), transparent);
  transform: translateX(-110%);
  transition: transform 0.5s ease;
}
.contact-link:hover::before { transform: translateX(110%); }
.contact-link:hover {
  border-color: rgba(0,245,255,0.45);
  transform: translateX(6px);
  box-shadow: 0 0 28px rgba(0,245,255,0.12);
  background: rgba(0,245,255,0.035);
}
.contact-link-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0,245,255,0.25);
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.16), rgba(0,245,255,0.05));
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 18px rgba(0,245,255,0.08);
  flex-shrink: 0;
}
.contact-link-info { flex: 1; position: relative; z-index: 1; }
.contact-link-label { font-family: var(--font-code); font-size: 0.62rem; color: var(--cyan); letter-spacing: 0.2em; text-transform: uppercase; }
.contact-link-val { font-size: 0.9rem; color: var(--text); margin-top: 3px; transition: color 0.3s; }
.contact-link:hover .contact-link-val { color: var(--cyan); }
.contact-link-arrow { color: var(--text-dim); transition: transform 0.3s, color 0.3s; position: relative; z-index: 1; }
.contact-link:hover .contact-link-arrow { transform: translateX(4px); color: var(--cyan); }
.contact-terminal {
  position: relative;
  background: rgba(3, 10, 20, 0.72);
  border: 1px solid rgba(0,245,255,0.22);
  box-shadow: 0 0 60px rgba(0,245,255,0.10), 0 24px 80px rgba(0,0,0,0.42), inset 0 0 42px rgba(0,245,255,0.025);
  backdrop-filter: blur(18px);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  overflow: hidden;
}
.contact-terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(0,245,255,0.055), transparent),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,245,255,0.025) 14px 15px);
  pointer-events: none;
  animation: terminalScan 5s linear infinite;
}
.terminal-topbar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0,245,255,0.14);
  background: rgba(0,0,0,0.22);
  position: relative;
  z-index: 1;
}
.terminal-lights { display: flex; gap: 8px; }
.terminal-lights span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,245,255,0.35);
  box-shadow: 0 0 12px rgba(0,245,255,0.25);
}
.terminal-lights span:nth-child(2) { background: rgba(0,128,255,0.45); }
.terminal-lights span:nth-child(3) { background: rgba(123,47,255,0.55); }
.terminal-title {
  flex: 1;
  font-family: var(--font-code);
  color: rgba(232,244,248,0.72);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.terminal-secure {
  font-family: var(--font-code);
  color: var(--cyan);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 999px;
  background: rgba(0,245,255,0.04);
}
.terminal-body {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 34px);
}
.terminal-line {
  font-family: var(--font-code);
  color: rgba(232,244,248,0.72);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.terminal-line span { color: var(--cyan); text-shadow: var(--glow-cyan); margin-right: 8px; }
.project-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.project-type {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(0,245,255,0.14);
  background: rgba(255,255,255,0.025);
  color: rgba(232,244,248,0.76);
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: all 0.25s ease;
}
.project-type:hover,
.project-type.active {
  color: var(--bg);
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-color: rgba(0,245,255,0.55);
  box-shadow: 0 0 24px rgba(0,245,255,0.22);
  transform: translateY(-2px);
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-family: var(--font-code); font-size: 0.62rem; color: var(--cyan); letter-spacing: 0.22em; text-transform: uppercase; }
.form-input, .form-textarea {
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(0,245,255,0.12);
  padding: 15px 18px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: all 0.3s;
  outline: none; resize: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.form-input:focus, .form-textarea:focus {
  border-color: rgba(0,245,255,0.55);
  background: rgba(0,245,255,0.035);
  box-shadow: 0 0 0 1px rgba(0,245,255,0.16), 0 0 24px rgba(0,245,255,0.10);
}
.form-textarea { min-height: 146px; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); opacity: 0.48; }
.form-submit {
  min-height: 56px;
  padding: 16px 44px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.20em; text-transform: uppercase;
  border: none; cursor: pointer;
  clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
  transition: all 0.3s;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.form-submit:hover { box-shadow: var(--glow-cyan), 0 10px 30px rgba(0,0,0,0.4); transform: translateY(-2px); }
.form-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.22);
  transform: translateX(-101%);
  transition: transform 0.4s;
}
.form-submit:hover::after { transform: translateX(101%); }
.submit-text { position: relative; z-index: 1; }
.submit-arrow { position: relative; z-index: 1; transition: transform 0.3s; }
.form-submit:hover .submit-arrow { transform: translateX(4px); }
.form-submit.loading { opacity: 0.7; cursor: not-allowed; }
@keyframes terminalScan { to { transform: translateX(30px); } }
@keyframes statusPulse { 0%,100%{transform:scale(1);opacity:0.78;} 50%{transform:scale(1.18);opacity:1;} }


@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 42px; }
  .contact-terminal { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
  .project-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .terminal-topbar { padding: 0 14px; gap: 12px; }
  .terminal-title { font-size: 0.6rem; letter-spacing: 0.12em; }
  .terminal-secure { display: none; }
  .project-type-grid { grid-template-columns: 1fr; }
  .contact-link { padding: 14px 16px; }
  .contact-link-icon { width: 36px; height: 36px; }
}

/* ========================
   FOOTER
   ======================== */

/* ========================
   FINAL CTA + FOOTER
   ======================== */
.final-cta-section {
  position: relative;
  padding: 80px clamp(20px, 4vw, 70px) 34px;
  overflow: hidden;
}
.final-cta-section::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -130px;
  width: min(980px, 95vw); height: 340px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,245,255,0.12), rgba(123,47,255,0.06) 42%, transparent 72%);
  pointer-events: none;
}
.final-cta-shell {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 0.85fr);
  gap: 28px;
  align-items: stretch;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(0,245,255,0.22);
  background:
    linear-gradient(135deg, rgba(4,12,25,0.84), rgba(1,4,12,0.92)),
    radial-gradient(circle at 18% 18%, rgba(0,245,255,0.12), transparent 28%),
    radial-gradient(circle at 90% 22%, rgba(123,47,255,0.13), transparent 30%);
  box-shadow: 0 0 42px rgba(0,245,255,0.10), inset 0 0 46px rgba(0,245,255,0.035);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  overflow: hidden;
}
.final-cta-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(0,245,255,0.10), transparent),
    repeating-linear-gradient(90deg, transparent 0 82px, rgba(0,245,255,0.035) 82px 83px);
  transform: translateX(-100%);
  animation: finalCtaSweep 6s ease-in-out infinite;
  pointer-events: none;
}
.final-cta-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.final-cta-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 12px 0 20px;
}
.final-cta-content h2 span {
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(0,245,255,0.45);
}
.final-cta-content p {
  max-width: 720px;
  color: rgba(232,244,248,0.72);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 26px;
}
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.final-cta-terminal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(0,245,255,0.22);
  box-shadow: inset 0 0 30px rgba(0,245,255,0.05), 0 0 30px rgba(0,245,255,0.08);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  overflow: hidden;
}
.final-terminal-body { padding: 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; justify-content: center; }
.final-command {
  font-family: var(--font-code);
  color: rgba(232,244,248,0.88);
  letter-spacing: 0.04em;
  font-size: 0.86rem;
}
.final-command span { color: var(--cyan); text-shadow: var(--glow-cyan); }
.final-loader {
  position: relative;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(0,245,255,0.16);
}
.final-loader i {
  display: block;
  height: 100%;
  width: 55%;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
  box-shadow: 0 0 22px rgba(0,245,255,0.75);
  animation: finalLoader 2.2s ease-in-out infinite;
}
.final-output {
  font-family: var(--font-code);
  color: rgba(232,244,248,0.72);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.final-output span { color: var(--cyan); margin-right: 8px; }
.final-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.final-tags b {
  font-family: var(--font-code);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--cyan);
  padding: 7px 10px;
  border: 1px solid rgba(0,245,255,0.20);
  background: rgba(0,245,255,0.055);
  border-radius: 999px;
}
@keyframes finalCtaSweep { 0%,38%{transform:translateX(-110%);opacity:0;} 50%{opacity:1;} 70%,100%{transform:translateX(110%);opacity:0;} }
@keyframes finalLoader { 0%{transform:translateX(-110%);width:34%;} 50%{width:72%;} 100%{transform:translateX(220%);width:34%;} }

.footer-premium {
  position: relative;
  padding: 42px clamp(20px, 4vw, 70px) 24px;
  border-top: 1px solid rgba(0,245,255,0.13);
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.52)),
    radial-gradient(circle at 50% 0, rgba(0,245,255,0.09), transparent 42%);
  overflow: hidden;
}
.footer-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: min(720px, 90vw); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 22px var(--cyan);
  animation: footerGlow 3s ease-in-out infinite;
}
@keyframes footerGlow { 0%,100%{opacity:0.3;} 50%{opacity:0.8;} }
.footer-main {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 26px;
  align-items: start;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--text), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.footer-dot { -webkit-text-fill-color: var(--cyan); }
.footer-brand-block p {
  max-width: 380px;
  color: rgba(232,244,248,0.60);
  font-size: 0.84rem;
  line-height: 1.7;
}
.footer-map,
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-map a,
.footer-socials a {
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
}
.footer-map a:hover,
.footer-socials a:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); transform: translateY(-2px); }
.footer-socials { justify-content: flex-end; }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(0,245,255,0.14);
  background: rgba(0,245,255,0.04);
  border-radius: 999px;
}
.footer-socials span { color: var(--cyan); }
.footer-bottom-line {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text-dim);
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.footer-built { color: rgba(0,245,255,0.62); }

.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 86px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,245,255,0.34);
  background: rgba(4,12,22,0.70);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  border-color: rgba(0,245,255,0.72);
  box-shadow: 0 0 28px rgba(0,245,255,0.32), inset 0 0 24px rgba(0,245,255,0.08);
  transform: translateY(-3px) scale(1.04);
}
.back-to-top span {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 12px rgba(0,245,255,0.75);
}
body.entry-locked .back-to-top { display: none; }
@media (max-width: 600px) {
  .back-to-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: 66px;
    width: 42px;
    height: 42px;
  }
}

/* ========================
   ACCESSIBILITY
   ======================== */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-trail { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  .delivery-panel { grid-template-columns: 1fr; padding: 14px; }
  .delivery-side { padding: 24px; }
  .delivery-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .trust-lead { font-size: 0.88rem; margin-bottom: 32px; }
  .trust-card-premium { min-height: auto; padding: 26px 22px; }
  .delivery-panel { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 14px); }
  .delivery-code-lines { padding: 16px; }
  .delivery-code-lines p { font-size: 0.68rem; line-height: 1.7; }
  .delivery-code-lines em { display: block; margin: 4px 0 0 34px; }
  .delivery-metrics { grid-template-columns: 1fr; }
  .delivery-cta { width: 100%; }
}

@media (max-width: 560px){ .final-cta-section{padding-top:54px;} .final-cta-shell{padding:24px 18px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);} .final-cta-actions{flex-direction:column;} .final-cta-actions .btn-primary,.final-cta-actions .btn-secondary{width:100%;justify-content:center;} .final-terminal-body{padding:20px;} .footer-map{gap:10px 14px;} }


/* ========================
   PROJECT CASE MODAL
   ======================== */
.proj-btn.detail {
  border-color: rgba(0,245,255,0.48);
  color: var(--cyan);
  background: rgba(0,245,255,0.07);
  cursor: pointer;
}
.proj-btn.detail:hover { background: rgba(0,245,255,0.14); }
.project-modal-open { overflow: hidden; }
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.34s ease, visibility 0.34s ease;
}
.project-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,245,255,0.12), transparent 38%),
    rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
}
.project-modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  background: linear-gradient(140deg, rgba(6,16,30,0.96), rgba(2,6,14,0.98));
  border: 1px solid rgba(0,245,255,0.28);
  box-shadow: 0 36px 120px rgba(0,0,0,0.70), 0 0 70px rgba(0,245,255,0.14);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  transform: translateY(18px) scale(0.97);
  transition: transform 0.34s cubic-bezier(0.23,1,0.32,1);
}
.project-modal.active .project-modal-panel { transform: translateY(0) scale(1); }
.project-modal-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,245,255,0.18), transparent 18%, transparent 82%, rgba(123,47,255,0.18)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px);
  opacity: 0.6;
}
.project-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0,245,255,0.28);
  background: rgba(2,8,16,0.82);
  color: var(--cyan);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.project-modal-close:hover {
  transform: rotate(90deg) scale(1.04);
  border-color: rgba(0,245,255,0.58);
  box-shadow: 0 0 26px rgba(0,245,255,0.18);
}
.project-modal-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  min-height: 500px;
}
.project-modal-visual {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  background:
    radial-gradient(circle at 40% 38%, rgba(0,245,255,0.24), transparent 28%),
    radial-gradient(circle at 70% 70%, rgba(123,47,255,0.18), transparent 30%),
    linear-gradient(135deg, #020712, #001323, #030713);
  border-right: 1px solid rgba(0,245,255,0.16);
}
.project-modal-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.36;
}
.modal-orbit {
  position: absolute;
  left: 50%; top: 42%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(0,245,255,0.14);
}
.modal-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,245,255,0.24);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(var(--r));
  animation: modalOrbit 8s linear infinite;
}
.modal-orbit i:nth-child(1) { --r: 0deg; }
.modal-orbit i:nth-child(2) { --r: 60deg; animation-duration: 10s; border-color: rgba(123,47,255,0.28); }
.modal-orbit i:nth-child(3) { --r: -52deg; animation-duration: 12s; }
.modal-terminal {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  padding: 18px;
  background: rgba(1,6,12,0.80);
  border: 1px solid rgba(0,245,255,0.20);
  font-family: var(--font-code);
  color: rgba(232,244,248,0.78);
  box-shadow: inset 0 0 28px rgba(0,245,255,0.04);
}
.modal-terminal-top { display: flex; gap: 6px; margin-bottom: 14px; }
.modal-terminal-top span { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,245,255,0.58); }
.modal-terminal p { margin: 7px 0; font-size: 0.72rem; letter-spacing: 0.05em; }
.modal-terminal b { color: var(--cyan); font-weight: 900; }
.modal-terminal em { color: rgba(0,245,255,0.84); font-style: normal; }
.project-modal-content { padding: 58px 54px 44px; }
.modal-kicker {
  font-family: var(--font-code);
  color: var(--cyan);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.project-modal-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 3rem);
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--text);
}
.project-modal-content p {
  color: var(--text-dim);
  line-height: 1.85;
  font-size: 0.94rem;
}
.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.modal-tags span {
  border: 1px solid rgba(0,245,255,0.24);
  color: var(--cyan);
  background: rgba(0,245,255,0.045);
  padding: 7px 12px;
  font-family: var(--font-code);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}
.modal-points { display: grid; gap: 10px; margin: 24px 0; }
.modal-points div {
  padding: 12px 14px;
  background: rgba(0,245,255,0.035);
  border-left: 2px solid rgba(0,245,255,0.46);
  color: rgba(232,244,248,0.78);
  font-size: 0.82rem;
}
.modal-points div::before { content: '✓ '; color: var(--cyan); font-weight: 900; }
.modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 26px 0 28px;
}
.modal-stats span {
  border: 1px solid rgba(0,245,255,0.14);
  background: rgba(255,255,255,0.025);
  padding: 14px 10px;
  text-align: center;
}
.modal-stats b {
  display: block;
  font-family: var(--font-display);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 4px;
}
.modal-stats em {
  display: block;
  color: var(--text-dim);
  font-style: normal;
  font-size: 0.65rem;
}
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.modal-action {
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(0,245,255,0.35);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.modal-action.primary { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.modal-action.ghost { background: transparent; color: var(--cyan); }
.modal-action:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(0,245,255,0.16); }
@keyframes modalOrbit { to { transform: rotateX(68deg) rotateZ(calc(var(--r) + 360deg)); } }

@media (max-width: 760px) {
  .project-modal { padding: 14px; }
  .project-modal-panel { max-height: 90vh; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
  .project-modal-grid { grid-template-columns: 1fr; }
  .project-modal-visual { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(0,245,255,0.14); }
  .modal-orbit { width: 180px; height: 180px; }
  .modal-terminal { left: 18px; right: 18px; bottom: 18px; padding: 12px; }
  .project-modal-content { padding: 34px 22px 28px; }
  .modal-stats { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column; }
  .modal-action { width: 100%; }
}


/* ========================
   WORKFLOW PREMIUM UPGRADE v53
   ======================== */
.workflow-premium {
  background:
    radial-gradient(circle at 18% 18%, rgba(0,245,255,0.055), transparent 34%),
    radial-gradient(circle at 84% 72%, rgba(123,47,255,0.075), transparent 38%),
    var(--bg2) !important;
}
.workflow-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 34px;
}
.workflow-lead {
  max-width: 520px;
  color: rgba(232,244,248,0.68);
  line-height: 1.8;
  font-size: 0.96rem;
}
.workflow-premium-shell {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 26px;
  align-items: stretch;
}
.workflow-console {
  position: relative;
  min-height: 360px;
  background: rgba(2,8,16,0.72);
  border: 1px solid rgba(0,245,255,0.18);
  backdrop-filter: blur(16px);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(0,0,0,0.42), inset 0 0 44px rgba(0,245,255,0.035);
}
.workflow-console::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(0,245,255,0.08) 48%, transparent 58% 100%),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,245,255,0.025) 16px 17px);
  transform: translateX(-120%);
  animation: workflowConsoleSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
.workflow-console-top {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(0,245,255,0.13);
  position: relative;
  z-index: 1;
}
.workflow-console-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,245,255,0.5);
  box-shadow: 0 0 12px rgba(0,245,255,0.45);
}
.workflow-console-top b {
  margin-left: 8px;
  font-family: var(--font-code);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(232,244,248,0.76);
}
.workflow-console-body {
  position: relative;
  z-index: 1;
  padding: 28px 22px;
  font-family: var(--font-code);
}
.workflow-console-body p {
  margin: 0 0 16px;
  color: rgba(232,244,248,0.72);
  font-size: 0.82rem;
  line-height: 1.65;
}
.workflow-console-body em {
  color: var(--cyan);
  font-style: normal;
  margin-right: 8px;
  text-shadow: var(--glow-cyan);
}
.workflow-console-meter {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(0,245,255,0.18);
  background: rgba(255,255,255,0.035);
  z-index: 1;
}
.workflow-console-meter i {
  display: block;
  width: 74%;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--blue));
  box-shadow: 0 0 18px rgba(0,245,255,0.8);
  animation: workflowMeter 2.6s ease-in-out infinite alternate;
}
.workflow-premium .workflow-steps {
  min-height: 360px;
  padding: 36px 28px 30px;
  border: 1px solid rgba(0,245,255,0.13);
  background:
    linear-gradient(180deg, rgba(6,16,30,0.62), rgba(2,7,14,0.74)),
    radial-gradient(circle at 50% 12%, rgba(0,245,255,0.07), transparent 48%);
  backdrop-filter: blur(14px);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  overflow: hidden;
}
.workflow-premium .workflow-steps::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
  pointer-events: none;
}
.workflow-premium .workflow-path {
  top: 74px;
  left: 68px;
  right: 68px;
  height: 1px;
  z-index: 1;
}
.workflow-premium .workflow-path-line {
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.22), transparent);
}
.workflow-premium .workflow-path-progress {
  height: 2px;
  top: -0.5px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 0 18px rgba(0,245,255,0.72);
}
.workflow-premium .workflow-step {
  gap: 14px;
  padding: 0 10px;
  z-index: 2;
}
.workflow-premium .workflow-step:hover { transform: translateY(-8px); }
.workflow-premium .step-num {
  width: 76px;
  height: 76px;
  background: radial-gradient(circle at 35% 25%, rgba(0,245,255,0.16), rgba(2,8,16,0.94));
  border: 1px solid rgba(0,245,255,0.34);
  box-shadow: inset 0 0 22px rgba(0,245,255,0.055), 0 0 20px rgba(0,245,255,0.08);
}
.workflow-premium .step-num span {
  position: relative;
  z-index: 1;
}
.workflow-premium .step-num::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0,245,255,0.16);
  clip-path: inherit;
}
.workflow-premium .workflow-step:hover .step-num {
  background: radial-gradient(circle at 40% 20%, rgba(255,255,255,0.22), rgba(0,245,255,0.72));
  color: #02040a;
  box-shadow: 0 0 36px rgba(0,245,255,0.42);
}
.workflow-premium .step-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(0,245,255,0.22);
  background: rgba(0,245,255,0.045);
  color: var(--cyan);
  font-family: var(--font-code);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  box-shadow: 0 0 18px rgba(0,245,255,0.08);
}
.workflow-premium .step-title {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}
.workflow-premium .step-desc {
  max-width: 180px;
  font-size: 0.76rem;
  color: rgba(232,244,248,0.64);
}
@keyframes workflowConsoleSweep {
  0%, 42% { transform: translateX(-125%); opacity: 0; }
  52% { opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}
@keyframes workflowMeter {
  from { transform: translateX(-18%); filter: brightness(0.75); }
  to { transform: translateX(34%); filter: brightness(1.25); }
}
@media (max-width: 1100px) {
  .workflow-premium-shell { grid-template-columns: 1fr; }
  .workflow-console { min-height: 260px; }
}
@media (max-width: 900px) {
  .workflow-head { flex-direction: column; align-items: flex-start; }
  .workflow-premium .workflow-steps { padding: 28px 20px; gap: 20px; }
  .workflow-premium .workflow-step { width: 100%; max-width: 440px; padding: 18px; border: 1px solid rgba(0,245,255,0.10); background: rgba(0,245,255,0.025); clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
  .workflow-premium .step-desc { max-width: 100%; }
}
@media (max-width: 560px) {
  .workflow-console-body p { font-size: 0.74rem; }
  .workflow-premium .step-num { width: 66px; height: 66px; font-size: 1.18rem; }
  .workflow-premium .step-code { font-size: 0.56rem; height: 24px; }
}


/* ========================
   MOBILE OVERFLOW FIX v54
   ======================== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
body { min-width: 0; }
body.mobile-nav-open { overflow: hidden !important; }
img, video, canvas, svg { max-width: 100%; }
section, header, nav, footer, .hero-content, .about-inner, .services-inner, .techstack-inner, .projects-inner, .workflow-inner, .contact-inner, .footer-main, .final-cta-shell {
  min-width: 0;
}

@media (max-width: 980px) {
  nav {
    width: 100%;
    max-width: 100vw;
    padding: 13px 18px;
    gap: 14px;
  }
  .nav-links,
  .nav-cta {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
    flex-shrink: 0;
    position: relative;
    z-index: 1002;
  }
  .nav-logo {
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  #hero {
    min-height: auto;
    padding: 118px 0 70px;
    display: block;
    overflow: hidden !important;
  }
  .hero-content {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr !important;
    gap: 34px;
    padding: 0 22px;
    padding-top: 0;
    margin: 0;
  }
  .hero-left {
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }
  .hero-eyebrow {
    font-size: 0.58rem;
    line-height: 1.6;
    letter-spacing: 0.22em;
    flex-wrap: wrap;
  }
  .hero-name {
    font-size: clamp(3rem, 14vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    max-width: 100%;
    overflow-wrap: normal;
  }
  .hero-role-wrap {
    height: 2.2rem;
    max-width: 100%;
  }
  .hero-role {
    font-size: 0.98rem;
    max-width: 100%;
  }
  .role-inner span { white-space: nowrap; }
  .hero-tagline,
  .hero-sub {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.75;
  }
  .hero-cta-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-stats {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    justify-content: space-between;
    overflow: hidden;
  }
  .hstat {
    min-width: 0;
    flex: 1 1 0;
  }
  .hstat strong { font-size: 1.05rem; }
  .hstat em { font-size: 0.52rem; letter-spacing: 0.04em; }
  .hstat-div { height: 28px; flex: 0 0 1px; }
  .hero-right {
    width: 100%;
    max-width: min(88vw, 380px);
    margin: 4px auto 0;
    transform: none !important;
  }
  .hero-photo-frame {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  .floating-tag { display: none !important; }
  .photo-badge {
    left: 12px;
    bottom: 12px;
    transform: scale(0.86);
    transform-origin: left bottom;
  }
  .scroll-indicator { display: none !important; }

  section {
    width: 100%;
    max-width: 100vw;
    padding: 72px 20px;
    overflow: hidden !important;
  }
  .section-title {
    font-size: clamp(2rem, 10vw, 3.2rem);
    line-height: 1.05;
    word-break: normal;
  }
  .section-subtitle { font-size: 0.62rem; letter-spacing: 0.26em; }
  .section-head,
  .section-header {
    width: 100%;
    max-width: 100%;
  }

  .about-inner,
  .contact-inner,
  .final-cta-shell,
  .footer-main,
  .workflow-premium-shell,
  .earth-showcase {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
  }
  .about-inner { gap: 42px; }
  .about-photos {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .about-content,
  .about-text,
  .about-card,
  .about-cockpit,
  .about-philosophy,
  .about-terminal,
  .about-highlight,
  .contact-terminal,
  .delivery-panel,
  .workflow-console,
  .workflow-premium .workflow-steps,
  .final-cta-terminal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .about-title,
  .about-cockpit-title,
  .final-cta-content h2 {
    font-size: clamp(1.95rem, 10vw, 3rem);
    line-height: 1.08;
  }
  .about-photo-sec { right: 0; max-width: 42%; }
  .about-exp-badge { left: 0; bottom: 10px; }

  .services-grid,
  .projects-grid,
  .trust-grid,
  .stats-grid,
  .service-premium-grid,
  .project-premium-grid {
    grid-template-columns: 1fr !important;
  }
  .services-flow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .services-flow em { transform: rotate(90deg); }

  .earth-info-panel {
    align-items: stretch;
    text-align: left;
  }
  .earth-stage {
    min-height: 440px;
    width: 100%;
    overflow: hidden !important;
  }
  .earth-stage::after { opacity: 0.26; }
  .earth-globe {
    --earth-size: min(74vw, 320px) !important;
    left: 50% !important;
    top: 47% !important;
  }
  .earth-orbit { left: 50% !important; top: 47% !important; }
  .orbit-a { width: min(92vw, 390px) !important; height: 120px !important; }
  .orbit-b { width: min(102vw, 450px) !important; height: 170px !important; }
  .orbit-c { width: min(112vw, 510px) !important; height: 230px !important; }
  .earth-base { width: min(82vw, 330px) !important; top: calc(47% + 170px) !important; }
  .tech-orb {
    width: 66px !important;
    min-height: 82px !important;
  }
  .tech-orb img {
    width: 46px !important;
    height: 46px !important;
    padding: 9px !important;
  }
  .tech-orb small {
    font-size: 0.58rem !important;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tech-grid { margin-top: 12px; gap: 10px; }
  .tech-pill { padding: 9px 12px; font-size: 0.66rem; }

  .project-featured,
  .project-card,
  .project-card-premium,
  .service-card,
  .service-card-premium,
  .trust-card-premium {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .project-featured { grid-template-columns: 1fr !important; }
  .project-visual,
  .featured-visual { min-height: 230px; }
  .project-filter,
  .project-tabs,
  .modal-actions {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .workflow-head {
    align-items: flex-start;
    gap: 18px;
  }
  .workflow-premium .workflow-steps {
    padding: 24px 18px;
  }
  .workflow-premium .workflow-path { display: none; }
  .workflow-premium .workflow-step {
    max-width: 100%;
  }

  .contact-link-val,
  .footer-brand-block p,
  .final-output,
  .final-command,
  .terminal-title {
    overflow-wrap: anywhere;
  }
  .project-type-grid,
  .form-grid,
  .delivery-metrics,
  .modal-stats {
    grid-template-columns: 1fr !important;
  }
  .footer-main {
    gap: 26px;
  }
  .footer-socials { justify-content: flex-start; }
  .footer-bottom-line {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.6;
  }
}

@media (max-width: 420px) {
  nav { padding: 12px 16px; }
  .nav-logo { font-size: 1rem; }
  .hamburger span { width: 22px; }
  #hero { padding-top: 108px; }
  .hero-content { padding-left: 18px; padding-right: 18px; }
  .hero-name { font-size: clamp(2.55rem, 13.4vw, 3.75rem); }
  .hero-eyebrow { font-size: 0.54rem; letter-spacing: 0.18em; }
  .hero-tagline, .hero-sub { font-size: 0.9rem; }
  section { padding-left: 18px; padding-right: 18px; }
  .mobile-nav a { font-size: clamp(1.08rem, 8vw, 1.55rem); padding: 10px 14px; }
  .entry-gate-core { width: min(92vw, 360px); padding: 32px 22px; }
  .terminal-body, .final-terminal-body, .workflow-console-body { padding-left: 18px; padding-right: 18px; }
  .back-to-top { right: 14px; bottom: 62px; }
}

/* ========================
   MOBILE SERVICE/PROJECT GRID FIX v55
   ======================== */
@media (max-width: 980px) {
  html,
  body {
    overflow-x: clip !important;
    position: relative;
  }

  #services,
  #projects,
  #workflow,
  #about,
  #techstack,
  #contact {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  .services-inner,
  .projects-inner,
  .workflow-inner,
  .about-inner,
  .contact-inner,
  .techstack-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
  }

  .services-grid,
  .projects-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  .service-card,
  .service-card.service-wide,
  .project-card,
  .project-featured {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none;
  }

  .project-featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .service-card {
    min-height: auto !important;
    padding: 22px 18px 22px !important;
  }

  .service-head { margin-bottom: 18px !important; }
  .service-icon { width: 54px !important; height: 54px !important; border-radius: 14px !important; }
  .service-title { font-size: 1rem !important; line-height: 1.35 !important; }
  .service-desc { min-height: 0 !important; font-size: 0.86rem !important; line-height: 1.7 !important; }
  .service-terminal {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.55 !important;
  }

  .services-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .services-flow em {
    transform: none !important;
    text-align: center !important;
  }

  .project-preview,
  .project-preview-large,
  .featured-visual,
  .project-visual {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .service-card { padding-left: 16px !important; padding-right: 16px !important; }
  .service-tags { gap: 7px !important; }
  .service-tags span { font-size: 0.56rem !important; padding: 6px 8px !important; }
}

/* ========================
   MOBILE TECH STACK / EARTH FIX v56
   ======================== */
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #techstack,
  .tech-earth-section,
  .techstack-inner,
  .earth-showcase,
  .earth-stage,
  .tech-grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #techstack {
    padding-top: 58px !important;
    padding-bottom: 64px !important;
  }

  .tech-earth-title {
    margin-bottom: 22px !important;
    text-align: center !important;
  }

  .earth-showcase {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .earth-info-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .earth-stage {
    position: relative !important;
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    margin: 6px auto 18px !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  .earth-stage::before {
    left: 50% !important;
    top: 48% !important;
    width: 430px !important;
    max-width: 115vw !important;
    height: 285px !important;
    opacity: 0.72 !important;
    transform: translate(-50%, -50%) !important;
  }

  .earth-stage::after {
    display: none !important;
  }

  .earth-globe {
    --earth-size: min(58vw, 240px) !important;
    left: 50% !important;
    top: 43% !important;
    width: var(--earth-size) !important;
    height: var(--earth-size) !important;
    transform: translate(-50%, -50%) !important;
  }

  .real-earth-canvas {
    inset: -7% !important;
    width: 114% !important;
    height: 114% !important;
  }

  .earth-atmosphere {
    inset: -14% !important;
    filter: blur(5px) !important;
  }

  .earth-orbit {
    left: 50% !important;
    top: 43% !important;
  }

  .orbit-a {
    width: min(78vw, 282px) !important;
    height: 78px !important;
  }

  .orbit-b {
    width: min(88vw, 328px) !important;
    height: 118px !important;
  }

  .orbit-c {
    width: min(98vw, 374px) !important;
    height: 154px !important;
  }

  .earth-base {
    left: 50% !important;
    top: calc(43% + 136px) !important;
    width: min(70vw, 260px) !important;
    height: 64px !important;
  }

  .earth-base::before {
    display: none !important;
  }

  .tech-orb {
    display: none !important;
  }

  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 6px auto 0 !important;
    width: 100% !important;
    padding: 0 4px !important;
  }

  .tech-pill {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .earth-stage {
    height: 322px !important;
    min-height: 322px !important;
  }

  .earth-globe {
    --earth-size: min(60vw, 218px) !important;
  }

  .earth-base {
    top: calc(43% + 124px) !important;
    width: min(72vw, 235px) !important;
  }

  .orbit-a { width: min(76vw, 250px) !important; height: 70px !important; }
  .orbit-b { width: min(88vw, 292px) !important; height: 104px !important; }
  .orbit-c { width: min(98vw, 335px) !important; height: 136px !important; }
}

/* ========================
   MOBILE STACK WIDTH FIX v57
   ======================== */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  #techstack,
  .techstack-inner,
  .earth-showcase,
  .earth-info-panel,
  .earth-stats,
  .earth-stage,
  .tech-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #techstack {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .earth-info-panel {
    align-items: stretch !important;
    text-align: center !important;
  }

  .earth-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .earth-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: min(520px, calc(100vw - 36px)) !important;
    margin: 0 auto 18px !important;
    border-right: 1px solid rgba(0,245,255,0.18) !important;
  }

  .earth-stats div {
    min-width: 0 !important;
    padding: 18px 8px !important;
    border-right: 1px solid rgba(0,245,255,0.14) !important;
  }

  .earth-stats div:nth-child(2),
  .earth-stats div:nth-child(4) {
    border-right: 0 !important;
  }

  .earth-stats div:nth-child(1),
  .earth-stats div:nth-child(2) {
    border-bottom: 1px solid rgba(0,245,255,0.14) !important;
  }

  .earth-stats b {
    font-size: clamp(1.35rem, 8vw, 2.05rem) !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
  }

  .earth-stats span {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
  }

  .earth-stage {
    height: 390px !important;
    min-height: 390px !important;
    margin: 6px auto 18px !important;
    overflow: hidden !important;
  }

  .earth-stage::after {
    display: none !important;
  }

  .earth-globe {
    --earth-size: min(64vw, 300px) !important;
    left: 50% !important;
    top: 43% !important;
    width: var(--earth-size) !important;
    height: var(--earth-size) !important;
    transform: translate(-50%, -50%) !important;
  }

  .real-earth-canvas {
    inset: -7% !important;
    width: 114% !important;
    height: 114% !important;
  }

  .earth-orbit {
    left: 50% !important;
    top: 43% !important;
  }

  .orbit-a {
    width: min(78vw, 320px) !important;
    height: 86px !important;
  }

  .orbit-b {
    width: min(88vw, 370px) !important;
    height: 126px !important;
  }

  .orbit-c {
    width: min(96vw, 420px) !important;
    height: 160px !important;
  }

  .earth-base {
    top: calc(43% + 152px) !important;
    width: min(74vw, 292px) !important;
    height: 70px !important;
  }

  .tech-orb {
    display: none !important;
  }

  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
  }

  .tech-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 10px 7px !important;
    font-size: clamp(0.58rem, 2.6vw, 0.72rem) !important;
    letter-spacing: 0.07em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .back-to-top {
    right: 14px !important;
    bottom: 78px !important;
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 430px) {
  #techstack {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .earth-stage {
    height: 348px !important;
    min-height: 348px !important;
  }

  .earth-globe {
    --earth-size: min(62vw, 245px) !important;
  }

  .earth-base {
    top: calc(43% + 132px) !important;
    width: min(76vw, 255px) !important;
  }

  .orbit-a { width: min(78vw, 280px) !important; height: 76px !important; }
  .orbit-b { width: min(88vw, 318px) !important; height: 112px !important; }
  .orbit-c { width: min(96vw, 360px) !important; height: 146px !important; }

  .earth-stats {
    max-width: calc(100vw - 28px) !important;
  }

  .tech-grid {
    gap: 9px !important;
  }

  .tech-pill {
    padding: 9px 6px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.055em !important;
  }
}


/* ========================
   MOBILE ORBIT ICONS VISIBLE FIX v58
   ======================== */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  .earth-stage {
    height: 410px !important;
    min-height: 410px !important;
    overflow: hidden !important;
  }

  .earth-globe {
    --earth-size: min(58vw, 235px) !important;
    top: 43% !important;
  }

  .earth-orbit {
    left: 50% !important;
    top: 43% !important;
    opacity: 0.68 !important;
  }

  .orbit-a { width: min(70vw, 242px) !important; height: 72px !important; }
  .orbit-b { width: min(82vw, 300px) !important; height: 108px !important; }
  .orbit-c { width: min(92vw, 352px) !important; height: 148px !important; }

  .earth-base {
    top: calc(43% + 130px) !important;
    width: min(72vw, 270px) !important;
    height: 62px !important;
  }

  .tech-orb {
    display: flex !important;
    width: 52px !important;
    min-height: 52px !important;
    gap: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  .tech-orb img {
    width: 40px !important;
    height: 40px !important;
    padding: 7px !important;
    border-width: 1px !important;
    box-shadow: 0 0 18px rgba(0,245,255,0.48), inset 0 0 14px rgba(0,245,255,0.12) !important;
  }

  .tech-orb small {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .earth-stage {
    height: 386px !important;
    min-height: 386px !important;
  }

  .earth-globe {
    --earth-size: min(58vw, 222px) !important;
  }

  .orbit-a { width: min(68vw, 228px) !important; height: 66px !important; }
  .orbit-b { width: min(80vw, 286px) !important; height: 100px !important; }
  .orbit-c { width: min(91vw, 330px) !important; height: 138px !important; }

  .earth-base {
    top: calc(43% + 122px) !important;
    width: min(72vw, 250px) !important;
  }

  .tech-orb {
    width: 46px !important;
    min-height: 46px !important;
  }

  .tech-orb img {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }
}


/* ========================
   PROJECT PREVIEW 3D ANIMATION UPGRADE
   ======================== */
.project-preview {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  isolation: isolate;
}
.project-preview-bg {
  --pv-rx: 0deg;
  --pv-ry: 0deg;
  --pv-zoom: 1;
  --pv-glow: 0.32;
  transform-style: preserve-3d;
  will-change: transform, filter;
  transform: rotateX(var(--pv-rx)) rotateY(var(--pv-ry)) scale(var(--pv-zoom)) translateZ(0);
}
.project-card:hover .project-preview-bg {
  transform: rotateX(var(--pv-rx)) rotateY(var(--pv-ry)) scale(1.04) translateZ(0);
  filter: saturate(1.2) brightness(1.05);
}
.project-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,245,255,0.10), transparent 62%);
  opacity: var(--pv-glow);
  pointer-events: none;
  z-index: 1;
}
.project-preview::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,245,255,0.18), transparent 70%);
  filter: blur(12px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}
.project-hud,
.dashboard-mock,
.login-mock,
.planet-mock,
.automation-mock,
.analytics-mock {
  transform-style: preserve-3d;
  will-change: transform;
}
.project-hud { animation: projectHudFloat 6.6s ease-in-out infinite; }
.hud-top { transform: translateZ(34px); }
.bot-radar {
  transform: translateZ(38px);
  animation: radarBloom 4.2s ease-in-out infinite;
}
.bot-radar i:nth-child(1) { transform: translateZ(8px); }
.bot-radar i:nth-child(2) { transform: translateZ(18px); }
.bot-radar i:nth-child(3) { transform: translateZ(30px); }
.bot-radar em { box-shadow: 0 0 22px rgba(0,245,255,0.45); }
.terminal-mini {
  transform: translateZ(22px) rotateX(8deg);
  box-shadow: 0 14px 32px rgba(0,0,0,0.34), inset 0 0 12px rgba(0,245,255,0.05);
}
.terminal-mini p {
  animation: terminalLineBlink 3.8s ease-in-out infinite;
}
.terminal-mini p:nth-child(2) { animation-delay: .25s; }
.terminal-mini p:nth-child(3) { animation-delay: .55s; }

.dashboard-mock {
  transform: rotateX(17deg) rotateY(-14deg) translateZ(34px);
  animation: dashboardTilt 7s ease-in-out infinite;
}
.dash-sidebar {
  transform: translateZ(26px);
  box-shadow: 0 0 28px rgba(0,245,255,0.18);
}
.dash-main { transform-style: preserve-3d; }
.dash-main i {
  transform-origin: bottom center;
  transform: translateZ(18px);
  box-shadow: 0 0 26px rgba(0,245,255,0.12);
  animation: dashboardBarPulse 3.8s ease-in-out infinite;
}
.dash-main i:nth-child(2) { animation-delay: .35s; }
.dash-main i:nth-child(3) { animation-delay: .7s; }
.dash-main span {
  transform: translateZ(14px);
  position: relative;
  overflow: hidden;
}
.dash-main span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.75), transparent);
  transform: translateX(-100%);
  animation: projectDataSweep 2.8s linear infinite;
}

.login-mock {
  transform: rotateX(16deg) rotateY(-13deg) translateZ(30px);
  animation: loginCardFloat 6.2s ease-in-out infinite;
  overflow: hidden;
}
.login-mock::after {
  content: '';
  position: absolute;
  left: -30%;
  top: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(0,245,255,0.22), transparent);
  transform: skewX(-18deg);
  animation: loginSweep 3.8s ease-in-out infinite;
}
.login-mock span,
.login-mock b,
.login-mock i,
.login-mock em {
  position: relative;
  z-index: 2;
  transform: translateZ(16px);
}
.login-mock b,
.login-mock i {
  animation: loginFieldGlow 3s ease-in-out infinite;
}
.login-mock i { animation-delay: .35s; }
.login-mock em {
  box-shadow: 0 0 20px rgba(0,245,255,0.20);
  animation: loginButtonPulse 2.8s ease-in-out infinite;
}

.planet-mock {
  transform: rotateX(18deg) rotateY(-15deg) translateZ(24px);
  animation: projectPlanetFloat 8s ease-in-out infinite;
}
.planet-mock i {
  transform: translateZ(34px);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.10), 0 0 30px rgba(0,245,255,0.22);
  animation: planetCorePulse 4.2s ease-in-out infinite;
}
.planet-mock span {
  transform-style: preserve-3d;
  box-shadow: 0 0 18px rgba(0,245,255,0.14);
  animation: orbitRingRotateA 7s linear infinite;
}
.planet-mock span:nth-child(3) { animation-name: orbitRingRotateB; animation-duration: 9s; }
.planet-mock span:nth-child(4) { animation-name: orbitRingRotateC; animation-duration: 11s; }

.automation-mock {
  transform: rotateX(16deg) rotateY(14deg) translateZ(28px);
  animation: automationFloat 6.8s ease-in-out infinite;
}
.automation-mock i {
  transform: translateZ(18px);
  animation: automationNodePulse 3.6s ease-in-out infinite;
}
.automation-mock i:nth-child(2) { animation-delay: .45s; }
.automation-mock i:nth-child(3) { animation-delay: .9s; }
.automation-mock span {
  transform: translateZ(10px);
  overflow: hidden;
}
.automation-mock span::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 18px;
  height: 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 14px rgba(0,245,255,0.75);
  animation: automationPacket 2.6s linear infinite;
}

.analytics-mock {
  transform: rotateX(16deg) rotateY(-12deg) translateZ(30px);
  animation: analyticsTilt 7.4s ease-in-out infinite;
}
.analytics-mock i {
  transform-origin: bottom center;
  box-shadow: 0 0 26px rgba(0,245,255,0.10);
  animation: analyticsBarPulse 4.2s ease-in-out infinite;
}
.analytics-mock i:nth-child(2){ animation-delay: .25s; }
.analytics-mock i:nth-child(3){ animation-delay: .5s; }
.analytics-mock i:nth-child(4){ animation-delay: .75s; }
.analytics-mock span {
  overflow: hidden;
  transform: translateZ(16px);
}
.analytics-mock span::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -28px;
  height: 70px;
  border-top: 2px solid rgba(0,245,255,0.65);
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: skewX(-28deg);
  filter: drop-shadow(0 0 12px rgba(0,245,255,0.35));
  animation: analyticsLineMove 4s ease-in-out infinite;
}

@keyframes projectHudFloat {
  0%,100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-8px) rotateX(4deg); }
}
@keyframes radarBloom {
  0%,100% { transform: translateZ(38px) scale(1); box-shadow: inset 0 0 30px rgba(0,245,255,0.08), 0 0 24px rgba(0,245,255,0.14); }
  50% { transform: translateZ(42px) scale(1.03); box-shadow: inset 0 0 32px rgba(0,245,255,0.14), 0 0 34px rgba(0,245,255,0.22); }
}
@keyframes terminalLineBlink {
  0%,100% { opacity: .74; transform: translateZ(0); }
  50% { opacity: 1; transform: translateZ(6px); }
}
@keyframes dashboardTilt {
  0%,100% { transform: rotateX(17deg) rotateY(-14deg) translateZ(34px) translateY(0); }
  50% { transform: rotateX(12deg) rotateY(-8deg) translateZ(38px) translateY(-8px); }
}
@keyframes dashboardBarPulse {
  0%,100% { transform: translateZ(18px) scaleY(.88); filter: brightness(.95); }
  50% { transform: translateZ(28px) scaleY(1.12); filter: brightness(1.18); }
}
@keyframes projectDataSweep {
  from { transform: translateX(-105%); }
  to { transform: translateX(105%); }
}
@keyframes loginCardFloat {
  0%,100% { transform: rotateX(16deg) rotateY(-13deg) translateZ(30px) translateY(0); }
  50% { transform: rotateX(11deg) rotateY(-7deg) translateZ(36px) translateY(-8px); }
}
@keyframes loginSweep {
  0% { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
  18%,72% { opacity: .9; }
  100% { transform: translateX(310%) skewX(-18deg); opacity: 0; }
}
@keyframes loginFieldGlow {
  0%,100% { box-shadow: inset 0 0 0 rgba(0,245,255,0); opacity: .9; }
  50% { box-shadow: inset 0 0 12px rgba(0,245,255,0.08), 0 0 10px rgba(0,245,255,0.08); opacity: 1; }
}
@keyframes loginButtonPulse {
  0%,100% { transform: translateZ(16px) scale(1); }
  50% { transform: translateZ(26px) scale(1.04); box-shadow: 0 0 24px rgba(0,245,255,0.22); }
}
@keyframes projectPlanetFloat {
  0%,100% { transform: rotateX(18deg) rotateY(-15deg) translateZ(24px) translateY(0); }
  50% { transform: rotateX(10deg) rotateY(-5deg) translateZ(30px) translateY(-8px); }
}
@keyframes planetCorePulse {
  0%,100% { transform: translateZ(34px) scale(1); filter: brightness(1); }
  50% { transform: translateZ(42px) scale(1.05); filter: brightness(1.14); }
}
@keyframes orbitRingRotateA {
  from { transform: translate(-50%,-50%) rotate(15deg) rotateZ(0deg); }
  to { transform: translate(-50%,-50%) rotate(15deg) rotateZ(360deg); }
}
@keyframes orbitRingRotateB {
  from { transform: translate(-50%,-50%) rotate(-18deg) rotateZ(0deg); }
  to { transform: translate(-50%,-50%) rotate(-18deg) rotateZ(-360deg); }
}
@keyframes orbitRingRotateC {
  from { transform: translate(-50%,-50%) rotate(35deg) rotateZ(0deg); }
  to { transform: translate(-50%,-50%) rotate(35deg) rotateZ(360deg); }
}
@keyframes automationFloat {
  0%,100% { transform: rotateX(16deg) rotateY(14deg) translateZ(28px) translateY(0); }
  50% { transform: rotateX(10deg) rotateY(8deg) translateZ(34px) translateY(-8px); }
}
@keyframes automationNodePulse {
  0%,100% { transform: translateZ(18px) scale(1); }
  50% { transform: translateZ(28px) scale(1.08); box-shadow: 0 0 30px rgba(0,245,255,0.22); }
}
@keyframes automationPacket {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 18px); opacity: 0; }
}
@keyframes analyticsTilt {
  0%,100% { transform: rotateX(16deg) rotateY(-12deg) translateZ(30px) translateY(0); }
  50% { transform: rotateX(10deg) rotateY(-6deg) translateZ(36px) translateY(-7px); }
}
@keyframes analyticsBarPulse {
  0%,100% { transform: scaleY(.82) translateZ(0); filter: brightness(.95); }
  50% { transform: scaleY(1.08) translateZ(12px); filter: brightness(1.18); }
}
@keyframes analyticsLineMove {
  0%,100% { transform: translateY(0) skewX(-28deg); opacity: .45; }
  50% { transform: translateY(-10px) skewX(-28deg); opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
  .project-preview { perspective: 900px; }
  .project-preview-bg,
  .project-card:hover .project-preview-bg {
    transform: scale(1.01) translateZ(0) !important;
  }
  .project-overlay { opacity: 1; background: linear-gradient(to top, rgba(2,4,8,0.88), rgba(2,4,8,0.10) 58%, transparent); align-items: flex-end; padding-bottom: 18px; }
  .project-preview::after { opacity: 0.45; }
}


/* ========================
   HERO PREMIUM LIVE CONSOLE + HUD
   ======================== */
.hero-console {
  width: min(100%, 470px);
  margin-top: 2px;
  background: linear-gradient(180deg, rgba(0,18,28,0.62), rgba(0,7,14,0.82));
  border: 1px solid rgba(0,245,255,0.18);
  box-shadow: inset 0 0 28px rgba(0,245,255,0.045), 0 0 28px rgba(0,245,255,0.065);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  opacity: 0;
  transform: translateY(20px);
  overflow: hidden;
  position: relative;
}
.hero-console::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(0,245,255,0.10), transparent),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,245,255,0.035) 9px 10px);
  transform: translateX(-100%);
  animation: heroConsoleSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}
.hero-console-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(0,245,255,0.12);
  font-family: var(--font-code);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(232,244,248,0.62);
  text-transform: uppercase;
}
.hero-console-head span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(0,245,255,0.38);
  animation: heroConsoleDot 1.8s ease-in-out infinite;
}
.hero-console-head b {
  color: var(--cyan);
  font-weight: 700;
}
.hero-console-head em {
  margin-left: auto;
  color: #80ffdf;
  font-style: normal;
}
.hero-console-body {
  padding: 13px 15px 15px;
  font-family: var(--font-code);
  font-size: 0.68rem;
  line-height: 1.8;
  color: rgba(232,244,248,0.72);
  letter-spacing: 0.05em;
}
.hero-console-body p { margin: 0; }
.hero-console-body strong {
  color: var(--cyan);
  margin-right: 5px;
  font-weight: 700;
}
.hero-console-body i {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -2px;
  background: rgba(0,245,255,0.76);
  box-shadow: 0 0 10px rgba(0,245,255,0.7);
  animation: heroCursorBlink 0.82s steps(2,end) infinite;
}
.hero-photo-frame::before {
  content: '';
  position: absolute;
  left: -16%;
  right: -16%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.75), transparent);
  box-shadow: 0 0 18px rgba(0,245,255,0.38);
  z-index: 5;
  opacity: 0.54;
  animation: heroPhotoScan 4.5s ease-in-out infinite;
  pointer-events: none;
}
.hero-photo-frame::after {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(0,245,255,0.16) 16%, transparent 20% 54%, rgba(123,47,255,0.13) 58%, transparent 64% 100%);
  filter: blur(0.4px) drop-shadow(0 0 18px rgba(0,245,255,0.22));
  opacity: 0.65;
  z-index: 0;
  animation: heroHudRotate 22s linear infinite;
  pointer-events: none;
}
.hero-hud-card {
  position: absolute;
  z-index: 12;
  min-width: 74px;
  padding: 10px 12px;
  background: rgba(2,8,16,0.78);
  border: 1px solid rgba(0,245,255,0.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(0,245,255,0.11), inset 0 0 18px rgba(0,245,255,0.045);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-family: var(--font-code);
  animation: heroHudFloat 5.8s ease-in-out infinite;
}
.hero-hud-card span {
  display: block;
  color: rgba(232,244,248,0.52);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-hud-card b {
  display: block;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin-top: 3px;
  text-shadow: 0 0 14px rgba(0,245,255,0.35);
}
.hero-hud-1 { top: 12%; left: -46px; animation-delay: 0s; }
.hero-hud-2 { top: 36%; right: -54px; animation-delay: -1.6s; }
.hero-hud-3 { bottom: 18%; left: -38px; animation-delay: -3s; }

@keyframes heroConsoleSweep {
  0%,42% { transform: translateX(-110%); opacity: 0; }
  52%,72% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}
@keyframes heroConsoleDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.55); opacity: .55; }
}
@keyframes heroCursorBlink { 0%,48%{opacity:1;} 49%,100%{opacity:0;} }
@keyframes heroPhotoScan {
  0%,100% { transform: translateY(-185px); opacity: 0; }
  45%,55% { opacity: .62; }
  50% { transform: translateY(185px); }
}
@keyframes heroHudRotate { to { transform: rotate(360deg); } }
@keyframes heroHudFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 980px) {
  .hero-console {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-hud-card {
    min-width: 62px;
    padding: 8px 10px;
  }
  .hero-hud-card span { font-size: 0.48rem; }
  .hero-hud-card b { font-size: 0.78rem; }
  .hero-hud-1 { top: 8%; left: 0; }
  .hero-hud-2 { top: 34%; right: 0; }
  .hero-hud-3 { bottom: 14%; left: 4px; }
}
@media (max-width: 520px) {
  .hero-console {
    width: 100%;
    max-width: 360px;
  }
  .hero-console-body {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }
  .hero-photo-frame::before,
  .hero-photo-frame::after {
    opacity: 0.36;
  }
  .hero-hud-card {
    transform: scale(0.86);
  }
  .hero-hud-1 { left: 2px; }
  .hero-hud-2 { right: 2px; }
  .hero-hud-3 { left: 8px; }
}


/* ========================
   HERO VIDEO BACKGROUND — CLEAN RESTORE
   ======================== */
#hero.hero-video-mode {
  background:
    radial-gradient(circle at 18% 28%, rgba(0,245,255,0.10), transparent 34%),
    radial-gradient(circle at 82% 58%, rgba(123,47,255,0.10), transparent 36%),
    linear-gradient(135deg, #02040a 0%, #030815 48%, #02030a 100%);
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.08) brightness(0.72);
  transition: opacity 0.9s ease;
  pointer-events: none;
}
#hero.hero-video-ready .hero-bg-video { opacity: 0.46; }
#hero.hero-video-fallback .hero-bg-video { opacity: 0; }
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,4,10,0.96) 0%, rgba(2,4,10,0.68) 42%, rgba(2,4,10,0.72) 100%),
    radial-gradient(circle at 30% 45%, rgba(0,245,255,0.10), transparent 38%),
    radial-gradient(circle at 70% 65%, rgba(123,47,255,0.10), transparent 44%);
  pointer-events: none;
}
#hero.hero-video-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(0,245,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.42;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.18));
  pointer-events: none;
}
#hero.hero-video-mode::after {
  content: '';
  position: absolute;
  left: -25%;
  right: -25%;
  top: 58%;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.50), rgba(123,47,255,0.32), transparent);
  box-shadow: 0 0 28px rgba(0,245,255,0.24);
  animation: heroVideoScan 5.5s ease-in-out infinite;
  pointer-events: none;
}
#hero.hero-video-mode #hero-canvas { display: none !important; }
#hero.hero-video-mode .hero-grid { opacity: 0.26; z-index: 2; }
#hero.hero-video-mode .hero-rays { opacity: 0.30; z-index: 3; }
#hero.hero-video-mode .hero-content,
#hero.hero-video-mode .scroll-indicator { position: relative; z-index: 5; }
#hero.hero-video-mode .hero-left,
#hero.hero-video-mode .hero-right { filter: drop-shadow(0 18px 40px rgba(0,0,0,0.34)); }
#hero.hero-video-mode .hero-photo-frame::before { opacity: 0.72; }
body.reduced-video #hero.hero-video-mode .hero-bg-video { display: none; }
body.reduced-video #hero.hero-video-mode {
  background:
    radial-gradient(circle at 30% 40%, rgba(0,245,255,0.12), transparent 36%),
    radial-gradient(circle at 78% 55%, rgba(123,47,255,0.12), transparent 44%),
    linear-gradient(135deg, #02040a, #031024, #02030a);
}
@keyframes heroVideoScan {
  0%,100% { transform: translateY(-130px); opacity: 0; }
  35%,65% { opacity: 1; }
  50% { transform: translateY(130px); }
}
@media (max-width: 980px) {
  #hero.hero-video-ready .hero-bg-video { opacity: 0.40; transform: scale(1.13); }
  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(2,4,10,0.92), rgba(2,4,10,0.70) 48%, rgba(2,4,10,0.94)),
      radial-gradient(circle at 50% 28%, rgba(0,245,255,0.10), transparent 42%);
  }
  #hero.hero-video-mode::before { background-size: 44px 44px; opacity: 0.48; }
}
@media (max-width: 560px) {
  #hero.hero-video-ready .hero-bg-video { opacity: 0.36; transform: scale(1.18); }
  #hero.hero-video-mode .hero-rays { opacity: 0.20; }
}


/* Stack stage 3D HUD upgrade */
.earth-stage {
  --stack-tilt-x: 0deg;
  --stack-tilt-y: 0deg;
  --stack-glow-x: 52%;
  --stack-glow-y: 42%;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.earth-stage::before {
  transform: translate(-50%, -50%) rotateX(var(--stack-tilt-x)) rotateY(calc(var(--stack-tilt-y) * -0.4));
  background: radial-gradient(ellipse at var(--stack-glow-x) var(--stack-glow-y), rgba(0,245,255,0.16) 0%, rgba(0,128,255,0.06) 30%, transparent 70%);
}
.earth-stage::after {
  transform: rotateX(calc(var(--stack-tilt-x) * 0.5)) rotateY(calc(var(--stack-tilt-y) * 0.7));
}
.earth-globe {
  transform: translate(-50%, -50%) rotateX(var(--stack-tilt-x)) rotateY(var(--stack-tilt-y));
  transform-style: preserve-3d;
}
.real-earth-canvas { transform: translateZ(22px); }
.earth-base { transform: translateX(-50%) rotateX(calc(var(--stack-tilt-x) * -0.4)); }
.earth-orbit { transform: translate(-50%, -50%) rotate(var(--rot)) rotateY(calc(var(--stack-tilt-y) * 0.45)); }
.stack-hud {
  position: absolute; width: 220px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(4,16,34,0.92), rgba(2,10,20,0.82));
  border: 1px solid rgba(0,245,255,0.22);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 28px rgba(0,245,255,0.08);
  backdrop-filter: blur(10px);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  z-index: 7; pointer-events: none; transform-style: preserve-3d;
  animation: stackHudFloat 6s ease-in-out infinite;
}
.stack-hud::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0 35%, rgba(0,245,255,0.16) 50%, transparent 65%);
  transform: translateX(-130%); animation: stackHudSweep 5s linear infinite; opacity: .5;
}
.stack-hud-left { left: 2%; top: 30%; transform: translateZ(32px) rotateY(14deg); }
.stack-hud-right { right: 3%; top: 20%; transform: translateZ(40px) rotateY(-14deg); animation-name: stackHudFloatRight; animation-delay: -2s; }
.stack-hud-label { font-family: var(--font-code); font-size: .68rem; letter-spacing: .26em; color: rgba(122,224,255,0.76); margin-bottom: 10px; }
.stack-hud-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin-bottom: 12px; }
.stack-hud-line { position: relative; height: 8px; border: 1px solid rgba(0,245,255,0.18); background: rgba(255,255,255,0.03); overflow: hidden; margin-bottom: 12px; }
.stack-hud-line i { display: block; height: 100%; background: linear-gradient(90deg, #7b2fff, #00f5ff); box-shadow: 0 0 18px rgba(0,245,255,0.36); animation: stackMeterPulse 3s ease-in-out infinite; }
.stack-hud-mini { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-code); font-size: .72rem; color: var(--text-dim); padding-top: 8px; border-top: 1px solid rgba(0,245,255,0.08); margin-top: 8px; }
.stack-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stack-chip-row span { padding: 6px 10px; border: 1px solid rgba(0,245,255,0.18); background: rgba(0,245,255,0.06); color: var(--text-dim); font-family: var(--font-code); font-size: .72rem; }
.stack-radar { position: relative; width: 96px; height: 96px; margin: 8px auto 4px; border-radius: 50%; border: 1px solid rgba(0,245,255,0.22); box-shadow: inset 0 0 22px rgba(0,245,255,0.08), 0 0 18px rgba(0,245,255,0.10); }
.stack-radar i { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(0,245,255,0.18); }
.stack-radar i:nth-child(2) { inset: 28px; }
.stack-radar i:nth-child(3) { inset: 44px; }
.stack-radar b { position: absolute; width: 10px; height: 10px; left: 50%; top: 50%; margin-left: -5px; margin-top: -5px; border-radius: 50%; background: #00f5ff; box-shadow: 0 0 20px rgba(0,245,255,0.8); animation: stackRadarPing 2.6s ease-in-out infinite; }
.stack-energy { position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(0,245,255,0.16); filter: blur(.2px) drop-shadow(0 0 12px rgba(0,245,255,0.14)); opacity: .8; pointer-events: none; z-index: 2; }
.stack-energy-a { left: 58%; top: 17%; background: radial-gradient(circle at center, rgba(0,245,255,0.12), transparent 60%); animation: stackEnergyFloatA 7.5s ease-in-out infinite; }
.stack-energy-b { left: 75%; top: 55%; width: 130px; height: 130px; background: radial-gradient(circle at center, rgba(123,47,255,0.12), transparent 62%); animation: stackEnergyFloatB 8.5s ease-in-out infinite; }
.stack-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stack-particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(0,245,255,0.95); box-shadow: 0 0 12px rgba(0,245,255,0.75); animation: stackParticleFloat 6s linear infinite; }
.stack-particles span:nth-child(1){left:12%; top:18%; animation-delay:0s;}
.stack-particles span:nth-child(2){left:22%; top:58%; width:3px; height:3px; animation-delay:-1s;}
.stack-particles span:nth-child(3){left:33%; top:28%; width:2px; height:2px; animation-delay:-2.4s;}
.stack-particles span:nth-child(4){left:47%; top:12%; animation-delay:-3.2s;}
.stack-particles span:nth-child(5){left:62%; top:24%; width:5px; height:5px; animation-delay:-1.8s;}
.stack-particles span:nth-child(6){left:72%; top:66%; width:3px; height:3px; animation-delay:-4s;}
.stack-particles span:nth-child(7){left:86%; top:20%; width:2px; height:2px; animation-delay:-.8s;}
.stack-particles span:nth-child(8){left:91%; top:48%; animation-delay:-2.8s;}
.stack-particles span:nth-child(9){left:18%; top:82%; width:2px; height:2px; animation-delay:-5s;}
.stack-particles span:nth-child(10){left:38%; top:74%; width:3px; height:3px; animation-delay:-2s;}
.stack-particles span:nth-child(11){left:58%; top:88%; width:2px; height:2px; animation-delay:-3.4s;}
.stack-particles span:nth-child(12){left:80%; top:80%; width:3px; height:3px; animation-delay:-1.3s;}
.tech-pill { box-shadow: 0 8px 18px rgba(0,0,0,0.16); transform-style: preserve-3d; }
.tech-pill:hover { transform: translateY(-4px) scale(1.05) rotateX(8deg); }
@keyframes stackHudFloat { 0%,100% { transform: translateZ(34px) rotateY(14deg) translateY(0); } 50% { transform: translateZ(50px) rotateY(8deg) translateY(-10px); } }
@keyframes stackHudFloatRight { 0%,100% { transform: translateZ(40px) rotateY(-14deg) translateY(0); } 50% { transform: translateZ(52px) rotateY(-8deg) translateY(-12px); } }
@keyframes stackHudSweep { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
@keyframes stackMeterPulse { 0%,100% { opacity: .88; filter: saturate(1); } 50% { opacity: 1; filter: saturate(1.3); } }
@keyframes stackRadarPing { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes stackEnergyFloatA { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .55; } 50% { transform: translate3d(12px,-14px,0) scale(1.1); opacity: .9; } }
@keyframes stackEnergyFloatB { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .45; } 50% { transform: translate3d(-10px,12px,0) scale(1.18); opacity: .75; } }
@keyframes stackParticleFloat { 0% { transform: translate3d(0,0,0) scale(.85); opacity: 0; } 20% { opacity: .9; } 60% { transform: translate3d(12px,-18px,0) scale(1.15); opacity: 1; } 100% { transform: translate3d(-8px,-36px,0) scale(.7); opacity: 0; } }
@media (max-width: 1100px) {
  .stack-hud { width: 180px; padding: 14px; }
  .stack-hud-left { left: 1%; top: 34%; }
  .stack-hud-right { right: 1%; top: 22%; }
}
@media (max-width: 980px) {
  .stack-hud, .stack-energy { display: none; }
  .earth-stage { --stack-tilt-x: 0deg !important; --stack-tilt-y: 0deg !important; }
  .stack-particles span { opacity: .55; }
}