/* =============================================
   VKTechno Solutions — Modern Corporate
   Dark / Light Mode + Custom Cursor
   ============================================= */

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

:root {
  --green:        #00d97e;
  --green-2:      #00b868;
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --tt:           background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* DARK (default) */
:root, [data-theme="dark"] {
  --bg:           #070e1a;
  --bg-1:         #0b1525;
  --bg-2:         #0f1e35;
  --bg-3:         #152540;
  --bg-4:         #1c3050;
  --text:         #8fa3be;
  --text-strong:  #ffffff;
  --text-muted:   #4a6080;
  --green-dim:    rgba(0,217,126,0.08);
  --green-border: rgba(0,217,126,0.2);
  --border:       rgba(255,255,255,0.06);
  --glass-hover:  rgba(255,255,255,0.06);
  --nav-bg:       rgba(7,14,26,0.95);
  --nav-border:   rgba(255,255,255,0.06);
  --nav-link:     #8fa3be;
  --nav-link-hover: #ffffff;
  --card-bg:      #0b1525;
  --card-hover:   #0f1e35;
  --input-bg:     #152540;
  --input-focus:  #1c3050;
  --ticker-bg:    #0b1525;
  --footer-bg:    #070e1a;
  --footer-text:  #4a6080;
  --footer-strong:#ffffff;
  --mv-bg:        #0f1e35;
  --mv-hover:     #152540;
  --shadow:       0 20px 60px rgba(0,0,0,0.45);
}

/* LIGHT */
[data-theme="light"] {
  --green:        #00b868;
  --green-2:      #009955;
  --bg:           #f0f4f8;
  --bg-1:         #ffffff;
  --bg-2:         #f8fafc;
  --bg-3:         #edf2f7;
  --bg-4:         #e2e8f0;
  --text:         #4a5568;
  --text-strong:  #0d1f36;
  --text-muted:   #718096;
  --green-dim:    rgba(0,180,100,0.08);
  --green-border: rgba(0,180,100,0.25);
  --border:       rgba(15,30,53,0.1);
  --glass-hover:  rgba(15,30,53,0.05);
  --nav-bg:       rgba(255,255,255,0.97);
  --nav-border:   rgba(15,30,53,0.1);
  --nav-link:     #4a5568;
  --nav-link-hover: #0d1f36;
  --card-bg:      #ffffff;
  --card-hover:   #f8fafc;
  --input-bg:     #edf2f7;
  --input-focus:  #e2e8f0;
  --ticker-bg:    #ffffff;
  --footer-bg:    #0d1f36;
  --footer-text:  #8fa3be;
  --footer-strong:#ffffff;
  --mv-bg:        #ffffff;
  --mv-hover:     #f8fafc;
  --shadow:       0 8px 40px rgba(0,0,0,0.08);
}

/* ===== BOAT CURSOR ===== */
* { cursor: none !important; }
@media (hover:none) { * { cursor: auto !important; } }

/* === CUBERTO-STYLE CURSOR === */
#cursorDot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #00d97e;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, width 0.2s ease, height 0.2s ease, background 0.2s ease;
  will-change: transform;
  opacity: 0;
}
#cursorRing {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(0, 217, 126, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, width 0.35s cubic-bezier(0.25,0.46,0.45,0.94), height 0.35s cubic-bezier(0.25,0.46,0.45,0.94), border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
  opacity: 0;
}
/* Hover state — ring expands and fills slightly */
#cursorRing.hovered {
  width: 56px; height: 56px;
  border-color: rgba(0, 217, 126, 0.35);
  background: rgba(0, 217, 126, 0.06);
}
/* Click state */
#cursorDot.clicking {
  width: 5px; height: 5px;
  background: #fff;
}
#cursorRing.clicking {
  width: 28px; height: 28px;
  border-color: rgba(255,255,255,0.5);
}
/* Hide on mobile */
@media (hover:none) {
  #cursorDot, #cursorRing { display: none; }
}

/* ===== LINE REVEAL ===== */
.line-wrap { display:block; overflow:hidden; }
.line-inner { display:block; transform:translateY(105%); transition:transform 0.72s var(--ease); }
.reveal.visible .line-inner { transform:translateY(0); }

