:root {
   --bg: #06110b;
   --bg-2: #091910;
   --panel: rgba(13, 31, 20, 0.82);
   --panel-strong: rgba(16, 42, 26, 0.95);
   --line: rgba(98, 255, 149, 0.18);
   --line-2: rgba(98, 255, 149, 0.35);
   --brand: #1fc759;
   --brand-2: #58f28d;
   --brand-3: #0f8a39;
   --text: #eefcf2;
   --muted: #b7d8c0;
   --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
   --radius-xl: 28px;
   --radius-lg: 22px;
   --radius-md: 18px;
   --max: 1240px;
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   font-family: Inter, Arial, Helvetica, sans-serif;
   color: var(--text);
   background:
     radial-gradient(circle at 15% 20%, rgba(31, 199, 89, 0.18), transparent 22%),
     radial-gradient(circle at 90% 10%, rgba(88, 242, 141, 0.12), transparent 18%),
     radial-gradient(circle at 80% 60%, rgba(31, 199, 89, 0.08), transparent 20%),
     linear-gradient(180deg, #051008 0%, #07150d 36%, #08140d 100%);
   overflow-x: hidden;
 }

 body::before {
   content: "";
   position: fixed;
   inset: 0;
   background-image:
     linear-gradient(rgba(98, 255, 149, 0.04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(98, 255, 149, 0.04) 1px, transparent 1px);
   background-size: 36px 36px;
   mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 92%);
   pointer-events: none;
   z-index: 0;
 }

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

 img {
   display: block;
   max-width: 100%;
 }

 .container {
   width: min(var(--max), calc(100% - 40px));
   margin: 0 auto;
   position: relative;
   z-index: 2;
 }

 .orb,
 .orb-2,
 .orb-3 {
   position: fixed;
   border-radius: 50%;
   filter: blur(24px);
   pointer-events: none;
   z-index: 1;
   opacity: 0.45;
   animation: drift 12s ease-in-out infinite alternate;
 }

 .orb {
   width: 220px;
   height: 220px;
   left: -70px;
   top: 140px;
   background: rgba(31, 199, 89, 0.18);
 }

 .orb-2 {
   width: 180px;
   height: 180px;
   right: -40px;
   top: 420px;
   background: rgba(88, 242, 141, 0.14);
   animation-duration: 14s;
 }

 .orb-3 {
   width: 240px;
   height: 240px;
   right: 18%;
   bottom: 60px;
   background: rgba(16, 138, 57, 0.12);
   animation-duration: 16s;
 }

 header {
   position: sticky;
   top: 0;
   z-index: 30;
   background: rgba(6, 17, 11, 0.72);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(98, 255, 149, 0.12);
 }

 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   padding: 14px 0;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .brand-mark {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-weight: 800;
   letter-spacing: .04em;
   color: #07210f;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   box-shadow: 0 12px 32px rgba(31, 199, 89, 0.28);
 }

 .brand small {
   display: block;
   color: var(--muted);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   font-size: 10px;
 }

 .nav-links {
   display: flex;
   gap: 18px;
   color: var(--muted);
   font-size: 14px;
   flex-wrap: wrap;
 }

 .nav-links a:hover {
   color: var(--text);
 }

 /* Dropdown */
 .dropdown {
   position: relative;
 }

 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   color: #000;
   min-width: 200px;
   display: none;
   flex-direction: column;
   padding: 0px 0;
   border-radius: 6px;
 }

 .dropdown-menu a {
   padding: 10px 15px;
   display: block;
   color: #000;
   font-size: 12px;
 }

 .dropdown-menu a:hover {
   background: #42e179;
 }

 /* Show on hover (desktop) */
 .dropdown:hover .dropdown-menu {
   display: flex;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border-radius: 999px;
   padding: 13px 18px;
   font-weight: 700;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
   cursor: pointer;
   border: 1px solid transparent;
 }

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

 .btn-primary {
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   color: #07210f;
   box-shadow: 0 12px 32px rgba(31, 199, 89, 0.28);
 }

 .btn-secondary {
   background: rgba(255, 255, 255, 0.03);
   color: var(--text);
   border-color: rgba(98, 255, 149, 0.15);
 }

 /* Mobile menu */
 .menu-toggle {
   display: none;
   font-size: 24px;
   cursor: pointer;
 }

 /* Mobile View */
 @media (max-width: 768px) {

   .menu-toggle {
     display: block;
   }

   .nav-links {
     position: absolute;
     top: 70px;
     left: 0;
     width: 100%;
     background: #111;
     flex-direction: column;
     display: none;
     padding: 20px;
   }

   .nav-links.active {
     display: flex;
   }

   /* Dropdown inside mobile */
   .dropdown-menu {
     position: static;
     background: transparent;
     display: none;
   }

   .dropdown.active .dropdown-menu {
     display: block;
   }

   .dropdown>a {
     display: flex;
     justify-content: space-between;
   }
 }

 .hero {
   padding: 58px 0 24px;
 }

 .hero-grid {
   display: grid;
   grid-template-columns: 1.08fr 0.92fr;
   gap: 28px;
   align-items: center;
 }

 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid var(--line-2);
   background: rgba(255, 255, 255, 0.04);
   color: #d8ffe4;
   font-size: 12px;
   letter-spacing: .14em;
   text-transform: uppercase;
   margin-bottom: 18px;
 }

 .pulse-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--brand-2);
   box-shadow: 0 0 0 0 rgba(88, 242, 141, 0.5);
   animation: pulse 1.8s infinite;
 }

 h1 {
   margin: 0 0 14px;
   font-size: clamp(40px, 5.3vw, 68px);
   line-height: 1.03;
   letter-spacing: -2px;
 }

 .gradient-text {
   background: linear-gradient(90deg, #ebfff1 0%, #8cf7b0 55%, #1fc759 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero p {
   margin: 0 0 24px;
   color: var(--muted);
   font-size: 16px;
   max-width: 720px;
 }

 .hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }

 .quick-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
 }

 .mini-stat {
   border-radius: 18px;
   padding: 16px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(98, 255, 149, 0.12);
 }

 .mini-stat strong {
   display: block;
   font-size: 28px;
   margin-bottom: 5px;
 }

 .mini-stat span {
   color: var(--muted);
   font-size: 13px;
 }

 .hero-visual {
   min-height: 520px;
   position: relative;
   border-radius: 34px;
   overflow: hidden;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
     radial-gradient(circle at 50% 50%, rgba(31, 199, 89, 0.18), rgba(31, 199, 89, 0.02) 42%, transparent 60%),
     linear-gradient(145deg, rgba(9, 24, 15, 0.98), rgba(8, 18, 12, 0.94));
   border: 1px solid rgba(98, 255, 149, 0.14);
   box-shadow: var(--shadow);
   isolation: isolate;
   transition: transform .2s ease;
 }

 .hero-visual::before,
 .hero-visual::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
 }

 .hero-visual::before {
   background:
     linear-gradient(rgba(98, 255, 149, 0.06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(98, 255, 149, 0.06) 1px, transparent 1px);
   background-size: 34px 34px;
   mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 90%);
 }

 .hero-visual::after {
   background: radial-gradient(circle at center, transparent 56%, rgba(31, 199, 89, 0.12) 57%, transparent 61%);
   animation: spin 16s linear infinite;
   opacity: 0.8;
 }

 .radar-ring,
 .radar-ring-2,
 .radar-ring-3 {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   border: 1px solid rgba(98, 255, 149, 0.16);
   border-radius: 50%;
   animation: spin 12s linear infinite;
 }

 .radar-ring {
   width: 360px;
   height: 360px;
 }

 .radar-ring-2 {
   width: 260px;
   height: 260px;
   animation-direction: reverse;
   animation-duration: 9s;
 }

 .radar-ring-3 {
   width: 120px;
   height: 120px;
   animation-duration: 7s;
 }

 .center-core {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 180px;
   height: 180px;
   border-radius: 28px;
   background: linear-gradient(145deg, rgba(31, 199, 89, 0.22), rgba(8, 24, 13, 0.96));
   border: 1px solid rgba(98, 255, 149, 0.32);
   box-shadow: 0 0 70px rgba(31, 199, 89, 0.18), inset 0 0 36px rgba(88, 242, 141, 0.08);
   display: grid;
   place-items: center;
   text-align: center;
   padding: 18px;
 }

 .center-core strong {
   display: block;
   font-size: 24px;
   letter-spacing: .06em;
   text-transform: uppercase;
 }

 .center-core span {
   color: var(--muted);
   font-size: 13px;
 }

 .data-card {
   position: absolute;
   width: 180px;
   padding: 14px;
   border-radius: 18px;
   background: rgba(10, 24, 16, 0.92);
   border: 1px solid rgba(98, 255, 149, 0.16);
   box-shadow: var(--shadow);
   backdrop-filter: blur(8px);
   animation: float 4.8s ease-in-out infinite;
 }

 .data-card h4 {
   margin: 0 0 6px;
   font-size: 14px;
 }
