:root {
  --teal:    #00d2ff;
  --teal-dim:#0099cc;
  --gold:    #f5a623;
  --gold-dim:#c4821a;
  --bg:      #030e14;
  --bg2:     #061c1c;
  --bg3:     #0a2828;
  --white:   #ffffff;
  --muted:   rgba(255,255,255,0.55);
  --border:  rgba(0,210,255,0.18);
  --border-gold: rgba(245,166,35,0.25);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Exo 2', sans-serif;
  overflow-x: hidden;
  cursor: default;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 3px; }

/* ─── GLOBAL BG CIRCUIT ─── */
body::before {
  content:'';
  position: fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,210,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,210,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index:0;
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 5%;
  height: 68px;
  background: rgba(3,14,20,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: all .3s;
}
nav.scrolled {
  background: rgba(3,14,20,0.97);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.nav-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px; font-weight:900;
  letter-spacing: 2px;
  color: var(--white);
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.nav-logo span { color: var(--teal); }
.nav-logo-dot { color: var(--gold); }

.nav-links {
  display: flex; gap: 2px; list-style:none;
  margin-left: auto;
}
.nav-links a {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; letter-spacing:2px;
  color: rgba(255,255,255,0.9);
  text-decoration:none; text-transform:uppercase;
  padding: 8px 16px;
  transition: color .2s;
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:4px; left:16px; right:16px; height:1px;
  background: var(--teal); transform:scaleX(0); transition:transform .2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a:hover::after { transform:scaleX(1); }


.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:22px; height:2px; background:var(--teal); transition:.3s; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding: 100px 5% 80px;
  overflow:hidden;
}

.hero-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 40%, #0d3b3b 0%, #061c1c 45%, var(--bg) 75%);
  z-index:0;
}
.hero-glow1 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,200,220,0.1) 0%, transparent 70%);
  top:-150px; right:-100px; z-index:0;
}
.hero-glow2 {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,130,20,0.08) 0%, transparent 70%);
  bottom:0px; left:30%; z-index:0;
}

