* { margin:0; padding:0; box-sizing:border-box; }
::selection { background: var(--primary); color: var(--bg); }
html { scroll-behavior: smooth; }

/* DARK THEME */
:root, [data-theme="dark"] {
  --bg:#0a0a0f; --bg2:#12121a; --bg3:#1a1a25;
  --surface:rgba(255,255,255,0.02); --surface-hover:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.06); --border-hover:rgba(255,255,255,0.12);
  --text:#e8e8ed; --text-secondary:#8888a0; --text-muted:#55556a;
  --primary:#00e5a0; --primary-bg:rgba(0,229,160,0.1);
  --accent:#6c5ce7; --accent-bg:rgba(108,92,231,0.1);
  --danger:#fd7272; --warning:#ffc048; --shadow:rgba(0,0,0,0.3);
  --nav-bg:rgba(10,10,15,0.85);
  --glow1:rgba(0,229,160,0.08); --glow2:rgba(108,92,231,0.06);
  --input-bg:rgba(255,255,255,0.04); --grid-line:rgba(255,255,255,0.02);
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg:#f5f5f8; --bg2:#ffffff; --bg3:#eeeef2;
  --surface:rgba(0,0,0,0.02); --surface-hover:rgba(0,0,0,0.04);
  --border:rgba(0,0,0,0.08); --border-hover:rgba(0,0,0,0.15);
  --text:#1a1a2e; --text-secondary:#5a5a72; --text-muted:#8888a0;
  --primary:#00b87a; --primary-bg:rgba(0,184,122,0.1);
  --accent:#6c5ce7; --accent-bg:rgba(108,92,231,0.08);
  --danger:#e04545; --warning:#e6a020; --shadow:rgba(0,0,0,0.08);
  --nav-bg:rgba(255,255,255,0.9);
  --glow1:rgba(0,184,122,0.06); --glow2:rgba(108,92,231,0.04);
  --input-bg:rgba(0,0,0,0.03); --grid-line:rgba(0,0,0,0.03);
}