.data-card img {
    border-radius: 10px;
}
 .data-card p {
   margin: 0;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
 }

 .card-a {
   top: 62px;
   left: 26px;
 }

 .card-b {
   right: 28px;
   top: 92px;
   animation-delay: .6s;
 }

 .card-c {
   left: 44px;
   bottom: 64px;
   animation-delay: 1.1s;
 }

 .card-d {
   right: 30px;
   bottom: 52px;
   animation-delay: 1.5s;
 }

 section {
   padding: 30px 0;
   position: relative;
   z-index: 2;
 }

 .section-head {
   max-width: 760px;
   margin-bottom: 20px;
 }

 .section-head h2 {
   margin: 0 0 10px;
   font-size: clamp(28px, 4vw, 44px);
   letter-spacing: -1.2px;
 }

 .section-head p {
   margin: 0;
   color: var(--muted);
   font-size: 16px;
 }

 .glass {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
   border: 1px solid rgba(98, 255, 149, 0.14);
   box-shadow: var(--shadow);
   backdrop-filter: blur(14px);
   border-radius: var(--radius-xl);
 }

 .feature-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }

 .feature {
   padding: 20px;
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(98, 255, 149, 0.12);
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
 }

 .feature:hover {
   transform: translateY(-4px);
   border-color: rgba(98, 255, 149, 0.3);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
 }

 .feature .icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-size: 22px;
   margin-bottom: 14px;
   background: linear-gradient(145deg, rgba(31, 199, 89, 0.22), rgba(88, 242, 141, 0.08));
   border: 1px solid rgba(98, 255, 149, 0.18);
 }

 .feature h3 {
   margin: 0 0 8px;
   font-size: 18px;
 }

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

 .leadership-wrap {
   display: grid;
   grid-template-columns: 0.92fr 1.08fr;
   gap: 22px;
   align-items: stretch;
 }

 .portrait-panel,
 .info-card,
 .orbit-wrap {
   border-radius: 28px;
   border: 1px solid rgba(98, 255, 149, 0.14);
   box-shadow: var(--shadow);
   overflow: hidden;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
 }

 .portrait-panel {
   min-height: 460px;
   position: relative;
   background:
     radial-gradient(circle at 50% 30%, rgba(88, 242, 141, 0.18), transparent 30%),
     linear-gradient(145deg, rgba(9, 24, 15, 0.98), rgba(8, 18, 12, 0.94));
   display: grid;
   place-items: center;
   padding: 28px;
 }

 .portrait-shell {
   width: min(100%, 320px);
   aspect-ratio: 4 / 5;
   border-radius: 30px;
   border: 1px solid rgba(98, 255, 149, 0.22);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
     radial-gradient(circle at 50% 15%, rgba(31, 199, 89, 0.16), transparent 35%),
     linear-gradient(145deg, rgba(12, 31, 20, 1), rgba(7, 16, 11, 1));
   display: grid;
   place-items: center;
   text-align: center;
   padding: 24px;
   position: relative;
 }

 .portrait-shell::before {
   content: "";
   position: absolute;
   inset: 16px;
   border-radius: 24px;
   border: 1px solid rgba(98, 255, 149, 0.12);
 }

 .portrait-avatar {
   width: 112px;
   height: 112px;
   border-radius: 28px;
   display: grid;
   place-items: center;
   font-size: 38px;
   font-weight: 800;
   color: #08210f;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   box-shadow: 0 14px 34px rgba(31, 199, 89, 0.25);
   margin-bottom: 18px;
   z-index: 1;
 }

 .portrait-shell h3 {
   margin: 0 0 8px;
   font-size: 30px;
   z-index: 1;
 }

 .portrait-shell p {
   margin: 0;
   color: var(--muted);
   z-index: 1;
 }

 .info-card {
   padding: 28px;
   display: grid;
   gap: 18px;
 }

 .list-clean {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 10px;
 }

 .list-clean li {
   padding: 12px 14px;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(98, 255, 149, 0.12);
   color: var(--text);
 }

 .stats-strip {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }

 .mini {
   border-radius: 18px;
   padding: 16px;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(98, 255, 149, 0.12);
 }

 .mini strong {
   display: block;
   font-size: 22px;
   margin-bottom: 6px;
 }

 .mini span {
   color: var(--muted);
   font-size: 13px;
 }

 .grid-2 {
   display: grid;
   grid-template-columns: 1.02fr 0.98fr;
   gap: 22px;
   align-items: stretch;
 }

 .card {
   padding: 24px;
   border-radius: 24px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
   border: 1px solid rgba(98, 255, 149, 0.14);
   box-shadow: var(--shadow);
 }

 .orbit-wrap {
   min-height: 420px;
   position: relative;
   display: grid;
   place-items: center;
   background:
     radial-gradient(circle at 50% 50%, rgba(31, 199, 89, 0.14), transparent 38%),
     linear-gradient(145deg, rgba(9, 24, 15, 0.98), rgba(8, 18, 12, 0.94));
 }

 .orbit-ring {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(98, 255, 149, 0.16);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   animation: spin 18s linear infinite;
 }

 .ring-1 {
   width: 320px;
   height: 320px;
 }

 .ring-2 {
   width: 220px;
   height: 220px;
   animation-direction: reverse;
   animation-duration: 12s;
 }

 .orbit-core {
   width: 156px;
   height: 156px;
   border-radius: 28px;
   display: grid;
   place-items: center;
   text-align: center;
   padding: 16px;
   background: linear-gradient(145deg, rgba(31, 199, 89, 0.22), rgba(8, 24, 13, 0.96));
   border: 1px solid rgba(98, 255, 149, 0.32);
   box-shadow: 0 0 60px rgba(31, 199, 89, 0.18);
   z-index: 2;
 }

 .orb-node {
   position: absolute;
   width: 124px;
   padding: 12px;
   border-radius: 18px;
   text-align: center;
   background: rgba(10, 24, 16, 0.92);
   border: 1px solid rgba(98, 255, 149, 0.16);
   box-shadow: var(--shadow);
   font-size: 13px;
 }

 .node-1 {
   top: 52px;
   left: 50%;
   transform: translateX(-50%);
 }

 .node-2 {
   right: 26px;
   top: 50%;
   transform: translateY(-50%);
 }

 .node-3 {
   bottom: 48px;
   left: 50%;
   transform: translateX(-50%);
 }

 .node-4 {
   left: 26px;
   top: 50%;
   transform: translateY(-50%);
 }

 .team-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 18px;
 }

 .search-shell {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   min-width: 290px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(98, 255, 149, 0.14);
 }

 .search-shell input {
   background: transparent;
   border: 0;
   color: var(--text);
   outline: none;
   width: 100%;
   font: inherit;
 }

 .filter-tabs {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .filter-tab {
   border: 1px solid rgba(98, 255, 149, 0.14);
   background: rgba(255, 255, 255, 0.035);
   color: var(--muted);
   padding: 10px 14px;
   border-radius: 999px;
   cursor: pointer;
   font-weight: 700;
   font-size: 13px;
   transition: .22s ease;
 }

 .filter-tab.active,
 .filter-tab:hover {
   color: #06210d;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   border-color: transparent;
   box-shadow: 0 10px 28px rgba(31, 199, 89, 0.24);
 }

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

 .member-card {
   position: relative;
   overflow: hidden;
   padding: 22px;
   border-radius: 24px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
   border: 1px solid rgba(98, 255, 149, 0.14);
   box-shadow: var(--shadow);
   transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
   min-height: 250px;
 }

 .member-card:hover {
   transform: translateY(-6px) scale(1.01);
   border-color: rgba(98, 255, 149, 0.32);
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
 }

 .member-card::before {
   content: "";
   position: absolute;
   inset: auto -10% -50% auto;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(31, 199, 89, 0.16), transparent 70%);
   pointer-events: none;
 }

 .avatar {
   width: 82px;
   height: 82px;
   border-radius: 22px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(31, 199, 89, 0.26), rgba(88, 242, 141, 0.1));
   border: 1px solid rgba(98, 255, 149, 0.22);
   font-size: 28px;
   font-weight: 800;
   letter-spacing: .03em;
   overflow: hidden;
   margin-bottom: 16px;
   color: #eafff0;
   box-shadow: inset 0 0 26px rgba(31, 199, 89, 0.08);
 }

 .role-tag {
   display: inline-flex;
   padding: 7px 11px;
   border-radius: 999px;
   background: rgba(31, 199, 89, 0.12);
   border: 1px solid rgba(98, 255, 149, 0.16);
   color: #d6ffe2;
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin-bottom: 12px;
 }

 .member-card h3 {
   margin: 0 0 4px;
   font-size: 20px;
 }

 .title {
   color: #9ef6bd;
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 14px;
 }

 .copy {
   color: var(--muted);
   font-size: 14px;
   line-height: 1.65;
 }

 .meta-line {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 14px;
 }

 .pill {
   font-size: 11px;
   color: #dbffe7;
   padding: 7px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(98, 255, 149, 0.12);
   letter-spacing: .08em;
   text-transform: uppercase;
 }

 .timeline-wrap {
   padding: 28px;
 }

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

 .timeline-item {
   position: relative;
   padding: 20px;
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(98, 255, 149, 0.12);
 }

 .timeline-item strong {
   display: block;
   font-size: 30px;
   margin-bottom: 8px;
 }

 .timeline-item p {
   margin: 0;
   color: var(--muted);
 }

 .cta-panel {
   padding: 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
 }

 .cta-panel h2 {
   margin: 0 0 8px;
   font-size: 34px;
   letter-spacing: -1px;
 }

 .cta-panel p {
   margin: 0;
   color: var(--muted);
   max-width: 760px;
 }

 footer {
   padding: 26px 0 44px;
   color: var(--muted);
   position: relative;
   z-index: 2;
 }

 .footer-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
   padding-top: 20px;
   border-top: 1px solid rgba(98, 255, 149, 0.1);
 }

 [data-animate] {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .6s ease, transform .6s ease;
 }

 [data-animate].show {
   opacity: 1;
   transform: translateY(0);
 }

 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(88, 242, 141, 0.5);
   }

   70% {
     box-shadow: 0 0 0 12px rgba(88, 242, 141, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(88, 242, 141, 0);
   }
 }

 @keyframes drift {
   from {
     transform: translateY(0px) translateX(0px);
   }

   to {
     transform: translateY(18px) translateX(12px);
   }
 }

 @keyframes spin {
   from {
     transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0px);
   }

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

 @media (max-width: 1120px) {

   .hero-grid,
   .feature-row,
   .grid-2,
   .leadership-wrap,
   .timeline {
     grid-template-columns: 1fr 1fr;
   }

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

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

   .quick-stats,
   .stats-strip {
     grid-template-columns: 1fr 1fr 1fr;
   }
 }

 @media (max-width: 760px) {
   .nav {
     flex-wrap: wrap;
   }

   .nav-links {
     display: none;
   }

   .hero-grid,
   .feature-row,
   .grid-2,
   .leadership-wrap,
   .member-grid,
   .timeline,
   .quick-stats,
   .stats-strip {
     grid-template-columns: 1fr;
   }

   .hero-visual {
     min-height: 460px;
   }

   .center-core {
     width: 156px;
     height: 156px;
   }

   .data-card {
     width: 152px;
     padding: 12px;
   }

   .card-a {
     top: 24px;
     left: 12px;
   }

   .card-b {
     top: 24px;
     right: 12px;
   }

   .card-c {
     left: 12px;
     bottom: 20px;
   }

   .card-d {
     right: 12px;
     bottom: 20px;
   }

   .cta-panel {
     padding: 24px;
   }

   h1 {
     letter-spacing: -1.2px;
   }

   .orbit-wrap {
     min-height: 500px;
   }

   .node-1 {
     top: 24px;
   }

   .node-2 {
     right: 10px;
   }

   .node-3 {
     bottom: 24px;
   }

   .node-4 {
     left: 10px;
   }
 }

 /* <-----------add css----------> */
 .logo-section {
   padding: 40px 0;
 }