/* ===== BASE ===== */
html { font-size:16px; }
body {
  font-family:'Outfit',sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: var(--tt);
}
h1,h2,h3,h4,h5 {
  font-family:'Plus Jakarta Sans',sans-serif;
  color: var(--text-strong);
  line-height:1.15;
  letter-spacing:-0.02em;
  transition: color 0.35s ease;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { max-width:1160px; margin:0 auto; padding:0 32px; }
.accent { color:var(--green); }

/* ===== TAG ===== */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Outfit',sans-serif;
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--green);
  padding:5px 14px; border-radius:100px;
  border:1px solid var(--green-border);
  background:var(--green-dim);
  margin-bottom:20px;
  transition:var(--tt);
}
.tag::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.section-label {
  font-size:0.72rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--green); margin-bottom:10px;
}
.section-title {
  font-size:clamp(1.75rem,3vw,2.4rem);
  font-weight:800; color:var(--text-strong); margin-bottom:14px;
}

/* ===== REVEAL ===== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.6s var(--ease),transform 0.6s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius-sm);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.875rem;
  cursor:none !important; border:none;
  transition:all 0.22s var(--ease); white-space:nowrap;
}
.btn-primary { background:var(--green); color:#070e1a; }
.btn-primary:hover { background:var(--green-2); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,217,126,0.22); }
.btn-outline { background:transparent; color:var(--text-strong); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--green-border); color:var(--green); background:var(--green-dim); }
.btn-full { width:100%; }
.btn-sm { padding:9px 18px; font-size:0.8rem; }
.btn-lg { padding:14px 30px; font-size:0.95rem; }

/* ===== NAVBAR ===== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:all 0.35s var(--ease);
}
.navbar.scrolled {
  background: var(--nav-bg);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--nav-border);
  box-shadow: var(--shadow);
}
.nav-inner {
  max-width:1160px; margin:0 auto; padding:0 32px;
  height:68px; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo img { height:36px; }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links li a {
  font-size:0.875rem; font-weight:500;
  color: var(--nav-link);
  padding:8px 14px; border-radius:var(--radius-sm);
  transition:all 0.2s;
}
.nav-links li a:hover { color:var(--nav-link-hover); background:var(--glass-hover); }
.nav-cta-btn {
  background:var(--green) !important;
  color:#070e1a !important;
  font-weight:700 !important;
  padding:9px 18px !important;
  border-radius:var(--radius-sm) !important;
  transition:opacity 0.2s !important;
}
.nav-cta-btn:hover { opacity:0.88; color:#070e1a !important; background:var(--green) !important; }

.nav-right { display:flex; align-items:center; gap:8px; }

/* Theme toggle */
.theme-toggle {
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  background: var(--glass-hover);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:none !important;
  color:var(--nav-link);
  transition:all 0.2s;
  flex-shrink:0;
}
.theme-toggle:hover { color:var(--nav-link-hover); border-color:var(--green-border); background:var(--green-dim); }
[data-theme="light"] .theme-toggle { background:#edf2f7; border-color:rgba(15,30,53,0.12); color:#4a5568; }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none !important; padding:6px;
}
.nav-toggle span { display:block; width:22px; height:1.5px; background:var(--text-strong); border-radius:2px; transition:all 0.3s; }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding:100px 0 80px; overflow:hidden;
  background: var(--bg);
  transition: background 0.35s ease;
}
#heroCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
.hero-radial {
  position:absolute; inset:0; pointer-events:none;
  transition:opacity 0.35s;
}
[data-theme="dark"] .hero-radial {
  background:radial-gradient(ellipse 55% 50% at 65% 40%, rgba(0,217,126,0.06) 0%,transparent 65%),
             radial-gradient(ellipse 40% 60% at 10% 90%, rgba(11,21,37,0.95) 0%,transparent 55%);
}
[data-theme="light"] .hero-radial {
  background:radial-gradient(ellipse 55% 50% at 65% 40%, rgba(0,180,100,0.05) 0%,transparent 65%),
             radial-gradient(ellipse 40% 60% at 10% 90%, rgba(240,244,248,0.8) 0%,transparent 55%);
}

.hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:55% 45%; gap:48px; align-items:center; }