/* Animated rings — now behind brain image */
.hero-rings {
  position:absolute; right: -80px; top:50%; transform:translateY(-50%);
  width:700px; height:700px; z-index:1;
}
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(0,210,255,0.07);
  top:50%; left:50%;
}
.hero-ring:nth-child(1){ width:700px;height:700px;margin:-350px 0 0 -350px; animation:spin 30s linear infinite; }
.hero-ring:nth-child(2){ width:520px;height:520px;margin:-260px 0 0 -260px; border-color:rgba(245,166,35,0.06); animation:spin 20s linear infinite reverse; }
.hero-ring:nth-child(3){ width:360px;height:360px;margin:-180px 0 0 -180px; border-color:rgba(0,210,255,0.1); animation:spin 15s linear infinite; }
.hero-ring:nth-child(4){ width:220px;height:220px;margin:-110px 0 0 -110px; border-color:rgba(245,166,35,0.12); animation:spin 10s linear infinite reverse; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── AI BRAIN HERO IMAGE ── */
.hero-brain-wrap {
  position: absolute;
  right: 0px;
  top: 54.3%;
  transform: translateY(-50%);
  width: 800px;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatBrain 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.hero-brain-img {
    position: absolute;
    width: 745px;
    height: 745px;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 50%;
    opacity: 0;
    filter: saturate(0.8) hue-rotate(10deg) brightness(1.1);

    z-index: 2;
    transition: opacity 1.5s ease-in-out;
}
.hero-brain-img.active {
    opacity: 0.8;
}
.brain-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.brain-ring-1 {
  width: 750px;
  height: 750px;
  border: 1px solid rgba(245, 166, 35, 0.5);
  animation: ringPulse 3s ease-in-out infinite;
}
.brain-ring-2 {
  width: 760px;
  height: 760px;
  border: 1px solid rgba(0, 229, 100, 0.25);
  animation: ringPulse 3s ease-in-out infinite 0.5s;
}
.brain-ring-3 {
  display: none;
}
@keyframes floatBrain {
  0%,100% { transform: translateY(-50%) translateY(0px); }
  50%      { transform: translateY(-50%) translateY(-14px); }
}

.hero-content {
  position:relative; z-index:4;
  max-width:620px;
  padding: 36px 40px;
}

/* Corner brackets — cyan TL, orange BR */
.hero-corner {
  position:absolute;
  width:22px; height:22px;
  pointer-events:none; z-index:5;
}
.hero-corner-tl {
  top:0; left:0;
  border-top:2px solid #00d2ff;
  border-left:2px solid #00d2ff;
  /*box-shadow: -2px -2px 8px rgba(0,210,255,0.35);*/
}
.hero-corner-br {
  bottom:0; right:0;
  border-bottom:2px solid #f5a623;
  border-right:2px solid #f5a623;
  /*box-shadow: 2px 2px 8px rgba(245,166,35,0.35);*/
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(0,210,255,0.35);
  padding:6px 16px;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; color:var(--teal); letter-spacing:3px;
  background:rgba(0,210,255,0.05);
  margin-bottom:28px;
  animation: fadeUp .6s ease both;
}
.hero-badge::before { content:'▶'; font-size:8px; opacity:.7; }

.hero-pre {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:rgba(0,210,255,0.6);
  letter-spacing:5px; margin-bottom:14px;
  animation: fadeUp .6s .1s ease both;
}

.hero-title {
  font-family:'Orbitron',sans-serif;
  font-size: clamp(36px, 5vw, 68px);
  font-weight:900; line-height:.92;
  letter-spacing:-1px;
  animation: fadeUp .6s .2s ease both;
}
.hero-title .line1 { color:var(--teal); display:block; text-shadow:0 0 30px rgba(0,210,255,0.4); }
.hero-title .line2 { color:var(--gold); display:block; text-shadow:0 0 40px rgba(245,166,35,0.4); }
.hero-title .line3 {
  color:transparent;
  -webkit-text-stroke:2px var(--teal);
  display:block;
  filter:drop-shadow(0 0 12px rgba(0,210,255,0.4));
}

.hero-divider {
  display:flex; align-items:center; gap:12px;
  margin:24px 0;
  animation: fadeUp .6s .3s ease both;
}
.hdl { flex:0 0 60px; height:1px; background:linear-gradient(90deg,var(--teal),transparent); }
.hdd { color:var(--teal); font-size:10px; opacity:.7; }

.hero-sub {
  font-size:18px; font-weight:300;
  color:var(--muted); line-height:1.8;
  max-width:520px;
  animation: fadeUp .6s .4s ease both;
}
.hero-sub strong { color:var(--teal); font-weight:600; }

.hero-btns {
  display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;
  animation: fadeUp .6s .5s ease both;
}
.btn-primary {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 32px;
  background:var(--teal); color:var(--bg);
  border:none; cursor:pointer; text-decoration:none;
  transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { background:var(--gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,166,35,0.3); }
.btn-secondary {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 32px;
  background:transparent; color:var(--teal);
  border:1px solid var(--border); cursor:pointer; text-decoration:none;
  transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { border-color:var(--teal); background:rgba(0,210,255,0.06); transform:translateY(-2px); }

.hero-stats {
  display:flex; gap:40px; margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--border);
  animation: fadeUp .6s .6s ease both;
}
.stat-num {
  font-family:'Orbitron',sans-serif;
  font-size:28px; font-weight:900; color:#00c8ff;
  display:block; line-height:1;
  text-shadow: 0 0 8px #00c8ff, 0 0 20px rgba(0,200,255,0.5);
  animation: statGlow 2.5s ease-in-out infinite;
}
.stat-label {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:var(--muted);
  letter-spacing:2px; text-transform:uppercase;
  margin-top:6px; display:block;
}
@keyframes statGlow {
  0%,100% { text-shadow: 0 0 8px #00c8ff, 0 0 20px rgba(0,200,255,0.5); }
  50%     { text-shadow: 0 0 15px #00c8ff, 0 0 35px rgba(0,200,255,0.8), 0 0 60px rgba(0,200,255,0.3); }
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Scroll indicator */
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Share Tech Mono',monospace; font-size:9px;
  color:rgba(0,210,255,0.4); letter-spacing:3px; z-index:2;
  animation: float 2s ease-in-out infinite;
}
.scroll-arrow { width:1px; height:40px; background:linear-gradient(180deg,var(--teal),transparent); }
@keyframes float { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }

/* ═══════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════ */
section { position:relative; z-index:1; }

.section-inner { max-width:1200px; margin:0 auto; padding:100px 5%; }

.section-label {
  font-family:'Share Tech Mono',monospace;
  font-size:13px; letter-spacing:5px;
  color:var(--teal); text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}
.section-label::before { content:''; width:30px; height:1px; background:var(--teal); }

.section-title {
  font-family:'Orbitron',sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight:900; line-height:1.1;
  letter-spacing:-0.5px;
  margin-bottom:16px;
}
.section-title span { color:var(--gold); }

.section-sub {
  font-size:17px; font-weight:300;
  color:var(--muted); line-height:1.8;
  max-width:560px;
  margin-bottom:60px;
}

/* reveal animation */
.reveal {
  opacity:0; transform:translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
#services { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.svc-card {
  position:relative;
  padding: 36px 30px;
  background: rgba(0,210,255,0.03);
  border:1px solid var(--border);
  transition: all .3s;
  overflow:hidden;
  cursor:default;
  display:flex; flex-direction:column;
}
.svc-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  transform:scaleX(0); transition:transform .3s;
}
.svc-card:hover { background:rgba(0,210,255,0.07); border-color:rgba(0,210,255,0.35); transform:translateY(-4px); }
.svc-card:hover::before { transform:scaleX(1); }

.svc-num {
  font-family:'Orbitron',sans-serif;
  font-size:36px; font-weight:900;
  color:rgba(0,210,255,0.08);
  line-height:1; margin-bottom:20px;
}
.svc-icon-box {
  width:48px; height:48px;
  border:1px solid rgba(0,180,255,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:20px;
  background:rgba(0,180,255,0.07);
  box-shadow: 0 0 10px rgba(0,180,255,0.2);
  transition:.3s;
}
.svc-card:hover .svc-icon-box {
  border-color:rgba(0,200,255,0.7);
  background:rgba(0,180,255,0.15);
  box-shadow:0 0 20px rgba(0,180,255,0.35);
}
.svc-name {
  font-family:'Orbitron',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--white); letter-spacing:1px;
  margin-bottom:12px;
}
.svc-desc {
  font-size:15px; font-weight:300;
  color:var(--muted); line-height:1.7;
  flex:1;
}
.svc-tag {
  margin-top:20px;
  display:inline-block;
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:2px;
  color:var(--gold); border:1px solid var(--border-gold);
  padding:4px 10px; background:rgba(245,166,35,0.05);
}

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
#about { background: var(--bg); }

.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.about-visual {
  position:relative;
}
.about-box-main {
  border:1px solid var(--border);
  background:rgba(0,210,255,0.04);
  padding:40px;
  position:relative;
  z-index:1;
}
.about-box-main::before {
  content:'';
  position:absolute; top:-10px; left:-10px; right:10px; bottom:10px;
  border:1px solid var(--border-gold);
  z-index:-1;
}
.about-code {
  font-family:'Share Tech Mono',monospace;
  font-size:12px; line-height:2;
  color:rgba(0,210,255,0.6);
}
.about-code .kw { color:var(--gold); }
.about-code .str { color:var(--teal); }
.about-code .cm { color:rgba(255,255,255,0.2); }
.about-code .fn { color:#c792ea; }

.about-text {}
.about-points { display:flex; flex-direction:column; gap:20px; margin-top:40px; }
.about-point {
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.2);
  transition:.3s;
}
.about-point:hover { border-color:var(--teal); background:rgba(0,210,255,0.04); }
.ap-icon {
  width:36px; height:36px; flex-shrink:0;
  border:1px solid rgba(245,166,35,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--gold);
  background:rgba(245,166,35,0.08);
  box-shadow: 0 0 10px rgba(245,166,35,0.2);
}
.ap-title {
  font-family:'Rajdhani',sans-serif;
  font-size:14px; font-weight:700;
  color:var(--white); letter-spacing:1px;
  text-transform:uppercase; margin-bottom:4px;
}
.ap-desc { font-size:15px; font-weight:300; color:var(--muted); line-height:1.6; }

/* ═══════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════ */
#portfolio { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }

.port-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.port-card {
  position:relative; overflow:hidden;
  background:rgba(0,210,255,0.03);
  border:1px solid var(--border);
  transition:.3s; cursor:pointer;
  border-radius:2px;
}
.port-card:hover {
  border-color:rgba(0,210,255,0.4);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.port-img-wrap {
  position:relative; overflow:hidden;
  aspect-ratio: 16/10;
}
.port-img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
  display:block;
}
.port-card:hover .port-img { transform:scale(1.05); }
.port-overlay {
  position:absolute; inset:0;
  background:rgba(0,210,255,0.15);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  opacity:0; transition:.3s;
  backdrop-filter:blur(2px);
}
.port-card:hover .port-overlay { opacity:1; }
.port-overlay-icon { font-size:28px; }
.port-overlay-text {
  font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:3px;
  color:#fff; text-transform:uppercase;
}
.port-info { padding:16px 18px; }
.port-tag {
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:2px;
  color:var(--gold); text-transform:uppercase;
  margin-bottom:6px;
}
.port-title {
  font-family:'Orbitron',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--white); margin-bottom:6px;
}
.port-desc {
  font-size:14px; font-weight:300;
  color:var(--muted); line-height:1.6;
}

/* LIGHTBOX */
.lb-overlay {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.lb-box {
  position:relative; max-width:90vw; max-height:90vh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lb-img {
  max-width:88vw; max-height:72vh;
  object-fit:contain;
  border:1px solid rgba(0,210,255,0.2);
  box-shadow:0 0 60px rgba(0,210,255,0.1);
}
.lb-close {
  position:fixed; top:20px; right:24px;
  background:none; border:1px solid var(--border);
  color:var(--teal); font-size:20px; cursor:pointer;
  width:40px; height:40px; transition:.2s;
}
.lb-close:hover { background:rgba(0,210,255,0.1); }
.lb-prev, .lb-next {
  position:fixed; top:50%; transform:translateY(-50%);
  background:rgba(3,14,20,0.8); border:1px solid var(--border);
  color:var(--white); font-size:32px; cursor:pointer;
  width:50px; height:70px; transition:.2s; z-index:10000;
}
.lb-prev { left:10px; }
.lb-next { right:10px; }
.lb-prev:hover, .lb-next:hover { border-color:var(--teal); color:var(--teal); }
.lb-caption { text-align:center; }
.lb-tag {
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:3px;
  color:var(--gold); text-transform:uppercase; margin-bottom:6px;
}
.lb-title {
  font-family:'Orbitron',sans-serif;
  font-size:15px; font-weight:700; color:var(--white); margin-bottom:4px;
}
.lb-desc {
  font-size:14px; color:var(--muted); max-width:600px;
}


/* ═══════════════════════════════════════
   PROCESS
═══════════════════════════════════════ */
#process { background:var(--bg); }

.process-steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
.process-steps::before {
  content:'';
  position:absolute; top:36px; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal), var(--gold), var(--teal), transparent);
  opacity:.3;
}
.step {
  padding:0 20px; text-align:center; position:relative;
}
.step-num-wrap {
  width:72px; height:72px; margin:0 auto 24px;
  border:1px solid rgba(0,180,255,0.4);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,180,255,0.04); position:relative;
  transition:.3s;
  box-shadow: 0 0 12px rgba(0,180,255,0.2), inset 0 0 12px rgba(0,180,255,0.05);
}
.step:hover .step-num-wrap {
  border-color:rgba(0,200,255,0.7);
  box-shadow: 0 0 20px rgba(0,180,255,0.4), inset 0 0 15px rgba(0,180,255,0.1);
}
.step-num {
  font-family:'Orbitron',sans-serif;
  font-size:22px; font-weight:900; color:#00e5a0;
  text-shadow: 0 0 8px #00e5a0, 0 0 20px rgba(0,229,160,0.5);
}
.step-title {
  font-family:'Rajdhani',sans-serif;
  font-size:14px; font-weight:700;
  color:var(--white); text-transform:uppercase;
  letter-spacing:1.5px; margin-bottom:10px;
}
.step-desc {
  font-size:14px; font-weight:300;
  color:var(--muted); line-height:1.7;
}

/* ═══════════════════════════════════════
   CTA BAND
═══════════════════════════════════════ */
.cta-band {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, #0d3b3b 0%, #061c1c 50%, #0a1a2a 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cta-band-inner {
  max-width:1200px; margin:0 auto; padding:80px 5%;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  flex-wrap:wrap;
}
.cta-text {}
.cta-title {
  font-family:'Orbitron',sans-serif;
  font-size: clamp(22px, 3vw, 38px);
  font-weight:900; line-height:1.1;
  margin-bottom:12px;
}
.cta-title span { color:var(--teal); }
.cta-sub { font-size:17px; font-weight:300; color:var(--muted); line-height:1.7; }
.cta-band-glow {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,220,0.1) 0%, transparent 70%);
  right:-100px; top:50%; transform:translateY(-50%);
}

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
#contact { background:var(--bg2); }