.text-center {
    text-align: center;
}
 .logo-slider {
   overflow: hidden;
   position: relative;
   margin-top: 20px;
   padding: 20px 0px;
 }

 .logo-track {
   display: flex;
   gap: 20px;
   width: max-content;
   animation: scroll 25s linear infinite;
 }

 .logo-slider:hover .logo-track {
   animation-play-state: paused;
 }

 .logo-item {
   width: 192px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   background: rgb(203 247 218 / 90%);
   border: 1px solid rgba(98, 255, 149, 0.12);
   transition: 0.3s ease;
 }

 .logo-item img {
   max-width: 100%;
   max-height: 50px;
 }

 .logo-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 30px rgba(31, 199, 89, 0.25);
 }

 @keyframes scroll {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 /* Mobile */
 @media (max-width: 768px) {
   .logo-item {
     width: 110px;
     height: 60px;
   }

   .logo-track {
     gap: 20px;
   }
 }

 /* Mobile Menu Button */
 .menu-toggle {
   display: none;
   font-size: 26px;
   cursor: pointer;
   padding: 8px 12px;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(98, 255, 149, 0.2);
 }

 .logo-header {
   width: 190px;
   height: auto;
 }

 /* Mobile Menu Style */
 @media (max-width: 760px) {
   .menu-toggle {
     display: block;
   }

   .nav-links {
     position: absolute;
     top: 100%;
     right: -100%;
     width: 100%;
     flex-direction: column;
     background: rgba(6, 17, 11, 0.95);
     backdrop-filter: blur(12px);
     border-top: 1px solid rgba(98, 255, 149, 0.15);
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
   }

   .nav-links a {
     padding: 14px 20px;
     border-bottom: 1px solid rgba(98, 255, 149, 0.08);
   }

   .nav-links.active {
     max-height: 100vh;
     display: flex;
     height: 100vh;
     right: 0px;
   }

   .logo-header {
     width: 180px;
   }
 }

.feature h5 {
    font-size: 17px;
    font-weight: 400;
    margin: 0px;
} 

.servtabcust {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-answer {
    padding: 0px 13px;
}
.faq-answer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
 @media (max-width: 767px) {
.desktopprm {
    display: none;
}
.dropdown-menu a {
    padding: 10px 15px;
    display: block;
    color: #ffffff;
    font-size: 12px;
}
}
@media (min-width: 767px){
a.mobile-cnt {
    display: none;
}
}


/* ─── Hero Banner ───────────────────────────────────── */
.contact-hero {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #0d4a24 0%, var(--bg-deep) 70%);
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(34,197,94,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(34,197,94,0.06) 0%, transparent 40%);
  pointer-events: none;
}

/* Dot-grid texture */
.contact-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(34,197,94,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
}

.contact-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}



.contact-hero h1 span {
  color: var(--accent);
}

.hero-breadcrumb {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.hero-breadcrumb a:hover { color: var(--accent); }

.portrait-shell.portrait-shell-br img{border-radius:10px;}

/*footer*/


/* =========================================
   PREMIUM FOOTER STYLE
   Different from body but same theme
========================================= */

.main-footer{
    position:relative;

    margin-top:80px;

    background:
    linear-gradient(
        180deg,
        #041b11 0%,
        #021109 100%
    );

    border-top:1px solid rgba(74,222,128,.08);

    overflow:hidden;
}

/* subtle top separation glow */

.main-footer::before{
    content:'';

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(74,222,128,.4),
        transparent
    );
}

/* radial glow */

.main-footer::after{
    content:'';

    position:absolute;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    width:700px;
    height:400px;

    background:
    radial-gradient(
        rgba(34,197,94,.12),
        transparent 70%
    );

    pointer-events:none;
}

/* =========================================
   WRAPPER
========================================= */

.footer-wrapper{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;

    flex-wrap:wrap;

    padding:0px 0 55px;
}

/* =========================================
   LEFT
========================================= */

.footer-left{
    flex:1;
    min-width:320px;
}

.footer-left h4{
    position:relative;

    color:#fff;

    font-size:20px;
    font-weight:700;

    margin-bottom:28px;

    letter-spacing:.5px;

    font-family:'Syne',sans-serif;
}

/* green underline */

.footer-left h4::after{
    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:55px;
    height:2px;

    background:#4ade80;

    border-radius:10px;
}

.footer-links{
    margin-bottom:10px;
    line-height:1.9;
}

.footer-links a{
    color:#cfcfcf;

    text-decoration:none;

    font-size:15px;
    font-weight:400;

    transition:.3s ease;
}

.footer-links a:hover{
    color:#4ade80;
}

.footer-links span{
    color:#4ade80;
    opacity:.5;
    margin:0 4px;
}

/* =========================================
   CENTER LOGO
========================================= */

.footer-center{
    flex:0 0 auto;
    text-align:center;
}

.footer-center img{
    max-width:250px;
    width:100%;
    object-fit:contain;

    filter:
    drop-shadow(0 0 25px rgba(34,197,94,.18));
}

/* =========================================
   RIGHT
========================================= */

.footer-right{
    flex:1;
    text-align:right;
    min-width:260px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    justify-content: flex-end;
}

.footer-right img {
    max-width: 100%;
    width: 160px;
    object-fit: cover;
    opacity: 1;
    background: #30d368;
    margin-top: 10px;
}

/* =========================================
   BOTTOM BAR
========================================= */

.footer-bottom{
    position:relative;
    z-index:2;

    border-top:
    1px solid rgba(255,255,255,.05);

    background:
    rgba(255,255,255,.015);

    backdrop-filter:blur(10px);
}

.footer-bottom-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    padding:22px 0;
}