body { font-family:'Outfit', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:background 0.4s, color 0.4s; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideRight { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes gridMove { 0%{background-position:0 0} 100%{background-position:60px 60px} }

/* COMMON */
.grid-bg { background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:60px 60px; animation:gridMove 20s linear infinite; }
.glow-orb { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:var(--primary-bg); color:var(--primary); border-radius:20px; font-size:11px; font-family:'JetBrains Mono',monospace; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.stat-num { font-size:52px; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }

.card { padding:36px; background:var(--surface); border-radius:24px; border:1px solid var(--border); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; }
.card:hover { transform:translateY(-8px); box-shadow:0 20px 60px var(--shadow); border-color:var(--border-hover); }

.btn-primary { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; background:linear-gradient(135deg,var(--primary),#00b87a); color:#0a0a0f; font-weight:700; font-size:15px; letter-spacing:0.5px; border:none; border-radius:60px; cursor:pointer; transition:all 0.3s; font-family:'Outfit',sans-serif; text-decoration:none; }
.btn-primary:hover { transform:scale(1.05); box-shadow:0 8px 40px rgba(0,229,160,0.35); }
.btn-outline { display:inline-flex; align-items:center; gap:10px; padding:15px 35px; background:transparent; color:var(--text); font-weight:600; font-size:15px; border:2px solid var(--border); border-radius:60px; cursor:pointer; transition:all 0.3s; font-family:'Outfit',sans-serif; text-decoration:none; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }

.input-field { width:100%; padding:16px 20px; background:var(--input-bg); border:1px solid var(--border); border-radius:14px; color:var(--text); font-size:15px; font-family:'Outfit',sans-serif; outline:none; transition:border-color 0.3s; }
.input-field:focus { border-color:var(--primary); }
.input-field::placeholder { color:var(--text-muted); }

/* NAV */
.nav-link { position:relative; cursor:pointer; padding:8px 0; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500; color:var(--text-secondary); transition:color 0.3s; background:none; border:none; font-family:'Outfit',sans-serif; text-decoration:none; }
.nav-link:hover,.nav-link.active { color:var(--primary); }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--primary); transition:width 0.3s; }
.nav-link:hover::after,.nav-link.active::after { width:100%; }

.theme-toggle { width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; transition:all 0.3s; }
.theme-toggle:hover { border-color:var(--primary); background:var(--surface-hover); }

.lang-switcher { display:flex; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.lang-btn { padding:6px 10px; font-size:11px; font-weight:600; font-family:'JetBrains Mono',monospace; background:none; border:none; cursor:pointer; color:var(--text-muted); transition:all 0.2s; }
.lang-btn.active { background:var(--primary); color:#0a0a0f; }
.lang-btn:hover:not(.active) { color:var(--text); }

/* Mobile hamburger */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:all 0.3s; border-radius:2px; }
.mobile-nav-cta { display:none; }

/* Section padding */
.section-pad { padding:100px 80px; }
.section-pad-sm { padding:40px 80px; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.gallery-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--border); cursor:pointer; transition:transform 0.3s; }
.gallery-img:hover { transform:scale(1.03); }

/* ADMIN */
.admin-sidebar { width:260px; background:var(--bg2); border-right:1px solid var(--border); padding:24px 0; min-height:100vh; position:fixed; top:0; left:0; z-index:200; transition:transform 0.3s ease; }
.admin-sidebar-close { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.admin-mobile-header { display:none; }
.admin-sidebar-overlay { display:none; }
.admin-topbar { display:none; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg2); margin:-16px -16px 16px; }
.admin-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; }
.admin-sidebar-link { display:flex; align-items:center; gap:12px; padding:12px 24px; color:var(--text-secondary); text-decoration:none; font-size:14px; font-weight:500; transition:all 0.2s; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:'Outfit',sans-serif; }
.admin-sidebar-link:hover,.admin-sidebar-link.active { color:var(--primary); background:var(--primary-bg); }
.admin-content { margin-left:260px; padding:32px; min-height:100vh; }
.admin-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:24px; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { text-align:left; padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.admin-table td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text-secondary); }
.admin-table tr:hover td { background:var(--surface-hover); }
.admin-btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:'Outfit',sans-serif; transition:all 0.2s; }
.admin-btn-primary { background:var(--primary); color:#0a0a0f; }
.admin-btn-primary:hover { opacity:0.85; }
.admin-btn-danger { background:var(--danger); color:#fff; }
.admin-btn-danger:hover { opacity:0.85; }
.admin-btn-outline { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.admin-btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.admin-input { width:100%; padding:12px 16px; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:14px; font-family:'Outfit',sans-serif; outline:none; transition:border-color 0.3s; }
.admin-input:focus { border-color:var(--primary); }
.admin-input::placeholder { color:var(--text-muted); }
.admin-label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--text-secondary); letter-spacing:0.5px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:10px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:0 6px; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .section-pad { padding:60px 40px; }
  .section-pad-sm { padding:30px 40px; }
  .stat-num { font-size:40px; }
}

@media (max-width: 768px) {
  .hamburger { display:block; }
  .nav-desktop { display:none; }
  .nav-desktop.open { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; background:var(--nav-bg); backdrop-filter:blur(20px); padding:20px; border-bottom:1px solid var(--border); gap:0; }
  .nav-desktop.open .nav-link { padding:14px 0; font-size:16px; }
  .nav-right .btn-primary { display:none; }
  .nav-right .lang-switcher { order:-1; }
  .mobile-nav-cta { display:block !important; }
  .section-pad { padding:48px 20px; }
  .section-pad-sm { padding:24px 20px; }
  .hero-grid { grid-template-columns:1fr !important; }
  .hero-deco { display:none !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
  .stat-num { font-size:36px; }
  .solutions-grid { grid-template-columns:1fr !important; }
  .project-row { grid-template-columns:1fr !important; gap:12px !important; }
  .project-row > div:last-child { text-align:left !important; }
  .two-col { grid-template-columns:1fr !important; gap:40px !important; }
  .about-features { grid-template-columns:1fr 1fr !important; }
  .card { padding:24px; }
  .partners-wrap { gap:16px !important; }
  .footer-wrap { flex-direction:column; gap:20px; text-align:center; }
  h1 { font-size:36px !important; letter-spacing:-1px !important; }
  h2 { font-size:32px !important; }
  /* Admin mobile */
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,0.3); }
  .admin-sidebar-close { display:flex !important; }
  .admin-overlay { display:block !important; }
  .admin-topbar { display:flex !important; }
  .admin-content { margin-left:0; padding:16px; }
  .admin-card { padding:16px; }
  .admin-table th, .admin-table td { padding:10px 8px; font-size:12px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 480px) {
  .section-pad { padding:32px 16px; }
  .stats-grid { grid-template-columns:1fr 1fr !important; gap:16px !important; }
  .stat-num { font-size:28px; }
  .about-features { grid-template-columns:1fr !important; }
  .btn-primary { padding:14px 28px; font-size:14px; }
  .btn-outline { padding:13px 24px; font-size:14px; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
}

/* ReactQuill Overrides for Admin Panel */
.ql-container.ql-snow {
  border: 1px solid var(--border) !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: var(--bg2);
  font-family: inherit !important;
  font-size: 15px !important;
}

.ql-toolbar.ql-snow {
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: var(--bg2);
  font-family: inherit !important;
}

.ql-editor {
  min-height: 150px;
  max-height: 400px;
  overflow-y: auto;
  color: var(--text);
}


/* Brand logo — artwork is white (fits dark theme). Invert to black on light theme. */
.brand-logo { filter: none; transition: filter 0.3s; }
[data-theme="light"] .brand-logo { filter: invert(1); }