/* ===== CSS VARIABLES ===== */
 :root {
   --accent: #f4934b;
   --accent-dark: #d4732e;
   --accent-light: #fdb97a;
   --primary: #0f459b;
   --primary-dark: #0a2e6b;
   --primary-light: #1a5bc7;
   --dark: #060c1a;
   --dark-2: #0c1628;
   --dark-3: #111f3a;
   --mid: #1a2f55;
   --glass: rgba(15, 69, 155, 0.12);
   --glass-border: rgba(244, 147, 75, 0.18);
   --white: #ffffff;
   --off-white: #e8edf6;
   --muted: #8a9bbf;
   --font-display: 'Syne', sans-serif;
   --font-body: 'Outfit', sans-serif;
   --nav-h: 80px;
   --section-pad: clamp(60px, 8vw, 40px);
   --radius: 16px;
   --radius-sm: 8px;
   --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* ===== RESET & BASE ===== */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
   font-size: 16px;
 }

 body {
   font-family: var(--font-body);
   background: var(--dark);
   color: var(--white);
   overflow-x: hidden; 
 }

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

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

 ul {
   list-style: none;
 }

 button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: var(--font-body);
 }

 /* ===== CUSTOM CURSOR ===== */
 .cursor {
   position: fixed;
   width: 10px;
   height: 10px;
   background: var(--accent);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%);
   transition: transform 0.1s;
 }

 .cursor-ring {
   position: fixed;
   width: 36px;
   height: 36px;
   border: 1.5px solid var(--accent);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%);
   transition: all 0.15s ease;
   opacity: 0.6;
 }

 body:hover .cursor {
   opacity: 1;
 }

 /* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
   width: 4px;
 }

 ::-webkit-scrollbar-track {
   background: var(--dark);
 }

 ::-webkit-scrollbar-thumb {
   background: var(--accent);
   border-radius: 4px;
 }

 /* ===== NOISE OVERLAY ===== */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
   pointer-events: none;
   z-index: 1;
   opacity: 0.4;
 }

 /* ===== UTILITY ===== */
 .container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
 }

 .accent {
   color: var(--accent);
 }

 .tag {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--accent);
   background: rgba(244, 147, 75, 0.1);
   border: 1px solid rgba(244, 147, 75, 0.3);
   padding: 6px 16px;
   border-radius: 100px;
   margin-bottom: 20px;
 }

 .section-title {
   font-family: var(--font-display);
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--white);
 }

 .section-sub {
   font-size: clamp(15px, 1.6vw, 17px);
   color: var(--muted);
   line-height: 1.75;
   font-weight: 300;
   max-width: 580px;
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--accent);
   color: var(--white);
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.04em;
   padding: 16px 34px;
   border-radius: 100px;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
   opacity: 0;
   transition: opacity 0.3s;
 }

 .btn-primary:hover::before {
   opacity: 1;
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 20px 40px rgba(244, 147, 75, 0.35);
 }

 .btn-primary span {
   position: relative;
   z-index: 1;
 }

 .btn-primary svg {
   position: relative;
   z-index: 1;
   transition: transform 0.3s;
 }

 .btn-primary:hover svg {
   transform: translateX(4px);
 }

 .btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: transparent;
   color: var(--white);
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.04em;
   padding: 15px 34px;
   border-radius: 100px;
   border: 1.5px solid rgba(255, 255, 255, 0.2);
   transition: var(--transition);
 }

 .btn-outline:hover {
   border-color: var(--accent);
   color: var(--accent);
   background: rgba(244, 147, 75, 0.06);
 }

 /* ===== HEADER / NAV ===== */
 header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   height: var(--nav-h);
   display: flex;
   align-items: center;
   transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
 }

 header.scrolled {
   background: rgba(6, 12, 26, 0.85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(244, 147, 75, 0.1);
 }

 .nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 20px;
   letter-spacing: -0.01em;
 }

 .logo-icon {
   width: 42px;
   height: 42px;
   background: linear-gradient(135deg, var(--accent), var(--primary));
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
 }

 .logo-text {
   color: var(--white);
 }

 .logo-text span {
   color: var(--accent);
 }

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

 nav ul li a {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--off-white);
   letter-spacing: 0.02em;
   position: relative;
   transition: color 0.3s;
 }

 nav ul li a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 1.5px;
   background: var(--accent);
   transition: width 0.3s;
 }

 nav ul li a:hover {
   color: var(--accent);
 }

 nav ul li a:hover::after {
   width: 100%;
 }

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

 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 6px;
 }

 .hamburger span {
   display: block;
   width: 24px;
   height: 1.5px;
   background: var(--white);
   transition: var(--transition);
 }

 .mobile-menu {
   display: none;
   position: fixed;
   inset: 0;
   background: var(--dark);
   z-index: 999;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
 }

 .mobile-menu.open {
   display: flex;
 }

 .mobile-menu a {
   font-family: var(--font-display);
   font-size: clamp(28px, 7vw, 42px);
   font-weight: 700;
   color: var(--white);
   transition: color 0.3s;
 }

 .mobile-menu a:hover {
   color: var(--accent);
 }

 .mobile-close {
   position: absolute;
   top: 28px;
   right: 28px;
   font-size: 28px;
   color: var(--white);
   background: none;
   border: none;
   line-height: 1;
 }

 /* ===== HERO ===== */
 #hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   overflow: hidden;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
 }

 .hero-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(105deg,
       rgba(6, 12, 26, 0.93) 0%,
       rgba(6, 12, 26, 0.78) 45%,
       rgba(6, 12, 26, 0.45) 100%);
 }

 .hero-grid-overlay {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(15, 69, 155, 0.06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(15, 69, 155, 0.06) 1px, transparent 1px);
   background-size: 60px 60px;
   z-index: 1;
 }

 .hero-content {
   position: relative;
   z-index: 2;
   padding: calc(var(--nav-h) + 40px) 0 80px;
   max-width: 760px;
 }

 .hero-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 28px;
   opacity: 0;
 }

 .hero-line {
   display: block;
   width: 40px;
   height: 1.5px;
   background: var(--accent);
 }

 .hero-eyebrow-text {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--accent);
 }

 .hero-title {
   font-family: var(--font-display);
   font-size: clamp(42px, 7.5vw, 90px);
   font-weight: 800;
   line-height: 1.0;
   letter-spacing: -0.03em;
   margin-bottom: 28px;
   opacity: 0;
 }

 .hero-title .outline {
   -webkit-text-stroke: 1.5px var(--accent);
   color: transparent;
 }

 .hero-desc {
   font-size: clamp(15px, 1.6vw, 18px);
   color: var(--off-white);
   line-height: 1.8;
   font-weight: 300;
   max-width: 580px;
   margin-bottom: 44px;
   opacity: 0;
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   opacity: 0;
 }

 .hero-stats {
   position: absolute;
   bottom: 48px;
   right: 0;
   z-index: 2;
   display: flex;
   gap: 2px;
 }

 .hero-stat {
   background: rgba(15, 69, 155, 0.15);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(244, 147, 75, 0.15);
   padding: 22px 32px;
   text-align: center;
   opacity: 0;
 }

 .hero-stat:first-child {
   border-radius: var(--radius) 0 0 var(--radius);
 }

 .hero-stat:last-child {
   border-radius: 0 var(--radius) var(--radius) 0;
 }

 .hero-stat-num {
   font-family: var(--font-display);
   font-size: 32px;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 6px;
 }

 .hero-stat-label {
   font-size: 11px;
   font-weight: 500;
   color: var(--muted);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }

 .hero-scroll {
   position: absolute;
   bottom: 48px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   color: var(--muted);
   font-size: 10px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 500;
 }

 .scroll-track {
   width: 1px;
   height: 52px;
   background: rgba(255, 255, 255, 0.15);
   position: relative;
   overflow: hidden;
 }

 .scroll-track::after {
   content: '';
   position: absolute;
   top: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--accent);
   animation: scrollDown 2s ease-in-out infinite;
 }

 @keyframes scrollDown {
   0% {
     top: -100%;
   }

   100% {
     top: 100%;
   }
 }

 /* ===== MARQUEE ===== */
 .marquee-section {
   background: var(--accent);
   padding: 16px 0;
   overflow: hidden;
   position: relative;
   z-index: 2;
 }

 .marquee-track {
   display: flex;
   gap: 0;
   animation: marquee 28s linear infinite;
   white-space: nowrap;
 }

 .marquee-item {
   display: inline-flex;
   align-items: center;
   gap: 20px;
   padding: 0 32px;
   font-family: var(--font-display);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--dark);
   flex-shrink: 0;
 }

 .marquee-dot {
   width: 5px;
   height: 5px;
   background: var(--dark);
   border-radius: 50%;
   opacity: 0.5;
   flex-shrink: 0;
 }

 @keyframes marquee {
   0% {
     transform: translateX(0);
   }

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

 /* ===== ABOUT ===== */
 #about {
   padding: var(--section-pad) 0;
   position: relative;
   overflow: hidden;
 }

 #about::before {
   content: '';
   position: absolute;
   top: -200px;
   left: -200px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.12) 0%, transparent 70%);
   pointer-events: none;
 }

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

 .about-image-wrap {
   position: relative;
 }

 .about-img-main {
   width: 100%;
   height: 520px;
   object-fit: cover;
   border-radius: var(--radius);
   display: block;
 }

 .about-img-badge {
   position: absolute;
   bottom: -28px;
   right: -28px;
   background: var(--accent);
   border-radius: var(--radius);
   padding: 28px;
   text-align: center;
 }

 .about-img-badge-num {
   font-family: var(--font-display);
   font-size: 40px;
   font-weight: 800;
   color: var(--white);
   line-height: 1;
 }

 .about-img-badge-text {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-top: 4px;
 }

 .about-frame {
   position: absolute;
   top: -20px;
   left: -20px;
   width: 140px;
   height: 140px;
   border-left: 2px solid rgba(244, 147, 75, 0.4);
   border-top: 2px solid rgba(244, 147, 75, 0.4);
   border-radius: 4px 0 0 0;
   pointer-events: none;
 }

 .about-content {}

 .about-content .section-sub {
   margin: 20px 0 36px;
 }

 .about-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .about-feat {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 18px;
   background: var(--glass);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   transition: var(--transition);
 }

 .about-feat:hover {
   background: rgba(15, 69, 155, 0.2);
   border-color: rgba(244, 147, 75, 0.35);
   transform: translateY(-2px);
 }

 .about-feat-icon {
   width: 36px;
   height: 36px;
   background: rgba(244, 147, 75, 0.15);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 16px;
 }

 .about-feat-text strong {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: var(--white);
   margin-bottom: 3px;
 }

 .about-feat-text span {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.5;
 }

 /* ===== PRODUCTS ===== */
 #products {
   padding: var(--section-pad) 0;
   background: var(--dark-2);
   position: relative;
   overflow: hidden;
 }

 #products::after {
   content: '';
   position: absolute;
   top: -100px;
   right: -200px;
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(244, 147, 75, 0.06) 0%, transparent 65%);
   pointer-events: none;
 }

 .section-header {
   text-align: center;
   margin-bottom: clamp(48px, 6vw, 80px);
 }

 .section-header .section-sub {
   margin: 16px auto 0;
 }

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

 .product-card {
   position: relative;
   border-radius: var(--radius);
   overflow: hidden;
   aspect-ratio: 3/4;
   cursor: pointer;
 }

 .product-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .product-card:hover .product-img {
   transform: scale(1.08);
 }

 .product-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(6, 12, 26, 0.55) 65%, rgba(6, 12, 26, 0.92) 100%);
   transition: background 0.4s;
 }

 .product-card:hover .product-overlay {
   background: linear-gradient(180deg, rgba(6, 12, 26, 0.15) 0%, rgba(6, 12, 26, 0.65) 55%, rgba(6, 12, 26, 0.96) 100%);
 }

 .product-info {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 24px;
 }

 .product-cat {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 6px;
 }

 .product-name {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 8px;
   line-height: 1.2;
 }

 .product-desc {
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.6;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: all 0.4s;
 }

 .product-card:hover .product-desc {
   max-height: 80px;
   opacity: 1;
 }

 .product-arrow {
   position: absolute;
   top: 18px;
   right: 18px;
   width: 36px;
   height: 36px;
   background: rgba(244, 147, 75, 0.15);
   border: 1px solid rgba(244, 147, 75, 0.3);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0.7);
   transition: var(--transition);
   color: var(--accent);
 }

 .product-card:hover .product-arrow {
   opacity: 1;
   transform: scale(1);
 }

 .products-cta {
   text-align: center;
   margin-top: 40px;
 }

 @media (max-width: 1024px) {
   .products-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 540px) {
   .products-grid {
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }

   .product-name {
     font-size: 15px;
   }

   .product-info {
     padding: 16px;
   }
 }

 /* ===== WHY CHOOSE ===== */
 #why {
   padding: var(--section-pad) 0;
   position: relative;
 }

 .why-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 80px;
   align-items: start;
 }

 .why-content {}

 .why-content .section-sub {
   margin: 20px 0 48px;
 }

 .why-visual {
   position: relative;
 }

 .why-img {
   width: 100%;
   height: 480px;
   object-fit: cover;
   border-radius: var(--radius);
 }

 .why-cards {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .why-card {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   padding: 28px;
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .why-card::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--accent);
   transform: scaleY(0);
   transition: transform 0.4s;
   transform-origin: bottom;
 }

 .why-card:hover {
   border-color: rgba(244, 147, 75, 0.2);
   background: rgba(17, 31, 58, 0.8);
   transform: translateX(6px);
 }

 .why-card:hover::before {
   transform: scaleY(1);
 }

 .why-card-icon {
   width: 52px;
   height: 52px;
   background: rgba(244, 147, 75, 0.1);
   border: 1px solid rgba(244, 147, 75, 0.2);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
 }

 .why-card-body {}

 .why-card-body h4 {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 8px;
 }

 .why-card-body p {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.65;
 }

 /* ===== REACH / MAP ===== */
 #reach {
   padding: var(--section-pad) 0;
   background: var(--dark-2);
   overflow: hidden;
 }

 .reach-inner {
   text-align: center;
 }

 .reach-inner .section-sub {
   margin: 16px auto 60px;
 }

 .reach-map-wrap {
   position: relative;
   background: var(--dark-3);
   border: 1px solid rgba(244, 147, 75, 0.1);
   border-radius: var(--radius);
   padding: 48px;
   overflow: hidden;
 }

 .reach-map-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at center, rgba(15, 69, 155, 0.15) 0%, transparent 65%);
 }

 .reach-regions {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   position: relative;
   z-index: 1;
 }

 .reach-region {
   padding: 28px 20px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius);
   text-align: center;
   transition: var(--transition);
 }

 .reach-region:hover {
   background: rgba(244, 147, 75, 0.08);
   border-color: rgba(244, 147, 75, 0.25);
   transform: translateY(-6px);
 }

 .reach-region-icon {
   font-size: 32px;
   margin-bottom: 14px;
   display: block;
 }

 .reach-region-name {
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 6px;
 }

 .reach-region-count {
   font-size: 11px;
   color: var(--accent);
   font-weight: 600;
   letter-spacing: 0.08em;
 }

 .reach-bottom {
   margin-top: 60px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2px;
 }

 .reach-stat {
   padding: 32px 24px;
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.05);
   text-align: center;
 }

 .reach-stat:first-child {
   border-radius: var(--radius) 0 0 var(--radius);
 }

 .reach-stat:last-child {
   border-radius: 0 var(--radius) var(--radius) 0;
 }

 .reach-stat-num {
   font-family: var(--font-display);
   font-size: clamp(32px, 4vw, 48px);
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 8px;
 }

 .reach-stat-label {
   font-size: 12px;
   color: var(--muted);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }

 /* ===== PROCESS ===== */
 #process {
   padding: var(--section-pad) 0;
   position: relative;
 }

 .process-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
   margin-top: 64px;
 }

 .process-steps::before {
   content: '';
   position: absolute;
   top: 42px;
   left: 12.5%;
   right: 12.5%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
   opacity: 0.4;
 }

 .process-step {
   padding: 0 24px;
   text-align: center;
   position: relative;
 }

 .process-num {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   background: var(--dark-3);
   border: 1.5px solid rgba(244, 147, 75, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 28px;
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 800;
   color: var(--accent);
   position: relative;
   transition: var(--transition);
 }

 .process-step:hover .process-num {
   background: var(--accent);
   color: var(--white);
   border-color: var(--accent);
   box-shadow: 0 0 40px rgba(244, 147, 75, 0.4);
 }

 .process-icon {
   position: absolute;
   top: -6px;
   right: -6px;
   width: 26px;
   height: 26px;
   background: var(--primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
 }

 .process-step h4 {
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 12px;
 }

 .process-step p {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.7;
 }

 /* ===== CTA ===== */
 #cta {
   padding: var(--section-pad) 0;
   position: relative;
   overflow: hidden;
 }

 .cta-inner {
   position: relative;
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--dark-3) 50%, rgba(244, 147, 75, 0.12) 100%);
   border: 1px solid rgba(244, 147, 75, 0.2);
   border-radius: 24px;
   padding: clamp(48px, 7vw, 100px) clamp(32px, 5vw, 80px);
   text-align: center;
   overflow: hidden;
 }

 .cta-inner::before {
   content: '';
   position: absolute;
   top: -150px;
   left: 50%;
   transform: translateX(-50%);
   width: 500px;
   height: 300px;
   background: radial-gradient(ellipse, rgba(244, 147, 75, 0.15) 0%, transparent 70%);
   pointer-events: none;
 }

 .cta-inner::after {
   content: '';
   position: absolute;
   bottom: -100px;
   right: -100px;
   width: 350px;
   height: 350px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.2) 0%, transparent 70%);
   pointer-events: none;
 }

 .cta-tag {
   margin-bottom: 24px;
 }

 .cta-title {
   font-family: var(--font-display);
   font-size: clamp(32px, 5vw, 60px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin-bottom: 20px;
   position: relative;
   z-index: 1;
 }

 .cta-sub {
   font-size: clamp(15px, 1.6vw, 17px);
   color: var(--muted);
   line-height: 1.75;
   max-width: 520px;
   margin: 0 auto 44px;
   position: relative;
   z-index: 1;
 }

 .cta-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   position: relative;
   z-index: 1;
 }

 .cta-contact {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 32px;
   margin-top: 40px;
   flex-wrap: wrap;
 }

 .cta-contact-item {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--muted);
   font-size: 14px;
 }

 .cta-contact-item svg {
   color: var(--accent);
 }

 /* ===== FOOTER ===== */
 footer {
   background: #f4934b;
   border-top: 1px solid #fff;
   padding: 0px 0 0;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
   gap: 48px;
   padding-bottom: 56px;
 }

 .footer-brand {}

 .footer-brand .logo {
   margin-bottom: 20px;
 }

 .footer-brand-desc {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.75;
   margin-bottom: 28px;
   max-width: 260px;
 }

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

 .footer-social {
   width: 38px;
   height: 38px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: var(--muted);
   transition: var(--transition);
 }

 .footer-social:hover {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--white);
   transform: translateY(-3px);
 }

 .footer-col h5 {
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 20px;
   letter-spacing: 0.02em;
 }

 .footer-links {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .footer-links a {
   font-size: 13.5px;
   color: var(--muted);
   transition: color 0.3s;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .footer-links a::before {
   content: '';
   display: block;
   width: 0;
   height: 1px;
   background: var(--accent);
   transition: width 0.3s;
 }

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

 .footer-links a:hover::before {
   width: 12px;
 }

 .footer-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 16px;
 }

 .footer-contact-icon {
   width: 32px;
   height: 32px;
   background: rgba(244, 147, 75, 0.1);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
 }

 .footer-contact-text {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.6;
 }

 .footer-contact-text strong {
   display: block;
   font-size: 11px;
   font-weight: 600;
   color: var(--white);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 2px;
 }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 24px 0;
 
	text-align: center;
}

 .footer-copy {
   font-size: 14px;
   color: #fff;
 }

 .footer-copy a {
   color: var(--accent);
 }

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

 .footer-badge {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--muted);
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 5px 12px;
   border-radius: 100px;
 }

 /* ===== ANIMATIONS BASE ===== */
 .reveal,
 .reveal-left,
 .reveal-right,
 .reveal-scale {
   opacity: 1;
   transform: none;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1024px) {
   .about-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .about-img-main {
     height: 360px;
   }

   .about-img-badge {
     right: 0;
     bottom: -20px;
   }

   .about-features {
     grid-template-columns: 1fr 1fr;
   }

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

   .why-img {
     height: 340px;
   }

   .products-grid {
     grid-template-columns: 1fr 1fr;
   }

   .product-card:first-child {
     grid-column: span 2;
     aspect-ratio: 16/7;
   }

   .reach-regions {
     grid-template-columns: repeat(3, 1fr);
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 36px;
   }

   .process-steps {
     grid-template-columns: 1fr 1fr;
     gap: 40px;
   }

   .process-steps::before {
     display: none;
   }
 }

 @media (max-width: 768px) {
   :root {
     --nav-h: 68px;
   }

   nav ul,
   .nav-cta .btn-primary {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   .hero-stats {
     position: static;
     margin-top: 40px;
     flex-wrap: wrap;
   }

   .hero-stat:first-child,
   .hero-stat:last-child {
     border-radius: var(--radius-sm);
   }

   .hero-stat {
     flex: 1;
     min-width: 120px;
   }

   .hero-scroll {
     display: none;
   }

   .products-grid {
     grid-template-columns: 1fr;
   }

   .product-card:first-child {
     grid-column: span 1;
     aspect-ratio: 4/3;
   }

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

   .reach-bottom {
     grid-template-columns: 1fr 1fr;
   }

   .reach-stat:first-child {
     border-radius: var(--radius) var(--radius) 0 0;
   }

   .reach-stat:last-child {
     border-radius: 0 0 var(--radius) var(--radius);
   }

   .process-steps {
     grid-template-columns: 1fr;
   }

   .footer-grid {
     grid-template-columns: 1fr;
   }

   .footer-bottom {
     flex-direction: column;
     text-align: center;
   }

   .about-features {
     grid-template-columns: 1fr;
   }

   .hero-actions {
     flex-direction: column;
     align-items: flex-start;
   }

   .cta-actions {
     flex-direction: column;
   }

 
   .cursor,
   .cursor-ring {
     display: none;
   }
 }

 @media (max-width: 480px) {
   .reach-regions {
     grid-template-columns: 1fr 1fr;
   }

   .hero-stat-num {
     font-size: 24px;
   }

   .reach-map-wrap {
     padding: 28px 20px;
   }
 }


 /* ── ABOUT PAGE SPECIFIC CSS ── */

 /* Page Hero */
 .page-hero {
   position: relative;
   min-height: 52vh;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
   padding-bottom: 72px;
   
 }

 .page-hero-bg {
   position: absolute;
   inset: 0;
 }

 .page-hero-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 30%;
 }

 .page-hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(6, 12, 26, 0.65) 0%, rgba(6, 12, 26, 0.92) 100%);
 }

 .page-hero-grid {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(15, 69, 155, 0.07) 1px, transparent 1px),
     linear-gradient(90deg, rgba(15, 69, 155, 0.07) 1px, transparent 1px);
   background-size: 60px 60px;
 }

 .page-hero-content {
   position: relative;
   z-index: 2;
   padding-top: calc(var(--nav-h) + 60px);
 }

 .page-hero-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
 }

 .page-hero-line {
   display: block;
   width: 36px;
   height: 1.5px;
   background: var(--accent);
 }

 .page-hero-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--accent);
 }

 .page-hero-title {
   font-family: var(--font-display);
   font-size: clamp(40px, 7vw, 80px);
   font-weight: 800;
   line-height: 1.0;
   letter-spacing: -0.03em;
   margin-bottom: 20px;
 }

 .page-hero-title .outline {
   -webkit-text-stroke: 1.5px var(--accent);
   color: transparent;
 }

 .page-hero-sub {
   font-size: clamp(15px, 1.5vw, 17px);
   color: var(--off-white);
   line-height: 1.75;
   font-weight: 300;
   max-width: 560px;
 }

 /* Who We Are */
 #who-we-are {
   padding: var(--section-pad) 0;
   position: relative;
   overflow: hidden;
 }

 #who-we-are::before {
   content: '';
   position: absolute;
   top: -200px;
   left: -200px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.1) 0%, transparent 70%);
   pointer-events: none;
 }

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

 .who-image-wrap {
   position: relative;
 }

 .who-img-main {
   width: 100%;
   height: 520px;
   object-fit: cover;
   border-radius: var(--radius);
 }

 .who-img-frame {
   position: absolute;
   top: -20px;
   left: -20px;
   width: 140px;
   height: 140px;
   border-left: 2px solid rgba(244, 147, 75, 0.4);
   border-top: 2px solid rgba(244, 147, 75, 0.4);
   border-radius: 4px 0 0 0;
   pointer-events: none;
 }

 .who-img-frame-br {
   position: absolute;
   bottom: -20px;
   right: -20px;
   width: 100px;
   height: 100px;
   border-right: 2px solid rgba(15, 69, 155, 0.5);
   border-bottom: 2px solid rgba(15, 69, 155, 0.5);
   pointer-events: none;
 }

 .who-founder-badge {
   position: absolute;
   bottom: -24px;
   right: -24px;
   background: var(--dark-3);
   border: 1px solid rgba(244, 147, 75, 0.25);
   border-radius: var(--radius);
   padding: 20px 24px;
   display: flex;
   align-items: center;
   gap: 14px;
   backdrop-filter: blur(10px);
 }

 .who-founder-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent), var(--primary));
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 800;
   color: var(--white);
   flex-shrink: 0;
 }

 .who-founder-info strong {
   display: block;
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 3px;
 }

 .who-founder-info span {
   font-size: 11px;
   color: var(--accent);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 .who-content .section-sub {
   margin: 20px 0 36px;
 }

 .who-highlights {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .who-highlight {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 22px;
   background: var(--glass);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   transition: var(--transition);
 }

 .who-highlight:hover {
   background: rgba(15, 69, 155, 0.2);
   border-color: rgba(244, 147, 75, 0.3);
   transform: translateX(6px);
 }

 .who-highlight-icon {
   width: 38px;
   height: 38px;
   background: rgba(244, 147, 75, 0.12);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
 }

 .who-highlight span {
   font-size: 14px;
   font-weight: 500;
   color: var(--off-white);
 }

 /* Journey */
 #journey {
   padding: var(--section-pad) 0;
   background: var(--dark-2);
   position: relative;
   overflow: hidden;
 }

 #journey::after {
   content: '';
   position: absolute;
   top: -100px;
   right: -200px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(244, 147, 75, 0.05) 0%, transparent 65%);
   pointer-events: none;
 }

 .journey-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 80px;
   align-items: start;
 }

 .journey-content .section-sub {
   margin: 20px 0 48px;
 }

 .journey-milestones {
   display: flex;
   flex-direction: column;
   gap: 0;
   position: relative;
 }

 .journey-milestones::before {
   content: '';
   position: absolute;
   left: 20px;
   top: 0;
   bottom: 0;
   width: 1px;
   background: linear-gradient(180deg, var(--accent), var(--primary), transparent);
 }

 .journey-milestone {
   display: flex;
   gap: 28px;
   padding-bottom: 36px;
   position: relative;
 }

 .journey-milestone:last-child {
   padding-bottom: 0;
 }

 .journey-dot {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--dark-3);
   border: 2px solid var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   transition: var(--transition);
 }

 .journey-milestone:hover .journey-dot {
   background: var(--accent);
   box-shadow: 0 0 20px rgba(244, 147, 75, 0.4);
 }

 .journey-milestone-body {
   padding-top: 8px;
 }

 .journey-milestone-body h4 {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 8px;
 }

 .journey-milestone-body p {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.7;
 }

 .journey-image {
   position: relative;
 }

 .journey-img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-radius: var(--radius);
 }

 .journey-img-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(15, 69, 155, 0.25), transparent);
   border-radius: var(--radius);
 }

 /* Values */
 #values {
   padding: var(--section-pad) 0;
   position: relative;
 }

 .values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 64px;
 }

 .value-card {
   padding: 36px 28px;
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius);
   text-align: center;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .value-card::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--accent), var(--primary));
   transform: scaleX(0);
   transition: transform 0.4s;
   transform-origin: left;
 }

 .value-card:hover {
   border-color: rgba(244, 147, 75, 0.2);
   transform: translateY(-8px);
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
 }

 .value-card:hover::before {
   transform: scaleX(1);
 }

 .value-icon {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: rgba(244, 147, 75, 0.1);
   border: 1px solid rgba(244, 147, 75, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   margin: 0 auto 22px;
   transition: var(--transition);
 }

 .value-card:hover .value-icon {
   background: rgba(244, 147, 75, 0.18);
   transform: scale(1.1);
 }

 .value-card h3 {
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 12px;
 }

 .value-card p {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.7;
 }

 /* Strengths */
 #strengths {
   padding: var(--section-pad) 0;
   background: var(--dark-2);
   position: relative;
   overflow: hidden;
 }

 #strengths::before {
   content: '';
   position: absolute;
   bottom: -150px;
   left: -150px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.12) 0%, transparent 70%);
   pointer-events: none;
 }

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

 .strengths-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 40px;
 }

 .strength-item {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   padding: 24px;
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .strength-item::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--accent);
   transform: scaleY(0);
   transition: transform 0.4s;
   transform-origin: bottom;
 }

 .strength-item:hover {
   border-color: rgba(244, 147, 75, 0.18);
   transform: translateX(6px);
 }

 .strength-item:hover::after {
   transform: scaleY(1);
 }

 .strength-num {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 800;
   color: rgba(244, 147, 75, 0.2);
   line-height: 1;
   flex-shrink: 0;
   width: 36px;
   transition: color 0.3s;
 }

 .strength-item:hover .strength-num {
   color: rgba(244, 147, 75, 0.5);
 }

 .strength-body h4 {
   font-family: var(--font-display);
   font-size: 15px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 6px;
 }

 .strength-body p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.6;
 }

 .strengths-visual {
   position: relative;
 }

 .strengths-img {
   width: 100%;
   height: 520px;
   object-fit: cover;
   border-radius: var(--radius);
 }

 .strengths-badge {
   position: absolute;
   top: -20px;
   right: -20px;
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   border: 4px solid var(--dark-2);
 }

 .strengths-badge-num {
   font-family: var(--font-display);
   font-size: 26px;
   font-weight: 800;
   color: var(--white);
   line-height: 1;
 }

 .strengths-badge-text {
   font-size: 9px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.85);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-top: 4px;
 }

 /* Vision */
 #vision {
   padding: var(--section-pad) 0;
   position: relative;
   overflow: hidden;
 }

 .vision-inner {
   position: relative;
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--dark-3) 55%, rgba(244, 147, 75, 0.1) 100%);
   border: 1px solid rgba(244, 147, 75, 0.18);
   border-radius: 24px;
   padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 80px);
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
 }

 .vision-inner::before {
   content: '';
   position: absolute;
   top: -150px;
   right: -100px;
   width: 450px;
   height: 450px;
   background: radial-gradient(circle, rgba(244, 147, 75, 0.1) 0%, transparent 65%);
   pointer-events: none;
 }

 .vision-inner::after {
   content: '';
   position: absolute;
   bottom: -80px;
   left: -80px;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.2) 0%, transparent 70%);
   pointer-events: none;
 }

 .vision-content {
   position: relative;
   z-index: 1;
 }

 .vision-content .section-sub {
   margin: 20px 0 36px;
   max-width: 100%;
 }

 .vision-title {
   font-family: var(--font-display);
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin-bottom: 20px;
 }

 .vision-stats {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .vision-stat {
   padding: 28px 24px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius);
   text-align: center;
   transition: var(--transition);
 }

 .vision-stat:hover {
   background: rgba(244, 147, 75, 0.1);
   border-color: rgba(244, 147, 75, 0.25);
 }

 .vision-stat-num {
   font-family: var(--font-display);
   font-size: 38px;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 8px;
 }

 .vision-stat-label {
   font-size: 12px;
   color: var(--muted);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }

 /* Responsive */
 @media (max-width: 1024px) {

   nav ul,
   .nav-cta .btn-primary {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   .who-grid,
   .journey-grid,
   .strengths-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .who-img-main,
   .journey-img,
   .strengths-img {
     height: 360px;
   }

   .who-founder-badge {
     right: 0;
     bottom: -20px;
   }

   .values-grid {
     grid-template-columns: 1fr 1fr;
   }

   .vision-inner {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .strengths-badge {
     top: -12px;
     right: -12px;
     width: 90px;
     height: 90px;
   }

   .strengths-badge-num {
     font-size: 20px;
   }
 }

 @media (max-width: 768px) {
   :root {
     --nav-h: 68px;
   }

   .values-grid {
     grid-template-columns: 1fr 1fr;
     gap: 14px;
   }

   .value-card {
     padding: 24px 18px;
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 36px;
   }
 
   .cursor,
   .cursor-ring {
     display: none;
   }
 }

 @media (max-width: 540px) {
   .values-grid {
     grid-template-columns: 1fr;
   }

   .vision-stats {
     grid-template-columns: 1fr 1fr;
   }

   .footer-grid {
     grid-template-columns: 1fr;
   }

   .footer-bottom {
     flex-direction: column;
     text-align: center;
   }
 }


 /* ── PRODUCT SECTIONS ── */
 /* ── PROD HERO CATS ── */
 .prod-hero-cats {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 32px;
 }

 .prod-cat-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 10px 20px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   color: var(--off-white);
   transition: var(--transition);
   backdrop-filter: blur(8px);
 }

 .prod-cat-pill:hover {
   background: rgba(244, 147, 75, 0.15);
   border-color: var(--accent);
   color: var(--accent);
   transform: translateY(-2px);
 }

 /* ── PRODUCT SECTIONS ── */
 .prod-section {
   position: relative; 
   display: flex;
   align-items: center;
   overflow: hidden;
   border-bottom: 1px solid #fff;
 }

 .prod-section-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
 }

 .prod-section-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .prod-section-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
 }

 /* LEFT overlay — content sits LEFT, image visible RIGHT */
 .prod-overlay-left {
   background: linear-gradient(90deg,
       rgba(6, 12, 26, 0.98) 0%,
       rgba(6, 12, 26, 0.95) 35%,
       rgba(6, 12, 26, 0.80) 55%,
       rgba(6, 12, 26, 0.30) 75%,
       transparent 100%);
 }

 /* RIGHT overlay — content sits RIGHT, image visible LEFT */
 .prod-overlay-right {
   background: linear-gradient(270deg,
       rgba(6, 12, 26, 0.98) 0%,
       rgba(6, 12, 26, 0.95) 35%,
       rgba(6, 12, 26, 0.80) 55%,
       rgba(6, 12, 26, 0.30) 75%,
       transparent 100%);
 }

 .prod-section .container {
   position: relative;
   z-index: 2;
   padding-top: 0px;
   padding-bottom: 60px;
 }

 /* ── LAYOUTS ── */

 /* Normal: info LEFT, chips RIGHT */
 .prod-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 /* Flip: chips LEFT, info RIGHT */
 .prod-layout-flip {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .prod-layout-flip .prod-items-wrap {
   order: 1;
   text-align: left;
 }

 .prod-layout-flip .prod-info {
   order: 2;
   text-align: right;
 }

 .prod-layout-flip .prod-info .prod-features {
   align-items: flex-end;
 }

 .prod-layout-flip .prod-info .prod-feat {
   flex-direction: row-reverse;
 }

 .prod-layout-flip .prod-info .prod-desc {
   margin-left: auto;
 }

 .prod-layout-flip .prod-info .tag {
   display: inline-block;
 }

 /* ── CONTENT ── */
 .prod-number {
   font-family: var(--font-display);
   font-size: 80px;
   font-weight: 800;
   color: rgba(244, 147, 75, 0.07);
   line-height: 1;
   margin-bottom: -16px;
   letter-spacing: -0.04em;
   user-select: none;
 }

 .prod-title {
   font-family: var(--font-display);
   font-size: clamp(34px, 4.5vw, 58px);
   font-weight: 800;
   line-height: 1.08;
   letter-spacing: -0.02em;
   margin-bottom: 20px;
   color: var(--white);
 }

 .prod-desc {
   font-size: clamp(14px, 1.4vw, 16px);
   color: var(--muted);
   line-height: 1.8;
   font-weight: 300;
   margin-bottom: 28px;
   max-width: 460px;
 }

 .prod-features {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .prod-feat {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--off-white);
 }

 .prod-feat-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   flex-shrink: 0;
 }

 /* ── CHIPS ── */
 .prod-items-wrap {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .prod-items-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(244, 147, 75, 0.2);
 }

 .prod-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }

 .prod-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 22px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 100px;
   font-size: 14px;
   font-weight: 500;
   color: var(--off-white);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   transition: var(--transition);
   cursor: default;
 }

 .prod-chip:hover {
   background: rgba(244, 147, 75, 0.14);
   border-color: rgba(244, 147, 75, 0.5);
   color: var(--white);
   transform: translateY(-3px) scale(1.03);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
 }

 /* ── PACKAGING ── */
 .prod-packaging {
   padding: var(--section-pad) 0;
   background: var(--dark-2);
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(244, 147, 75, 0.12);
 }

 .prod-packaging::before {
   content: '';
   position: absolute;
   top: -150px;
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
   height: 400px;
   background: radial-gradient(ellipse, rgba(244, 147, 75, 0.07) 0%, transparent 65%);
   pointer-events: none;
 }

 .prod-packaging-inner {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 80px;
   align-items: center;
 }

 .prod-packaging-content .section-sub {
   margin: 18px 0 0;
 }

 .prod-packaging-cards {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .prod-pack-card {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   padding: 28px;
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
 }

 .prod-pack-card::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: linear-gradient(180deg, var(--accent), var(--primary));
   transform: scaleY(0);
   transition: transform 0.4s;
   transform-origin: bottom;
 }

 .prod-pack-card:hover {
   border-color: rgba(244, 147, 75, 0.2);
   transform: translateX(6px);
 }

 .prod-pack-card:hover::before {
   transform: scaleY(1);
 }

 .prod-pack-icon {
   font-size: 26px;
   flex-shrink: 0;
   width: 54px;
   height: 54px;
   background: rgba(244, 147, 75, 0.1);
   border: 1px solid rgba(244, 147, 75, 0.2);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .prod-pack-card h4 {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 8px;
 }

 .prod-pack-card p {
   font-size: 13.5px;
   color: var(--muted);
   line-height: 1.65;
 }

 /* ── CTA ── */
 .prod-cta {
   padding: var(--section-pad) 0;
   position: relative;
   overflow: hidden;
 }

 .prod-cta-inner {
   position: relative;
   background: linear-gradient(135deg, var(--primary-dark) 0%, var(--dark-3) 55%, rgba(244, 147, 75, 0.1) 100%);
   border: 1px solid rgba(244, 147, 75, 0.2);
   border-radius: 24px;
   padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 80px);
   text-align: center;
   overflow: hidden;
 }

 .prod-cta-inner::before {
   content: '';
   position: absolute;
   top: -120px;
   left: 50%;
   transform: translateX(-50%);
   width: 500px;
   height: 300px;
   background: radial-gradient(ellipse, rgba(244, 147, 75, 0.12) 0%, transparent 70%);
   pointer-events: none;
 }

 .prod-cta-title {
   font-family: var(--font-display);
   font-size: clamp(30px, 5vw, 58px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin-bottom: 18px;
 }

 .prod-cta-sub {
   font-size: clamp(14px, 1.5vw, 17px);
   color: var(--muted);
   line-height: 1.75;
   max-width: 500px;
   margin: 0 auto 40px;
 }

 .prod-cta-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 1024px) {

   .prod-layout,
   .prod-layout-flip {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .prod-layout-flip .prod-items-wrap {
     order: 1;
   }

   .prod-layout-flip .prod-info {
     order: 2;
     text-align: left;
   }

   .prod-layout-flip .prod-info .prod-features {
     align-items: flex-start;
   }

   .prod-layout-flip .prod-info .prod-feat {
     flex-direction: row;
   }

   .prod-layout-flip .prod-info .prod-desc {
     margin-left: 0;
   }

   .prod-section {
     min-height: auto;
   }

   .prod-overlay-left,
   .prod-overlay-right {
     background: linear-gradient(180deg,
         rgba(6, 12, 26, 0.92) 0%,
         rgba(6, 12, 26, 0.88) 60%,
         rgba(6, 12, 26, 0.75) 100%);
   }

   .prod-packaging-inner {
     grid-template-columns: 1fr;
     gap: 48px;
   }

   .prod-number {
     font-size: 56px;
   }
 }

 @media (max-width: 640px) {
   .prod-chip {
     padding: 10px 16px;
     font-size: 13px;
   }

   .prod-cat-pill {
     padding: 8px 16px;
     font-size: 12px;
   }

   .prod-cta-actions {
     flex-direction: column;
   }

   .prod-number {
     font-size: 42px;
   }

   .prod-section .container {
     padding-top: 56px;
     padding-bottom: 56px;
   }
 }

 /* ── CONTACT PAGE HERO OVERRIDE ── */
 .page-hero-title-outline {
   -webkit-text-stroke: 1.5px var(--accent);
   color: transparent;
 }

 /* ── CONTACT MAIN ── */
 .contact-main {
   padding: var(--section-pad) 0;
   position: relative;
 }

 .contact-main::before {
   content: '';
   position: absolute;
   top: -100px;
   left: -200px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(15, 69, 155, 0.08) 0%, transparent 70%);
   pointer-events: none;
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 72px;
   align-items: start;
 }

 /* INFO SIDE */
 .contact-info .section-sub {
   margin: 16px 0 36px;
 }

 .contact-benefits {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 40px;
 }

 .contact-benefit {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 18px;
   background: var(--glass);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 500;
   color: var(--off-white);
   transition: var(--transition);
 }

 .contact-benefit:hover {
   background: rgba(15, 69, 155, 0.2);
   border-color: rgba(244, 147, 75, 0.3);
   transform: translateX(4px);
 }

 .contact-benefit-icon {
   font-size: 18px;
   flex-shrink: 0;
 }

 .contact-details {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-bottom: 40px;
 }

 .contact-detail-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
 }

 .contact-detail-icon {
   width: 42px;
   height: 42px;
   background: rgba(244, 147, 75, 0.1);
   border: 1px solid rgba(244, 147, 75, 0.2);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   flex-shrink: 0;
 }

 .contact-detail-body {
   padding-top: 2px;
 }

 .contact-detail-body strong {
   display: block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 4px;
 }

 .contact-detail-body span {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.6;
 }

 .contact-detail-body a {
   color: var(--muted);
   transition: color 0.3s;
 }

 .contact-detail-body a:hover {
   color: var(--accent);
 }

 /* SOCIAL */
 .contact-social-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 14px;
 }

 .contact-social-links {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .csocial-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   color: var(--muted);
   transition: var(--transition);
 }

 .csocial-btn:hover {
   background: rgba(244, 147, 75, 0.12);
   border-color: var(--accent);
   color: var(--accent);
   transform: translateY(-3px);
 }

 /* FORM CARD */
 .contact-form-card {
   background: var(--dark-3);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 20px;
   overflow: hidden;
 }

 .contact-form-header {
   padding: 32px 36px 0;
   margin-bottom: 28px;
 }

 .contact-form-header h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 6px;
 }

 .contact-form-header p {
   font-size: 13px;
   color: var(--muted);
 }

 .contact-form {
   padding: 0 36px 36px;
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

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

 .cform-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .cform-group label {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--muted);
 }

 .cform-group input,
 .cform-group select,
 .cform-group textarea {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-sm);
   padding: 13px 16px;
   font-family: var(--font-body);
   font-size: 14px;
   color: var(--white);
   outline: none;
   transition: border-color 0.3s, background 0.3s;
   width: 100%;
   appearance: none;
   -webkit-appearance: none;
 }

 .cform-group select {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9bbf' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
   padding-right: 40px;
   cursor: pointer;
 }

 .cform-group select option {
   background: var(--dark-3);
   color: var(--white);
 }

 .cform-group input::placeholder,
 .cform-group textarea::placeholder {
   color: rgba(138, 155, 191, 0.5);
 }

 .cform-group input:focus,
 .cform-group select:focus,
 .cform-group textarea:focus {
   border-color: var(--accent);
   background: rgba(244, 147, 75, 0.05);
 }

 .cform-group textarea {
   resize: vertical;
   min-height: 110px;
 }

 .cform-submit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   padding: 16px;
   background: var(--accent);
   color: var(--white);
   font-family: var(--font-body);
   font-size: 15px;
   font-weight: 600;
   border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   transition: var(--transition);
   position: relative;
   overflow: hidden;
   margin-top: 4px;
 }

 .cform-submit::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
   opacity: 0;
   transition: opacity 0.3s;
 }

 .cform-submit:hover::before {
   opacity: 1;
 }

 .cform-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 36px rgba(244, 147, 75, 0.35);
 }

 .cform-submit span,
 .cform-submit svg {
   position: relative;
   z-index: 1;
 }

 .cform-success {
   display: none;
   align-items: center;
   gap: 12px;
   padding: 16px 20px;
   background: rgba(34, 197, 94, 0.08);
   border: 1px solid rgba(34, 197, 94, 0.25);
   border-radius: var(--radius-sm);
   font-size: 14px;
   color: #4ade80;
 }

 .cform-success.show {
   display: flex;
 }

 /* MAP */
 .contact-map-section {
   padding: 0 0 var(--section-pad);
 }

 .contact-map-header {
   margin-bottom: 36px;
 }

 .contact-map-wrap {
   width: 100%;
   height: 420px;
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid rgba(244, 147, 75, 0.15);
   filter: grayscale(30%) invert(90%) hue-rotate(180deg) brightness(0.85) contrast(0.9);
 }

 /* RESPONSIVE */
 @media (max-width: 1024px) {
   .contact-grid {
     grid-template-columns: 1fr;
     gap: 48px;
   }
 }

 @media (max-width: 540px) {
   .cform-row {
     grid-template-columns: 1fr;
   }

   .contact-form {
     padding: 0 20px 24px;
   }

   .contact-form-header {
     padding: 24px 20px 0;
   }

   .contact-map-wrap {
     height: 300px;
   }
 }