.footer-bottom p{
    margin:0;

    color:#8e9f96;

    font-size:14px;

    letter-spacing:.2px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .footer-wrapper{
        flex-direction:column;
        text-align:center;
        gap: 15px;
    }

    .footer-right{
        text-align:center;
        justify-content: center;
    }

    .footer-left h4::after{
        left:50%;
        transform:translateX(-50%);
    }

    .footer-bottom-wrap{
        justify-content:center;
        text-align:center;
    }
}

@media(max-width:600px){

    .main-footer{
        margin-top:60px;
    }

    .footer-wrapper{
        padding:60px 0 45px;
        gap:45px;
    }

    .footer-left h4{
        font-size:18px;
    }

    .footer-links a{
        font-size:14px;
    }

    .footer-center img{
        max-width:210px;
    }

    .footer-right img{
        max-width:250px;
    }

    .footer-bottom p{
        font-size:13px;
        line-height:1.7;
    }
}

/*inner blog page css*/

/* ── Individual Blog Page ── */

.template-features-area256 {
    background: #0a1a0a;
    padding: 60px 0;
}

.template-features-area {
    padding: 0;
}

.container1 {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Page Title ── */
.template-features-area256 h1 {
    background: linear-gradient(90deg, #ebfff1 0%, #8cf7b0 55%, #1fc759 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 40px;
    padding: 40px 0 0;
}

/* ── Body Text ── */
.template-features-area256 p {
    color: #c8e6c9;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.template-features-area256 p b {
    color: #6ef59a;
    font-weight: 700;
}

/* ── Headings ── */
.template-features-area256 h2,
.template-features-area256 h3 {
    color: #8cf7b0;
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 12px;
    line-height: 1.4;
}

/* ── Row spacing ── */
.template-features-area256 .row {
    margin-bottom: 10px;
}

/* ── Blog Images ── */
.other-imageblog {
    margin: 28px 0;
}

.other-imageblog img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgb(98 255 149 / 12%);
}

/* ── List markers ── */
::marker {
    font-size: 18px;
    font-weight: 600;
    color: #6ef59a;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .template-features-area256 h1 {
        font-size: 22px;
        padding-top: 20px;
    }

    .template-features-area256 h2,
    .template-features-area256 h3 {
        font-size: 18px;
    }

    .template-features-area256 p {
        font-size: 15px;
    }

    .container1 {
        padding: 0 16px;
    }
}