.contact-grid {
  display:grid; grid-template-columns:1fr;
  max-width:700px;
}
.contact-info { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-item {
  display:flex; gap:16px; align-items:flex-start;
  padding:20px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.2);
  transition:.3s;
}
.contact-item:hover { border-color:var(--teal); background:rgba(0,210,255,0.04); }
.ci-icon {
  width:40px; height:40px; flex-shrink:0;
  border:1px solid rgba(0,180,255,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#00c8ff;
  background:rgba(0,180,255,0.07);
  box-shadow: 0 0 10px rgba(0,180,255,0.2);
}
.ci-label {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:var(--muted);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:4px;
}
.ci-value { font-size:14px; font-weight:600; color:var(--white); letter-spacing:.5px; }

/* Contact form */
.contact-form { display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:var(--teal);
  letter-spacing:2px; text-transform:uppercase;
}
.form-input, .form-textarea {
  background:rgba(0,210,255,0.04);
  border:1px solid var(--border);
  color:var(--white);
  padding:12px 16px;
  font-family:'Exo 2',sans-serif;
  font-size:14px;
  outline:none; transition:.2s;
  resize:none;
}
.form-input:focus, .form-textarea:focus {
  border-color:var(--teal);
  background:rgba(0,210,255,0.07);
  box-shadow:0 0 0 3px rgba(0,210,255,0.06);
}
.form-textarea { height:130px; }
.btn-submit {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  padding:15px 30px;
  background:var(--teal); color:var(--bg);
  border:none; cursor:pointer; width:100%;
  transition:.2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover { background:var(--gold); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:40px 5%;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
}
.footer-logo {
  font-family:'Orbitron',sans-serif;
  font-size:14px; font-weight:900;
  color:var(--white); letter-spacing:2px;
}
.footer-logo span { color:var(--teal); }
.footer-logo-dot { color:var(--gold); }
.footer-copy {
  font-family:'Share Tech Mono',monospace;
  font-size:12px; color:rgba(255,255,255,0.85);
  letter-spacing:2px;
}
.footer-links { display:flex; gap:20px; }
.footer-links a {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:rgba(255,255,255,0.9);
  letter-spacing:2px; text-decoration:none;
  text-transform:uppercase; transition:.2s;
}
.footer-links a:hover { color:var(--teal); }


/* ═══════════════════════════════════════
   CLIENTS BAND
═══════════════════════════════════════ */
.clients-band {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, #0d3b3b 0%, #061c1c 50%, #0a1a2a 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.clients-band-inner {
  max-width:1200px; margin:0 auto; padding:70px 5%;
}
.clients-header { margin-bottom:50px; }
.clients-logo-grid {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:20px;
}
.client-logo-item {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 16px 20px;
  background:rgba(0,180,255,0.03);
  border:1px solid rgba(0,180,255,0.25);
  transition:all .3s; cursor:default;
  position:relative;
  border-radius:4px;
  box-shadow: 0 0 10px rgba(0,180,255,0.1);
}
.client-logo-item::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#00c8ff,transparent);
  transform:scaleX(0); transition:transform .3s;
  border-radius:4px 4px 0 0;
}
.client-logo-item:hover {
  border-color:rgba(0,200,255,0.5);
  background:rgba(0,180,255,0.08);
  transform:translateY(-5px);
  box-shadow:0 12px 35px rgba(0,0,0,0.35), 0 0 15px rgba(0,180,255,0.3);
}
.client-logo-item:hover::before { transform:scaleX(1); }

/* Logo wrapper — uniform size box */
.logo-wrap {
  width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.client-logo-item img {
  width:80px; height:80px; object-fit:contain;
  border-radius:12px;          /* rounded corners for square logos */
  mix-blend-mode:screen;       /* removes black/dark backgrounds on PNG */
  filter:grayscale(30%) brightness(1.15) contrast(1.05);
  transition:filter .3s, transform .3s;
  display:block;
}
.client-logo-item:hover img {
  filter:grayscale(0%) brightness(1.3) contrast(1.1);
  transform:scale(1.08);
}
.client-name {
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:1.5px;
  color:var(--muted); text-align:center;
  text-transform:uppercase; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
/* Larger logos for wide/landscape images */
.client-logo-item img.logo-wide {
  width:100px; height:66px; object-fit:contain;
}
/* Barkah Jaya text logo */
.barkah-text {
  font-family:'Impact', 'Arial Black', sans-serif;
  font-weight:900; letter-spacing:4px;
  color:#2eaa5c;
  text-shadow: 0 0 18px rgba(46,170,92,0.5);
  width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  white-space:nowrap;
  transition:all .3s;
  border:none; background:none;
}
.client-logo-item:hover .barkah-text {
  color:#3dcc70;
  text-shadow: 0 0 28px rgba(61,204,112,0.85);
  transform:scale(1.1);
}
@media (max-width:1100px) {
  .clients-logo-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .clients-band { overflow:visible; }
  .clients-band-inner { padding:40px 15px; width:100%; box-sizing:border-box; }
  .clients-logo-grid { grid-template-columns:repeat(2,1fr); gap:10px; width:100%; box-sizing:border-box; }
  .client-logo-item { padding:16px 8px 12px; box-sizing:border-box; min-width:0; }
  .logo-wrap { width:60px; height:60px; }
  .client-logo-item img { width:60px; height:60px; }
  .client-name { font-size:8px; letter-spacing:1px; }
}

/* ═══════════════════════════════════════
   AI SERVICES SECTION
═══════════════════════════════════════ */
#ai-services {
  background: linear-gradient(180deg, var(--bg2) 0%, #050d1a 50%, var(--bg2) 100%);
  position:relative; overflow:hidden;
}
#ai-services::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,180,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.04) 1px, transparent 1px);
  background-size:30px 30px;
}
.ai-hero-band {
  display:flex; align-items:center; gap:20px;
  padding:20px 28px;
  background:linear-gradient(90deg, rgba(0,180,255,0.08), rgba(0,180,255,0.02));
  border:1px solid rgba(0,180,255,0.2);
  margin-bottom:50px;
}
.ai-hero-icon { font-size:32px; line-height:1; }
.ai-hero-title {
  font-family:'Orbitron',sans-serif;
  font-size:18px; font-weight:900;
  color:var(--white); letter-spacing:1px;
}
.ai-hero-title span { color:#00c8ff; }
.ai-hero-sub {
  font-size:13px; font-weight:300;
  color:var(--muted); margin-top:4px; line-height:1.6;
}
.ai-beta {
  margin-left:auto; flex-shrink:0;
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:2px;
  color:#00c8ff; border:1px solid rgba(0,200,255,0.3);
  padding:5px 12px; background:rgba(0,200,255,0.06);
}

.ai-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-bottom:2px;
}
.ai-card {
  padding:28px 26px;
  background:rgba(0,180,255,0.03);
  border:1px solid rgba(0,180,255,0.12);
  position:relative; overflow:hidden;
  transition:.3s; cursor:default;
}
.ai-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#00c8ff,transparent);
  transform:scaleX(0); transition:.3s;
}
.ai-card:hover {
  background:rgba(0,180,255,0.08);
  border-color:rgba(0,200,255,0.3);
  transform:translateY(-3px);
}
.ai-card:hover::after { transform:scaleX(1); }
.ai-card-accent {
  position:absolute; bottom:10px; right:10px;
  font-family:'Orbitron',sans-serif; font-size:42px; font-weight:900;
  color:rgba(0,200,255,0.05); line-height:1; pointer-events:none;
  letter-spacing:-1px;
}
.ai-card-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.ai-icon { font-size:26px; line-height:1; }
.ai-code-tag {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; letter-spacing:2px;
  color:#00c8ff; border:1px solid rgba(0,200,255,0.25);
  padding:3px 8px; background:rgba(0,200,255,0.05);
}
.ai-name {
  font-family:'Orbitron',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--white); letter-spacing:.5px; margin-bottom:10px;
}
.ai-desc {
  font-size:14px; font-weight:300;
  color:var(--muted); line-height:1.7;
}
.ai-wide { grid-column:span 2; }