.hero-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; opacity:0; animation:fadeUp 0.75s 0.1s var(--ease) forwards; }
.hero-line { width:28px; height:1px; background:var(--green); }
.hero-eyebrow-text { font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); }

.hero-title {
  font-size:clamp(2rem,3.4vw,3rem); font-weight:800; line-height:1.12;
  letter-spacing:-0.03em; color:var(--text-strong); margin-bottom:20px;
  opacity:0; animation:fadeUp 0.75s 0.2s var(--ease) forwards;
  transition:color 0.35s ease;
}
.hero-title .ht-green { color:var(--green); }

.hero-sub {
  font-size:0.975rem; color:var(--text); line-height:1.8; max-width:460px;
  margin-bottom:34px; font-weight:300;
  opacity:0; animation:fadeUp 0.75s 0.3s var(--ease) forwards;
}
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px; opacity:0; animation:fadeUp 0.75s 0.38s var(--ease) forwards; }
.hero-proof { display:flex; align-items:center; gap:24px; opacity:0; animation:fadeUp 0.75s 0.46s var(--ease) forwards; }
.proof-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.4rem; font-weight:800; color:var(--text-strong); line-height:1; margin-bottom:2px; }
.proof-label { font-size:0.68rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; }
.proof-divider { width:1px; height:32px; background:var(--border); }

.hero-right { opacity:0; animation:fadeLeft 0.8s 0.4s var(--ease) forwards; }

/* ===== GLOBE ===== */
.globe-wrap {
  position: relative;
  width: 100%;
  height: 480px;
}
#globeContainer {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ===== GLASSMORPHISM HOLOGRAPHIC CARDS ===== */
.holo-card {
  position: absolute;
  bottom: 24px;
  left: -20px;
  width: 260px;
  border-radius: 16px;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(0, 217, 126, 0.25);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(0,217,126,0.1);
  overflow: hidden;
  animation: floatCard 4s ease-in-out infinite;
  z-index: 10;
}
[data-theme="light"] .holo-card {
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,180,100,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
}
@keyframes floatCard {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(0.5deg); }
}

.holo-card-sm {
  position: absolute;
  top: 40px;
  right: -16px;
  width: 210px;
  border-radius: 14px;
  background: rgba(10, 22, 40, 0.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(0, 136, 255, 0.25);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 14px 16px;
  overflow: hidden;
  animation: floatCardSm 5s ease-in-out infinite;
  z-index: 10;
}
[data-theme="light"] .holo-card-sm {
  background: rgba(255,255,255,0.15);
  border-color: rgba(0,100,220,0.25);
}
@keyframes floatCardSm {
  0%,100% { transform: translateY(0px) rotate(1deg); }
  50%      { transform: translateY(-8px) rotate(-0.5deg); }
}

/* Shimmer effect */
.holo-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0,217,126,0.06) 45%,
    rgba(0,136,255,0.05) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.holo-card-inner { padding: 16px; position: relative; z-index: 2; }

.holo-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.holo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: blink 2s infinite;
}
.holo-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  flex: 1;
}
.holo-pulse {
  width: 20px; height: 20px;
  border: 1.5px solid rgba(0,217,126,0.4);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.holo-pulse::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--green);
  border-radius: 50%;
  opacity: 0.7;
}

.holo-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.holo-metric { text-align: center; }
.hm-num {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 3px;
  text-shadow: 0 0 10px rgba(0,217,126,0.4);
}
.hm-txt { font-size: 0.58rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }

.holo-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.holo-bar-label { font-size: 0.62rem; color: rgba(255,255,255,0.55); width: 88px; flex-shrink: 0; }
.holo-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.holo-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #0088ff);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,217,126,0.5);
  animation: barGrow 2s var(--ease) forwards;
}
@keyframes barGrow { from { width: 0 !important; } }
.holo-bar-pct { font-size: 0.62rem; color: var(--green); font-weight: 700; width: 30px; text-align: right; }

