:root {
     --g50: #f2fbf2;
     --g100: #daf5da;
     --g200: #b0e8b0;
     --g300: #7dd97d;
     --g400: #4ec94e;
     --g500: #2fb32f;
     --g600: #1e8f1e;
     --g700: #165c16;
     --orange: #e07b2a;
     --orange-light: #fef3e8;
     --white: #ffffff;
     --off: #f8fdf8;
     --dark: #0f2210;
     --mid: #2e4f2e;
     --light: #5c7a5c;
     --muted: #8aaa8a;
     --shadow: 0 8px 36px rgba(31, 111, 31, .11);
     --shadow-lg: 0 24px 64px rgba(31, 111, 31, .18);
     --r: 14px;
     --r2: 24px;
     --tr: all .38s cubic-bezier(.25, .8, .25, 1);
 }

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

 html {
     scroll-behavior: smooth;

 }

 body {
     font-family: 'Poppins', sans-serif;
     background: var(--white);
     color: var(--dark);
     overflow-x: hidden
 }

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

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

 ::-webkit-scrollbar {
     width: 5px
 }

 ::-webkit-scrollbar-track {
     background: var(--g50)
 }

 ::-webkit-scrollbar-thumb {
     background: var(--g300);
     border-radius: 3px
 }

 /* ── LOADER ── */
 #loader {
     position: fixed;
     inset: 0;
     background: var(--dark);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
     transition: opacity .8s cubic-bezier(.77, 0, .175, 1), visibility .8s
 }

 #loader.out {
     opacity: 0;
     visibility: hidden
 }

 .ld-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff
 }

 .ld-logo {
     height: 140px;
     width: auto;
     margin-bottom: 24px;
     animation: textReveal 1.2s ease forwards
 }

 .ld-text {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 700;
     letter-spacing: 2px;
     margin-bottom: 20px;
     background: linear-gradient(to right, var(--g200), #fff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: textReveal 1.2s ease forwards
 }

 .ld-progress-wrap {
     width: 100%;
     height: 2px;
     background: rgba(255, 255, 255, .1);
     border-radius: 10px;
     overflow: hidden;
     position: relative
 }

 .ld-progress-bar {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 0;
     background: linear-gradient(to right, var(--g400), var(--g200));
     animation: progressFill 1.5s cubic-bezier(.65, .05, .36, 1) forwards
 }

 @keyframes textReveal {
     from {
         opacity: 0;
         transform: translateY(10px);
         letter-spacing: 6px
     }

     to {
         opacity: 1;
         transform: translateY(0);
         letter-spacing: 2px
     }
 }

 @keyframes progressFill {
     0% {
         width: 0%
     }

     100% {
         width: 100%
     }
 }

 /* ── CURSOR ── */
 .cur {
     width: 11px;
     height: 11px;
     background: var(--g400);
     border-radius: 50%;
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: width .25s, height .25s, background .25s
 }

 .cur-ring {
     width: 34px;
     height: 34px;
     border: 2px solid var(--g300);
     border-radius: 50%;
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 9998;
     transform: translate(-50%, -50%);
     transition: left .12s, top .12s, width .25s, height .25s
 }

 /* ── NAV ── */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     height: 125px;
     padding: 0 6%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(176, 232, 176, .2);
     transition: var(--tr);
 }

 nav.scrolled {
     background: transparent;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
     color: white;
 }

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

 /* Header logo sizing handled in .brand-logos img */

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

 .brand-logos img {
     height: 12vw;
     max-height: 15vw;
     width: auto;
     object-fit: contain;
     transition: var(--tr);
 }

 /* Removed shrunk logo on scroll to keep size constant */

 /* Redundant class removed */

 .logo-b {
     /* Line removed */
 }

 .brand-names {
     line-height: 1.1
 }

 .brand-main {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--g600)
 }

 .brand-sub {
     font-size: .65rem;
     font-weight: 600;
     color: var(--orange);
     letter-spacing: 1.5px;
     text-transform: uppercase
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 8px;
     list-style: none
 }

 .nav-links a {
     padding: 10px 20px;
     font-size: .95rem;
     font-weight: 600;
     color: var(--mid);
     border-radius: 50px;
     position: relative;
     transition: var(--tr)
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: 6px;
     left: 20px;
     right: 20px;
     height: 2.5px;
     background: var(--g400);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform .3s;
     border-radius: 2px
 }

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

 .nav-links a:hover::after,
 .nav-links a.active::after {
     transform: scaleX(1);
     transform-origin: left
 }

 .nav-links a.active {
     color: var(--g600);
     font-weight: 700
 }

 .nav-cta {
     background: linear-gradient(135deg, var(--orange), #c85e10) !important;
     color: #fff !important;
     padding: 12px 28px !important;
     border-radius: 50px !important;
     font-weight: 700 !important;
     box-shadow: 0 6px 20px rgba(224, 123, 42, .25);
     display: flex;
     align-items: center;
     gap: 10px;
     margin-left: 10px;
 }

 .nav-cta::after {
     display: none !important
 }

 .nav-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(224, 123, 42, .4) !important
 }

 @keyframes subtlePulse {

     0%,
     100% {
         box-shadow: 0 6px 20px rgba(224, 123, 42, .25);
     }

     50% {
         box-shadow: 0 6px 28px rgba(224, 123, 42, .45);
     }
 }

 .nav-cta {
     animation: subtlePulse 3s ease-in-out infinite;
 }

 .burger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 4px
 }

 .burger span {
     display: block;
     width: 23px;
     height: 2px;
     background: var(--g600);
     border-radius: 2px;
     transition: var(--tr)
 }

 /* ── HERO ── */
 #home {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     padding: 90px 5% 60px;
     background: linear-gradient(rgba(248, 253, 248, 0.85), rgba(248, 253, 248, 0.85)), url('catalog-images/1.png') center/cover no-repeat;
     position: relative;
     overflow: hidden
 }

 .hero-blob {
     position: absolute;
     border-radius: 50%;
     pointer-events: none
 }

 .blob1 {
     width: 650px;
     height: 650px;
     background: radial-gradient(circle, rgba(176, 232, 176, .45) 0%, transparent 70%);
     right: -120px;
     top: -120px;
     animation: blobDrift 9s ease-in-out infinite
 }

 .blob2 {
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(224, 123, 42, .08) 0%, transparent 70%);
     left: -80px;
     bottom: -60px;
     animation: blobDrift 11s 2s ease-in-out infinite reverse
 }

 @keyframes blobDrift {

     0%,
     100% {
         transform: translateY(0) scale(1)
     }

     50% {
         transform: translateY(-28px) scale(1.04)
     }
 }

 .hero-left {
     position: relative;
     z-index: 2
 }

 .h-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(176, 232, 176, .35);
     border: 1px solid var(--g200);
     padding: 5px 14px;
     border-radius: 50px;
     font-size: .75rem;
     font-weight: 700;
     color: var(--g600);
     letter-spacing: 1.2px;
     text-transform: uppercase;
     margin-bottom: 22px;
     animation: slideUp .8s ease both
 }

 .h-pill .dot {
     width: 7px;
     height: 7px;
     background: var(--g400);
     border-radius: 50%;
     animation: pulse 2s infinite
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1)
     }

     50% {
         opacity: .4;
         transform: scale(1.6)
     }
 }

 h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2.6rem, 4.8vw, 4.6rem);
     font-weight: 900;
     line-height: 1.08;
     color: var(--dark);
     margin-bottom: 20px;
     animation: slideUp .8s .12s ease both
 }

 h1 span {
     color: var(--g500);
     font-style: italic
 }

 h1 .orange {
     color: var(--orange)
 }

 .hero-desc {
     font-size: 1.05rem;
     line-height: 1.8;
     color: var(--light);
     max-width: 480px;
     margin-bottom: 36px;
     font-weight: 300;
     animation: slideUp .8s .24s ease both
 }

 .hero-btns {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     animation: slideUp .8s .36s ease both
 }

 .btn-green {
     padding: 13px 32px;
     background: linear-gradient(135deg, var(--g400), var(--g600));
     color: #fff;
     border-radius: 50px;
     font-weight: 700;
     font-size: .92rem;
     box-shadow: 0 6px 20px rgba(31, 143, 31, .32);
     transition: var(--tr);
     border: none;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center
 }

 .btn-green:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(31, 143, 31, .42)
 }

 .btn-border {
     padding: 13px 32px;
     background: transparent;
     color: var(--g600);
     border: 2px solid var(--g300);
     border-radius: 50px;
     font-weight: 700;
     font-size: .92rem;
     transition: var(--tr);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center
 }

 .btn-border:hover {
     background: var(--g50);
     border-color: var(--g400);
     transform: translateY(-3px)
 }

 .hero-badges {
     display: flex;
     gap: 12px;
     margin-top: 48px;
     flex-wrap: wrap;
     animation: slideUp .8s .5s ease both
 }

 .hbadge {
     display: flex;
     align-items: center;
     gap: 8px;
     background: var(--white);
     border: 1px solid var(--g100);
     border-radius: 50px;
     padding: 7px 16px;
     box-shadow: 0 3px 12px rgba(31, 111, 31, .08);
     transition: transform .3s ease, box-shadow .3s ease;
 }

 .hbadge:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(31, 111, 31, .15);
 }

 .hbadge .icon {
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center
 }

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

 .hbadge span {
     font-size: .78rem;
     font-weight: 600;
     color: var(--mid)
 }

 /* Hero right visual */
 .hero-right {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     animation: slideLeft .9s .18s ease both
 }

 .hero-showcase {
     position: relative;
     width: 380px;
     height: 420px
 }

 .showcase-main {
     width: 517px;
     height: 469px;
     background: linear-gradient(145deg, var(--g200), var(--g400));
     border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 5.5rem;
     box-shadow: var(--shadow-lg);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: morphFloat 7s ease-in-out infinite
 }


 @keyframes morphFloat {

     0%,
     100% {
         border-radius: 40% 60% 55% 45%/50% 45% 55% 50%;
         transform: translate(-50%, -50%) translateY(0)
     }

     50% {
         border-radius: 55% 45% 40% 60%/45% 55% 50% 50%;
         transform: translate(-50%, -50%) translateY(-18px)
     }
 }

 .showcase-main img {
     width: 100%;
     height: 100% !important;
     object-fit: cover;
     border-radius: inherit;
     padding: 14px;
 }

 .float-card {
     position: absolute;
     background: var(--white);
     border-radius: var(--r2);
     padding: 12px 18px;
     box-shadow: var(--shadow);
     border: 1px solid var(--g100);
     white-space: nowrap
 }

 .fc1 {
     top: 10px;
     right: 0;
     animation: fcFloat 4s ease-in-out infinite
 }

 .fc2 {
     bottom: 20px;
     left: 0;
     animation: fcFloat 4s 2s ease-in-out infinite
 }

 .fc3 {
     top: 50%;
     right: -80px;
     transform: translateY(-50%);
     animation: fcFloat 5s 1s ease-in-out infinite
 }

 @keyframes fcFloat {

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

     50% {
         transform: translateY(-8px)
     }
 }

 .fc3 {
     animation: fcFloat3 5s 1s ease-in-out infinite
 }

 @keyframes fcFloat3 {

     0%,
     100% {
         transform: translateY(-50%)
     }

     50% {
         transform: translateY(calc(-50% - 8px))
     }
 }

 .fc-title {
     font-size: .72rem;
     color: var(--muted);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .8px
 }

 .fc-val {
     font-family: 'Playfair Display', serif;
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--g600)
 }

 .fc-small {
     font-size: .82rem;
     font-weight: 600;
     color: var(--mid)
 }

 .fc-icon {
     font-size: 1rem;
     margin-right: 6px
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(28px)
     }

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

 @keyframes slideLeft {
     from {
         opacity: 0;
         transform: translateX(36px)
     }

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

 /* ── MARQUEE ── */
 .marquee {
     background: linear-gradient(90deg, var(--g600), var(--g500), var(--g700));
     padding: 13px 0;
     overflow: hidden
 }

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

 .mq-track span {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 0 36px;
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: 1.8px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .88);
     flex-shrink: 0
 }

 .mq-track span::before {
     content: '◆';
     font-size: .5rem;
     color: rgba(255, 255, 255, .4)
 }

 @keyframes mq {
     from {
         transform: translateX(0)
     }

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

 /* ── SECTION COMMONS ── */
 section {
     padding: 65px 5%
 }

 .sec-tag {
     display: inline-block;
     background: rgba(176, 232, 176, .35);
     border: 1px solid var(--g200);
     padding: 4px 14px;
     border-radius: 50px;
     font-size: .72rem;
     font-weight: 700;
     color: var(--g600);
     letter-spacing: 1.5px;
     text-transform: uppercase;
     margin-bottom: 14px
 }

 h2 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.9rem, 3.8vw, 3rem);
     font-weight: 800;
     color: var(--dark);
     line-height: 1.15;
     margin-bottom: 14px
 }

 h2 em {
     font-style: italic;
     color: var(--g500)
 }

 h2 .or {
     color: var(--orange)
 }

 .sec-desc {
     font-size: .98rem;
     color: var(--light);
     line-height: 1.8;
     font-weight: 300;
     max-width: 560px
 }

 /* ── FEATURES STRIP ── */
 #features {
     background: var(--white);
     padding: 60px 5%
 }

 .feat-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 48px
 }

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

 @media(max-width:500px) {
     .feat-grid {
         grid-template-columns: 1fr
     }
 }

 .feat-card {
     background: var(--off);
     border: 1px solid var(--g100);
     border-radius: var(--r2);
     padding: 28px 24px;
     text-align: center;
     transition: var(--tr)
 }

 .feat-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow);
     border-color: var(--g200)
 }

 .feat-icon-wrap {
     width: 58px;
     height: 58px;
     background: linear-gradient(135deg, var(--g100), var(--g200));
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px;
     overflow: hidden
 }

 .feat-icon-wrap img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 10px
 }

 .feat-card h4 {
     font-weight: 700;
     font-size: .95rem;
     color: var(--dark);
     margin-bottom: 6px
 }

 .feat-card p {
     font-size: .82rem;
     color: var(--light);
     line-height: 1.6
 }

 /* ── ABOUT ── */
 #about {
     background: var(--off)
 }

 .about-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: center;
     margin-top: 56px
 }

 .about-visual {
     position: relative
 }

 .about-img {
     width: 100%;
     aspect-ratio: 1/1.1;
     background: linear-gradient(145deg, var(--g100), var(--g300));
     border-radius: 40% 60% 40% 60%/50% 50% 50% 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-lg);
     animation: morphAbout 8s ease-in-out infinite;
     overflow: hidden
 }

 .about-img img {
     width: 100%;
     height: 100% !important;
     object-fit: cover;
     border-radius: inherit
 }

 @keyframes morphAbout {

     0%,
     100% {
         border-radius: 40% 60% 40% 60%/50% 50% 50% 50%
     }

     50% {
         border-radius: 60% 40% 60% 40%/50% 50% 50% 50%
     }
 }

 .a-badge {
     position: absolute;
     background: var(--white);
     border-radius: var(--r2);
     padding: 14px 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--g100)
 }

 .a-badge.ab1 {
     top: 20px;
     right: -20px;
     animation: fcFloat 5s ease-in-out infinite
 }

 .a-badge.ab2 {
     bottom: 30px;
     left: -20px;
     animation: fcFloat 5s 2.5s ease-in-out infinite
 }

 .ab-num {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--g500);
     line-height: 1
 }

 .ab-lbl {
     font-size: .72rem;
     font-weight: 600;
     color: var(--muted);
     margin-top: 2px
 }

 .about-content .sec-desc {
     margin-bottom: 28px
 }

 .check-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .check-list li {
     display: flex;
     align-items: flex-start;
     gap: 12px
 }

 .ck-dot {
     width: 22px;
     height: 22px;
     background: var(--g500);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 1px
 }

 .ck-dot svg {
     width: 12px;
     height: 12px
 }

 .ck-text strong {
     font-weight: 700;
     font-size: .92rem;
     color: var(--dark);
     display: block
 }

 .ck-text span {
     font-size: .82rem;
     color: var(--light)
 }

 .about-stats {
     display: flex;
     gap: 32px;
     margin-top: 36px;
     flex-wrap: wrap
 }

 .astat {
     border-left: 3px solid var(--g300);
     padding-left: 14px
 }

 .astat-num {
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     font-weight: 800;
     color: var(--g600);
     line-height: 1
 }

 .astat-lbl {
     font-size: .76rem;
     color: var(--muted);
     margin-top: 3px
 }

 /* ── PRODUCTS ── */
 #products {
     background: var(--white)
 }

 .prod-hdr {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 48px;
     flex-wrap: wrap;
     gap: 20px
 }

 .filter-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap
 }

 .fbtn {
     padding: 8px 18px;
     border: 2px solid var(--g200);
     background: transparent;
     border-radius: 50px;
     font-size: .82rem;
     font-weight: 600;
     color: var(--mid);
     cursor: pointer;
     transition: var(--tr);
     font-family: 'Plus Jakarta Sans', sans-serif
 }

 .fbtn.on,
 .fbtn:hover {
     background: var(--g500);
     border-color: var(--g500);
     color: #fff
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
     gap: 24px
 }

 .vm-row {
     display: flex;
     justify-content: center;
     margin-top: 48px;
 }

 .pcard {
     background: var(--off);
     border: 1px solid var(--g100);
     border-radius: var(--r2);
     overflow: hidden;
     transition: var(--tr);
     cursor: pointer
 }

 .pcard:hover {
     transform: translateY(-7px);
     box-shadow: var(--shadow-lg);
     border-color: var(--g200)
 }

 .pcard-img {
     aspect-ratio: 4/3;
     background: linear-gradient(135deg, var(--g50), var(--g200));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3.8rem;
     position: relative
 }

 .pcard-img img {
     width: 100%;
     height: 100% !important;
     object-fit: cover;
     padding: 0;
     transition: transform .38s cubic-bezier(.25, .8, .25, 1)
 }

 .pcard:hover .pcard-img img {
     transform: scale(1.05)
 }

 .pcard-series {
     position: absolute;
     top: 12px;
     left: 12px;
     background: var(--g600);
     color: #fff;
     font-size: .65rem;
     font-weight: 800;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: 50px
 }

 .pcard-tag {
     position: absolute;
     top: 12px;
     right: 12px;
     background: var(--orange);
     color: #fff;
     font-size: .65rem;
     font-weight: 800;
     letter-spacing: 1px;
     padding: 4px 10px;
     border-radius: 50px
 }

 .pcard-body {
     padding: 18px
 }

 .pcard-size {
     font-size: .72rem;
     font-weight: 700;
     color: var(--g500);
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 4px
 }

 .pcard-name {
     font-family: 'Inter', sans-serif;
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 6px
 }

 .pcard-specs {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 14px
 }

 .spec-pill {
     background: var(--g50);
     border: 1px solid var(--g100);
     border-radius: 50px;
     padding: 3px 9px;
     font-size: .7rem;
     font-weight: 600;
     color: var(--mid)
 }

 .pcard-foot {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4px;
 }

 .pcard-pcs {
     font-size: .78rem;
     color: var(--muted);
     font-weight: 500
 }

 .btn-inquiry {
     padding: 8px 18px;
     background: linear-gradient(135deg, var(--g400), var(--g600));
     color: #fff;
     border: none;
     border-radius: 50px;
     font-size: .78rem;
     font-weight: 700;
     cursor: pointer;
     transition: var(--tr);
     font-family: 'Plus Jakarta Sans', sans-serif
 }

 .btn-inquiry:hover {
     transform: scale(1.06);
     box-shadow: 0 4px 14px rgba(31, 143, 31, .3)
 }

 /* ── WHY US ── */
 #why {
     background: var(--off);
     padding: 10px 5%
 }

 .why-wrap {
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     gap: 72px;
     align-items: center;
     margin-top: 56px
 }

 .why-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 .wcard {
     background: var(--white);
     border: 1px solid var(--g100);
     border-radius: var(--r2);
     padding: 24px;
     transition: var(--tr)
 }

 .wcard:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
     border-color: var(--g200)
 }

 .wcard-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     margin-bottom: 12px
 }

 .wcard-icon.green {
     background: var(--g100)
 }

 .wcard-icon.orange {
     background: var(--orange-light)
 }

 .wcard h4 {
     font-weight: 700;
     font-size: .9rem;
     color: var(--dark);
     margin-bottom: 5px
 }

 .wcard p {
     font-size: .8rem;
     color: var(--light);
     line-height: 1.6
 }

 .why-right {}

 .why-img-wrap {
     width: 100%;
     height: 550px;
     background: linear-gradient(145deg, var(--g600), var(--g400));
     border-radius: var(--r2);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-lg);
     position: relative;
     overflow: hidden
 }

 .why-img-wrap img {
     width: 100%;
     height: 100% !important;
     object-fit: cover;
 }

 .why-img-wrap::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, .18) 0%, transparent 55%)
 }

 .why-tagline {
     position: absolute;
     bottom: 24px;
     left: 24px;
     right: 24px;
     background: #0080008a;
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: var(--r);
     padding: 14px 18px
 }

 .wt-label {
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .65)
 }

 .wt-val {
     font-family: 'Playfair Display', serif;
     font-size: 1.15rem;
     font-weight: 700;
     color: #fff
 }

 /* ── CONTACT ── */
 #contact {
     background: var(--white)
 }

 .contact-wrap {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 72px;
     margin-top: 56px;
     align-items: start
 }

 .contact-left h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.7rem;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 12px
 }

 .contact-left>p {
     font-size: .92rem;
     color: var(--light);
     line-height: 1.8;
     margin-bottom: 36px;
     font-weight: 300
 }

 .cinfo-list {
     display: flex;
     flex-direction: column;
     gap: 18px;
     margin-bottom: 32px
 }

 .cinfo {
     display: flex;
     align-items: flex-start;
     gap: 14px
 }

 .ci-ic {
     width: 46px;
     height: 46px;
     flex-shrink: 0;
     background: var(--g100);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem
 }

 .ci-lbl {
     font-size: .7rem;
     font-weight: 700;
     color: var(--muted);
     letter-spacing: .8px;
     text-transform: uppercase;
     margin-bottom: 2px
 }

 .ci-val {
     font-weight: 600;
     font-size: .9rem;
     color: var(--dark)
 }

 .ci-val a {
     color: black;
 }

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

 .soc {
     width: 40px;
     height: 40px;
     /* background: var(--off); */
     border: 1px solid var(--g100);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .9rem;
     cursor: pointer;
     transition: var(--tr)
 }

 .soc:hover {
     background: var(--g500);
     border-color: var(--g500);
     transform: translateY(-3px) scale(1.1);
     color: #fff;
 }

 .contact-form {
     background: var(--off);
     border: 1px solid var(--g100);
     border-radius: 28px;
     padding: 40px
 }

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

 .fgroup {
     display: flex;
     flex-direction: column;
     gap: 7px;
     margin-bottom: 16px
 }

 .fgroup label {
     font-size: .74rem;
     font-weight: 700;
     color: var(--mid);
     letter-spacing: .8px;
     text-transform: uppercase
 }

 .fgroup input,
 .fgroup textarea,
 .fgroup select {
     padding: 12px 16px;
     background: var(--white);
     border: 2px solid rgba(176, 232, 176, .5);
     border-radius: 12px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: .88rem;
     color: var(--dark);
     outline: none;
     transition: border-color .3s, box-shadow .3s;
     resize: none
 }

 .fgroup input:focus,
 .fgroup textarea:focus,
 .fgroup select:focus {
     border-color: var(--g400);
     box-shadow: 0 0 0 4px rgba(78, 201, 78, .1)
 }

 .fgroup textarea {
     height: 110px
 }

 .form-note {
     font-size: .76rem;
     color: var(--muted);
     margin-bottom: 18px
 }

 /* ── FOOTER ── */
 footer {
     background: var(--dark);
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .footer-wave {
     background: var(--white);
     line-height: 0
 }

 .footer-wave svg {
     display: block;
     width: 100%
 }

 .footer-deco {
     position: absolute;
     border-radius: 50%;
     pointer-events: none
 }

 .fd1 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(78, 201, 78, .07) 0%, transparent 70%);
     right: -150px;
     top: -100px
 }

 .fd2 {
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(224, 123, 42, .05) 0%, transparent 70%);
     left: 5%;
     bottom: 5%
 }

 .footer-nl {
     margin: 0 5%;
     background: linear-gradient(135deg, var(--g600), var(--g500));
     border-radius: var(--r2);
     padding: 20px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     flex-wrap: wrap
 }

 .fnl-txt h4 {
     font-family: 'Playfair Display', serif;
     font-size: 1.3rem;
     font-weight: 700;
     color: #fff;
     margin-bottom: 4px
 }

 .fnl-txt p {
     font-size: .82rem;
     color: rgba(255, 255, 255, .65)
 }

 .fnl-form {
     display: flex;
     gap: 10px
 }

 .fnl-form input {
     padding: 12px 20px;
     background: rgba(255, 255, 255, .18);
     border: 1px solid rgba(255, 255, 255, .3);
     border-radius: 50px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     color: #fff;
     font-size: .88rem;
     outline: none;
     min-width: 220px
 }

 .fnl-form input::placeholder {
     color: rgba(255, 255, 255, .5)
 }

 .fnl-form button {
     padding: 12px 24px;
     background: var(--orange);
     border: none;
     border-radius: 50px;
     color: #fff;
     font-weight: 700;
     font-size: .88rem;
     cursor: pointer;
     font-family: 'Plus Jakarta Sans', sans-serif;
     transition: var(--tr)
 }

 .fnl-form button:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 18px rgba(224, 123, 42, .4)
 }

 .footer-grid {
     padding: 44px 5% 32px;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 40px
 }

 .fbrand .nav-brand {
     margin-bottom: 24px
 }

 .fbrand .brand-logos {
     gap: 0px;
 }

 .fbrand .brand-logos .logo-s {
     height: 10vw;
     max-height: 80px;
 }

 .fbrand .brand-logos .logo-b {
     height: 6vw;
     max-height: 50px;
 }

 .fbrand .brand-main {
     color: var(--g300)
 }

 .fbrand p {
     font-size: .85rem;
     color: rgba(255, 255, 255, .45);
     line-height: 1.7;
     max-width: 260px;
     margin-bottom: 16px
 }

 .footer-tag {
     display: inline-block;
     background: rgba(224, 123, 42, .15);
     border: 1px solid rgba(224, 123, 42, .3);
     padding: 5px 12px;
     border-radius: 50px;
     font-size: .7rem;
     font-weight: 700;
     color: var(--orange);
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 14px
 }

 .fcol h4 {
     font-size: .88rem;
     font-weight: 800;
     letter-spacing: 1.8px;
     text-transform: uppercase;
     color: var(--g300);
     margin-bottom: 20px
 }

 .fcol ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 18px
 }

 .fcol ul li a {
     font-size: .92rem;
     color: rgba(255, 255, 255, .45);
     transition: color .3s
 }

 .fcol ul li a:hover {
     color: var(--g300)
 }

 .footer-bar {
     border-top: 1px solid rgba(255, 255, 255, .07);
     padding: 12px 5%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px
 }

 .footer-bar p {
     font-size: .78rem;
     color: rgba(255, 255, 255, .3)
 }

 .footer-bar-links {
     display: flex;
     gap: 20px
 }

 .footer-bar-links a {
     font-size: .78rem;
     color: rgba(255, 255, 255, .3);
     transition: color .3s
 }

 .footer-bar-links a:hover {
     color: var(--g300)
 }

 /* ── SCROLL REVEAL ── */
 .reveal,
 .reveal-l,
 .reveal-r {
     opacity: 0;
     transition: opacity .7s ease, transform .7s ease
 }

 .reveal {
     transform: translateY(36px)
 }

 .reveal-l {
     transform: translateX(-36px)
 }

 .reveal-r {
     transform: translateX(36px)
 }

 .reveal.on,
 .reveal-l.on,
 .reveal-r.on {
     opacity: 1;
     transform: none
 }

 /* ── BACK TOP ── */
 #btt {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 500;
     width: 46px;
     height: 46px;
     background: linear-gradient(135deg, var(--g400), var(--g600));
     border: none;
     border-radius: 14px;
     color: #fff;
     font-size: 1.1rem;
     cursor: pointer;
     box-shadow: 0 6px 18px rgba(31, 143, 31, .32);
     transition: var(--tr);
     opacity: 0;
     visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center
 }

 #btt.show {
     opacity: 1;
     visibility: visible
 }

 #btt:hover {
     transform: translateY(-4px)
 }

 /* ── DOWNLOADS ── */
 #downloads {
     background: var(--white);
     padding: 55px 5% 55px;
 }

 .dl-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .dl-card {
     background: var(--off);
     border: 1px solid var(--g100);
     border-radius: var(--r2);
     padding: 36px;
     display: flex;
     align-items: center;
     gap: 24px;
     transition: var(--tr);
 }

 .dl-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-lg);
     border-color: var(--g300);
 }

 .dl-icon {
     width: 64px;
     height: 64px;
     background: linear-gradient(135deg, var(--g100), var(--g200));
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--g600);
     flex-shrink: 0;
 }

 .dl-info {
     flex-grow: 1;
 }

 .dl-info h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 6px;
 }

 .dl-info p {
     font-size: 0.88rem;
     color: var(--light);
     line-height: 1.5;
 }

 @media(max-width: 1000px) {
     .dl-card {
         flex-direction: column;
         text-align: center;
         padding: 30px;
     }

     .dl-info h3 {
         font-size: 1.15rem;
     }
 }

 @media(max-width: 768px) {
     .dl-wrap {
         grid-template-columns: 1fr;
     }
 }

 /* ── MOBILE ── */
 @media(max-width:900px) {
     nav {
         height: 85px;
     }

     .nav-links {
         position: fixed;
         top: 85px;
         left: 0;
         right: 0;
         z-index: 999;
         background: rgba(255, 255, 255, .98);
         backdrop-filter: blur(18px);
         flex-direction: column;
         align-items: stretch;
         padding: 16px 5% 28px;
         transform: translateY(-110%);
         opacity: 0;
         pointer-events: none;
         transition: transform .4s ease, opacity .4s ease;
         border-bottom: 1px solid rgba(176, 232, 176, .3)
     }

     .nav-links.open {
         transform: translateY(0);
         opacity: 1;
         pointer-events: all;
     }

     .nav-links a {
         padding: 12px 18px;
         border-radius: 12px;
         font-size: .95rem
     }

     .burger {
         display: flex
     }

     #home {
         grid-template-columns: 1fr;
         text-align: center;
         padding-top: 100px;
     }

     .hero-btns {
         justify-content: center
     }

     .hero-badges {
         justify-content: center
     }

     .hero-right {
         display: none
     }

     .about-wrap,
     .why-wrap,
     .contact-wrap {
         grid-template-columns: 1fr;
         gap: 40px
     }

     .why-img-wrap {
         height: 380px;
     }

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

     .contact-form {
         padding: 30px 20px;
         border-radius: 24px;
         width: 100%;
         max-width: 100%;
     }

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

     .brand-logos img {
         height: 56px;
         max-width: 100%;
     }

     .logo-s {
         height: 83px !important;
     }

     .fbrand .brand-logos .logo-s {
         height: 56px;
     }

     .fbrand .brand-logos .logo-b {
         height: 38px;
     }
 }

 @media(max-width:600px) {
     section {
         padding: 10px 5%
     }

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

     .footer-nl {
         flex-direction: column
     }

     .fnl-form {
         flex-direction: column
     }

     .fnl-form input {
         min-width: 0;
         width: 100%
     }

     .contact-form {
         padding: 24px 16px;
         border-radius: 20px;
         overflow: hidden;
     }

     .prod-hdr {
         padding-top: 10Px;
     }

     #why {
         padding: 3px 5%;
     }

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

     .brand-logos img {
         width: 40vw;
     }
 }

 /* ── CANVAS ── */
 #ptl {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0
 }

 /* ── MICRO ANIMATIONS ── */
 @keyframes gentleFloat {

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

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

 @keyframes shimmer {
     0% {
         background-position: -200% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 .float-card {
     animation: gentleFloat 4s ease-in-out infinite;
 }

 .float-card.fc1 {
     animation-delay: 0s;
 }

 .float-card.fc3 {
     animation-delay: 1.5s;
 }

 .footer-nl {
     background-size: 200% 100%;
     animation: shimmer 8s linear infinite;
 }

 .sec-tag {
     transition: letter-spacing .3s ease;
 }

 .sec-tag:hover {
     letter-spacing: 2.5px;
 }

 .btn-green {
     position: relative;
     overflow: hidden;
 }

 .btn-green::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
     transition: left .6s ease;
 }

 .btn-green:hover::before {
     left: 100%;
 }

 .dl-card {
     transition: transform .35s ease, box-shadow .35s ease;
 }

 .dl-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 50px rgba(31, 111, 31, .12);
 }

 .ci-ic {
     transition: transform .3s ease;
 }

 .cinfo:hover .ci-ic {
     transform: scale(1.15) rotate(5deg);
 }