body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfbf7;
            color: #1a1a1a;
        }

        /* Editing highlight animations and visual indicators */
        .is-editing [contenteditable="true"] {
            outline: 1.5px dashed rgba(245, 124, 0, 0.6);
            border-radius: 4px;
            padding: 2px 4px;
            background-color: rgba(254, 243, 199, 0.35);
            transition: all 0.2s ease;
        }
        .is-editing [contenteditable="true"]:hover {
            outline: 2px dashed #ff6b00;
            background-color: rgba(254, 243, 199, 0.7);
        }
        .is-editing [contenteditable="true"]:focus {
            outline: 2px solid #009b77;
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(0, 155, 119, 0.2);
        }

        /* Floating action dock animations */
        .glass-dock {
            backdrop-filter: blur(14px);
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: 0 16px 36px -10px rgba(0, 78, 59, 0.18), 0 0 0 1px rgba(0,0,0,0.04);
        }

        /* Delicate custom scrollbars */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1eb;
        }
        ::-webkit-scrollbar-thumb {
            background: #009b77;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #007a5e;
        }

        /* Subtle hero radial background */
        .pharma-mesh {
            background-color: #fcfbf7;
            background-image: 
                radial-gradient(at 0% 0%, rgba(0, 155, 119, 0.08) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(255, 107, 0, 0.06) 0px, transparent 40%),
                radial-gradient(at 50% 100%, rgba(212, 175, 55, 0.07) 0px, transparent 50%);
        }
    
        /* Site 2 product portfolio interaction styles */
        .pack-card-perspective { perspective: 1920px; }
        .pack-card-inner { transform-style: preserve-3d; transition: transform 0.4s ease; }
        .pack-card-perspective:hover .pack-card-inner { transform: translateY(-6px) rotateY(-3deg) rotateX(2deg); }
        .product-item-card { min-height: 100%; }
        #productSearchInput:focus { outline: none; }
        .filter-tab-btn { cursor: pointer; }
        .filter-tab-btn:not(.active):hover { transform: translateY(-1px); }
        .product-item-card.is-hidden { display: none !important; }
        .custom-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
        .custom-scroll::-webkit-scrollbar-thumb { background-color: #009B72; border-radius: 9999px; }
        .official-brand-logo { width: 310px; height: 104px; max-width: none; object-fit: contain; object-position: center; display: block; background: transparent; }
        @media (max-width: 1920px) {
            .official-brand-logo { width: 270px; height: 200px; }
        }
        @media (max-width: 640px) {
            .official-brand-logo { width: 230px; height: 78px; }
        }


/* ==========================================================================
   ARKAJYOTI PHARMA — 1920PX CORPORATE SYSTEM
   ========================================================================== */
:root {
    --ap-green: #009B72;
    --ap-green-dark: #006b50;
    --ap-orange: #FF7000;
    --ap-gold: #D4AF37;
    --ap-navy: #071a24;
    --ap-cream: #fbfcfa;
    --ap-ink: #10202a;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { overflow-x: hidden; }
img { max-width: 100%; }

@media (min-width: 1920px) {
    .max-w-\[1680px\] { max-width: 1680px !important; }
}

.hero-parallax-section {
    isolation: isolate;
    min-height: clamp(720px, 72vh, 920px);
    background:
        radial-gradient(circle at 78% 22%, rgba(0,155,114,.12), transparent 24%),
        radial-gradient(circle at 15% 78%, rgba(255,112,0,.08), transparent 26%),
        linear-gradient(135deg, #fcfdfc 0%, #f7fbf9 54%, #fffaf5 100%);
}
.hero-depth {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    will-change: transform;
    z-index: -1;
}
.hero-depth-a {
    width: 34vw; height: 34vw; min-width: 360px; min-height: 360px;
    right: -10vw; top: 8%;
    border: 1px solid rgba(0,155,114,.12);
    box-shadow: inset 0 0 100px rgba(0,155,114,.04);
}
.hero-depth-b {
    width: 20vw; height: 20vw; min-width: 220px; min-height: 220px;
    left: -7vw; bottom: 8%;
    border: 1px solid rgba(255,112,0,.13);
}
.hero-depth-c {
    width: 9px; height: 9px;
    right: 24%; top: 24%;
    background: var(--ap-gold);
    box-shadow: 0 0 0 14px rgba(212,175,55,.08), 0 0 80px 25px rgba(212,175,55,.15);
}

/* Executive about: dark editorial / glass architecture */
.executive-about {
    background:
        radial-gradient(circle at 12% 15%, rgba(0,155,114,.16), transparent 25%),
        radial-gradient(circle at 90% 75%, rgba(255,112,0,.10), transparent 26%),
        linear-gradient(135deg, #071a24 0%, #0a2631 46%, #071820 100%);
    color: #fff;
    isolation: isolate;
}
.about-grid-lines {
    position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.about-orb {
    position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
    filter: blur(.2px);
}
.about-orb-one {
    width: 420px; height: 420px; left: -210px; top: 8%;
    border: 1px solid rgba(0, 214, 164, .28);
    box-shadow: 0 0 120px rgba(0,155,114,.15), inset 0 0 80px rgba(0,155,114,.06);
}
.about-orb-two {
    width: 320px; height: 320px; right: -160px; bottom: 12%;
    border: 1px solid rgba(255,112,0,.25);
    box-shadow: 0 0 100px rgba(255,112,0,.10), inset 0 0 60px rgba(255,112,0,.04);
}
.executive-kicker {
    font-size: .72rem; letter-spacing: .22em; font-weight: 800; color: #5ee0bb;
    margin-bottom: 14px;
}
.executive-title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: 1.03; letter-spacing: -.045em;
    max-width: 720px; color: #fff;
}
.executive-rule {
    width: 92px; height: 4px; border-radius: 99px; margin: 26px 0;
    background: linear-gradient(90deg, var(--ap-green), var(--ap-gold), var(--ap-orange));
}
.executive-intro { color: rgba(236,246,244,.78); line-height: 1.9; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.executive-identity-card {
    margin-top: 30px; padding: 18px; display:flex; gap:14px; align-items:center;
    border: 1px solid rgba(255,255,255,.11); border-radius: 18px;
    background: rgba(255,255,255,.045); backdrop-filter: blur(14px);
}
.identity-icon {
    width: 46px; height:46px; border-radius:14px; display:grid; place-items:center;
    color:#071a24; background:linear-gradient(135deg,#6ce8c8,#d4af37);
}
.executive-identity-card span, .executive-identity-card small { display:block; color:rgba(255,255,255,.55); font-size:.7rem; }
.executive-identity-card strong { display:block; color:#fff; margin:2px 0 4px; font-size:.9rem; }

.mission-vision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.mv-card {
    position:relative; min-height:210px; padding:28px; overflow:hidden; border-radius:24px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(18px); box-shadow:0 24px 70px rgba(0,0,0,.16);
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.mv-card:hover { transform:translateY(-7px); background:rgba(255,255,255,.085); }
.mv-card-green:hover { border-color:rgba(0,214,164,.4); }
.mv-card-orange:hover { border-color:rgba(255,112,0,.42); }
.mv-number { position:absolute; right:18px; top:10px; font-size:5rem; font-weight:900; color:rgba(255,255,255,.035); line-height:1; }
.mv-icon {
    width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
    background:rgba(0,155,114,.16); color:#68e5c4;
}
.mv-card-orange .mv-icon { background:rgba(255,112,0,.14); color:#ff9c62; }
.mv-card h3 { font-size:1.1rem; margin-bottom:8px; }
.mv-card p { color:rgba(235,245,243,.68); line-height:1.75; font-size:.86rem; }

.leadership-heading { display:flex; align-items:end; gap:24px; margin:44px 0 18px; }
.leadership-heading span { color:#d4af37; letter-spacing:.2em; font-size:.67rem; font-weight:800; }
.leadership-heading h3 { color:#fff; font-size:clamp(1.45rem,2.2vw,2.25rem); margin-top:5px; letter-spacing:-.03em; }
.leadership-line { height:1px; flex:1; background:linear-gradient(90deg,rgba(255,255,255,.18),transparent); margin-bottom:9px; }

.leadership-stack { display:grid; gap:14px; }
.leader-card {
    position:relative; display:grid; grid-template-columns:54px 58px 1fr 44px; gap:18px; align-items:start;
    padding:24px; border-radius:22px; overflow:hidden;
    background:linear-gradient(110deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(16px);
    transform:translateY(20px); opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.leader-card.is-visible { opacity:1; transform:translateY(0); }
.leader-card:nth-child(2) { transition-delay:.08s; }
.leader-card:nth-child(3) { transition-delay:.16s; }
.leader-card:hover { border-color:rgba(255,255,255,.22); }
.leader-card-1 { box-shadow:inset 4px 0 0 var(--ap-green); }
.leader-card-2 { box-shadow:inset 4px 0 0 var(--ap-orange); }
.leader-card-ceo { box-shadow:inset 4px 0 0 var(--ap-gold); background:linear-gradient(110deg,rgba(212,175,55,.12),rgba(255,255,255,.035)); }
.leader-index { font:800 .75rem/1 Inter,sans-serif; color:rgba(255,255,255,.38); padding-top:12px; }
.leader-avatar {
    width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
    color:#071a24; background:linear-gradient(135deg,#69e7c6,#009b72); font-size:1.15rem;
}
.leader-card-2 .leader-avatar { background:linear-gradient(135deg,#ffc08e,#ff7000); }
.ceo-avatar { background:linear-gradient(135deg,#f6e7a8,#d4af37); }
.leader-role { color:#6ce8c8; font-size:.64rem; font-weight:800; letter-spacing:.15em; }
.leader-card-2 .leader-role { color:#ffae7d; }
.leader-card-ceo .leader-role { color:#e8d184; }
.leader-copy h4 { font-size:1.2rem; color:#fff; margin:5px 0 7px; }
.leader-copy p { color:rgba(238,247,245,.72); font-size:.9rem; line-height:1.75; }
.leader-mark { color:rgba(255,255,255,.12); font-size:1.8rem; padding-top:10px; }

.pillars-strip {
    margin-top:20px; padding:14px 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
    border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(0,0,0,.12);
}
.pillars-strip div { display:flex; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.64); font-size:.72rem; font-weight:700; text-align:center; }
.pillars-strip i { color:#5ee0bb; }

@media (max-width: 900px) {
    .mission-vision-grid { grid-template-columns:1fr; }
    .leadership-line { display:none; }
    .leader-card { grid-template-columns:38px 52px 1fr; }
    .leader-avatar { width:52px; height:52px; border-radius:15px; }
    .leader-mark { display:none; }
    .pillars-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
    .hero-parallax-section { min-height:auto; }
    .executive-about { background:linear-gradient(150deg,#071a24,#0a2631); }
    .executive-title { font-size:2.3rem; }
    .leader-card { grid-template-columns:34px 48px 1fr; gap:12px; padding:18px; border-radius:18px; }
    .leader-avatar { width:48px; height:48px; font-size:1rem; }
    .leader-copy p { font-size:.82rem; }
    .pillars-strip { grid-template-columns:1fr 1fr; padding:10px; }
    .pillars-strip div { flex-direction:column; gap:5px; font-size:.65rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .hero-depth, .about-parallax-layer { transform:none !important; }
    .leader-card { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Final responsive logo sizing */
.official-brand-logo { width: 300px; height: 125px; object-fit: contain; object-position: left center; }
@media (max-width: 1024px) { .official-brand-logo { width: 235px; height: 100px; } }
@media (max-width: 640px) { .official-brand-logo { width: 205px; height: 95px; } }

/* Featured Presentation: show five products, scroll vertically for the rest */
.featured-products-scroll {
    max-height: 405px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #009B72 #eef3f1;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}
.featured-products-scroll::-webkit-scrollbar { width: 7px; }
.featured-products-scroll::-webkit-scrollbar-track { background: #eef3f1; border-radius: 999px; }
.featured-products-scroll::-webkit-scrollbar-thumb { background: #009B72; border-radius: 999px; border: 1px solid #d9eee8; }
.featured-products-scroll::-webkit-scrollbar-thumb:hover { background: #007555; }
.featured-product-item { min-height: 72px; }
@media (max-width: 640px) {
    .featured-products-scroll { max-height: 380px; }
    .featured-product-item { min-height: 68px; }
}

/* ========================================================================
   PREMIUM PRODUCT SHOWCASE BACKGROUND
   ======================================================================== */
#products {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(0,155,114,.14) 0, rgba(0,155,114,0) 28%),
        radial-gradient(circle at 92% 18%, rgba(255,112,0,.10) 0, rgba(255,112,0,0) 24%),
        radial-gradient(circle at 50% 100%, rgba(31,93,73,.09) 0, rgba(31,93,73,0) 34%),
        linear-gradient(135deg, #f8fcfb 0%, #eef7f4 48%, #f9fbfa 100%) !important;
}

#products::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .52;
    background-image:
        linear-gradient(rgba(0,107,82,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,107,82,.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

#products::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -210px;
    bottom: -260px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,155,114,.16), rgba(0,155,114,0) 68%);
    filter: blur(8px);
    pointer-events: none;
}

#products > .max-w-\[1680px\] {
    position: relative;
}

/* Elegant molecular/scientific watermark behind the heading */
#products > .max-w-\[1680px\]::before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    left: -105px;
    top: 65px;
    border-radius: 50%;
    opacity: .34;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(0,155,114,.12) 18.5% 19.5%, transparent 20%),
        radial-gradient(circle at 24% 30%, rgba(0,155,114,.18) 0 5px, transparent 6px),
        radial-gradient(circle at 72% 23%, rgba(255,112,0,.16) 0 5px, transparent 6px),
        radial-gradient(circle at 79% 70%, rgba(0,155,114,.16) 0 5px, transparent 6px),
        radial-gradient(circle at 28% 75%, rgba(255,112,0,.12) 0 5px, transparent 6px);
    border: 1px solid rgba(0,155,114,.10);
    pointer-events: none;
}

/* Product cards become premium glass-like presentation tiles */
#products .product-item-card {
    position: relative;
    border-color: rgba(0,112,88,.13) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 10px 30px rgba(20,65,53,.07), 0 2px 7px rgba(20,65,53,.04) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(0);
}

#products .product-item-card::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #009b72, #69e7c6, #ff7000);
    opacity: .72;
    z-index: 5;
    pointer-events: none;
}

#products .product-item-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    top: -72px;
    right: -55px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,155,114,.15), rgba(0,155,114,0) 70%);
    pointer-events: none;
}

#products .product-item-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,155,114,.34) !important;
    box-shadow: 0 20px 42px rgba(0,94,73,.14), 0 5px 12px rgba(0,94,73,.07) !important;
}

#products .product-item-card .pack-card-inner {
    position: relative;
    z-index: 1;
}

#products .product-item-card .p-5.pb-3 {
    background:
        radial-gradient(circle at 92% 8%, rgba(0,155,114,.08), transparent 28%),
        linear-gradient(145deg, #ffffff 0%, #fbfefd 58%, #f2faf7 100%) !important;
}

#products .product-item-card .p-4.bg-slate-50 {
    background: linear-gradient(90deg, rgba(239,248,245,.95), rgba(248,250,249,.98)) !important;
    border-top: 1px solid rgba(0,155,114,.07);
}

/* Search control gets a more premium presence */
#productSearchInput {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,112,88,.18) !important;
    box-shadow: 0 10px 28px rgba(0,78,61,.08) !important;
}
#productSearchInput:focus {
    box-shadow: 0 0 0 4px rgba(0,155,114,.10), 0 12px 30px rgba(0,78,61,.10) !important;
}

/* Category filters sit above the background like polished control chips */
#productFilterButtons .filter-tab-btn {
    box-shadow: 0 4px 12px rgba(20,65,53,.045);
}
#productFilterButtons .filter-tab-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(20,65,53,.08);
}

@media (max-width: 640px) {
    #products::before { background-size: 30px 30px; opacity: .38; }
    #products > .max-w-\[1680px\]::before { width: 210px; height: 210px; left: -115px; top: 110px; }
    #products .product-item-card:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    #products .product-item-card:hover { transform: none; }
    #productFilterButtons .filter-tab-btn:hover { transform: none; }
}

/* ========================================================================
   EYE-CATCHING PHARMA PATTERN — PRODUCT SECTION ENHANCEMENT
   Background only — product box/card design remains untouched.
   ======================================================================== */
#products {
    background:
        radial-gradient(circle at 8% 8%, rgba(0,155,114,.20) 0, rgba(0,155,114,0) 25%),
        radial-gradient(circle at 92% 10%, rgba(255,112,0,.13) 0, rgba(255,112,0,0) 21%),
        radial-gradient(circle at 18% 88%, rgba(31,93,73,.11) 0, rgba(31,93,73,0) 24%),
        radial-gradient(circle at 86% 82%, rgba(0,155,114,.14) 0, rgba(0,155,114,0) 25%),
        linear-gradient(135deg, #f8fdfb 0%, #e9f6f2 46%, #f9fcfb 100%) !important;
}

/* Layer 1: precision grid + diagonal pharma texture */
#products::before {
    opacity: .78;
    background-image:
        linear-gradient(rgba(0,107,82,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,107,82,.045) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 20px, rgba(0,155,114,.026) 21px 22px, transparent 23px 44px),
        repeating-linear-gradient(45deg, transparent 0 42px, rgba(255,112,0,.018) 43px 44px, transparent 45px 88px);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
    animation: pharmaGridDrift 28s linear infinite;
}

/* Layer 2: soft molecular halo / scientific field */
#products::after {
    width: 760px;
    height: 760px;
    right: -270px;
    bottom: -365px;
    opacity: .95;
    background:
        radial-gradient(circle at 50% 50%, rgba(0,155,114,.17) 0 2px, transparent 3px),
        radial-gradient(circle at 24% 29%, rgba(0,155,114,.15) 0 6px, transparent 7px),
        radial-gradient(circle at 72% 22%, rgba(255,112,0,.14) 0 6px, transparent 7px),
        radial-gradient(circle at 79% 67%, rgba(0,155,114,.14) 0 7px, transparent 8px),
        radial-gradient(circle at 30% 77%, rgba(255,112,0,.11) 0 5px, transparent 6px),
        radial-gradient(circle at 50% 50%, transparent 0 25%, rgba(0,155,114,.075) 25.2% 25.6%, transparent 26% 39%, rgba(0,155,114,.06) 39.2% 39.6%, transparent 40% 53%, rgba(0,155,114,.045) 53.2% 53.5%, transparent 54%),
        radial-gradient(circle, rgba(0,155,114,.14), rgba(0,155,114,0) 69%);
    filter: blur(.15px);
    animation: molecularFloat 18s ease-in-out infinite alternate;
}

/* Fine molecular network lines, kept extremely subtle for text readability */
#products > .max-w-\[1680px\]::after {
    content: "✚";
    position: absolute;
    right: 3%;
    top: 4%;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,155,114,.13);
    border-radius: 50%;
    color: rgba(0,155,114,.15);
    font-size: 48px;
    font-weight: 800;
    box-shadow: inset 0 0 0 16px rgba(255,255,255,.20), 0 0 0 12px rgba(0,155,114,.025);
    transform: rotate(8deg);
    pointer-events: none;
}

@keyframes pharmaGridDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 44px 44px, -44px 44px, 90px 45px, -70px 35px; }
}

@keyframes molecularFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-16px, -10px, 0) scale(1.025); }
    100% { transform: translate3d(10px, 8px, 0) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    #products::before,
    #products::after { animation: none !important; }
}

@media (max-width: 640px) {
    #products::before { opacity: .58; background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%; }
    #products::after { width: 520px; height: 520px; right: -230px; bottom: -260px; }
    #products > .max-w-\[1680px\]::after { width: 62px; height: 62px; font-size: 31px; right: 3%; top: 5%; }
}

/* Make section heading pop while preserving maximum text contrast */
#products h2,
#products h3,
#products p,
#products label,
#products span {
    text-shadow: none;
}

#products .product-item-card {
    overflow: hidden;
    border: 1px solid rgba(0,112,88,.16) !important;
    background: rgba(255,255,255,.94) !important;
}

#products .product-item-card::before {
    height: 4px;
    background: linear-gradient(90deg, #007f5d 0%, #00b886 48%, #ff790d 100%);
    opacity: .95;
}

#products .product-item-card::after {
    width: 190px;
    height: 190px;
    top: -105px;
    right: -80px;
    background:
        radial-gradient(circle at 48% 52%, rgba(0,155,114,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,155,114,.08) 42.5% 43%, transparent 43.5%),
        radial-gradient(circle, rgba(0,155,114,.12), rgba(0,155,114,0) 70%);
}

#products .product-item-card:hover {
    box-shadow: 0 24px 50px rgba(0,94,73,.16), 0 8px 18px rgba(0,94,73,.08) !important;
}

/* Strong readable product information surface */
#products .product-item-card .p-5.pb-3 {
    background:
        linear-gradient(120deg, rgba(255,255,255,.98), rgba(249,255,252,.98)),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,155,114,.018) 11px 12px) !important;
}