/* Small card rows */
.holo-sm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.73rem;
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 2;
}
.holo-sm-row:last-child { border-bottom: none; }
.holo-sm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.holo-sm-dot.green { background: #00d97e; box-shadow: 0 0 5px #00d97e; }
.holo-sm-dot.blue  { background: #0088ff; box-shadow: 0 0 5px #0088ff; }
.holo-sm-dot.cyan  { background: #00ccff; box-shadow: 0 0 5px #00ccff; }
.holo-sm-val { margin-left: auto; color: rgba(255,255,255,0.45); font-size: 0.68rem; }

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

/* ===== TICKER ===== */
.ticker-bar {
  background:var(--ticker-bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:13px 0; overflow:hidden; transition:var(--tt);
}
.ticker-track { display:flex; gap:48px; animation:ticker 28s linear infinite; white-space:nowrap; }
.ticker-item { display:flex; align-items:center; gap:10px; font-size:0.76rem; font-weight:500; color:var(--text-muted); flex-shrink:0; }
.ticker-dot { width:4px; height:4px; border-radius:50%; background:var(--green); flex-shrink:0; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== MISSION VISION ===== */
.mission-vision { padding:96px 0; background:var(--bg-1); position:relative; transition:var(--tt); }
.mission-vision::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--green-border),transparent); }

.mv-top {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden; margin-bottom:72px;
  transition:var(--tt);
}
.mv-panel { background:var(--mv-bg); padding:48px 44px; transition:background 0.25s; }
.mv-panel:hover { background:var(--bg-3); }
.mv-panel-tag { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.mv-panel-tag::before { content:''; width:18px; height:1px; background:var(--green); }
.mv-panel h3 { font-size:1.4rem; font-weight:700; margin-bottom:14px; }
.mv-panel p { font-size:0.9rem; color:var(--text); line-height:1.8; font-weight:300; }

.why-header { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:40px; }
.why-header-right p { font-size:0.9rem; color:var(--text); line-height:1.8; font-weight:300; }
.why-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden; transition:var(--tt);
}
.why-item { background:var(--bg-2); padding:32px 24px; transition:background 0.25s; position:relative; }
.why-item:hover { background:var(--bg-3); }
.why-item::after { content:''; position:absolute; bottom:0; left:24px; right:24px; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform 0.3s var(--ease); }
.why-item:hover::after { transform:scaleX(1); }
.why-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.2rem; font-weight:800; color:var(--green-dim); line-height:1; margin-bottom:14px; transition:color 0.25s; }
[data-theme="light"] .why-num { color:rgba(0,180,100,0.15); }
.why-item:hover .why-num { color:var(--green-border); }
.why-item h4 { font-size:0.9rem; font-weight:700; margin-bottom:8px; }
.why-item p { font-size:0.8rem; color:var(--text-muted); line-height:1.7; }

/* ===== SERVICES ===== */
.services { padding:96px 0; background:var(--bg); transition:var(--tt); }
.services-header { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:48px; }
.services-header-right p { font-size:0.9rem; color:var(--text); line-height:1.8; }
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden;
}
.service-card {
  background:var(--card-bg); padding:32px 28px; position:relative;
  transition:background 0.25s; overflow:hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:0; background:linear-gradient(180deg,var(--green-dim),transparent); transition:height 0.35s var(--ease); }
.service-card:hover::before { height:56px; }
.service-card:hover { background:var(--card-hover); }
.service-card.featured { background:var(--bg-2); }
.svc-badge { position:absolute; top:18px; right:18px; font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--green); background:var(--green-dim); border:1px solid var(--green-border); padding:3px 9px; border-radius:100px; }
.svc-icon { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--green-dim); border:1px solid var(--green-border); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:all 0.25s; }
.service-card:hover .svc-icon { background:var(--green); border-color:var(--green); }
.service-card:hover .svc-icon svg * { stroke:#070e1a !important; }
.service-card h3 { font-size:0.95rem; font-weight:700; margin-bottom:8px; }
.service-card p { font-size:0.8rem; color:var(--text-muted); line-height:1.7; margin-bottom:18px; }
.svc-arrow { font-size:0.76rem; font-weight:600; color:var(--green); display:flex; align-items:center; gap:5px; transition:gap 0.2s; }
.service-card:hover .svc-arrow { gap:8px; }

/* ===== PRODUCTS ===== */
.products { padding:96px 0; background:var(--bg-1); position:relative; transition:var(--tt); }
.products::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--green-border),transparent); }
.products-header { text-align:center; margin-bottom:64px; }
.product-block { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:56px 0; border-bottom:1px solid var(--border); }
.product-block:first-child { padding-top:0; }
.product-block:last-child { border-bottom:none; padding-bottom:0; }
.product-block.flip { direction:rtl; }
.product-block.flip > * { direction:ltr; }