/* Responsive AI */
@media (max-width:900px) {
  .ai-grid { grid-template-columns:1fr 1fr; }
  .ai-wide { grid-column:span 2; }
  .hero-brain-wrap { width:400px; height:400px; }
  .hero-brain-img { width:320px; height:320px; }
  .brain-ring-1 { width:338px; height:338px; }
  .brain-ring-2 { width:368px; height:368px; }
  .brain-ring-3 { width:398px; height:398px; }
  .hero-ai-badge { display:none; }
}
@media (max-width:600px) {
  .ai-grid { grid-template-columns:1fr; }
  .ai-wide { grid-column:span 1; }
  .hero-brain-wrap { display:none; }
}


.mobile-menu {
  display:none;
  position:fixed; inset:0; z-index:99;
  background:rgba(3,14,20,0.98);
  flex-direction:column; align-items:center; justify-content:center;
  gap:30px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-family:'Orbitron',sans-serif;
  font-size:18px; letter-spacing:3px;
  color:var(--white); text-decoration:none;
  text-transform:uppercase; transition:.2s;
}
.mobile-menu a:hover { color:var(--teal); }
.mobile-close {
  position:absolute; top:24px; right:5%;
  font-size:24px; color:var(--teal); cursor:pointer;
  font-family:monospace;
}

