/* ═══════════════════════════════════════════
   inStamel Technology – Main Stylesheet
   assets/css/style.css
═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { font-family:'Inter',sans-serif; background:#07101e; color:#e2e8f0; margin:0; overflow-x:hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar        { width:6px; }
::-webkit-scrollbar-track  { background:#0d1b2e; }
::-webkit-scrollbar-thumb  { background:#00d4ff66; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#00d4ff; }

/* ── Glass ── */
.glass {
  background:rgba(13,27,46,0.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(0,212,255,0.15);
}
.glass-card {
  background:rgba(13,27,46,0.70);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,212,255,0.18);
  border-radius:16px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.glass-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,212,255,0.2), 0 0 0 1px rgba(0,212,255,0.3);
  border-color:rgba(0,212,255,0.4);
}

/* ── Gradient text ── */
.gradient-text {
  background:linear-gradient(135deg,#00d4ff 0%,#7c3aed 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gradient-text-cyan {
  background:linear-gradient(90deg,#00d4ff,#22d3ee,#67e8f9);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Buttons ── */
.btn-cyan {
  background:linear-gradient(135deg,#00d4ff,#0099cc);
  color:#03070f; font-weight:700; border-radius:9999px;
  padding:.75rem 2rem; transition:all .3s;
  position:relative; overflow:hidden; border:none; cursor:pointer;
}
.btn-cyan::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,#67e8f9,#00d4ff);
  opacity:0; transition:opacity .3s;
}
.btn-cyan:hover::after { opacity:1; }
.btn-cyan span { position:relative; z-index:1; }

.btn-outline {
  border:2px solid #00d4ff; color:#00d4ff; font-weight:700;
  border-radius:9999px; padding:.75rem 2rem;
  transition:all .3s; cursor:pointer; background:transparent;
}
.btn-outline:hover { background:rgba(0,212,255,0.12); box-shadow:0 0 20px rgba(0,212,255,0.35); }

/* ── Navbar ── */
.navbar-blur {
  background:rgba(7,13,26,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,212,255,0.12);
}

/* ── Hero ── */
#particles-canvas { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(124,58,237,0.08) 0%, transparent 70%),
    linear-gradient(180deg,#03070f 0%,#07101e 50%,#0a1628 100%);
}

/* ── Section divider ── */
.section-divider {
  background:linear-gradient(90deg,transparent,#00d4ff55,transparent);
  height:1px; width:100%; margin:0;
}

/* ── Icon circle ── */
.icon-circle {
  width:64px; height:64px;
  background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(0,212,255,0.05));
  border:1px solid rgba(0,212,255,0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#00d4ff; transition:all .3s;
}
.glass-card:hover .icon-circle {
  background:linear-gradient(135deg,rgba(0,212,255,0.35),rgba(0,212,255,0.1));
  box-shadow:0 0 20px rgba(0,212,255,0.4);
}

/* ── Timeline ── */
.timeline-line {
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,#00d4ff88,#00d4ff,#00d4ff88,transparent);
  transform:translateX(-50%);
}
@media(max-width:768px){ .timeline-line{ left:24px; } }
.timeline-dot {
  width:16px; height:16px; background:#00d4ff; border-radius:50%;
  box-shadow:0 0 12px rgba(0,212,255,0.8);
}

/* ── Contact form ── */
.form-input {
  background:rgba(13,27,46,0.8); border:1px solid rgba(0,212,255,0.2);
  border-radius:10px; color:#e2e8f0; padding:.75rem 1rem; width:100%;
  transition:border-color .3s, box-shadow .3s; outline:none;
  font-family:'Inter',sans-serif;
}
.form-input:focus { border-color:#00d4ff; box-shadow:0 0 0 3px rgba(0,212,255,0.12); }
.form-input::placeholder { color:#4a6280; }
.form-label { color:#94a3b8; font-size:.85rem; font-weight:500; margin-bottom:.35rem; display:block; }

/* ── Chat widget ── */
#chat-widget { position:fixed; bottom:24px; right:24px; z-index:9999; }
#chat-toggle {
  width:60px; height:60px;
  background:linear-gradient(135deg,#00d4ff,#0077aa);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 20px rgba(0,212,255,0.5);
  transition:all .3s; border:none; color:#03070f; font-size:1.4rem;
}
#chat-toggle:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(0,212,255,0.7); }
#chat-window {
  position:absolute; bottom:72px; right:0; width:340px; max-height:500px;
  background:rgba(10,18,35,0.97); border:1px solid rgba(0,212,255,0.25);
  border-radius:20px; overflow:hidden; display:none; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.15);
}
#chat-window.open { display:flex; }
#chat-header {
  background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(0,212,255,0.05));
  border-bottom:1px solid rgba(0,212,255,0.15);
  padding:1rem; display:flex; align-items:center; gap:.75rem;
}
#chat-messages {
  flex:1; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.75rem; max-height:320px;
}
.chat-msg { display:flex; gap:.5rem; align-items:flex-start; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-bubble { max-width:78%; padding:.6rem .9rem; border-radius:14px; font-size:.85rem; line-height:1.4; }
.chat-bubble.bot { background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.2); color:#cbd5e1; }
.chat-bubble.user { background:linear-gradient(135deg,#00d4ff,#0099cc); color:#03070f; font-weight:500; }
#chat-input-area { border-top:1px solid rgba(0,212,255,0.15); padding:.75rem; display:flex; gap:.5rem; }
#chat-input {
  flex:1; background:rgba(13,27,46,0.9); border:1px solid rgba(0,212,255,0.2);
  border-radius:24px; padding:.5rem .85rem; color:#e2e8f0; font-size:.85rem; outline:none;
}
#chat-input:focus { border-color:#00d4ff; }
#chat-send {
  width:36px; height:36px; background:linear-gradient(135deg,#00d4ff,#0099cc);
  border-radius:50%; border:none; color:#03070f; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
#chat-send:hover { transform:scale(1.1); }

/* ── Language btn ── */
.lang-btn {
  padding:.3rem .75rem; border-radius:6px; font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all .2s; border:1px solid rgba(0,212,255,0.3);
  background:transparent; color:#94a3b8;
}
.lang-btn.active { background:rgba(0,212,255,0.2); color:#00d4ff; border-color:#00d4ff; }

/* ── Stat counter ── */
.stat-number { font-size:2.5rem; font-weight:800; color:#00d4ff; line-height:1; }

/* ── Badge ── */
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.25);
  border-radius:9999px; padding:.3rem .85rem;
  font-size:.78rem; color:#00d4ff; font-weight:500;
}

/* ── Dropdown ── */
.dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(9,18,35,0.97); border:1px solid rgba(0,212,255,0.18);
  border-radius:12px; padding:.5rem; min-width:200px; display:none;
  z-index:100; box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.dropdown:hover .dropdown-menu, .dropdown-menu:hover { display:block; }
.dropdown-item {
  display:block; padding:.6rem 1rem; color:#94a3b8; font-size:.9rem;
  border-radius:8px; transition:all .2s; text-decoration:none;
}
.dropdown-item:hover { background:rgba(0,212,255,0.1); color:#00d4ff; }

/* ── Mobile menu ── */
#mobile-menu { display:none; }
#mobile-menu.open { display:block; }

/* ── Toast ── */
#toast {
  position:fixed; bottom:90px; right:24px; z-index:9998;
  background:rgba(10,18,35,0.97); border:1px solid rgba(0,212,255,0.3);
  border-radius:12px; padding:.85rem 1.2rem; color:#e2e8f0; font-size:.875rem;
  transform:translateY(20px); opacity:0; transition:all .35s;
  pointer-events:none; max-width:300px;
}
#toast.show { transform:translateY(0); opacity:1; }

/* ── Typing dots ── */
.typing-dot {
  width:6px; height:6px; background:#00d4ff; border-radius:50%;
  animation:typingBounce 1s infinite; display:inline-block;
}
.typing-dot:nth-child(2){ animation-delay:.15s; }
.typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* ── Fade in ── */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── Cyber grid ── */
.cyber-grid {
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size:50px 50px;
}

/* ── Scan line ── */
.scan-line { position:relative; overflow:hidden; }
.scan-line::after {
  content:''; position:absolute; top:-100%; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.6),transparent);
  animation:scan 6s linear infinite; pointer-events:none;
}
@keyframes scan {
  0%  { top:-2%; opacity:0; }
  5%  { opacity:1; }
  95% { opacity:1; }
  100%{ top:102%; opacity:0; }
}

/* ── Neon pulse card ── */
.neon-card {
  border:1px solid rgba(0,212,255,0.3); border-radius:16px;
  animation:neonPulse 3s ease-in-out infinite;
}
@keyframes neonPulse {
  0%,100%{ box-shadow:0 0 8px rgba(0,212,255,0.15), inset 0 0 8px rgba(0,212,255,0.03); }
  50%    { box-shadow:0 0 25px rgba(0,212,255,0.4), inset 0 0 15px rgba(0,212,255,0.07); }
}

/* ── Floating tech icons ── */
.tech-float-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.tech-float-icon  {
  position:absolute; font-size:1.2rem; color:rgba(0,212,255,0.07);
  animation:techFloat linear infinite;
}
@keyframes techFloat {
  0%  { transform:translateY(110vh) rotate(0deg);   opacity:0; }
  5%  { opacity:1; }
  95% { opacity:.8; }
  100%{ transform:translateY(-10vh)  rotate(360deg); opacity:0; }
}

/* ── Holographic shimmer ── */
.holo-img { position:relative; }
.holo-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(0,212,255,0.06) 30%,transparent 50%,rgba(124,58,237,0.06) 70%,transparent 100%);
  background-size:200% 200%;
  animation:shimmer 4s ease infinite; border-radius:inherit; pointer-events:none;
}
@keyframes shimmer {
  0%  { background-position:0% 0%; }
  50% { background-position:100% 100%; }
  100%{ background-position:0% 0%; }
}

/* ── Gradient animated border ── */
.grad-border {
  background:linear-gradient(#0d1b2e,#0d1b2e) padding-box,
             linear-gradient(135deg,#00d4ff,#7c3aed,#00d4ff) border-box;
  border:1.5px solid transparent; background-size:200%;
  animation:borderSpin 4s linear infinite;
}
@keyframes borderSpin { 0%{background-position:0%} 100%{background-position:200%} }

/* ── Image hover zoom ── */
.img-zoom { overflow:hidden; border-radius:16px; }
.img-zoom img { transition:transform .6s ease, filter .6s ease; }
.img-zoom:hover img { transform:scale(1.06); filter:brightness(.9) saturate(1.3); }

/* ── Brands strip ── */
.brands-strip {
  background:rgba(13,27,46,0.6);
  border-top:1px solid rgba(0,212,255,0.1);
  border-bottom:1px solid rgba(0,212,255,0.1);
  overflow:hidden;
}
.brands-track {
  display:flex; gap:3rem; align-items:center;
  animation:brandScroll 25s linear infinite; white-space:nowrap;
}
.brands-track:hover { animation-play-state:paused; }
@keyframes brandScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.brand-item {
  display:flex; align-items:center; gap:.5rem;
  color:rgba(148,163,184,0.5); font-size:.85rem; font-weight:600;
  letter-spacing:.05em; transition:color .3s; flex-shrink:0;
}
.brand-item:hover { color:#00d4ff; }

/* ── Repair card ── */
.repair-card {
  background:rgba(13,27,46,0.75); border:1px solid rgba(0,212,255,0.15);
  border-radius:16px; transition:all .35s; position:relative; overflow:hidden;
}
.repair-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#00d4ff,transparent);
  opacity:0; transition:opacity .3s;
}
.repair-card:hover {
  transform:translateY(-5px); border-color:rgba(0,212,255,0.4);
  box-shadow:0 15px 40px rgba(0,212,255,0.15);
}
.repair-card:hover::before { opacity:1; }