.product-screen { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; position:relative; transition:var(--tt); }
.product-screen::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--green),transparent); }
.ps-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-3); }
.ps-dots { display:flex; gap:5px; }
.ps-dots span { width:8px; height:8px; border-radius:50%; }
.ps-dots span:nth-child(1){background:#ff5f57} .ps-dots span:nth-child(2){background:#febc2e} .ps-dots span:nth-child(3){background:#28c840}
.ps-label { font-size:0.68rem; color:var(--text-muted); }
.ps-chat { padding:18px; display:flex; flex-direction:column; gap:9px; min-height:200px; }
.ps-msg { padding:9px 13px; border-radius:9px; font-size:0.79rem; line-height:1.45; max-width:82%; }
.ps-msg.bot { background:var(--bg-4); color:var(--text); border:1px solid var(--border); align-self:flex-start; border-radius:3px 9px 9px 9px; }
.ps-msg.user { background:var(--green); color:#070e1a; font-weight:600; align-self:flex-end; border-radius:9px 3px 9px 9px; }
.ps-typing { display:flex; gap:4px; align-items:center; align-self:flex-start; padding:10px 14px; background:var(--bg-4); border:1px solid var(--border); border-radius:3px 9px 9px 9px; }
.ps-typing span { width:5px; height:5px; background:var(--text-muted); border-radius:50%; animation:typ 1.2s infinite; }
.ps-typing span:nth-child(2){animation-delay:0.2s} .ps-typing span:nth-child(3){animation-delay:0.4s}
@keyframes typ { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

.ps-crm { padding:14px; }
.crm-header-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:6px; padding:6px 8px; font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.crm-data-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:6px; padding:9px 8px; font-size:0.76rem; color:var(--text); border-radius:var(--radius-sm); transition:background 0.2s; align-items:center; }
.crm-data-row:hover { background:var(--bg-3); }
.crm-st { display:inline-block; padding:2px 8px; border-radius:100px; font-size:0.65rem; font-weight:700; }
.s-active { background:rgba(0,217,126,0.12); color:var(--green); }
.s-warm   { background:rgba(245,158,11,0.12); color:#f59e0b; }
.s-new    { background:rgba(99,102,241,0.12); color:#818cf8; }
.s-cold   { background:rgba(148,163,184,0.08); color:var(--text-muted); }
.crm-mini-chart { padding:12px 14px; border-top:1px solid var(--border); margin-top:4px; }
.chart-label { font-size:0.64rem; color:var(--text-muted); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; }
.chart-bars { display:flex; align-items:flex-end; gap:5px; height:40px; }
.chart-bar { flex:1; background:var(--green-dim); border-radius:2px 2px 0 0; border:1px solid var(--green-border); transition:background 0.2s; }
.chart-bar.hi { background:rgba(0,217,126,0.25); border-color:var(--green); }

.product-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); background:var(--green-dim); border:1px solid var(--green-border); padding:4px 12px; border-radius:100px; margin-bottom:16px; }
.product-info h3 { font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:13px; }
.product-info .pdesc { font-size:0.88rem; color:var(--text); line-height:1.8; font-weight:300; margin-bottom:24px; }
.product-feat { display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.pf-item { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text); }
.pf-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* ===== PROCESS ===== */
.process { padding:96px 0; background:var(--bg); transition:var(--tt); }
.process-header { text-align:center; margin-bottom:60px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.process-grid::before { content:''; position:absolute; top:27px; left:calc(12.5% + 12px); right:calc(12.5% + 12px); height:1px; background:linear-gradient(90deg,var(--green),rgba(0,217,126,0.1)); z-index:0; }
.process-step { text-align:center; padding:0 18px; position:relative; z-index:1; }
.step-circle { width:54px; height:54px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; font-weight:800; color:var(--green); transition:all 0.25s; }
.process-step:hover .step-circle { background:var(--green); color:#070e1a; border-color:var(--green); box-shadow:0 0 20px rgba(0,217,126,0.25); }
.process-step h4 { font-size:0.92rem; font-weight:700; margin-bottom:8px; }
.process-step p { font-size:0.78rem; color:var(--text-muted); line-height:1.7; }

/* ===== CONTACT ===== */
.contact { padding:96px 0; background:var(--bg-1); position:relative; transition:var(--tt); }
.contact::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--green-border),transparent); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:72px; align-items:start; }
.contact-left h2 { font-size:1.9rem; margin-bottom:12px; }
.contact-left p { font-size:0.875rem; color:var(--text); line-height:1.8; margin-bottom:36px; }
.contact-info-list { display:flex; flex-direction:column; gap:14px; }
.ci-item { display:flex; align-items:center; gap:12px; font-size:0.85rem; color:var(--text); }
.ci-icon { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--green-dim); border:1px solid var(--green-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci-item a { color:var(--green); }
.ci-item a:hover { text-decoration:underline; }

.contact-form-box { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; transition:var(--tt); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:0.76rem; font-weight:600; color:var(--text); margin-bottom:7px; letter-spacing:0.03em; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 13px;
  color:var(--text-strong); font-family:'Outfit',sans-serif; font-size:0.875rem;
  transition:all 0.2s; outline:none; appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--green-border); background:var(--input-focus); box-shadow:0 0 0 3px var(--green-dim); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
.form-group select option { background:var(--bg-2); color:var(--text-strong); }
.form-group textarea { resize:vertical; min-height:90px; }
.email-warning { font-size:0.74rem; color:#f59e0b; margin-top:4px; display:none; align-items:center; gap:5px; }
.email-warning.show { display:flex; }
.radio-group { display:flex; gap:20px; }
.radio-label { display:flex; align-items:center; gap:7px; font-size:0.84rem; color:var(--text); }
.radio-label input { accent-color:var(--green); }
.form-success { margin-top:12px; padding:13px 16px; background:var(--green-dim); border:1px solid var(--green-border); border-radius:var(--radius-sm); color:var(--green); font-size:0.875rem; }
.form-error { margin-top:12px; padding:13px 16px; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.25); border-radius:var(--radius-sm); color:#f87171; font-size:0.875rem; }

/* ===== FOOTER ===== */
.footer { background:var(--footer-bg); border-top:1px solid var(--border); padding:68px 0 28px; transition:background 0.35s ease; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:44px; margin-bottom:52px; }
.footer-logo { height:34px; margin-bottom:14px; }
.footer-desc { font-size:0.82rem; color:var(--footer-text); line-height:1.75; max-width:240px; margin-bottom:8px; }
.footer-cert { font-size:0.7rem; color:var(--green); opacity:0.8; }
.footer-col h5 { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--footer-strong); margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:9px; }
.footer-col a { font-size:0.82rem; color:var(--footer-text); transition:color 0.18s; }
.footer-col a:hover { color:var(--green); }
.footer-email { display:block; font-size:0.84rem; color:var(--green); margin-bottom:5px; }
.footer-addr { font-size:0.8rem; color:var(--footer-text); margin-bottom:16px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:22px; display:flex; align-items:center; justify-content:space-between; font-size:0.76rem; color:var(--footer-text); }

/* ===== CHATBOT ===== */
.chatbot-fab { position:fixed; bottom:28px; right:28px; width:54px; height:54px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:none !important; z-index:999; box-shadow:0 4px 18px rgba(0,217,126,0.32); transition:all 0.22s var(--ease); border:none; }
.chatbot-fab:hover { transform:scale(1.06); box-shadow:0 6px 24px rgba(0,217,126,0.42); }
.fab-pulse { position:absolute; top:7px; right:7px; width:8px; height:8px; background:#fff; border-radius:50%; border:2px solid var(--green); animation:fabPulse 2.5s infinite; }
@keyframes fabPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

.chatbot-panel { position:fixed; bottom:92px; right:28px; width:356px; max-height:520px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-xl); display:flex; flex-direction:column; z-index:999; box-shadow:var(--shadow); transform:scale(0.92) translateY(14px); opacity:0; pointer-events:none; transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1); overflow:hidden; }
.chatbot-panel.open { transform:none; opacity:1; pointer-events:all; }
.cb-header { background:var(--bg-3); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; transition:var(--tt); }
.cb-header-left { display:flex; align-items:center; gap:10px; }
.cb-avatar { width:32px; height:32px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:0.72rem; color:#070e1a; }
.cb-name { font-size:0.84rem; font-weight:700; color:var(--text-strong); line-height:1; margin-bottom:2px; }
.cb-online { font-size:0.65rem; color:var(--green); }
.cb-close-btn { background:none; border:none; color:var(--text-muted); font-size:1.1rem; cursor:none !important; padding:4px; line-height:1; transition:color 0.18s; }
.cb-close-btn:hover { color:var(--text-strong); }
.cb-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.cb-m { max-width:86%; padding:9px 12px; border-radius:9px; font-size:0.82rem; line-height:1.5; animation:cbIn 0.22s var(--ease); }
@keyframes cbIn { from{opacity:0;transform:translateY(4px) scale(0.97)} to{opacity:1;transform:none} }
.cb-m.bot { background:var(--bg-3); border:1px solid var(--border); color:var(--text); align-self:flex-start; border-radius:3px 9px 9px 9px; }
.cb-m.usr { background:var(--green); color:#070e1a; font-weight:600; align-self:flex-end; border-radius:9px 3px 9px 9px; }
.cb-opts { display:flex; flex-direction:column; gap:5px; align-self:stretch; animation:cbIn 0.22s 0.04s var(--ease) both; }
.cb-opt { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; color:var(--text); font-size:0.79rem; cursor:none !important; text-align:left; font-family:'Outfit',sans-serif; transition:all 0.18s; }
.cb-opt:hover { border-color:var(--green-border); color:var(--text-strong); background:var(--bg-3); }
.cb-foot { display:none; gap:7px; padding:11px 13px; border-top:1px solid var(--border); flex-shrink:0; }
.cb-foot.active { display:flex; }
.cb-inp { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; color:var(--text-strong); font-family:'Outfit',sans-serif; font-size:0.82rem; outline:none; transition:border 0.18s; }
.cb-inp:focus { border-color:var(--green-border); }
.cb-inp::placeholder { color:var(--text-muted); }
.cb-send { width:34px; height:34px; background:var(--green); border:none; border-radius:var(--radius-sm); cursor:none !important; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.18s; }
.cb-send:hover { background:var(--green-2); }

/* ===== LIGHT MODE — HERO STAYS DARK ===== */
[data-theme="light"] .hero {
  background: #070e1a !important;
}
[data-theme="light"] .hero .hero-eyebrow-text,
[data-theme="light"] .hero .hero-line { color: #00b868; background: #00b868; }
[data-theme="light"] .hero .hero-title { color: #ffffff; }
[data-theme="light"] .hero .ht-green { color: #00b868; }
[data-theme="light"] .hero .hero-sub { color: #8fa3be; }
[data-theme="light"] .hero .proof-num { color: #ffffff; }
[data-theme="light"] .hero .proof-label { color: #4a6080; }
[data-theme="light"] .hero .proof-divider { background: rgba(255,255,255,0.08); }
[data-theme="light"] .ticker-bar { border-color: rgba(15,30,53,0.1); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-right { display:none; }
  .mv-top { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .why-header { grid-template-columns:1fr; gap:14px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .services-header { grid-template-columns:1fr; gap:14px; }
  .product-block { grid-template-columns:1fr; gap:28px; }
  .product-block.flip { direction:ltr; }
  .contact-grid { grid-template-columns:1fr; gap:44px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--nav-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--nav-border); padding:18px 24px; gap:4px; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .nav-inner { position:relative; }
  .process-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .process-grid::before { display:none; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .chatbot-panel { width:calc(100vw - 32px); right:16px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
  * { cursor:auto !important; }
  #cursorDot, #cursorRing { display:none; }
}
@media (max-width:560px) {
  .container { padding:0 20px; }
  .why-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .hero-proof { gap:14px; flex-wrap:wrap; }
  .contact-form-box { padding:24px; }
}