:root {
   --primary-dark: #0c1929;
   --primary-navy: #152238;
   --primary-blue: #1e3a5f;
   --accent-gold: #c9a55c;
   --accent-gold-light: #dfc78a;
   --accent-gold-dark: #a8873d;
   --text-white: #ffffff;
   --text-light: #e8edf3;
   --text-muted: #8a9bb5;
   --text-dark: #1a2332;
   --bg-light: #f7f9fc;
   --bg-card: #ffffff;
   --success: #22c55e;
   --warning: #f59e0b;
   --danger: #ef4444;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 20px;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --navy: #0B1C2D;
   --navy-light: #122336;
   --gold: #C9A84C;
   --gold-light: #E8C97A;
   --white: #FFFFFF;
   --off-white: #F8F6F1;
   --gray: #8899AA;
   --gray-light: #E8EDF2;
   --text: #1A2B3C;
   --sidebar-w: 240px;
   --off-white: #F8F6F1;

 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   background: var(--bg-light);
   color: var(--text-dark);
   line-height: 1.6;
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Playfair Display', Georgia, serif;
   font-weight: 600;
   line-height: 1.2;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 img {
   max-width: 100%;
 }

 .container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 24px;
 }

 /* Page visibility */
 .page {
   display: none;
 }

 .page.active {
   display: block;
 }

 /* ==================== HEADER ==================== */
 .header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 16px 0;
   transition: var(--transition);
 }

 .header.scrolled {
   background: rgba(12, 25, 41, 0.95);
   backdrop-filter: blur(20px);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   padding: 12px 0;
 }

 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
 }

 .logo-icon {
   width: 180px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .logo-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .logo-text {
   display: flex;
   flex-direction: column;
 }

 .logo-name {
   /* font-family: 'Playfair Display', serif; */
   font-size: 22px;
   font-weight: 700;
   color: var(--text-white);
   letter-spacing: 0.5px;
 }

 .btn-ghost {
   background: transparent;
   color: var(--text-dark);
   border: 1px solid #e2e8f0 !important;
 }

 .btn-ghost:hover {
   border-color: #c9a55c !important;
   color: #c9a55c !important;
 }

 .logo-tagline {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--accent-gold);
   font-weight: 500;
 }

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

 .nav-link {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-light);
   transition: var(--transition);
   position: relative;
   padding: 8px 0;
 }

 .nav-link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   /* background: var(--accent-gold); */
   transition: var(--transition);
 }

 .nav-link:hover {
   color: var(--accent-gold);
 }

 .nav-link:hover::after {
   width: 100%;
 }

 .header-actions {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   font-size: 14px;
   font-weight: 600;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition);
   border: none;
   font-family: inherit;
 }

 .btn-outline {
   background: transparent;
   color: var(--text-white);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .btn-outline:hover {
   border-color: var(--accent-gold);
   color: var(--accent-gold);
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
   color: var(--primary-dark);
   border: none;
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(201, 165, 92, 0.4);
 }

 .btn-secondary {
   background: var(--primary-blue);
   color: var(--text-white);
 }

 .btn-secondary:hover {
   background: var(--primary-navy);
 }

 .btn-ghost {
   background: transparent;
   color: var(--text-dark);
   border: 1px solid #e2e8f0;
 }

 .btn-ghost:hover {
   border-color: var(--accent-gold);
   color: var(--accent-gold);
 }

 .btn-lg {
   padding: 16px 32px;
   font-size: 15px;
 }

 .btn-sm {
   padding: 8px 16px;
   font-size: 13px;
 }

 .mobile-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 8px;
   background: none;
   border: none;
   cursor: pointer;
 }

 .mobile-toggle span {
   width: 24px;
   height: 2px;
   background: var(--text-white);
   transition: var(--transition);
 }

 /* ==================== HERO SECTION ==================== */

 .herohome {
   min-height: 100vh;
   background-image: url("../biglynx-images/Picture1.jpg");
   /* background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-navy) 50%, var(--primary-blue) 100%); */
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   background-size: cover;
 }

 .herohome::before {
   content: '';
   position: absolute;
   inset: 0;
   /* background: 
        radial-gradient(ellipse at 20% 20%, rgba(201, 165, 92, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(201, 165, 92, 0.08) 0%, transparent 40%); */
   background: rgba(0, 0, 0, 0.8);

 }

 .hero {
   min-height: 100vh;
   /* background-image: url("../biglynx-images/Picture1.jpg"); */
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-navy) 50%, var(--primary-blue) 100%);
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   background-size: cover;
 }

 .hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse at 20% 20%, rgba(201, 165, 92, 0.1) 0%, transparent 50%),
     radial-gradient(ellipse at 80% 80%, rgba(201, 165, 92, 0.08) 0%, transparent 40%);
   /* background: rgba(0,0,0,0.8); */

 }

 .hero-pattern {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(201, 165, 92, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(201, 165, 92, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
 }

 .hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 900px;
   margin: 0 auto;
   padding: 120px 24px 80px;
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 20px;
   background: rgba(201, 165, 92, 0.15);
   border: 1px solid rgba(201, 165, 92, 0.3);
   border-radius: 50px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--accent-gold);
   margin-bottom: 32px;
   animation: fadeInUp 0.8s ease;
 }

 .hero-title {
   font-size: clamp(40px, 6vw, 72px);
   color: var(--text-white);
   margin-bottom: 24px;
   animation: fadeInUp 0.8s ease 0.1s both;
 }

 .hero-title .highlight {
   color: var(--accent-gold);
 }

 .hero-subtitle {
   font-size: 18px;
   color: var(--text-muted);
   max-width: 700px;
   margin: 0 auto 40px;
   line-height: 1.8;
   animation: fadeInUp 0.8s ease 0.2s both;
 }

 .hero-stats {
   display: flex;
   justify-content: center;
   gap: 48px;
   margin-bottom: 48px;
   flex-wrap: wrap;
   animation: fadeInUp 0.8s ease 0.3s both;
 }

 .hero-stat {
   text-align: center;
 }

 .hero-stat-value {
   /* font-family: 'Playfair Display', serif; */
   font-size: 42px;
   font-weight: 700;
   color: var(--accent-gold);
   display: block;
 }

 .hero-stat-label {
   font-size: 13px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .hero-cta {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
   animation: fadeInUp 0.8s ease 0.4s both;
 }

 .scroll-indicator {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 2px;
   animation: bounce 2s infinite;
 }

 @keyframes bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

   40% {
     transform: translateX(-50%) translateY(-10px);
   }

   60% {
     transform: translateX(-50%) translateY(-5px);
   }
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ==================== ABOUT SECTION ==================== */
 .section {
   padding: 100px 0;
 }

 .section-dark {
   background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-navy) 100%);
   color: var(--text-white);
 }

 .section-light {
   background: var(--bg-light);
 }

 .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 60px;
 }

 .section-label {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--accent-gold);
   margin-bottom: 16px;
 }

 .section-title {
   font-size: clamp(32px, 4vw, 48px);
   margin-bottom: 20px;
 }

 .section-dark .section-title {
   color: var(--text-white);
 }

 .section-subtitle {
   font-size: 17px;
   color: var(--text-muted);
   line-height: 1.7;
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .about-content h3 {
   font-size: 28px;
   margin-bottom: 20px;
 }

 .about-content p {
   color: #5a6a7e;
   margin-bottom: 16px;
   line-height: 1.8;
 }

 .about-features {
   display: grid;
   gap: 20px;
   margin-top: 32px;
 }

 .about-feature {
   display: flex;
   gap: 16px;
 }

 .about-feature-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, rgba(201, 165, 92, 0.15), rgba(201, 165, 92, 0.05));
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-gold);
   flex-shrink: 0;
 }

 .about-feature h4 {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .about-feature p {
   font-size: 14px;
   color: #6b7a8e;
   margin: 0;
 }

 .about-visual {
   position: relative;
 }

 .about-image {
   background: linear-gradient(135deg, var(--primary-navy), var(--primary-blue));
   border-radius: var(--radius-lg);
   aspect-ratio: 4/3;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .about-image::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     linear-gradient(rgba(201, 165, 92, 0.05) 1px, transparent 1px),
     linear-gradient(90deg, rgba(201, 165, 92, 0.05) 1px, transparent 1px);
   background-size: 30px 30px;
 }

 .seattle-skyline {
   width: 80%;
   height: 60%;
   position: relative;
 }

 .building {
   position: absolute;
   bottom: 0;
   background: linear-gradient(180deg, #1e3a5f 0%, #152238 100%);
   border-radius: 4px 4px 0 0;
 }

 .building::before {
   content: '';
   position: absolute;
   inset: 8px;
   background: repeating-linear-gradient(0deg,
       transparent,
       transparent 8px,
       rgba(201, 165, 92, 0.3) 8px,
       rgba(201, 165, 92, 0.3) 10px);
 }

 .building:nth-child(1) {
   left: 5%;
   width: 12%;
   height: 50%;
 }

 .building:nth-child(2) {
   left: 20%;
   width: 15%;
   height: 70%;
 }

 .building:nth-child(3) {
   left: 38%;
   width: 10%;
   height: 90%;
 }

 .building:nth-child(4) {
   left: 52%;
   width: 18%;
   height: 65%;
 }

 .building:nth-child(5) {
   left: 73%;
   width: 12%;
   height: 55%;
 }

 .building:nth-child(6) {
   left: 88%;
   width: 10%;
   height: 45%;
 }

 .space-needle {
   position: absolute;
   left: 38%;
   bottom: 0;
   width: 4%;
 }

 .space-needle::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 100%;
   background: var(--accent-gold);
 }

 .space-needle::after {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 15px;
   background: var(--accent-gold);
   border-radius: 50%;
 }

 .about-card {
   position: absolute;
   bottom: -30px;
   left: -30px;
   background: var(--bg-card);
   padding: 24px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .about-card-icon {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary-dark);
   font-size: 24px;
 }

 .about-card-value {
   /* font-family: 'Playfair Display', serif; */
   font-size: 32px;
   font-weight: 700;
   color: var(--text-dark);
 }

 .about-card-label {
   font-size: 13px;
   color: #6b7a8e;
 }

 /* ==================== SERVICES SECTION ==================== */
 .services-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
 }

 .service-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-md);
   padding: 32px 24px;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .service-card:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(201, 165, 92, 0.3);
   transform: translateY(-8px);
 }

 .service-card.featured {
   background: linear-gradient(180deg, rgba(201, 165, 92, 0.12) 0%, rgba(201, 165, 92, 0.04) 100%);
   border-color: rgba(201, 165, 92, 0.3);
 }

 .service-badge {
   position: absolute;
   top: -1px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
   color: var(--primary-dark);
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 6px 16px;
   border-radius: 0 0 8px 8px;
 }

 .service-icon {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(201, 165, 92, 0.05));
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-gold);
   font-size: 22px;
   margin-bottom: 20px;
 }

 .service-title {
   font-size: 20px;
   color: var(--text-white);
   margin-bottom: 12px;
 }

 .service-desc {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 20px;
 }

 .service-features {
   list-style: none;
 }

 .service-features li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 10px;
 }

 .service-features li i {
   color: var(--accent-gold);
   font-size: 10px;
 }

 /* ==================== PORTFOLIO SECTION ==================== */
 .portfolio-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 48px;
 }

 .portfolio-header-left {
   max-width: 500px;
 }

 .portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .portfolio-card {
   background: var(--bg-card);
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
 }

 .portfolio-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
 }

 .portfolio-image {
   height: 200px;
   background: linear-gradient(135deg, var(--primary-navy), var(--primary-blue));
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .portfolio-image i {
   font-size: 48px;
   color: rgba(201, 165, 92, 0.3);
 }

 .portfolio-status {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 6px 12px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
 }

 .portfolio-status.performing {
   background: rgba(34, 197, 94, 0.2);
   color: #22c55e;
 }

 .portfolio-status.development {
   background: rgba(245, 158, 11, 0.2);
   color: #f59e0b;
 }

 .portfolio-status.new {
   background: rgba(59, 130, 246, 0.2);
   color: #3b82f6;
 }

 .portfolio-body {
   padding: 24px;
 }

 .portfolio-type {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--accent-gold);
   margin-bottom: 8px;
 }

 .portfolio-name {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .portfolio-location {
   font-size: 14px;
   color: #6b7a8e;
   margin-bottom: 16px;
 }

 .portfolio-location i {
   margin-right: 6px;
   color: var(--accent-gold);
 }

 .portfolio-stats {
   display: flex;
   gap: 24px;
   padding-top: 16px;
   border-top: 1px solid #eef2f7;
 }

 .portfolio-stat {
   display: flex;
   flex-direction: column;
 }

 .portfolio-stat-value {
   /* font-family: 'Playfair Display', serif; */
   font-size: 18px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .portfolio-stat-label {
   font-size: 11px;
   color: #8a9bb5;
   text-transform: uppercase;
 }

 /* ==================== STATS SECTION ==================== */
 .stats-section {
   padding: 80px 0;
   background: var(--primary-dark);
 }

 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
 }




 .stat-card .stat-value {
   font-family: 'Cormorant Garamond', serif;
   font-size: 30px;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px;
 }

 .stat-card .stat-label {
   font-size: 14px;
   color: var(--text-muted);
 }

 /* ==================== TEAM SECTION ==================== */
 .team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
 }

 .team-card {
   text-align: center;
 }

 .team-avatar {
   width: 160px;
   height: 160px;
   margin: 0 auto 20px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   /* font-family: 'Playfair Display', serif; */
   font-size: 48px;
   font-weight: 600;
   color: var(--text-white);
 }

 .team-name {
   font-size: 20px;
   margin-bottom: 4px;
 }

 .team-title {
   font-size: 14px;
   color: var(--accent-gold);
   margin-bottom: 12px;
 }

 .team-bio {
   font-size: 14px;
   color: #6b7a8e;
   line-height: 1.6;
   margin-bottom: 16px;
 }

 .team-social {
   display: flex;
   justify-content: center;
   gap: 8px;
 }

 .team-social a {
   width: 36px;
   height: 36px;
   background: #f1f5f9;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #64748b;
   transition: var(--transition);
 }

 .team-social a:hover {
   background: var(--accent-gold);
   color: var(--primary-dark);
 }

 /* ==================== CONTACT SECTION ==================== */
 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 64px;
 }

 .contact-info h2 {
   font-size: 36px;
   color: var(--text-white);
   margin-bottom: 20px;
 }

 .contact-info p {
   color: var(--text-muted);
   margin-bottom: 32px;
   line-height: 1.8;
 }

 .contact-details {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .contact-item {
   display: flex;
   gap: 16px;
 }

 .contact-item-icon {
   width: 48px;
   height: 48px;
   background: rgba(201, 165, 92, 0.15);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-gold);
   flex-shrink: 0;
 }

 .contact-item h4 {
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   color: var(--text-white);
   margin-bottom: 4px;
 }

 .contact-item p {
   font-size: 14px;
   color: var(--text-muted);
   margin: 0;
 }

 .contact-form {
   background: var(--bg-card);
   padding: 40px;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .form-group {
   margin-bottom: 20px;
 }

 .form-label {
   display: block;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 8px;
   position: relative !important;
 }

 .form-input {
   width: 100%;
   padding: 14px 16px;
   font-size: 15px;
   font-family: inherit;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   transition: var(--transition);
   background: #f8fafc;
 }

 .form-input:focus {
   outline: none;
   border-color: var(--accent-gold);
   background: white;
   box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.1);
 }

 textarea.form-input {
   resize: vertical;
   min-height: 120px;
 }

 /* ==================== FOOTER ==================== */
 .footer {
   background: var(--primary-dark);
   padding: 80px 0 0;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.5fr;
   gap: 48px;
   padding-bottom: 60px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-brand p {
   color: var(--text-muted);
   font-size: 14px;
   line-height: 1.8;
   margin: 20px 0;
 }

 .footer-social {
   display: flex;
   gap: 12px;
 }

 .footer-social a {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-gold);
   transition: var(--transition);
 }

 .footer-social a:hover {
   background: var(--accent-gold);
   color: var(--primary-dark);
 }

 .footer-title {
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   color: var(--text-white);
   margin-bottom: 24px;
 }

 .footer-links {
   list-style: none;
 }

 .footer-links li {
   margin-bottom: 12px;
 }

 .footer-links a {
   font-size: 14px;
   color: var(--text-muted);
   transition: var(--transition);
 }

 .footer-links a:hover {
   color: var(--accent-gold);
 }

 .footer-contact p {
   font-size: 14px;
   color: var(--text-muted);
   margin-bottom: 12px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
 }

 .footer-contact i {
   color: var(--accent-gold);
   margin-top: 4px;
 }

 .footer-bottom {
   padding: 24px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .footer-copyright {
   font-size: 14px;
   color: var(--text-muted);
 }

 .footer-legal {
   display: flex;
   gap: 24px;
 }

 .footer-legal a {
   font-size: 14px;
   color: var(--text-muted);
   transition: var(--transition);
 }

 .footer-legal a:hover {
   color: var(--accent-gold);
 }

 /* ==================== LOGIN PAGE ==================== */
 .login-page {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1fr 1fr;
 }

 .login-branding {
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-navy) 100%);
   padding: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .login-branding::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse at 30% 30%, rgba(201, 165, 92, 0.1) 0%, transparent 50%);
 }

 .login-branding-content {
   position: relative;
   z-index: 1;
   max-width: 500px;
 }

 .login-branding h1 {
   font-size: 40px;
   color: var(--text-white);
   margin: 32px 0 20px;
 }

 .login-branding h1 span {
   color: var(--accent-gold);
 }

 .login-branding p {
   font-size: 16px;
   color: var(--text-muted);
   line-height: 1.8;
   margin-bottom: 40px;
 }

 .login-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }

 .login-feature {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
 }

 .login-feature i {
   width: 36px;
   height: 36px;
   background: rgba(201, 165, 92, 0.15);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent-gold);
 }

 .login-form-section {
   background: var(--bg-light);
   padding: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .login-form-container {
   width: 100%;
   max-width: 420px;
 }

 .login-toggle {
   display: flex;
   background: white;
   padding: 4px;
   border-radius: var(--radius-sm);
   margin-bottom: 32px;
   box-shadow: var(--shadow-sm);
 }

 .login-toggle button {
   flex: 1;
   padding: 12px;
   font-size: 14px;
   font-weight: 600;
   font-family: inherit;
   border: none;
   background: transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: var(--transition);
   color: #64748b;
 }

 .login-toggle button.active {
   background: var(--primary-dark);
   color: white;
 }

 .login-form h2 {
   font-size: 28px;
   margin-bottom: 8px;
 }

 .login-form>p {
   color: #64748b;
   margin-bottom: 32px;
 }

 .password-wrapper {
   position: relative;
 }

 .password-toggle {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: #94a3b8;
   cursor: pointer;
 }

 .form-options {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
 }

 .checkbox-wrapper {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: #64748b;
   cursor: pointer;
 }

 .checkbox-wrapper input {
   width: 16px;
   height: 16px;
   accent-color: var(--accent-gold);
 }

 .forgot-link {
   font-size: 14px;
   color: var(--accent-gold);
   font-weight: 500;
 }

 .login-divider {
   display: flex;
   align-items: center;
   margin: 24px 0;
   color: #94a3b8;
   font-size: 13px;
 }

 .login-divider::before,
 .login-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: #e2e8f0;
 }

 .login-divider span {
   padding: 0 16px;
 }

 .social-login {
   display: flex;
   justify-content: center;
   gap: 12px;
 }

 .social-login button {
   width: 48px;
   height: 48px;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   background: white;
   font-size: 18px;
   color: #64748b;
   cursor: pointer;
   transition: var(--transition);
 }

 .social-login button:hover {
   border-color: var(--accent-gold);
   color: var(--accent-gold);
 }

 .login-footer {
   text-align: center;
   margin-top: 24px;
   font-size: 14px;
   color: #64748b;
 }

 .login-footer a {
   color: var(--accent-gold);
   font-weight: 600;
 }

 /* Mobile Login Styles */
 .auth-method-toggle {
   display: flex;
   background: #f1f5f9;
   border-radius: var(--radius-sm);
   padding: 4px;
   margin-bottom: 20px;
 }

 .auth-method-toggle button {
   flex: 1;
   padding: 10px 16px;
   border: none;
   background: transparent;
   border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 500;
   color: #64748b;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .auth-method-toggle button.active {
   background: white;
   color: var(--primary-dark);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .auth-method-toggle button i {
   font-size: 16px;
 }

 .phone-input-wrapper {
   display: flex;
   gap: 8px;
 }

 .country-code-select {
   width: 100px;
   padding: 12px;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   font-size: 14px;
   background: white;
   cursor: pointer;
 }

 .phone-input-wrapper .form-input {
   flex: 1;
 }

 .otp-container {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin: 20px 0;
 }

 .otp-input {
   width: 50px;
   height: 56px;
   text-align: center;
   font-size: 24px;
   font-weight: 600;
   border: 2px solid #e2e8f0;
   border-radius: var(--radius-sm);
   transition: var(--transition);
 }

 .otp-input:focus {
   border-color: var(--accent-gold);
   outline: none;
 }

 .otp-input.filled {
   border-color: var(--accent-gold);
   background: rgba(212, 175, 55, 0.05);
 }

 .resend-otp {
   text-align: center;
   margin-top: 16px;
   font-size: 14px;
   color: #64748b;
 }

 .resend-otp a {
   color: var(--accent-gold);
   font-weight: 600;
   cursor: pointer;
 }

 .resend-otp a.disabled {
   color: #94a3b8;
   cursor: not-allowed;
 }

 .otp-timer {
   color: var(--accent-gold);
   font-weight: 600;
 }

 .mobile-form-step {
   display: none;
 }

 .mobile-form-step.active {
   display: block;
 }

 .back-to-phone {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #64748b;
   font-size: 14px;
   cursor: pointer;
   margin-bottom: 16px;
   background: none;
   border: none;
   padding: 0;
 }

 .back-to-phone:hover {
   color: var(--accent-gold);
 }

 .phone-preview {
   text-align: center;
   margin-bottom: 16px;
   padding: 12px;
   background: #f8fafc;
   border-radius: var(--radius-sm);
 }

 .phone-preview span {
   font-weight: 600;
   color: var(--primary-dark);
 }

 .sms-disclaimer {
   margin-top: 16px;
   font-size: 11px;
   line-height: 1.5;
   color: #94a3b8;
   text-align: center;
 }

 .sms-disclaimer a {
   color: var(--accent-gold);
   text-decoration: underline;
 }

 /* ==================== LEGAL PAGES (Terms & Privacy) ==================== */
 .legal-page {
   min-height: 100vh;
   background: #f8fafc;
 }

 .legal-header {
   background: linear-gradient(135deg, var(--primary-dark) 0%, #1a3a5c 100%);
   padding: 60px 0 80px;
   color: white;
   text-align: center;
 }

 .legal-header h1 {
   font-size: 2.5rem;
   font-weight: 700;
   margin: 20px 0 10px;
 }

 .legal-updated {
   color: rgba(255, 255, 255, 0.7);
   font-size: 14px;
 }

 .legal-content {
   max-width: 1300px;
   margin: -40px auto 0;
   padding: 0 20px 60px;
 }

 .legal-nav {
   margin-bottom: 30px;
 }

 .legal-section {
   background: white;
   border-radius: var(--radius-md);
   padding: 30px 40px;
   margin-bottom: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }

 .legal-section h2 {
   font-size: 1.4rem;
   color: var(--primary-dark);
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 2px solid var(--accent-gold);
 }

 .legal-section h3 {
   font-size: 1.1rem;
   color: var(--primary-dark);
   margin: 20px 0 12px;
 }

 .legal-section p {
   color: #4a5568;
   line-height: 1.8;
   margin-bottom: 16px;
 }

 .legal-section ul {
   margin: 16px 0;
   padding-left: 24px;
 }

 .legal-section li {
   color: #4a5568;
   line-height: 1.8;
   margin-bottom: 8px;
 }

 .legal-section strong {
   color: var(--primary-dark);
 }

 .legal-contact {
   background: #f8fafc;
   padding: 20px;
   border-radius: var(--radius-sm);
   margin-top: 16px;
 }

 .legal-contact p {
   margin-bottom: 4px;
 }

 @media (max-width: 768px) {
   .legal-header {
     padding: 40px 0 60px;
   }

   .legal-header h1 {
     font-size: 1.8rem;
   }

   .legal-section {
     padding: 20px;
   }

   .legal-section h2 {
     font-size: 1.2rem;
   }
 }

 /* ==================== DASHBOARD PAGE ==================== */
 .dashboard-page {
   display: flex;
   min-height: 100vh;
 }

 /* .sidebar {
      width: 260px;
      background: var(--primary-dark);
      padding: 24px 0;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 100;
      transition: var(--transition);
    } */

 .sidebar.collapsed {
   width: 80px;
 }

 .dashboardpage.collapsed {
   margin-left: 250px !important;
 }

 .sidebar-header {
   padding: 0 20px 24px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .sidebar-toggle {
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, 0.05);
   border: none;
   border-radius: 6px;
   color: var(--text-muted);
   cursor: pointer;
   transition: var(--transition);
 }

 .sidebar-toggle:hover {
   background: rgba(255, 255, 255, 0.1);
   color: white;
 }

 .sidebar-nav {
   flex: 1;
   padding: 24px 12px;
 }

 .nav-item {
   /* display: flex; */
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   color: var(--text-muted);
   border-radius: var(--radius-sm);
   margin-bottom: 4px;
   cursor: pointer;
   transition: var(--transition);
 }

 .nav-item:hover {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-white);
 }

 .nav-item.active {
   background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(201, 165, 92, 0.1));
   color: var(--accent-gold);
 }

 .nav-item i {
   width: 20px;
   text-align: center;
 }

 .nav-item span {
   font-size: 14px;
   font-weight: 500;
 }

 .sidebar-footer {
   padding: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .user-info {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 }

 .user-avatar {
   width: 40px;
   height: 40px;
   background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: var(--primary-dark);
 }

 .user-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text-white);
 }

 .user-role {
   font-size: 12px;
   color: var(--text-muted);
 }

 .logout-btn {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px;
   background: rgba(239, 68, 68, 0.1);
   border: 1px solid rgba(239, 68, 68, 0.2);
   border-radius: var(--radius-sm);
   color: #ef4444;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition);
 }

 .logout-btn:hover {
   background: rgba(239, 68, 68, 0.2);
 }

 .main-content {
   flex: 1;
   margin-left: 260px;
   background: var(--bg-light);
   min-height: 100vh;
 }

 .dashboard-header {
   background: white;
   padding: 20px 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #eef2f7;
   position: sticky;
   top: 0;
   z-index: 50;
 }

 .page-title {
   font-size: 24px;
   font-weight: 600;
 }

 .page-subtitle {
   font-size: 14px;
   color: #64748b;
 }

 .header-actions {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .search-box {
   position: relative;
 }

 .search-box input {
   width: 280px;
   padding: 10px 16px 10px 40px;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   font-size: 14px;
   background: #f8fafc;
 }

 .search-box input:focus {
   outline: none;
   border-color: var(--accent-gold);
   background: white;
 }

 .search-box i {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: #94a3b8;
 }

 .notification-btn {
   width: 40px;
   height: 40px;
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   position: relative;
   cursor: pointer;
   color: #64748b;
 }

 .notification-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   width: 18px;
   height: 18px;
   background: #ef4444;
   border-radius: 50%;
   font-size: 10px;
   font-weight: 600;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .dashboard-content {
   padding: 32px;
 }

 .dashboard-section {
   display: none;
 }

 .dashboard-section.active {
   display: block;
 }

 /* Dashboard Stats */
 .dashboard-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-bottom: 32px;
 }

 .dash-stat-card {
   background: white;
   padding: 24px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   display: flex;
   gap: 16px;
 }

 .dash-stat-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
 }

 .dash-stat-icon.blue {
   background: rgba(59, 130, 246, 0.1);
   color: #3b82f6;
 }

 .dash-stat-icon.gold {
   background: rgba(201, 165, 92, 0.1);
   color: var(--accent-gold);
 }

 .dash-stat-icon.green {
   background: rgba(34, 197, 94, 0.1);
   color: #22c55e;
 }

 .dash-stat-icon.purple {
   background: rgba(139, 92, 246, 0.1);
   color: #8b5cf6;
 }

 .dash-stat-value {
   font-size: 28px;
   font-weight: 700;
   color: var(--text-dark);
 }

 .dash-stat-label {
   font-size: 14px;
   color: #64748b;
 }

 .dash-stat-change {
   font-size: 12px;
   font-weight: 600;
   margin-top: 4px;
 }

 .dash-stat-change.positive {
   color: #22c55e;
 }

 .dash-stat-change.negative {
   color: #ef4444;
 }

 /* Dashboard Cards */
 /* Dashboard Stats */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 28px;
 }

 .stat-card {
   background: var(--white);
   border-radius: 14px;
   padding: 24px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
   transition: transform 0.2s;
 }

 .stat-card:hover {
   transform: translateY(-2px);
 }

 .stat-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 16px;
 }

 .stat-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
 }

 .stat-icon.gold {
   background: rgba(201, 168, 76, 0.12);
   color: var(--gold);
 }

 .stat-icon.blue {
   background: rgba(59, 130, 246, 0.12);
   color: #3B82F6;
 }

 .stat-icon.green {
   background: rgba(16, 185, 129, 0.12);
   color: #10B981;
 }

 .stat-icon.purple {
   background: rgba(139, 92, 246, 0.12);
   color: #8B5CF6;
 }

 .stat-badge {
   font-size: 12px;
   font-weight: 600;
   padding: 3px 8px;
   border-radius: 20px;
 }

 .stat-badge.up {
   background: rgba(16, 185, 129, 0.1);
   color: #10B981;
 }

 .stat-badge.down {
   background: rgba(239, 68, 68, 0.1);
   color: #EF4444;
 }

 .stat-value {
   font-family: 'Cormorant Garamond', serif;
   font-size: 30px;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px;
 }

 .stat-label {
   font-size: 13px;
   color: var(--gray);
 }

 /* Dashboard Grid */
 .dash-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;
   margin-bottom: 20px;
 }

 .dash-card {
   background: var(--white);
   border-radius: 14px;
   padding: 24px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 }

 .dash-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .dash-card-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--text);
 }


 /* Portfolio Table */
 .table-wrap {
   overflow-x: auto;
 }

 table {
   width: 100%;
   border-collapse: collapse;
 }

 th {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--gray);
   padding: 12px 16px;
   border-bottom: 1px solid var(--gray-light);
   text-align: left;
 }

 td {
   font-size: 14px;
   color: var(--text);
   padding: 14px 16px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
 }

 tr:last-child td {
   border-bottom: none;
 }

 tr:hover td {
   background: var(--off-white);
 }

 .status-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 20px;
 }

 .status-badge.active {
   background: rgba(16, 185, 129, 0.1);
   color: #10B981;
 }

 .status-badge.pending {
   background: rgba(245, 158, 11, 0.1);
   color: #F59E0B;
 }

 .status-badge.exited {
   background: rgba(107, 114, 128, 0.1);
   color: #6B7280;
 }

 .status-badge::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: currentColor;
 }

 /* Activity Feed */
 .activity-list {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 .activity-item {
   display: flex;
   gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
 }

 .activity-item:last-child {
   border-bottom: none;
 }

 .activity-dot {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
 }

 .activity-dot.green {
   background: rgba(16, 185, 129, 0.1);
   color: #10B981;
 }

 .activity-dot.blue {
   background: rgba(59, 130, 246, 0.1);
   color: #3B82F6;
 }

 .activity-dot.gold {
   background: rgba(201, 168, 76, 0.1);
   color: var(--gold);
 }

 .activity-text {
   flex: 1;
 }

 .activity-text p {
   font-size: 13px;
   color: var(--text);
   font-weight: 500;
   margin-bottom: 2px;
 }

 .activity-text span {
   font-size: 12px;
   color: var(--gray);
 }

 .activity-amount {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
 }

 .table-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   gap: 16px;
 }

 .search-input {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--off-white);
   border: 1px solid var(--gray-light);
   border-radius: 8px;
   padding: 10px 14px;
   flex: 1;
   max-width: 300px;
 }

 .search-input i {
   color: var(--gray);
   font-size: 14px;
 }

 .search-input input {
   border: none;
   background: none;
   outline: none;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   color: var(--text);
   flex: 1;
 }

 th {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--gray);
   padding: 12px 16px;
   border-bottom: 1px solid var(--gray-light);
   text-align: left;
 }

 /* Portfolio Table */
 .table-wrap {
   overflow-x: auto;
 }

 table {
   width: 100%;
   border-collapse: collapse;
 }

 th {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--gray);
   padding: 12px 16px;
   border-bottom: 1px solid var(--gray-light) !important;
   text-align: left;
 }

 td {
   font-size: 14px;
   color: var(--text);
   padding: 14px 16px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
   text-align: left;
 }

 tr:last-child td {
   border-bottom: none;
 }

 tr:hover td {
   background: var(--off-white);
 }

 .status-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 20px;
 }

 th,
 td {
   background: none;
   border: none;
 }

 .dash-card {
   width: 100%;
   overflow-x: auto;
 }

 /* Chart Placeholder */
 .chart-placeholder {
   height: 280px;
   display: flex;
   align-items: flex-end;
   gap: 8px;
   padding: 20px 0;
 }

 .chart-bar {
   flex: 1;
   background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-dark));
   border-radius: 4px 4px 0 0;
   position: relative;
   transition: var(--transition);
   cursor: pointer;
 }

 .chart-bar:hover {
   filter: brightness(1.1);
 }

 .chart-bar span {
   position: absolute;
   bottom: -24px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 11px;
   color: #64748b;
 }

 /* Allocation Chart */
 .allocation-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .allocation-item {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .allocation-color {
   width: 12px;
   height: 12px;
   border-radius: 3px;
 }

 .allocation-label {
   flex: 1;
   font-size: 14px;
   color: #64748b;
 }

 .allocation-value {
   font-size: 14px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .allocation-bar {
   width: 100%;
   height: 8px;
   background: #eef2f7;
   border-radius: 4px;
   margin-top: 8px;
   overflow: hidden;
 }

 .allocation-fill {
   height: 100%;
   border-radius: 4px;
 }

 /* Activity List */
 .activity-list {
   display: flex;
   flex-direction: column;
 }

 .activity-item {
   display: flex;
   gap: 16px;
   padding: 16px 0;
   border-bottom: 1px solid #eef2f7;
 }

 .activity-item:last-child {
   border-bottom: none;
 }

 .activity-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .activity-icon.investment {
   background: rgba(34, 197, 94, 0.1);
   color: #22c55e;
 }

 .activity-icon.property {
   background: rgba(59, 130, 246, 0.1);
   color: #3b82f6;
 }

 .activity-icon.investor {
   background: rgba(139, 92, 246, 0.1);
   color: #8b5cf6;
 }

 .activity-content {
   flex: 1;
 }

 .activity-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-dark);
   margin-bottom: 2px;
 }

 .activity-desc {
   font-size: 13px;
   color: #64748b;
 }

 .activity-time {
   font-size: 12px;
   color: #94a3b8;
 }

 /* Data Table */
 .data-table-wrapper {
   overflow-x: auto;
 }

 .toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
 }

 .toolbar-left {
   display: flex;
   gap: 12px;
 }

 .filter-select {
   padding: 10px 16px;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   font-size: 14px;
   background: white;
   cursor: pointer;
 }

 .data-table {
   width: 100%;
   border-collapse: collapse;
   background: white;
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
 }

 .data-table th {
   text-align: left;
   padding: 16px 20px;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #64748b;
   background: #f8fafc;
   border-bottom: 1px solid #eef2f7;
 }

 .data-table td {
   padding: 16px 20px;
   font-size: 14px;
   border-bottom: 1px solid #eef2f7;
 }

 .data-table tr:hover {
   background: #f8fafc;
 }

 .investor-cell {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .investor-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: white;
   font-size: 14px;
 }

 .investor-name {
   font-weight: 500;
   color: var(--text-dark);
 }

 .investor-email {
   font-size: 13px;
   color: #64748b;
 }

 .status-badge {
   display: inline-flex;
   padding: 4px 10px;
   border-radius: 50px;
   font-size: 12px;
   font-weight: 500;
   text-transform: capitalize;
 }

 .status-badge.active {
   background: rgba(34, 197, 94, 0.1);
   color: #22c55e;
 }

 .status-badge.pending {
   background: rgba(245, 158, 11, 0.1);
   color: #f59e0b;
 }

 .status-badge.inactive {
   background: rgba(148, 163, 184, 0.2);
   color: #64748b;
 }

 .returns-badge {
   font-weight: 600;
 }

 .returns-badge.positive {
   color: #22c55e;
 }

 .returns-badge.negative {
   color: #ef4444;
 }

 .action-btns {
   display: flex;
   gap: 8px;
 }

 .action-btn {
   width: 32px;
   height: 32px;
   border: 1px solid #e2e8f0;
   border-radius: var(--radius-sm);
   background: white;
   color: #64748b;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .action-btn:hover {
   border-color: var(--accent-gold);
   color: var(--accent-gold);
 }

 .action-btn.delete:hover {
   border-color: #ef4444;
   color: #ef4444;
 }

 /* Asset Cards */
 .assets-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .asset-card {
   background: white;
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
 }

 .asset-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
 }

 .asset-image {
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .asset-image i {
   font-size: 48px;
   color: rgba(255, 255, 255, 0.3);
 }

 .asset-status {
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
   text-transform: capitalize;
 }

 .asset-status.performing {
   background: rgba(34, 197, 94, 0.9);
   color: white;
 }

 .asset-status.development {
   background: rgba(245, 158, 11, 0.9);
   color: white;
 }

 .asset-status.acquired {
   background: rgba(59, 130, 246, 0.9);
   color: white;
 }

 .asset-body {
   padding: 20px;
 }

 .asset-type {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--accent-gold);
   margin-bottom: 6px;
 }

 .asset-name {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 6px;
 }

 .asset-location {
   font-size: 14px;
   color: #64748b;
   margin-bottom: 16px;
 }

 .asset-location i {
   margin-right: 6px;
   color: var(--accent-gold);
 }

 .asset-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding-top: 16px;
   border-top: 1px solid #eef2f7;
 }

 .asset-stat-label {
   font-size: 11px;
   color: #94a3b8;
   text-transform: uppercase;
 }

 .asset-stat-value {
   font-size: 15px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .asset-stat-value.positive {
   color: #22c55e;
 }

 .asset-actions {
   display: flex;
   gap: 8px;
   padding: 12px 20px;
   background: #f8fafc;
 }

 /* Modal */
 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
 }

 .modal-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .modal {
   background: white;
   border-radius: var(--radius-lg);
   width: 90%;
   max-width: 500px;
   max-height: 90vh;
   overflow-y: auto;
   transform: scale(0.9);
   transition: var(--transition);
 }

 .modal-overlay.active .modal {
   transform: scale(1);
 }

 .modal-header {
   padding: 24px;
   border-bottom: 1px solid #eef2f7;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .modal-header h3 {
   font-size: 20px;
 }

 .modal-close {
   width: 32px;
   height: 32px;
   border: none;
   background: #f1f5f9;
   border-radius: var(--radius-sm);
   cursor: pointer;
   color: #64748b;
   transition: var(--transition);
 }

 .modal-close:hover {
   background: #e2e8f0;
 }

 .modal-body {
   padding: 24px !important;
 }

 .modal-footer {
   padding: 16px 24px !important;
   border-top: 1px solid #eef2f7;
   display: flex;
   gap: 12px;
   justify-content: flex-end;
 }

 /* Responsive */
 /* ==================== MOBILE NAVIGATION ==================== */
 .mobile-menu {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(12, 25, 41, 0.98);
   backdrop-filter: blur(20px);
   z-index: 999;
   padding: 100px 24px 40px;
   flex-direction: column;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
 }

 .mobile-menu.active {
   opacity: 1;
   visibility: visible;
 }

 .mobile-menu-nav {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 32px;
 }

 .mobile-menu-nav a {
   font-size: 24px;
   font-weight: 500;
   color: var(--text-light);
   padding: 16px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   transition: var(--transition);
 }

 .mobile-menu-nav a:hover {
   color: var(--accent-gold);
   padding-left: 12px;
 }

 .mobile-menu-actions {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: auto;
 }

 .mobile-menu-actions .btn {
   width: 100%;
   justify-content: center;
   padding: 16px 24px;
 }

 .mobile-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
 }

 .mobile-toggle.active span:nth-child(2) {
   opacity: 0;
 }

 .mobile-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
 }

 /* Mobile sidebar toggle button */
 .mobile-sidebar-toggle {
   display: none;
   position: fixed;
   bottom: 24px;
   right: 24px;
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
   border: none;
   border-radius: 50%;
   color: var(--primary-dark);
   font-size: 20px;
   cursor: pointer;
   z-index: 99;
   box-shadow: var(--shadow-lg);
   transition: var(--transition);
 }

 .mobile-sidebar-toggle:hover {
   transform: scale(1.1);
 }

 /* Sidebar overlay for mobile */
 .sidebar-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 99;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
 }

 .sidebar-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 /* ==================== RESPONSIVE TABLES ==================== */
 .table-responsive-card {
   display: none;
 }

 /* ==================== MEDIA QUERIES ==================== */

 /* Large screens (1200px and below) */
 @media (max-width: 1200px) {

   .services-grid,
   .team-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .stats-grid,
   .dashboard-stats {
     grid-template-columns: repeat(2, 1fr);
   }

   .assets-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .portfolio-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .container {
     padding: 0 20px;
   }
 }

 /* Tablets and small laptops (1024px and below) */
 @media (max-width: 1024px) {

   .nav,
   .header-actions {
     display: none;
   }

   .mobile-toggle {
     display: flex;
   }

   .mobile-menu {
     display: flex;
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .about-visual {
     order: -1;
   }

   .about-card {
     left: 20px;
     bottom: -20px;
   }

   .contact-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .login-page {
     grid-template-columns: 1fr 1fr;
   }

  

   .login-form-wrapper {
     padding: 40px 24px;
   }

   /* Dashboard sidebar for tablet */
   /* .sidebar {
        transform: translateX(-100%);
        width: 280px;
      } */

   .sidebar.open {
     transform: translateX(0);
   }

   .sidebar-overlay {
     display: block;
   }

   .mobile-sidebar-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .main-content {
     margin-left: 0;
   }

   .dashboard-cards {
     grid-template-columns: 1fr;
   }

   .dashboard-header {
     padding: 16px 20px;
     flex-wrap: wrap;
     gap: 16px;
   }

   .search-box input {
     width: 100%;
     min-width: 200px;
   }

   .portfolio-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;
   }

   .section {
     padding: 70px 0;
   }

   .hero-content {
     padding: 100px 20px 60px;
   }

   .section-header {
     margin-bottom: 40px;
   }
 }

 /* Mobile devices (768px and below) */
 @media (max-width: 767px) {
   .login-page {
     grid-template-columns: 1fr;
   }
.login-branding{
display: none;
}
.login-form-section{
  padding: 15px;
}
 }
 @media (max-width: 768px) {
   .dash-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   margin-bottom: 20px;
 }

   .hero-title {
     font-size: clamp(32px, 8vw, 48px);
   }

   .hero-subtitle {
     font-size: 16px;
   }

   .hero-stats {
     flex-direction: column;
     gap: 20px;
   }

   .hero-stat-value {
     font-size: 36px;
   }

   .hero-cta {
     flex-direction: column;
     width: 100%;
     max-width: 320px;
     margin: 0 auto;
   }

   .hero-cta .btn {
     width: 100%;
     justify-content: center;
   }

   .scroll-indicator {
     display: none;
   }

   .services-grid,
   .portfolio-grid,
   .team-grid,
   .stats-grid,
   .dashboard-stats,
   .assets-grid {
     grid-template-columns: 1fr;
   }

   .service-card {
     padding: 24px 20px;
   }

   .stat-card {
     padding: 24px;
   }

   .stat-card .stat-value {
     font-size: 32px;
   }

   .team-avatar {
     width: 120px;
     height: 120px;
     font-size: 36px;
   }

   .footer-grid {
     grid-template-columns: 1fr;
     gap: 32px;
     text-align: center;
   }

   .footer-social {
     justify-content: center;
   }

   .footer-links {
     justify-content: center;
   }

   /* Dashboard mobile */
   .dashboard-header {
     padding: 16px;
   }

   .page-title {
     font-size: 20px;
   }

   .header-actions {
     width: 100%;
   }

   .search-box {
     flex: 1;
   }

   .search-box input {
     width: 100%;
   }

   .dashboard-content {
     padding: 16px;
     margin-top:50px;
   }

   .dash-stat-card {
     padding: 16px;
   }

   .dash-stat-value {
     font-size: 24px;
   }

   /* Toolbar mobile */
   .toolbar {
     flex-direction: column;
     gap: 16px;
     align-items: stretch;
   }

   .toolbar-left {
     width: 100%;
     flex-wrap: wrap;
   }

   .toolbar-left .filter-select,
   .toolbar-left .search-box {
     flex: 1;
     min-width: 140px;
   }

   .toolbar .btn {
     width: 100%;
     justify-content: center;
   }

   /* Table to cards on mobile */
   .data-table-wrapper {
     display: none;
   }

   .table-responsive-card {
     display: flex;
     flex-direction: column;
     gap: 12px;
   }

   .responsive-card {
     background: white;
     border-radius: var(--radius-md);
     padding: 16px;
     box-shadow: var(--shadow-sm);
   }

   .responsive-card-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 12px;
     padding-bottom: 12px;
     border-bottom: 1px solid #eef2f7;
   }

   .responsive-card-body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }

   .responsive-card-item {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }

   .responsive-card-label {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: #64748b;
   }

   .responsive-card-value {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-dark);
   }

   .responsive-card-actions {
     display: flex;
     gap: 8px;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid #eef2f7;
   }

   .responsive-card-actions .action-btn {
     flex: 1;
     height: 40px;
   }

   /* Chart adjustments */
   .chart-placeholder {
     height: 200px;
   }

   /* Modal mobile */
   .modal {
     width: calc(100% - 32px);
     max-width: none;
     margin: 16px;
     max-height: calc(100vh - 32px);
   }

   .modal-header {
     padding: 16px 20px;
   }

   .modal-body {
     padding: 20px;
   }

   .modal-footer {
     padding: 16px 20px;
     flex-direction: column;
   }

   .modal-footer .btn {
     width: 100%;
   }

   .form-row {
     grid-template-columns: 1fr;
   }

   /* Contact section */
   .contact-item {
     flex-direction: column;
     text-align: center;
   }

   .contact-item-icon {
     margin: 0 auto;
   }

   /* Portfolio stats */
   .portfolio-stats {
     flex-wrap: wrap;
   }

   /* About section */
   .about-card {
     position: relative;
     left: 0;
     bottom: 0;
     margin-top: 20px;
   }

   .section-title {
     font-size: clamp(28px, 6vw, 36px);
   }
 }

 /* Small mobile devices (480px and below) */
 @media (max-width: 480px) {
   .container {
     padding: 0 16px;
   }

   .hero-content {
     padding: 90px 16px 50px;
   }

   .hero-badge {
     font-size: 10px;
     padding: 6px 14px;
   }

   .hero-title {
     font-size: 28px;
   }

   .hero-stat-value {
     font-size: 32px;
   }

   .logo-name {
     font-size: 18px;
   }

   .logo-tagline {
     font-size: 8px;
     letter-spacing: 1.5px;
   }

   .logo-icon {
     width: 140px;
     height: 50px;
   }

   .btn {
     padding: 10px 18px;
     font-size: 13px;
   }

   .btn-lg {
     padding: 14px 24px;
   }

   .section {
     padding: 50px 0;
   }

   .dash-stat-card {
     flex-direction: column;
     text-align: center;
   }

   .dash-stat-icon {
     margin: 0 auto 12px;
   }

   .responsive-card-body {
     grid-template-columns: 1fr;
   }

   .asset-stats {
     grid-template-columns: 1fr;
     gap: 8px;
   }

   .asset-stats>div {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   /* Login form mobile */
   .login-toggle button {
     padding: 10px 16px;
     font-size: 13px;
   }

   .form-input {
     padding: 12px 14px;
   }

   /* Mobile menu adjustments */
   .mobile-menu {
     padding: 80px 16px 32px;
   }

   .mobile-menu-nav a {
     font-size: 20px;
     padding: 14px 0;
   }

   /* Footer mobile */
   .footer-bottom {
     flex-direction: column;
     gap: 16px;
     text-align: center;
   }

   .footer-links {
     flex-wrap: wrap;
     gap: 16px;
   }
 }

 /* Landscape mobile */
 @media (max-width: 768px) and (orientation: landscape) {
   .hero {
     min-height: auto;
     padding: 80px 0 40px;
   }

   .hero-content {
     padding: 40px 20px;
   }

   .hero-stats {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
   }

   .mobile-menu {
     padding-top: 70px;
     overflow-y: auto;
   }

   .modal {
     max-height: 90vh;
     overflow-y: auto;
   }
 }

 /* High DPI / Retina displays */
 @media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {

   .logo-icon,
   .service-icon,
   .about-feature-icon {
     image-rendering: -webkit-optimize-contrast;
   }
 }

 /* Hover effects only on devices that support hover */
 @media (hover: hover) and (pointer: fine) {

   .portfolio-card:hover,
   .service-card:hover,
   .asset-card:hover {
     transform: translateY(-8px);
   }

   .btn-primary:hover {
     transform: translateY(-2px);
   }
 }

 /* Reduce motion for accessibility */
 @media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }

   .scroll-indicator {
     animation: none;
   }
 }

 /* Print styles */
 @media print {

   .header,
   .footer,
   .mobile-toggle,
   .mobile-menu,
   .sidebar,
   .mobile-sidebar-toggle,
   .btn {
     display: none !important;
   }

   .page {
     display: block !important;
   }

   .main-content {
     margin: 0 !important;
   }
 }

 .btn-ghost {
   background: transparent;
   color: var(--text-dark);
   border: 1px solid #e2e8f0;
 }



 .modal-overlay {
   display: none;
   position: fixed;
   background: rgba(0, 0, 0, .55);
   z-index: 1000;
   align-items: center;
   justify-content: center;
   padding: 20px
 }

 .modal-box {
   background: var(--white);
   border-radius: 18px;
   width: 100%;
   max-width: 780px;
   max-height: 92vh;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .3)
 }

 @keyframes modalIn {
   from {
     opacity: 0;
     transform: translateY(20px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 }

 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px 28px;
   border-bottom: 1px solid var(--gray-light);
   position: sticky;
   top: 0;
   background: var(--white);
   z-index: 2;
   border-radius: 18px 18px 0 0
 }

 .mform-checkbox-row,
 .modal-close {
   align-items: center;
   cursor: pointer
 }

 .mform-prefix,
 .mform-suffix {
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none
 }

 .modal-title {
   font-size: 22px;
   color: var(--navy)
 }

 .modal-subtitle {
   font-size: 12px;
   color: var(--gray);
   margin-top: 2px
 }

 .modal-close {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: none;
   background: var(--off-white);
   display: flex;
   justify-content: center;
   color: var(--gray);
   font-size: 16px;
   transition: .15s
 }

 .mform-input,
 .mform-select {
   border: 1.5px solid var(--gray-light);
   background: var(--white)
 }

 .mform-grid-1,
 .mform-grid-2,
 .mform-grid-3 {
   display: grid;
   gap: 16px
 }

 .mform-input,
 .mform-textarea {
   font-family: 'DM Sans', sans-serif;
   outline: 0;
   transition: border-color .15s
 }

 .modal-close:hover {
   background: var(--gray-light);
   color: var(--text)
 }

 .modal-body {
   padding: 28px
 }

 .modal-section-label::after {
   content: '';
   flex: 1;
   height: 1px;
   background: rgba(201, 168, 76, .2)
 }

 .modal-section {
   margin-bottom: 28px
 }

 .mform-grid-2 {
   grid-template-columns: 1fr 1fr
 }

 .mform-grid-3 {
   grid-template-columns: 1fr 1fr 1fr
 }

 .mform-grid-1 {
   grid-template-columns: 1fr
 }

 .mform-group {
   display: flex;
   flex-direction: column;
   gap: 5px
 }

 .mform-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--text)
 }

 .mform-label span {
   color: #ef4444;
   margin-left: 2px
 }

 .mform-hint,
 .modal-footer-note {
   font-size: 11px;
   color: var(--gray)
 }

 .mform-checkbox-row span,
 .mform-input,
 .mform-select,
 .mform-textarea {
   font-size: 13px;
   color: var(--text)
 }

 .mform-input {
   padding: 10px 13px;
   border-radius: 8px
 }

 .mform-input:focus,
 .mform-select:focus,
 .mform-textarea:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(201, 168, 76, .1)
 }

 .mform-input::placeholder {
   color: #b0b8c4
 }

 .mform-toggle:hover,
 .mprog-dot.active {
   border-color: var(--gold);
   color: var(--navy)
 }

 .mform-select {
   padding: 10px 32px 10px 13px;
   border-radius: 8px;
   font-family: 'DM Sans', sans-serif;
   outline: 0;
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center
 }

 .mform-textarea,
 .mform-toggle,
 .mprog-dot {
   background: var(--white)
 }

 .mform-textarea {
   padding: 10px 13px;
   border: 1.5px solid var(--gray-light);
   border-radius: 8px;
   resize: vertical;
   min-height: 80px
 }

 .mform-prefix-wrap,
 .mform-suffix-wrap {
   position: relative
 }

 .mform-prefix {
   position: absolute;
   left: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--gray)
 }

 .mform-suffix,
 .mform-toggle,
 .mprog-dot {
   font-size: 12px;
   color: var(--gray)
 }

 .mform-prefix-wrap .mform-input {
   padding-left: 26px
 }

 .mform-suffix {
   position: absolute;
   right: 12px
 }

 .mform-suffix-wrap .mform-input {
   padding-right: 36px
 }

 .mform-toggle-group {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
 }

 .mform-toggle {
   padding: 7px 14px;
   border-radius: 20px;
   border: 1.5px solid var(--gray-light);
   font-weight: 600;
   cursor: pointer;
   transition: .15s
 }

 .mform-checkbox-row {
   display: flex;
   gap: 10px
 }

 .modal-progress,
 .mprog-step {
   display: flex;
   align-items: center
 }

 .mform-checkbox-row input[type=checkbox] {
   width: 16px;
   height: 16px;
   accent-color: var(--navy);
   cursor: pointer
 }

 .modal-progress {
   gap: 8px;
   padding: 0 28px;
   margin-bottom: 24px
 }

 .mprog-step {
   gap: 6px
 }

 .mprog-dot,
 .step {
   align-items: center;
   display: flex
 }

 .mprog-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   justify-content: center;
   font-weight: 700;
   border: 2px solid var(--gray-light);
   transition: .2s
 }

 .mprog-dot.active {
   background: var(--gold)
 }

 .mprog-dot.done,
 .mprog-line.done {
   background: #10b981
 }

 .mprog-dot.done {
   border-color: #10b981;
   color: var(--white)
 }

 .mprog-label {
   font-size: 11px;
   font-weight: 600;
   color: var(--gray)
 }

 .mprog-label.active {
   color: var(--navy)
 }

 .mprog-line {
   flex: 1;
   height: 2px;
   background: var(--gray-light);
   min-width: 20px
 }

 .modal-footer {
   padding: 20px 28px !important;
   border-top: 1px solid var(--gray-light) !important;
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--off-white) !important;
   border-radius: 0 0 18px 18px
 }

 .asset-preview-card {
   background: var(--off-white);
   border-radius: 12px;
   padding: 20px;
   border: 1.5px dashed var(--gray-light)
 }

 .asset-preview-card.filled {
   background: var(--white);
   border: 1.5px solid var(--gold);
   border-left: 4px solid var(--gold)
 }

 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px 28px !important;
   border-bottom: 1px solid var(--gray-light) !important;
   position: sticky;
   top: 0;
   background: var(--white);
   z-index: 2;
   border-radius: 18px 18px 0 0
 }

 .mform-checkbox-row,
 .modal-close {
   align-items: center;
   cursor: pointer
 }

 .mform-prefix,
 .mform-suffix {
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none
 }

 .modal-title {
   font-size: 22px;
   color: var(--navy)
 }

 .modal-subtitle {
   font-size: 12px;
   color: var(--gray);
   margin-top: 2px
 }

 .modal-close {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: none;
   background: var(--off-white);
   display: flex;
   justify-content: center;
   color: var(--gray);
   font-size: 16px;
   transition: .15s
 }

 .mform-input,
 .mform-select {
   border: 1.5px solid var(--gray-light);
   background: var(--white)
 }

 .mform-grid-1,
 .mform-grid-2,
 .mform-grid-3 {
   display: grid;
   gap: 16px
 }

 .mform-input,
 .mform-textarea {
   font-family: 'DM Sans', sans-serif;
   outline: 0;
   transition: border-color .15s
 }

 .modal-overlay {
   display: none;
   position: fixed;
   background: rgba(0, 0, 0, .55);
   z-index: 1000;
   align-items: center;
   justify-content: center;
   padding: 20px
 }

 .modal-box {
   background: var(--white);
   border-radius: 18px;
   width: 100%;
   max-width: 780px;
   max-height: 92vh;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .3)
 }

 .modal-footer,
 .table-toolbar {
   justify-content: space-between !important
 }

 .table-toolbar {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   gap: 16px
 }

 .search-input {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--off-white);
   border: 1px solid var(--gray-light);
   border-radius: 8px;
   padding: 10px 14px;
   flex: 1;
   max-width: 300px
 }

 .search-input i {
   color: var(--gray);
   font-size: 14px
 }

 .search-input input {
   border: none;
   background: 0 0;
   outline: 0;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   color: var(--text);
   flex: 1
 }

 .mobile-sidebar-btn {
   display: none;
   position: fixed;
   top: 16px;
   left: 16px;
   z-index: 200;
   width: 40px;
   height: 40px;
   border-radius: 8px;
   background: var(--navy);
   border: none;
   color: var(--white);
   font-size: 18px;
   cursor: pointer;
   align-items: center;
   justify-content: center
 }

 .sidebar-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   z-index: 40
 }

 .lm-metric-val,
 .lmodal-title,
 .modal-title {
   font-family: 'Cormorant Garamond', serif;
   font-weight: 700
 }


 .lmodal-overlay {
   display: none;
   position: fixed;
   background: rgba(0, 0, 0, .6);
   z-index: 1100;
   align-items: center;
   justify-content: center;
   padding: 20px
 }

 .lmodal-overlay.open,
 .modal-overlay.open {
   display: flex
 }

 .lmodal-box {
   background: var(--white);
   border-radius: 18px;
   width: 100%;
   max-width: 860px;
   max-height: 94vh;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .35)
 }

 .lmodal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px 28px;
   border-bottom: 1px solid var(--gray-light);
   position: sticky;
   top: 0;
   background: var(--white);
   z-index: 2;
   border-radius: 18px 18px 0 0
 }

 .lm-panel,
 .lmodal-asset-icon,
 .lt-btn.active {
   background: var(--navy)
 }

 .lmodal-asset-chip {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .lmodal-asset-icon {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold);
   font-size: 14px
 }

 .lmodal-title {
   font-size: 20px;
   color: var(--navy)
 }

 .lmodal-subtitle {
   font-size: 11px;
   color: var(--gray);
   margin-top: 1px
 }

 .lmodal-body {
   padding: 24px 28px
 }

 .lm-panel {
   border-radius: 14px;
   padding: 20px 24px;
   margin-bottom: 24px
 }

 .lm-panel-title,
 .modal-section-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   gap: 8px
 }

 .lm-panel-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px
 }

 .lm-metric {
   background: rgba(255, 255, 255, .05);
   border-radius: 10px;
   padding: 12px 8px;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, .06)
 }

 .lm-metric-val {
   font-size: 22px;
   color: var(--gold);
   display: block;
   line-height: 1
 }

 .lm-metric-lbl {
   font-size: 10px;
   color: rgba(255, 255, 255, .4);
   margin-top: 4px;
   letter-spacing: .3px
 }

 .lm-metric.good .lm-metric-val {
   color: #10b981
 }

 .lm-metric.warn .lm-metric-val {
   color: #f59e0b
 }

 .lm-metric.bad .lm-metric-val {
   color: #ef4444
 }

 .lease-type-toggle {
   display: flex;
   gap: 8px;
   margin-bottom: 0
 }

 .lt-btn-desc,
 .lt-btn-label,
 .modal-step.active,
 .nnn-section.visible {
   display: block
 }

 .lt-btn {
   flex: 1;
   padding: 10px 8px;
   border-radius: 9px;
   border: 2px solid var(--gray-light);
   text-align: center;
   background: var(--white)
 }

 .lt-btn:hover {
   border-color: var(--gold)
 }

 .lt-btn.active {
   border-color: var(--navy)
 }

 .lt-btn-label {
   font-size: 13px;
   font-weight: 700;
   color: var(--gray)
 }

 .lt-btn.active .lt-btn-label {
   color: var(--white)
 }

 .lt-btn-desc {
   font-size: 10px;
   color: var(--gray);
   margin-top: 3px
 }

 .lt-btn.active .lt-btn-desc {
   color: rgba(255, 255, 255, .5)
 }

 .modal-step,
 .nnn-section,
 .step:last-child::after {
   display: none
 }

 .nnn-expense-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 12px
 }

 .nnn-total-bar {
   background: rgba(59, 130, 246, .06);
   border: 1px solid rgba(59, 130, 246, .2);
   border-radius: 8px;
   padding: 10px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10px
 }
 .inv-summary-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
    .inv-summary-card { background:var(--white); border-radius:12px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,0.06); text-align:center; }
    .inv-summary-val { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; color:var(--navy); }
    .inv-summary-val.gold { color:var(--gold); }
    .inv-summary-lbl { font-size:11px; color:var(--gray); letter-spacing:0.5px; text-transform:uppercase; margin-top:4px; }

    .inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
    .inv-card { background:var(--white); border-radius:14px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.07); transition:all 0.25s; cursor:pointer; border:2px solid transparent; }
    .inv-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.12); border-color:rgba(201,168,76,0.3); }
    .inv-card.expanded { border-color:var(--gold); }
    .inv-card-top { padding:18px 20px; background:linear-gradient(135deg,var(--navy) 0%,#18375a 100%); border-bottom:2px solid rgba(201,168,76,0.35); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .inv-card-info { flex:1; min-width:0; }
    .inv-card-type { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
    .inv-card-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--white); line-height:1.2; margin-bottom:4px; }
    .inv-card-loc { font-size:11px; color:rgba(255,255,255,0.45); display:flex; align-items:center; gap:4px; }
    .inv-card-icon { width:40px; height:40px; border-radius:10px; flex-shrink:0; background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.25); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:16px; }
    .inv-card-body { padding:16px 20px; }
    .inv-card-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
    .inv-metric { text-align:center; background:var(--off-white); border-radius:8px; padding:10px 6px; }
    .inv-metric-val { font-size:14px; font-weight:700; color:var(--navy); display:block; }
    .inv-metric-val.green { color:#10B981; }
    .inv-metric-lbl { font-size:9px; color:var(--gray); letter-spacing:0.5px; text-transform:uppercase; margin-top:2px; }
    .inv-your-position { background:rgba(201,168,76,0.06); border:1px solid rgba(201,168,76,0.2); border-radius:10px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
    .inv-pos-left { display:flex; align-items:center; gap:10px; }
    .inv-pos-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.5px; }
    .inv-pos-badge.equity { background:rgba(201,168,76,0.15); color:#8a6a1a; }
    .inv-pos-badge.debt { background:rgba(59,130,246,0.12); color:#2563EB; }
    .inv-pos-label { font-size:12px; color:var(--gray); }
    .inv-pos-val { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:var(--navy); }
    .inv-card-expand { text-align:center; padding:10px; border-top:1px solid var(--gray-light); font-size:11px; font-weight:600; color:var(--gold); letter-spacing:0.5px; transition:background 0.15s; }
    .inv-card-expand:hover { background:rgba(201,168,76,0.04); }
    .inv-card-expand i { margin-left:4px; transition:transform 0.2s; }
    .inv-card.expanded .inv-card-expand i { transform:rotate(180deg); }
    
/* ── PERFORMANCE PAGE ── */
    .perf-pill { font-size:12px; font-weight:600; padding:3px 9px; border-radius:12px; display:inline-block; }
    .perf-pill.green { background:rgba(16,185,129,0.12); color:#10B981; }
    .perf-pill.amber { background:rgba(245,158,11,0.12); color:#F59E0B; }
    .perf-pill.red   { background:rgba(239,68,68,0.12);  color:#EF4444; }

    .rating-badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:12px; }
    .rating-badge.excellent { background:rgba(16,185,129,0.15); color:#10B981; border:1px solid rgba(16,185,129,0.3); }
    .rating-badge.good      { background:rgba(59,130,246,0.12); color:#3B82F6; border:1px solid rgba(59,130,246,0.25); }
    .rating-badge.review    { background:rgba(245,158,11,0.12); color:#F59E0B; border:1px solid rgba(245,158,11,0.25); }

    .perf-card { background:var(--white); border-radius:14px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.07); transition:transform 0.2s; }
    .perf-card:hover { transform:translateY(-3px); }
    .perf-card-header { padding:20px 22px; color:var(--white); }
    .pc-blue   { background:linear-gradient(135deg,#1e3a5f,#2c5282); }
    .pc-green  { background:linear-gradient(135deg,#1a3a2a,#276749); }
    .pc-navy   { background:linear-gradient(135deg,#0B1C2D,#1a3a5c); }
    .pc-purple { background:linear-gradient(135deg,#2d1f4a,#553c9a); }
    .pc-gold   { background:linear-gradient(135deg,#4a3010,#7a5a1e); }
    .perf-card-addr { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; }
    .perf-card-city { font-size:12px; color:rgba(255,255,255,0.6); margin-top:2px; }
    .perf-card-body { padding:18px 20px; }

    .perf-metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
    .pm { background:var(--off-white); border-radius:8px; padding:10px 8px; text-align:center; }
    .pm-val { display:block; font-size:15px; font-weight:700; color:var(--text); }
    .pm-val.green { color:#10B981; }
    .pm-val.amber { color:#F59E0B; }
    .pm-val.red   { color:#EF4444; }
    .pm-lbl { font-size:10px; color:var(--gray); letter-spacing:0.3px; margin-top:2px; display:block; }

    .perf-benchmarks { border-top:1px solid var(--gray-light); padding-top:12px; margin-bottom:12px; display:flex; flex-direction:column; gap:7px; }
    .bm-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; }
    .bm-row span:first-child { color:var(--gray); }
    .bm-pass { color:#10B981; font-weight:600; }
    .bm-fail { color:#EF4444; font-weight:600; }

    .perf-uplift { background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2); border-radius:8px; padding:9px 12px; font-size:12px; color:#8a6a1a; }
    .perf-uplift i { margin-right:5px; }

    @media (max-width:768px) {
      #sec-performance .stats-grid { grid-template-columns:repeat(2,1fr) !important; }
    }
    @media (max-width:480px) {
      #sec-performance .stats-grid { grid-template-columns:1fr !important; }
    }
    @keyframes modalIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    
    /* Detail page view */
    .inv-detail-page { animation:modalIn 0.3s ease; }
    .inv-detail-back { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--gold); cursor:pointer; padding:8px 16px; border-radius:8px; border:1.5px solid rgba(201,168,76,0.25); background:rgba(201,168,76,0.04); transition:all 0.15s; margin-bottom:24px; }
    .inv-detail-back:hover { background:rgba(201,168,76,0.1); border-color:var(--gold); }
    .inv-detail-hero { background:linear-gradient(135deg,var(--navy) 0%,#18375a 100%); border-radius:16px; padding:28px 32px; margin-bottom:28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
    .inv-detail-hero-left { display:flex; align-items:center; gap:20px; }
    .inv-detail-hero-icon { width:56px; height:56px; border-radius:14px; background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.25); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:22px; flex-shrink:0; }
    .inv-detail-hero-type { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
    .inv-detail-hero-name { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; color:var(--white); line-height:1.2; }
    .inv-detail-hero-loc { font-size:12px; color:rgba(255,255,255,0.45); margin-top:4px; display:flex; align-items:center; gap:5px; }
    .inv-detail-hero-right { display:flex; gap:16px; flex-wrap:wrap; }
    .inv-detail-hero-stat { text-align:center; background:rgba(255,255,255,0.06); border-radius:10px; padding:14px 20px; min-width:110px; }
    .inv-detail-hero-stat-val { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--gold); display:block; line-height:1; }
    .inv-detail-hero-stat-lbl { font-size:10px; color:rgba(255,255,255,0.45); letter-spacing:0.5px; text-transform:uppercase; margin-top:4px; }
    .inv-detail-hero-stat-val.green { color:#10B981; }
    .inv-detail-hero-stat-val.white { color:var(--white); }

    .inv-detail-section-title { font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--navy); margin-bottom:16px; display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:2px solid var(--gray-light); }
    .inv-detail-section-title i { color:var(--gold); }
    /* My Investment card */
    .my-inv-card { background:linear-gradient(135deg,#faf8f2 0%,#f5f0e4 100%); border:2px solid rgba(201,168,76,0.35); border-radius:16px; padding:0; overflow:hidden; margin-bottom:28px; box-shadow:0 4px 20px rgba(201,168,76,0.1); }
    .my-inv-card-header { background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(201,168,76,0.06)); padding:16px 24px; border-bottom:1px solid rgba(201,168,76,0.2); display:flex; align-items:center; gap:10px; }
    .my-inv-card-header i { color:var(--gold); font-size:16px; }
    .my-inv-card-header span { font-size:13px; font-weight:700; color:#8a6a1a; letter-spacing:0.5px; }
    .my-inv-card-body { padding:20px 24px; }
    .my-inv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
    .my-inv-metric { text-align:center; }
    .my-inv-metric-val { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--navy); display:block; line-height:1.1; }
    .my-inv-metric-val.green { color:#10B981; }
    .my-inv-metric-val.gold { color:#8a6a1a; }
    .my-inv-metric-lbl { font-size:10px; color:var(--gray); letter-spacing:0.5px; text-transform:uppercase; margin-top:4px; }
    .my-inv-details { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(201,168,76,0.15); }
    .my-inv-detail-row { display:flex; justify-content:space-between; padding:9px 16px; border-bottom:1px solid rgba(201,168,76,0.1); font-size:13px; }
    .my-inv-detail-row:nth-child(odd) { border-right:1px solid rgba(201,168,76,0.1); }
    .my-inv-detail-row span:first-child { color:var(--gray); }
    .my-inv-detail-row span:last-child { font-weight:600; color:var(--text); }
    .my-inv-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
    .my-inv-status.active { background:rgba(16,185,129,0.1); color:#059669; }
    .my-inv-status.dev { background:rgba(59,130,246,0.08); color:#2563EB; }
    .my-inv-status.reno { background:rgba(245,158,11,0.1); color:#D97706; }

    @media (max-width:768px) {
      .my-inv-grid { grid-template-columns:repeat(2,1fr); }
      .my-inv-details { grid-template-columns:1fr; }
      .my-inv-detail-row:nth-child(odd) { border-right:none; }
    }

    @media (max-width:768px) {
      .inv-detail-hero { flex-direction:column; align-items:flex-start; }
      .inv-detail-hero-right { width:100%; }
      .inv-detail-hero-stat { flex:1; min-width:80px; }
    }
     /* Property info card */
    .prop-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
    .prop-info-card { background:var(--off-white); border-radius:12px; padding:20px; }
    .prop-info-title { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
    .prop-info-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(0,0,0,0.05); font-size:13px; }
    .prop-info-row:last-child { border-bottom:none; }
    .prop-info-row span:first-child { color:var(--gray); }
    .prop-info-row span:last-child { font-weight:600; color:var(--text); }
     /* Cap table */
    .cap-table-header { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .cap-table-header i { color:var(--gold); }
    .cap-section { margin-bottom:20px; }
    .cap-section-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:8px 14px; border-radius:8px 8px 0 0; }
    .cap-section-label.equity-lbl { background:rgba(201,168,76,0.1); color:#8a6a1a; }
    .cap-section-label.debt-lbl { background:rgba(59,130,246,0.08); color:#2563EB; }
    .cap-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; align-items:center; padding:10px 14px; border-bottom:1px solid var(--gray-light); font-size:13px; }
    .cap-row:last-child { border-bottom:none; }
    .cap-row.header { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray); background:var(--off-white); border-radius:0; }
    .cap-row-name { font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
    .cap-row-name .cap-avatar { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
    .cap-avatar.company { background:rgba(201,168,76,0.15); color:#8a6a1a; }
    .cap-avatar.individual { background:rgba(59,130,246,0.1); color:#2563EB; }
    .cap-avatar.bank { background:rgba(16,185,129,0.1); color:#059669; }
    .cap-avatar.pvt { background:rgba(139,92,246,0.1); color:#7C3AED; }
    .cap-row-pct { font-weight:700; color:var(--navy); }
    .cap-row-amt { color:var(--text); }
    .cap-row-type { font-size:11px; }
    .cap-type-pill { font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; letter-spacing:0.3px; }
    .cap-type-pill.managing { background:rgba(201,168,76,0.12); color:#8a6a1a; }
    .cap-type-pill.lp { background:rgba(107,114,128,0.08); color:#6B7280; }
    .cap-type-pill.senior { background:rgba(16,185,129,0.1); color:#059669; }
    .cap-type-pill.mezz { background:rgba(139,92,246,0.1); color:#7C3AED; }
    .cap-type-pill.note { background:rgba(245,158,11,0.1); color:#D97706; }

    .cap-total-bar { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; padding:12px 14px; background:var(--navy); border-radius:0 0 10px 10px; color:var(--white); font-size:13px; font-weight:700; }
    .cap-total-bar span:first-child { color:rgba(255,255,255,0.7); }

    /* Stacked bar visual */
    .cap-bar-visual { display:flex; height:32px; border-radius:8px; overflow:hidden; margin-bottom:8px; }
    .cap-bar-seg { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--white); transition:flex 0.3s; min-width:2px; }
    .cap-bar-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
    .cap-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--gray); }
    .cap-legend-dot { width:10px; height:10px; border-radius:3px; }

    @media (max-width:768px) {
      .inv-summary-strip { grid-template-columns:repeat(2,1fr); }
      .inv-grid { grid-template-columns:1fr; }
      .prop-info-grid { grid-template-columns:1fr; }
      .cap-row { grid-template-columns:1.5fr 1fr 1fr; }
      .cap-row .cap-row-type { display:none; }
      .cap-total-bar { grid-template-columns:1.5fr 1fr 1fr; }
      .cap-total-bar span:last-child { display:none; }
    }
    /* ── PROJECT UPDATES ── */
    .updates-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
    .updates-filter-btn { padding:7px 16px; border-radius:20px; border:1.5px solid var(--gray-light); font-size:12px; font-weight:600; cursor:pointer; background:var(--white); color:var(--gray); transition:all 0.15s; font-family:'DM Sans',sans-serif; }
    .updates-filter-btn:hover { border-color:var(--gold); color:var(--navy); }
    .updates-filter-btn.active { background:var(--navy); border-color:var(--navy); color:var(--white); }
    .updates-count { font-size:12px; color:var(--gray); margin-left:auto; }

    .update-timeline { position:relative; padding-left:28px; }
    .update-timeline::before { content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:var(--gray-light); }

    .update-item { position:relative; margin-bottom:20px; background:var(--white); border-radius:14px; padding:22px 24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:all 0.2s; border:1.5px solid transparent; }
    .update-item:hover { box-shadow:0 6px 24px rgba(0,0,0,0.1); border-color:rgba(201,168,76,0.2); transform:translateY(-1px); }
    .update-dot { position:absolute; left:-24px; top:26px; width:14px; height:14px; border-radius:50%; border:3px solid var(--white); box-shadow:0 0 0 2px var(--gray-light); }
    .update-dot.gold { background:var(--gold); box-shadow:0 0 0 2px rgba(201,168,76,0.4); }
    .update-dot.green { background:#10B981; box-shadow:0 0 0 2px rgba(16,185,129,0.3); }
    .update-dot.blue { background:#3B82F6; box-shadow:0 0 0 2px rgba(59,130,246,0.3); }
    .update-dot.red { background:#EF4444; box-shadow:0 0 0 2px rgba(239,68,68,0.3); }
    .update-dot.purple { background:#8B5CF6; box-shadow:0 0 0 2px rgba(139,92,246,0.3); }

    .update-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .update-project { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--navy); background:var(--off-white); padding:4px 10px; border-radius:6px; }
    .update-project i { color:var(--gold); font-size:11px; }
    .update-date { font-size:11px; color:var(--gray); white-space:nowrap; display:flex; align-items:center; gap:5px; }
    .update-date i { font-size:10px; }
    .update-title { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; color:var(--text); line-height:1.3; margin-bottom:8px; }
    .update-summary { font-size:14px; color:#4a5568; line-height:1.75; }
    .update-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
    .update-tag { font-size:10px; font-weight:600; padding:3px 9px; border-radius:5px; letter-spacing:0.3px; }
    .update-tag.milestone { background:rgba(201,168,76,0.1); color:#8a6a1a; }
    .update-tag.construction { background:rgba(59,130,246,0.08); color:#2563EB; }
    .update-tag.financial { background:rgba(16,185,129,0.1); color:#059669; }
    .update-tag.permit { background:rgba(139,92,246,0.08); color:#7C3AED; }
    .update-tag.risk { background:rgba(239,68,68,0.08); color:#DC2626; }
    .update-tag.acquisition { background:rgba(245,158,11,0.1); color:#D97706; }
    .inv-detail-inner { padding:24px 28px; }

    
    .dashboard-main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; }
    .dashboard-topbar {
      background: var(--white); height: 64px; padding: 0 32px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--gray-light); position: sticky; top: 0; z-index: 10;
    }
    .topbar-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--text); }
    .topbar-subtitle { font-size: 13px; color: var(--gray); }
    .topbar-right { display: flex; align-items: center; gap: 16px; }
    .topbar-icon {
      width: 36px; height: 36px; border-radius: 8px; background: var(--off-white);
      display: flex; align-items: center; justify-content: center;
      color: var(--gray); cursor: pointer; transition: background 0.2s; font-size: 16px;
    }
    .topbar-icon:hover { background: var(--gray-light); color: var(--text); }

    .dashboard-content { padding: 32px; }
    .dashboard-section { display: none; }
    .dashboard-section.active { display: block; }
       @media (max-width: 768px) {
      .nav { display: none; }
      .header-actions { display: none; }
      .mobile-toggle { display: flex; }
      .hero-stats { grid-template-columns: repeat(3, 1fr); }
      .services-grid { grid-template-columns: 1fr; }
      .portfolio-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .form-row { grid-template-columns: 1fr; }
      .login-wrap { flex-direction: column; }
      .login-left { padding: 40px 24px; min-height: auto; }
      .login-right { width: 100%; padding: 40px 24px; }    
      .sidebar.open { transform: translateX(0); }
      .sidebar-overlay.open { display: block; }
      .mobile-sidebar-btn { display: flex; }
      .dashboard-main { margin-left: 0; }
      .dashboard-topbar { padding-left: 64px; position: fixed; width: 100%;}
      .stats-grid { grid-template-columns: repeat(1, 1fr); }
    }