/* ═══════════════════════════════════════
   WHATSAPP FLOATING BUTTON
═══════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.wa-popup {
  background: rgba(3,14,20,0.97);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  padding: 18px 20px;
  width: 240px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,210,255,0.08);
  transform-origin: bottom right;
  transform: scale(0.85) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.wa-popup.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.wa-popup::before {
  content:''; position:absolute; top:0; left:0;
  width:14px; height:14px;
  border-top:2px solid var(--teal);
  border-left:2px solid var(--teal);
}
.wa-popup::after {
  content:''; position:absolute; bottom:0; right:0;
  width:14px; height:14px;
  border-bottom:2px solid var(--gold);
  border-right:2px solid var(--gold);
}
.wa-close {
  position: absolute; top: 8px; right: 10px;
  color: var(--muted); cursor: pointer;
  font-size: 14px; line-height:1;
  transition: color .2s; font-family: monospace;
}
.wa-close:hover { color: var(--teal); }
.wa-phone-row {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px; letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wa-phone-row span { color: var(--teal); }
.wa-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(0,210,255,0.05);
  border: 1px solid var(--border);
  text-decoration: none; transition: all .2s; cursor: pointer;
}
.wa-link:hover {
  background: rgba(0,210,255,0.12);
  border-color: var(--teal);
  transform: translateX(-2px);
}
.wa-icon-box {
  width: 36px; height: 36px; flex-shrink: 0;
  background: linear-gradient(135deg, #00d2ff, #f5a623);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.wa-link-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase;
  display: block; margin-bottom: 2px;
}
.wa-link-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--white); letter-spacing: 1px;
}
.wa-link-name b { color: var(--teal); }
.wa-link-name i { color: var(--gold); font-style: normal; }
.wa-btn {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #00d2ff, #f5a623);
  color: var(--bg);
  padding: 12px 24px;
  cursor: pointer; border: none;
  border-radius: 50px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px; letter-spacing: 2px; font-weight: 700;
  text-transform: uppercase;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(0,210,255,0.3);
}
.wa-btn:hover {
  background: linear-gradient(90deg, #f5a623, #00d2ff);
  box-shadow: 0 4px 20px rgba(245,166,35,0.4);
  transform: translateY(-2px);
}
.wa-btn-icon { font-size: 16px; }
.wa-btn-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.wa-pulse-ring {
  position: absolute;
  bottom: -4px; right: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  border: 1px solid rgba(0,210,255,0.4);
  border-radius: 50px;
  animation: wa-pulse-anim 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse-anim {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.12); opacity: 0;  }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .port-grid { grid-template-columns:1fr; }
  .port-card:first-child { grid-column:span 1; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .contact-info { grid-template-columns:1fr; }
  .hero-stats { gap:24px; }
}
@media (max-width:600px) {
  .services-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .process-steps::before { display:none; }
  .form-row { grid-template-columns:1fr; }
  .hero-stats { flex-wrap:wrap; }
}

.nav-logo-com {
  color: var(--teal);
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 1px;
}
.footer-logo-com {
  color: var(--teal);
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 1px;
}
.brand-char {
  display: inline-block;
  min-width: 0.68em;
  text-align: center;
  transition: none;
}

	@keyframes wa-shake {
		0%,55%,100% { transform: rotate(0deg); }
		60%          { transform: rotate(-18deg); }
		65%          { transform: rotate(18deg); }
		70%          { transform: rotate(-14deg); }
		75%          { transform: rotate(14deg); }
		80%          { transform: rotate(-8deg); }
		85%          { transform: rotate(8deg); }
		90%          { transform: rotate(-4deg); }
		95%          { transform: rotate(4deg); }
	}
	.rekanan-grid {
		grid-template-columns: repeat(3, 190px) !important;
		justify-content: center;
	}
	@media (min-width: 769px) {
		.wa-btn-icon { margin-left: 0 !important; font-size: 16px !important; display: inline !important; vertical-align: middle !important; line-height: 1 !important; }
		.wa-btn-text { display: inline !important; vertical-align: middle !important; }
		.wa-btn { padding: 12px 24px !important; width: auto !important; height: auto !important; border-radius: 50px !important; gap: 10px !important; }
	}

	@media (max-width: 768px) {
		.rekanan-grid {
			grid-template-columns: repeat(3, 1fr) !important;
			width: 100%;
		}
		.footer-inner { justify-content: center !important; }
		.footer-inner > div { flex: 0 0 100% !important; text-align: center !important; justify-content: center !important; white-space: normal !important; }
		.wa-btn-text { display: none; }
		.wa-btn { padding: 0 !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; }
		.wa-btn-icon { font-size: 20px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: 3px !important; }
		.wa-float { bottom: 90px !important; }
	}

	/* ── ANIMASI 7: SCROLL PROGRESS BAR ── */
	#nav-progress {
		position: absolute; bottom: -1px; left: 0;
		height: 2px; width: 0%;
		background: linear-gradient(90deg, #00d2ff, #f5a623);
		box-shadow: 0 0 8px #00d2ff;
		transition: width 0.1s linear;
		z-index: 101;
	}

	/* ── ANIMASI 4: TILT CARD 3D ── */
	.svc-card { transform-style: preserve-3d; will-change: transform; }
	.svc-card::after {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
			rgba(0,210,255,0.1) 0%, transparent 60%);
		opacity: 0; transition: opacity 0.3s;
		pointer-events: none;
	}
	.svc-card:hover::after { opacity: 1; }
	.services-grid { gap: 16px !important; }
	.svc-card { border-radius: 12px !important; padding: 24px 26px !important; }
	.svc-top-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
	.svc-top-row .svc-num { margin-bottom: 0 !important; }
	.svc-top-row .svc-icon-box { margin-bottom: 0 !important; }

	/* gap & rounded untuk kartu lain */
	.ai-grid  { gap: 16px !important; margin-bottom: 16px !important; }
	.ai-card  { border-radius: 12px !important; }
	.about-point  { border-radius: 12px !important; }
	.contact-item { border-radius: 12px !important; }
	.client-logo-item { border-radius: 12px !important; }

	/* tilt juga untuk kartu lain */
	.ai-card, .about-point, .client-logo-item, .contact-item {
		transform-style: preserve-3d; will-change: transform;
		position: relative;
	}
	/* ai-card pakai ::before (::after sdh dipakai garis atas di style.css) */
	.ai-card::before {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
			rgba(0,200,255,0.1) 0%, transparent 60%);
		opacity: 0; transition: opacity 0.3s;
		pointer-events: none; z-index: 0;
	}
	.ai-card:hover::before { opacity: 1; }
	/* yang lain tetap ::after */
	.about-point::after, .client-logo-item::after, .contact-item::after {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
			rgba(0,210,255,0.08) 0%, transparent 60%);
		opacity: 0; transition: opacity 0.3s;
		pointer-events: none;
		border-radius: inherit;
	}
	.about-point:hover::after,
	.client-logo-item:hover::after, .contact-item:hover::after { opacity: 1; }

	/* ── PORT CARD rounded + tilt ── */
	.port-card { border-radius: 12px !important; transform-style: preserve-3d; will-change: transform; }
	.port-card::after {
		content: '';
		position: absolute; inset: 0;
		background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
			rgba(0,210,255,0.08) 0%, transparent 60%);
		opacity: 0; transition: opacity 0.3s;
		pointer-events: none;
		border-radius: 12px;
	}
	.port-card:hover::after { opacity: 1; }
	/* ── DEFINE ringPulse + apply ke about-box-main ── */
	@keyframes ringPulseTeal {
		0%,100% { box-shadow: 0 0 0 1px rgba(0,210,255,0.15); }
		50%      { box-shadow: 0 0 0 1px rgba(0,210,255,0.8), 0 0 12px rgba(0,210,255,0.3); }
	}
	@keyframes ringPulseGold {
		0%,100% { border-color: rgba(245,166,35,0.15); }
		50%      { border-color: rgba(245,166,35,0.8); box-shadow: 0 0 10px rgba(245,166,35,0.2); }
	}
	.about-box-main { animation: ringPulseTeal 3s ease-in-out infinite !important; }
	.about-box-main::before { animation: ringPulseGold 3s ease-in-out infinite 0.5s !important; }
	/* ── Bubble Thinking Sonicomp ── */
	.sonicomp-wrap { position: relative; }
	.think-bubble {
		position: absolute;
		top: -45px;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		border: 2px solid #333;
		border-radius: 40px;
		width: 130px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 10px;
		font-weight: 700;
		color: #111;
		line-height: 1.4;
		padding: 8px;
		z-index: 10;
		pointer-events: none;
		font-family: 'Rajdhani', sans-serif;
		opacity: 0;
		animation: bubble-loop 5s ease-in-out infinite;
	}
	.think-bubble::after {
		content: '';
		position: absolute;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
		width: 10px; height: 10px;
		background: #fff;
		border: 2px solid #333;
		border-radius: 50%;
	}
	.think-bubble::before {
		content: '';
		position: absolute;
		bottom: -22px;
		left: 50%;
		transform: translateX(-50%);
		width: 6px; height: 6px;
		background: #fff;
		border: 2px solid #333;
		border-radius: 50%;
	}
	/* muncul 0.4s → tampil 3s → hilang 0.4s → diam 1.2s → loop */
	@keyframes bubble-loop {
		0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
		8%   { opacity: 1; transform: translateX(-50%) scale(1); }
		68%  { opacity: 1; transform: translateX(-50%) scale(1); }
		76%  { opacity: 0; transform: translateX(-50%) scale(0.7); }
		100% { opacity: 0; transform: translateX(-50%) scale(0.7); }
	}

	/* ── TEXT REVEAL JUDUL ── */
	.tr-wrap {
		overflow: hidden;
		display: block;
	}
	.section-title {
		transform: translateY(110%);
		transition: transform 0.75s cubic-bezier(.22,.68,0,.99);
		display: block;
	}
	.section-title.tr-visible {
		transform: translateY(0);
	}