#products .product-item-card .p-5.pb-3 h3 {
    color: #075c49 !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
}

#products .product-item-card .p-5.pb-3 p {
    color: #415b55 !important;
}

#products .product-item-card .p-4.bg-slate-50 {
    background: rgba(240,249,245,.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Featured presentation also gets the same visual language */
.featured-products-scroll {
    position: relative;
    border-radius: 18px;
    padding: 4px 7px 4px 4px;
    background:
        linear-gradient(135deg, rgba(0,155,114,.035), rgba(255,255,255,.55)),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(0,155,114,.025) 19px 20px, transparent 21px 40px);
}

.featured-product-item {
    position: relative;
    border-color: rgba(0,112,88,.12) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 7px 20px rgba(20,65,53,.055);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.featured-product-item:hover {
    transform: translateX(4px);
    border-color: rgba(0,155,114,.28) !important;
    box-shadow: 0 12px 28px rgba(0,94,73,.11);
}

@media (max-width: 640px) {
    #products > .max-w-\[1680px\]::after { width: 62px; height: 62px; font-size: 31px; right: 3%; top: 5%; }
    #products::before { opacity: .52; background-size: 30px 30px, 30px 30px, 100% 100%; }
    .featured-product-item:hover { transform: none; }
}

/* PRODUCT SECTION: #home-style parallax background */
#products { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 12% 18%,rgba(0,155,114,.13),transparent 25%),radial-gradient(circle at 88% 72%,rgba(255,112,0,.085),transparent 23%),linear-gradient(135deg,#fcfdfc 0%,#f3faf7 54%,#fffaf5 100%) !important; }
.products-parallax-layer { position:absolute; pointer-events:none; will-change:transform; z-index:0; }
.products-parallax-orb { border-radius:999px; border:1px solid rgba(0,155,114,.10); box-shadow:inset 0 0 90px rgba(0,155,114,.035); }
.products-parallax-orb-one { width:42vw;height:42vw;min-width:460px;min-height:460px;right:-17vw;top:-7%; }
.products-parallax-orb-two { width:25vw;height:25vw;min-width:280px;min-height:280px;left:-11vw;bottom:3%;border-color:rgba(255,112,0,.11); }
.products-parallax-grid { inset:-10%;opacity:.42;background-image:linear-gradient(rgba(0,107,82,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,107,82,.035) 1px,transparent 1px);background-size:52px 52px; }
/* Lower product artwork: one thin orange line + one bold green line */
.product-lower-lines { height:13px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px; }
.product-line-orange { display:block;width:100%;height:1px;background:#FF7000;opacity:.88; }
.product-line-green { display:block;width:100%;height:4px;background:#009B72;border-radius:999px 999px 0 0; }
@media(max-width:640px){.products-parallax-orb-one{width:78vw;height:78vw;right:-30vw}.products-parallax-orb-two{width:52vw;height:52vw;left:-24vw}.products-parallax-grid{background-size:34px 34px;opacity:.30}}
@media(prefers-reduced-motion:reduce){.products-parallax-layer{transform:none!important}}