:root {
  --navy:        #0b1629;
  --navy-mid:    #ffffff;
  --green:       #22c55e;
  --green-dark:  #16a34a;
  --red:         #ea4335;
  --red-light:   #fef2f2;
  --red-dark:    #b91c1c;
  --white:       #ffffff;
  --muted:       #334155;
  --border-nav:  rgba(0,0,0,0.08);
  --font:        'Manrope', sans-serif;
  --tr:          0.22s cubic-bezier(0.4,0,0.2,1);
}

 
.ng-topbar {
  background: var(--navy);
  border-bottom: 1px solid var(--border-nav);
  padding: 0 40px; height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  
}
.ng-topbar-left { display:flex; align-items:center; gap:18px; font-size:12px; color:var(--muted); }
.ng-topbar-left a { color:var(--muted); text-decoration:none; transition:color var(--tr); }
.ng-topbar-left a:hover { color:var(--green); }
.ng-topbar-left .sep { width:1px; height:13px; background:var(--border-nav); }
.ng-topbar-right { display:flex; align-items:center; gap:14px; }
.ng-topbar-phone {
  color:var(--white); text-decoration:none; font-weight:600; font-size:12px;
  display:flex; align-items:center; gap:6px; transition:color var(--tr);
}
.ng-topbar-phone:hover { color:var(--green); }
.ng-topbar-phone svg { width:13px; height:13px; fill:var(--green); }
.ng-topbar-cta {
  background:var(--green); color:var(--navy); font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:4px; text-decoration:none;
  text-transform:uppercase; letter-spacing:0.06em; transition:background var(--tr), color var(--tr);
}
.ng-topbar-cta:hover { background:var(--green-dark); color:#fff; }

/* NAVBAR */
.ng-navbar {
  background: var(--navy-mid);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid var(--border-nav);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border-radius: 11px;
  margin: 16px 14px 0px 14px;
  
}

/* ng-nav-inner is position:relative — dropdowns anchor HERE */
.ng-nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center;
  height: 70px;
  position: relative;   /* ← key: ng-dropdown left is relative to this box */
}

/* LOGO */
.ng-logo { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:32px; flex-shrink:0; }
.ng-logo img { width: 180px; }
/* NAV LINKS */
.ng-nav-links { display:flex; align-items:center; list-style:none; flex:1; justify-content: center; }
.ng-nav-item  { position:static; }   /* NOT relative */

.ng-nav-link {
  display:flex; align-items:center; gap:5px;
  padding:0 13px; height:70px;
  color:var(--muted); font-size:13.5px; font-weight:600;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border-bottom:3px solid transparent;
  transition:color var(--tr), background var(--tr), border-color var(--tr);
  user-select:none;
}
.ng-nav-link:hover, .ng-nav-item.open > .ng-nav-link {
  color:var(--navy); border-bottom-color:var(--green); background:rgba(0,0,0,0.04);
}
.ng-nav-link .chv {
  width:13px; height:13px; opacity:0.55; flex-shrink:0;
  transition:transform var(--tr), opacity var(--tr);
}
.ng-nav-item.open > .ng-nav-link .chv { transform:rotate(180deg); opacity:1; }

/* NAV RIGHT */
.ng-nav-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.ng-nav-login {
  color:#2c2d2f; font-size:13px; font-weight:600; text-decoration:none;
  padding:7px 13px; border:1px solid var(--border-nav); border-radius:6px;
  transition:color var(--tr), border-color var(--tr), background var(--tr);
}
.ng-nav-login:hover { color:#ea4335; border-color:#ea4335; background:rgba(255,255,255,0.06); }
.ng-nav-proposal {
  background:var(--green); color:var(--navy); font-size:13px; font-weight:700;
  text-decoration:none; padding:9px 17px; border-radius:6px; white-space:nowrap;
  transition:background var(--tr), box-shadow var(--tr), transform var(--tr);
}
.ng-nav-proposal:hover { background:var(--green-dark); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(34,197,94,0.35); }

/* MEGA DROPDOWN
   position:absolute inside .ng-nav-inner (position:relative)
   left is set by JS to center it within ng-nav-inner width     */
.ng-dropdown {
  position: absolute;
  top: 70px;                  /* flush below nav bar */
 
 
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.07);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 260px;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
  z-index: 2000;
}
.ng-nav-item.open .ng-dropdown {
  opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
}

/* Green → Red top stripe */
.ng-dropdown::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--red) 55%, transparent 100%);
  z-index:1;
}

/* DROP COLUMNS */
.ng-drop-col { padding:28px 22px; border-right:1px solid #f1f5f9;  }
.ng-drop-col:last-child  { border-right:none; background:#fafbfc;   }
.ng-drop-col:first-child { padding-left:28px; }

.ng-drop-head {
  display:flex; align-items:center; gap:9px;
  margin-bottom:16px; padding-bottom:13px;
  border-bottom:1.5px solid #f0f4f8;
}
.ng-drop-icon {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ng-drop-icon svg { width:14px; height:14px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ng-drop-icon.green  { background:#f0fdf4; }
.ng-drop-icon.green svg { stroke:var(--green-dark); }
.ng-drop-icon.red    { background:var(--red-light); }
.ng-drop-icon.red svg { stroke:var(--red-dark); }
.ng-drop-icon.blue   { background:#eff6ff; }
.ng-drop-icon.blue svg { stroke:#1d4ed8; }
.ng-drop-icon.cases  { background:#fff7ed; }
.ng-drop-icon.cases svg { stroke:#c2410c; fill:none; }

.ng-drop-col-title {
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.09em; color:#0b1629;
}

/* Links */
.ng-drop-links { list-style:none; display:flex; flex-direction:column; gap:1px; }
.ng-drop-links a {
  display:flex; align-items:center; gap:8px;
  padding:6px 9px; font-size:13.5px; font-weight:500;
  color:#374151; text-decoration:none; border-radius:6px;
  transition:background var(--tr), color var(--tr), padding-left var(--tr);
}
.ng-drop-links a .dot {
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  opacity:0; transition:opacity var(--tr);
}
.ng-drop-links a:hover { padding-left:13px; }
.ng-drop-links a:hover .dot { opacity:1; }

/* Green col */
.ng-drop-links.g a .dot  { background:var(--green); }
.ng-drop-links.g a:hover { background:#f0fdf4; color:#0b1629; }
/* Red col */
.ng-drop-links.r a .dot  { background:var(--red); }
.ng-drop-links.r a:hover { background:var(--red-light); color:#0b1629; }
/* Blue col */
.ng-drop-links.b a .dot  { background:#3b82f6; }
.ng-drop-links.b a:hover { background:#eff6ff; color:#0b1629; }

/* See more */
a.ng-see-more {
  display:inline-flex !important; align-items:center; gap:5px;
  margin-top:8px; font-size:12px; font-weight:700;
  color:var(--red-dark) !important; padding:4px 9px !important;
  background:transparent !important;
  transition:gap var(--tr), color var(--tr) !important;
}
a.ng-see-more:hover { gap:9px !important; color:var(--navy) !important; padding-left:9px !important; background:transparent !important; }
a.ng-see-more svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.5; flex-shrink:0; }

/* Badges */
.ng-badge {
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px;
  letter-spacing:0.05em; text-transform:uppercase; margin-left:auto;
}
.ng-badge.new { background:var(--red-light); color:var(--red-dark); }
.ng-badge.hot { background:#fff7ed; color:#c2410c; }

/* Case study cards */
.ng-drop-cases { display:flex; flex-direction:column; gap:12px; }
.ng-case-card {
  display:block; text-decoration:none; border-radius:8px; overflow:hidden;
  border:1px solid #e8edf4;
  transition:box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.ng-case-card:hover { box-shadow:0 8px 24px rgba(0,0,0,0.1); transform:translateY(-2px); border-color:#d1d9e6; }
.ng-case-thumb {
  height:74px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.3);
}
.t1 { background:linear-gradient(135deg,#0b1629,#1e3a5f); }
.t2 { background:linear-gradient(135deg,#134e2a,#15803d); }
.t3 { background:linear-gradient(135deg,#4c1d95,#6d28d9); }
.t4 { background:linear-gradient(135deg,#7f1d1d,#b91c1c); }
.ng-case-body { padding:10px 11px 12px; background:#fff; }
.ng-case-tag {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-bottom:4px;
}
.ng-case-tag.green { background:#f0fdf4; color:var(--green-dark); }
.ng-case-tag.red   { background:var(--red-light); color:var(--red-dark); }
.ng-case-tag.blue  { background:#eff6ff; color:#1d4ed8; }
.ng-case-title  { font-size:12px; font-weight:700; color:#0b1629; line-height:1.4; }
.ng-case-metric { font-size:11px; color:#64748b; margin-top:3px; font-weight:500; }

/* HAMBURGER */
.ng-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:8px; margin-left:auto; background:none; border:none;
}
.ng-hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
.ng-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ng-hamburger.open span:nth-child(2) { opacity:0; }
.ng-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* MOBILE */
@media (max-width: 1024px) {
  .ng-topbar { display:none; }
  .ng-nav-inner { padding:0 16px; }
  .ng-hamburger { display:flex; }
  .ng-nav-links {
    display:none; flex-direction:column;
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background:var(--navy-mid); overflow-y:auto; padding:16px; z-index:1999;
  }
  .ng-nav-links.open { display:flex; }
  .ng-nav-item { width:100%; }
  .ng-nav-link { height:auto; padding:13px 10px; border-bottom:1px solid var(--border-nav); justify-content:space-between; }
  .ng-dropdown {
    position:static; width:100%; max-width:100%;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    display:none; grid-template-columns:1fr;
    box-shadow:none; background:rgba(255,255,255,0.04);
    border:1px solid var(--border-nav); border-radius:8px; padding:0;
    margin-top:6px; overflow:hidden;
  }
  .ng-nav-item.open .ng-dropdown { display:grid; }
  .ng-drop-col { padding:16px; border-right:none; border-bottom:1px solid rgba(255,255,255,0.05); background:transparent !important; }
  .ng-drop-col:last-child { border-bottom:none; }
  .ng-drop-col-title { color:#94a3b8; }
  .ng-drop-links a { color:#cbd5e1; }
  .ng-drop-links a:hover { color:#fff; }
  .ng-case-body { background:rgba(255,255,255,0.04); }
  .ng-case-title { color:#e2e8f0; }
  .ng-nav-right { display:none; }
  .ng-logo { margin-right:0; }
}

/* DEMO */
.ng-hero-demo {
  background:linear-gradient(135deg,#0b1629,#0f2444);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:rgba(255,255,255,0.22);
  font-size:13px; letter-spacing:0.07em; text-transform:uppercase; text-align:center;
}

 .ng-dropdown.development-dropdown{
  max-width: 700px;
  grid-template-columns:1fr 1fr 1fr;
 }