/* ============================================================
   COCOHILL — Complete Stylesheet
   Deep Forest Green + Gold + Oily Flowing Aesthetic
   ============================================================ */

:root {
    --g1: #1A4A28;
    --g2: #1F5730;
    --g3: #286039;
    --g4: #3A7A4E;
    --g5: #52A06A;
    --gd: #0E2E18;
    --gold: #C8A05A;
    --gold2: #E2C27D;
    --gold3: #F0D9A8;
    --goldd: #9B7A3C;
    --cream: #FAF6EE;
    --cream2: #F2EAD8;
    --sand: #E8DCC2;
    --white: #FFFFFF;
    --text: #1C2B1E;
    --textm: #3E5242;
    --textl: #6B7E6D;
    --oil-amber: rgba(200, 160, 90, 0.15);
    --oil-glow: rgba(200, 160, 90, 0.08);
    --oil-sheen: rgba(224, 194, 125, 0.12);
    --ff-title: 'Playfair Display', serif;
    --ff-elegant: 'Cormorant Garamond', serif;
    --ff-body: 'Jost', sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sp-xs: 0.5rem;
    --sp-s: 1rem;
    --sp-m: 2rem;
    --sp-l: 4rem;
    --sp-xl: 6rem;
    --sp-xxl: 9rem;
    --r: 20px;
    --r-lg: 32px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }
body {
    font-family: var(--ff-body);
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all 0.3s var(--ease); }
ul { list-style: none; }
em { font-family: var(--ff-elegant); font-style: italic; color: var(--gold); font-weight: 500; }
strong { color: inherit; font-weight: 700; }
h1,h2,h3,h4,h5 { font-family: var(--ff-title); line-height: 1.15; letter-spacing: -0.02em; color: var(--gd); }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
p { font-size: clamp(1rem, 1.5vw, 1.06rem); color: var(--textm); line-height: 1.8; }

.wrap { max-width: 1300px; margin: 0 auto; padding: 0 var(--sp-m); position: relative; }

/* ── FLOWING / OILY BACKGROUND UTIL ─────────────────────── */
.flowing-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 10% 20%, rgba(200,160,90,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(31,87,48,0.07) 0%, transparent 60%);
}
.flowing-bg::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 10 Q90 30 60 60 Q30 30 60 10 M60 60 Q90 80 60 110 Q30 80 60 60' fill='none' stroke='%231A4A28' stroke-width='0.4' opacity='0.06'/%3E%3C/svg%3E");
}

/* ============================================================
   INTRO — CANVAS COCONUT ANIMATION
   ============================================================ */
.intro {
    position: fixed; inset: 0; z-index: 9999;
    background: #F8F4EC;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: opacity 1s ease;
}
.intro.fade-out { opacity: 0; pointer-events: none; }

.intro-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* Brand reveal */
.intro-brand {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: scale(0.82) translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.9s cubic-bezier(0.34,1.56,0.64,1);
    text-align: center; pointer-events: none;
}
.intro-brand.show { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

/* Expanding rings behind logo */
.ibrand-rings {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.ibr {
    position: absolute; border-radius: 50%;
    border: 1.5px solid rgba(31,77,44,0.30);
    transform: translate(-50%,-50%) scale(0);
}
.ibr.pulse { animation: ibrPulse 2.5s ease-out infinite; }
.ibr1 { width: 280px; height: 280px; animation-delay: 0s; }
.ibr2 { width: 380px; height: 380px; animation-delay: 0.5s; }
.ibr3 { width: 500px; height: 500px; animation-delay: 1s; }
@keyframes ibrPulse {
    0%  { transform: translate(-50%,-50%) scale(0.3); opacity: 0.8; }
    100%{ transform: translate(-50%,-50%) scale(1);   opacity: 0;   }
}

.intro-logo {
    width: clamp(200px, 28vw, 300px); margin: 0 auto 1.2rem;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.15));
    animation: logoFloat 3.5s ease-in-out infinite;
}
@keyframes logoFloat {
    0%,100%{ transform: translateY(0) scale(1); }
    50%    { transform: translateY(-9px) scale(1.015); }
}

.intro-tagline {
    color: #1F4D2C;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.45rem);
    font-style: italic; letter-spacing: 5px;
    text-shadow: 0 1px 8px rgba(255,255,255,0.8);
}

/* Skip */
.intro-skip {
    position: absolute; bottom: 2rem; right: 2rem; z-index: 20;
    background: rgba(31,77,44,0.08); backdrop-filter: blur(10px);
    color: rgba(31,77,44,0.75); border: 1px solid rgba(31,77,44,0.25);
    padding: 0.55rem 1.3rem; border-radius: 50px; cursor: pointer;
    font-family: 'Jost', sans-serif; font-size: 0.83rem; font-weight: 500;
    letter-spacing: 1px; transition: all 0.3s;
}
.intro-skip:hover { background: rgba(31,77,44,0.16); color: #1F4D2C; border-color: rgba(31,77,44,0.45); }

/* ── SITE WRAPPER ─────────────────────────────────────────── */
.site { opacity: 1; transition: opacity 0.8s ease; }
.site.visible { opacity: 1; }
.hidden { display: none; }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar {
    background: var(--gd);
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--goldd);
}
.topbar-inner {
    display: flex; gap: var(--sp-m); justify-content: center; flex-wrap: wrap;
    font-size: 0.83rem; color: var(--cream2); font-family: var(--ff-body);
}
.topbar-inner span { display: flex; align-items: center; gap: 0.4rem; }

/* ── HEADER ───────────────────────────────────────────────── */
.header {
    position: sticky; top: 0;
    background: rgba(250,246,238,0.96);
    backdrop-filter: blur(20px);
    z-index: 999;
    border-bottom: 1px solid rgba(26,74,40,0.1);
    transition: box-shadow 0.3s;
}
.header.scrolled { box-shadow: 0 4px 20px rgba(26,74,40,0.1); }
.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem var(--sp-m); gap: 1rem;
}
.nav-logo img { height: 80px; width: auto; transition: transform 0.3s; }
.nav-logo:hover img { transform: scale(1.05); }
.nav-links {
    display: flex; gap: 1.5rem; align-items: center;
}
.nav-links a {
    font-size: 0.88rem; font-weight: 500; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--textm);
    position: relative; padding-bottom: 4px;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--g2), var(--gold));
    transition: width 0.3s var(--ease), left 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.act::after { width: 100%; left: 0; }
.nav-links a:hover { color: var(--g2); }
.nav-wa {
    background: linear-gradient(135deg, var(--g2), var(--g4));
    color: var(--white); padding: 0.65rem 1.4rem; border-radius: 50px;
    font-size: 0.88rem; font-weight: 600;
    box-shadow: 0 4px 15px rgba(26,74,40,0.25);
    white-space: nowrap;
}
.nav-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(26,74,40,0.35); color: var(--white); }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
.nav-burger span { width: 26px; height: 3px; background: var(--g2); border-radius: 2px; transition: 0.3s; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1rem 2.2rem; border-radius: 50px;
    font-family: var(--ff-body); font-size: 0.94rem; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer;
    border: 2px solid transparent; transition: all 0.35s var(--ease);
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0; border-radius: 50px;
    background: rgba(255,255,255,0); transition: background 0.3s;
}
.btn:hover::after { background: rgba(255,255,255,0.12); }
.btn-gold { background: linear-gradient(135deg, var(--goldd), var(--gold), var(--gold2)); color: var(--gd); border-color: var(--gold); font-weight: 700; box-shadow: 0 4px 20px rgba(200,160,90,0.35); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(200,160,90,0.5); color: var(--gd); }
.btn-ghost { background: rgba(255,255,255,0.12); color: var(--white); border-color: rgba(255,255,255,0.4); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); color: var(--white); }
.btn-wa { background: rgba(37,211,102,0.2); color: var(--white); border-color: rgba(37,211,102,0.5); }
.btn-wa:hover { background: rgba(37,211,102,0.35); transform: translateY(-2px); color: var(--white); }
.btn-outline-g { background: transparent; color: var(--g2); border-color: var(--g2); }
.btn-outline-g:hover { background: var(--g2); color: var(--white); transform: translateY(-3px); }

/* White outline button — for use on dark green backgrounds */
.btn-outline-wt { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn-outline-wt:hover { background: var(--white); color: var(--g2); transform: translateY(-3px); font-weight: 700; }
.btn-ghost-wl { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.3); }
.btn-ghost-wl:hover { background: rgba(255,255,255,0.15); color: var(--white); }
.btn-lg { padding: 1.2rem 3rem; font-size: 1rem; }
.btn-sm { padding: 0.65rem 1.5rem; font-size: 0.82rem; }
.btn-sm-outline { background: transparent; color: var(--g2); border-color: var(--g2); padding: 0.65rem 1.4rem; font-size: 0.82rem; }
.btn-sm-outline:hover { background: var(--g2); color: var(--white); }
.btn-block { width: 100%; }

/* ── SECTION HEADERS ─────────────────────────────────────── */
.section { padding: var(--sp-xl) 0; position: relative; overflow: hidden; }
.sec-head { text-align: center; margin-bottom: var(--sp-l); }
.sec-label {
    display: inline-block; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
    margin-bottom: 0.8rem;
}
.sec-label::before, .sec-label::after {
    content: ''; display: inline-block; width: 28px; height: 1px;
    background: var(--gold); vertical-align: middle; margin: 0 12px;
}
.sec-label-lt { color: var(--gold2); }
.sec-label-lt::before, .sec-label-lt::after { background: var(--gold2); }
.sec-title { color: var(--g1); margin-bottom: var(--sp-s); font-weight: 800; }
.sec-title-lt { color: var(--white); }
.sec-title-lt em { color: var(--gold2); }
.sec-line { display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 200px; margin: 0.8rem auto; }
.sec-line span { flex: 1; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.sec-line .sl-lt { background: linear-gradient(to right, transparent, var(--gold2), transparent); }
.sec-line .sl-ico { font-size: 1.4rem; }
.sec-sub { font-size: 1.1rem; color: var(--textl); font-family: var(--ff-elegant); font-style: italic; }
.sec-sub-lt { color: rgba(255,255,255,0.8); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100vh; display: flex; flex-direction: column;
    justify-content: center; position: relative; overflow: hidden;
    padding: var(--sp-xl) 0;
}
.hero-bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(160deg, rgba(10,28,15,0.88) 0%, rgba(26,74,40,0.75) 50%, rgba(14,46,24,0.92) 100%),
        url('https://images.unsplash.com/photo-1518495973542-4542c06a5843?w=1920&q=85') center/cover no-repeat;
    animation: kenBurns 25s ease-in-out infinite alternate;
}
@keyframes kenBurns {
    from { transform: scale(1) translateX(0); }
    to { transform: scale(1.12) translateX(-2%); }
}
.hero-oil-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(200,160,90,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(82,160,106,0.15) 0%, transparent 50%);
}
/* Oil blobs */
.oil-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,160,90,0.12) 0%, transparent 70%);
    animation: blobFloat 12s ease-in-out infinite;
}
.b1 { width:600px; height:600px; top:-20%; left:-10%; animation-duration:14s; }
.b2 { width:400px; height:400px; bottom:-10%; right:-5%; animation-duration:18s; animation-delay:2s; }
.b3 { width:300px; height:300px; top:30%; right:10%; animation-duration:10s; animation-delay:5s; }
@keyframes blobFloat {
    0%,100% { transform: scale(1) translate(0,0); }
    33% { transform: scale(1.05) translate(20px,-15px); }
    66% { transform: scale(0.95) translate(-15px,10px); }
}

.hero-content { position: relative; z-index: 2; max-width: 900px; animation: heroIn 1s ease; }
@keyframes heroIn {
    from { opacity:0; transform:translateY(40px); }
    to { opacity:1; transform:translateY(0); }
}
.hero-pill {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white); padding: 0.55rem 1.4rem; border-radius: 50px;
    font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: var(--sp-m);
}
.pill-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
    animation: pillPulse 2s ease-in-out infinite;
}
@keyframes pillPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(200,160,90,0.7); }
    50% { box-shadow: 0 0 0 8px rgba(200,160,90,0); }
}
.hero-title { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: var(--sp-m); }
.ht1 {
    font-family: var(--ff-elegant); font-style: italic; font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3rem); color: var(--gold2); letter-spacing: 2px;
}
.ht2 {
    font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 900;
    background: linear-gradient(135deg, var(--white) 0%, var(--gold3) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    text-shadow: none; letter-spacing: -2px; line-height: 1;
}
.ht2 em { -webkit-text-fill-color: transparent; color: var(--gold2); }
.hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.9); max-width: 680px;
    line-height: 1.8; margin-bottom: var(--sp-m);
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--sp-l); }
.hero-badges {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.hbadge {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(255,255,255,0.08); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 0.75rem 1.2rem; border-radius: 14px;
    transition: all 0.3s;
}
.hbadge:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.hb-ico { font-size: 1.5rem; }
.hbadge strong { display: block; color: var(--white); font-size: 0.94rem; }
.hbadge small { display: block; color: rgba(255,255,255,0.7); font-size: 0.78rem; margin-top: 2px; }
.hero-scroll {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    z-index: 2;
}
.scroll-line { width: 2px; height: 50px; background: linear-gradient(to bottom, var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-line::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
    background: var(--white); animation: scrollSlide 2s ease-in-out infinite;
}
@keyframes scrollSlide {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300%); }
}
.hero-scroll span { color: rgba(255,255,255,0.6); font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; }

/* MARQUEE */
.marquee-bar {
    background: linear-gradient(90deg, var(--gd), var(--g2), var(--gd));
    border-top: 2px solid var(--goldd); border-bottom: 2px solid var(--goldd);
    overflow: hidden; padding: 0.9rem 0;
}
.marquee-track {
    display: flex; gap: 2rem; width: max-content;
    animation: marqueeScroll 35s linear infinite;
    color: var(--gold2); font-weight: 600; letter-spacing: 2px; font-size: 0.92rem;
}
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); align-items: center; margin-bottom: var(--sp-xl); }
.about-text h3 { color: var(--goldd); font-family: var(--ff-elegant); font-style: italic; font-size: 1.8rem; margin-bottom: var(--sp-s); }
.about-text p { margin-bottom: var(--sp-s); }
.about-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-m); }
.atag {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--cream); padding: 0.6rem 1.2rem; border-radius: 50px;
    font-size: 0.9rem; font-weight: 500; color: var(--g2);
    border: 1px solid var(--sand); transition: all 0.3s;
}
.atag:hover { background: var(--g2); color: var(--white); transform: translateY(-2px); }

/* About image grid */
.about-imgs {
    display: grid; grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr); gap: 1rem; height: 480px;
}
.aimg {
    border-radius: var(--r); overflow: hidden;
    background-size: cover; background-position: center;
    background-color: var(--g2); /* fallback if image fails */
    position: relative; transition: transform 0.4s var(--ease);
}
.aimg:hover { transform: scale(1.02); }
.ai1 { grid-row: span 2; }
/* Specific fallback backgrounds per slot */
.ai1 { background-color: #1A4A1C; } /* dark forest green for palms */
.ai2 { background-color: #5C3D1A; } /* brown for copra */
.ai3 { background-color: #7A5C1A; } /* amber-brown for oil */
.aimg::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,28,15,0.75) 0%, transparent 55%);
}
.aimg span {
    position: absolute; bottom: 1rem; left: 1rem;
    color: var(--white); font-weight: 600; font-size: 0.95rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); z-index: 2;
}

/* Stats */
.stats-strip {
    display: grid; grid-template-columns: repeat(4,1fr);
    background: linear-gradient(135deg, var(--gd), var(--g2));
    border-radius: var(--r-lg); padding: var(--sp-m);
    position: relative; overflow: hidden;
}
.stats-strip::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 0% 0%, rgba(200,160,90,0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(82,160,106,0.15) 0%, transparent 50%);
}
.sstat {
    text-align: center; padding: 1.5rem 1rem;
    border-right: 1px solid rgba(255,255,255,0.12);
    position: relative; z-index: 1;
}
.sstat:last-child { border-right: none; }
.snum { font-family: var(--ff-title); font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; color: var(--gold2); line-height: 1; }
.ssuf { font-size: 2rem; color: var(--gold); font-weight: 700; vertical-align: top; margin-top: 0.5rem; display: inline-block; }
.slb { display: block; font-size: 0.85rem; color: var(--cream2); text-transform: uppercase; letter-spacing: 2px; margin-top: 0.5rem; }

/* ============================================================
   VISION & MISSION
   ============================================================ */
.vision { position: relative; overflow: hidden; }
.vision-bg {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, var(--gd) 0%, var(--g2) 60%, var(--g3) 100%);
}
.vision-oil-flow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(200,160,90,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(200,160,90,0.08) 0%, transparent 45%);
    animation: oilShift 15s ease-in-out infinite alternate;
}
@keyframes oilShift {
    from { opacity:0.6; transform: scale(1); }
    to { opacity:1; transform: scale(1.05); }
}
.vision .wrap { position: relative; z-index: 1; }

/* Problem block */
.vm-problem {
    display: flex; gap: var(--sp-m); align-items: flex-start;
    background: rgba(255,255,255,0.07); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 5px solid #E85C3A;
    padding: var(--sp-m); border-radius: var(--r);
    margin-bottom: var(--sp-l);
}
.prob-icon { font-size: 3rem; flex-shrink: 0; }
.prob-text h3 { color: #FFB4A2; margin-bottom: 0.75rem; font-size: 1.5rem; }
.prob-text p { color: rgba(255,255,255,0.92); line-height: 1.8; }
.prob-text strong { color: #FFCFC4; }

/* VM Cards */
.vm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: var(--sp-l); }
.vm-card {
    background: rgba(255,255,255,0.06); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.14);
    padding: var(--sp-m); border-radius: var(--r-lg);
    position: relative; overflow: hidden; transition: all 0.4s;
}
.vm-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-6px); }
.vmc-glow {
    position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, var(--oil-amber) 0%, transparent 70%);
    pointer-events: none;
}
.vision-card .vmc-glow { background: radial-gradient(circle, rgba(200,160,90,0.2) 0%, transparent 70%); }
.mission-card .vmc-glow { background: radial-gradient(circle, rgba(82,160,106,0.2) 0%, transparent 70%); top: auto; bottom: -60px; left: -60px; right: auto; }
.vmc-icon { font-size: 3rem; margin-bottom: var(--sp-s); }
.vm-card h3 { color: var(--gold2); margin-bottom: var(--sp-s); font-size: 1.6rem; }
.vm-card p { color: rgba(255,255,255,0.92); margin-bottom: var(--sp-s); line-height: 1.8; }
.vm-card strong { color: var(--gold3); }
.vmc-list { list-style: none; margin-top: var(--sp-s); }
.vmc-list li { color: rgba(255,255,255,0.8); padding: 0.4rem 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.vmc-list li:last-child { border-bottom: none; }

/* Purity Pledge */
.purity-pledge {
    background: rgba(255,255,255,0.06); backdrop-filter: blur(15px);
    border: 2px solid var(--goldd); border-radius: var(--r-lg);
    padding: var(--sp-m) var(--sp-l); text-align: center;
    position: relative; overflow: hidden;
}
.purity-pledge::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(200,160,90,0.08) 0%, transparent 70%);
}
.pledge-icon { font-size: 3.5rem; margin-bottom: var(--sp-s); }
.purity-pledge h3 { color: var(--gold2); margin-bottom: var(--sp-s); font-size: 1.8rem; }
.purity-pledge p { color: rgba(255,255,255,0.92); max-width: 700px; margin: 0 auto var(--sp-m); line-height: 1.85; }
.purity-pledge em { color: var(--gold2); }
.purity-pledge strong { color: var(--white); font-weight: 700; }
.pledge-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.pledge-tags span {
    background: rgba(200,160,90,0.15); border: 1px solid var(--goldd);
    color: var(--gold2); padding: 0.5rem 1.2rem; border-radius: 50px;
    font-size: 0.88rem; font-weight: 600;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products { background: linear-gradient(160deg, var(--cream) 0%, var(--cream2) 100%); }

.prod-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* always 5 columns */
    gap: 1rem;
    margin-bottom: var(--sp-xl);
}
.pcard {
    background: var(--white); border-radius: 18px; padding: 1rem 0.75rem;
    text-align: center; position: relative; overflow: hidden;
    border: 2px solid transparent; transition: all 0.4s var(--ease);
}
.pcard::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--g2), var(--gold), var(--g3));
    transform: scaleX(0); transform-origin: left; transition: transform 0.5s;
}
.pcard:hover::before { transform: scaleX(1); }
.pcard:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(26,74,40,0.18); border-color: var(--gold); }
.pcard-star {
    background: linear-gradient(155deg, var(--g1), var(--g3));
    transform: scale(1.04);
    box-shadow: 0 20px 50px rgba(26,74,40,0.3);
}
.pcard-star:hover { transform: scale(1.04) translateY(-10px); }
.pcard-star h3, .pcard-star p, .pcard-star .pcard-info { color: var(--white); }
.pcard-star .pcard-info { color: rgba(255,255,255,0.75); }
.pcard-shine {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 80%, rgba(255,255,255,0.06) 90%, transparent 95%);
    animation: shineSpin 8s linear infinite;
}
@keyframes shineSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Badges — smaller to fit compact cards */
.pbadge {
    position: absolute; top: 0.75rem; right: 0.6rem;
    background: var(--gold); color: var(--gd); padding: 0.28rem 0.7rem;
    border-radius: 50px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; z-index: 5;
}
.pbadge-gold { background: linear-gradient(135deg, #FFD700, var(--gold)); color: var(--gd); box-shadow: 0 4px 15px rgba(255,215,0,0.4); font-size: 0.7rem; }
.pbadge-dark { background: var(--g2); color: var(--white); }

/* Bottle Design — scaled down to fit single row */
.pbottle { height: 150px; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0; }
.pbottle-lg .pbot-inner { transform: scale(1.08); }
.pbot-inner { position: relative; width: 76px; transition: transform 0.5s var(--bounce); }
.pcard:hover .pbot-inner { transform: translateY(-4px) rotate(-4deg); }
.pcard-star:hover .pbot-inner { transform: translateY(-4px) rotate(-4deg); }
.pbot-cap {
    width: 34px; height: 20px; margin: 0 auto;
    background: linear-gradient(135deg, var(--goldd), var(--gold));
    border-radius: 6px 6px 3px 3px; position: relative; z-index: 2;
}
.pbot-body {
    width: 76px; height: 125px; margin-top: -2px;
    background: linear-gradient(160deg, var(--g2), var(--gd));
    border-radius: 8px 8px 18px 18px;
    display: flex; flex-direction: column; align-items: center;
    position: relative; overflow: hidden;
    box-shadow: 3px 6px 16px rgba(0,0,0,0.3), inset 2px 0 6px rgba(255,255,255,0.08);
}
.pbot-body::after {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
    background: rgba(255,255,255,0.12); border-radius: 2px;
}
.pbot-label {
    padding: 0.5rem 0.4rem 0; z-index: 2; position: relative; text-align: center;
    border: 1px solid rgba(200,160,90,0.4); margin: 0.4rem; border-radius: 5px; width: calc(100% - 0.8rem);
}
.pbl-brand { font-size: 0.42rem; letter-spacing: 2px; color: var(--gold2); font-weight: 700; }
.pbl-size { font-family: var(--ff-title); font-size: 1.15rem; color: var(--gold2); font-weight: 800; line-height: 1; }
.pbl-size small { font-size: 0.55rem; vertical-align: bottom; margin-left: 1px; }
.pbl-tag { font-size: 0.38rem; letter-spacing: 3px; color: rgba(255,255,255,0.6); font-weight: 600; padding-bottom: 0.3rem; }
.pbot-liquid { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; }
.pbot-oil {
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(200,160,90,0.3), rgba(200,160,90,0.55));
    animation: oilSlosh 5s ease-in-out infinite;
    border-radius: 0 0 18px 18px;
}
@keyframes oilSlosh {
    0%,100% { transform: scaleX(1); }
    33% { transform: scaleX(1.03) skewX(1deg); }
    66% { transform: scaleX(0.97) skewX(-1deg); }
}
.pcard h3 { color: var(--g1); margin-bottom: 0.25rem; font-size: 1.05rem; }
.pcard p { color: var(--textl); margin-bottom: 0.4rem; font-size: 0.8rem; line-height: 1.4; }
.pcard-info { font-size: 0.72rem; color: var(--textl); padding: 0.5rem 0; border-top: 1px dashed var(--sand); border-bottom: 1px dashed var(--sand); margin-bottom: 0.75rem; }

/* Benefits */
.benefits-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-m);
}
.bene-card {
    text-align: center; padding: var(--sp-m);
    background: var(--white); border-radius: var(--r);
    border: 1px solid var(--sand); transition: all 0.4s;
}
.bene-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(26,74,40,0.12); border-color: var(--gold); }
.bene-ring {
    width: 90px; height: 90px; margin: 0 auto var(--sp-s);
    background: linear-gradient(135deg, var(--g2), var(--g4));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; position: relative; box-shadow: 0 8px 25px rgba(26,74,40,0.3);
}
.bene-ring::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px dashed var(--gold); animation: ringRotate 20s linear infinite;
}
@keyframes ringRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.bene-card h4 { color: var(--g2); margin-bottom: 0.5rem; }
.bene-card p { color: var(--textl); font-size: 0.93rem; }

/* ============================================================
   PROCESS
   ============================================================ */
.process { padding: var(--sp-xxl) 0; }
.process-bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(160deg, rgba(10,28,15,0.93) 0%, rgba(26,74,40,0.88) 100%),
        url('https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?w=1920&q=80') center/cover;
}
.process-oil-sheen {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        -45deg, transparent 0, transparent 60px,
        rgba(200,160,90,0.025) 60px, rgba(200,160,90,0.025) 62px
    );
    animation: sheenMove 20s linear infinite;
}
@keyframes sheenMove { from { background-position: 0 0; } to { background-position: 200px 200px; } }
.process .wrap { position: relative; z-index: 1; }
.process-steps {
    display: flex; gap: 0; flex-wrap: wrap; justify-content: center;
    position: relative;
}
.pstep {
    flex: 1; min-width: 150px; max-width: 200px;
    background: rgba(255,255,255,0.06); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    padding: var(--sp-m) var(--sp-s); border-radius: var(--r);
    text-align: center; transition: all 0.4s; position: relative; overflow: hidden;
}
.pstep::before {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(200,160,90,0.08), transparent);
    transition: left 0.7s;
}
.pstep:hover::before { left: 100%; }
.pstep:hover { transform: translateY(-10px); background: rgba(255,255,255,0.12); border-color: var(--goldd); }
.pstep-num { font-size: 3rem; font-weight: 900; font-family: var(--ff-title); color: rgba(200,160,90,0.25); line-height: 1; }
.pstep-ico { font-size: 3rem; margin: 0.4rem 0; transition: transform 0.3s var(--bounce); }
.pstep:hover .pstep-ico { transform: scale(1.3) rotate(8deg); }
.pstep h4 { color: var(--white); margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; }
.pstep p { color: rgba(255,255,255,0.88); font-size: 0.88rem; line-height: 1.65; }
.pstep-arrow { display: flex; align-items: center; color: var(--gold2); font-size: 2.5rem; align-self: center; opacity: 0.7; margin: 0 -0.5rem; flex-shrink: 0; }

/* ============================================================
   BUSINESS MODEL
   ============================================================ */
.business { background: var(--cream2); }
.biz-cards {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
    align-items: stretch;
}
.biz-card {
    background: var(--white); padding: var(--sp-l) var(--sp-m);
    border-radius: var(--r-lg); border: 2px solid var(--sand);
    transition: all 0.4s;
}
.biz-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(26,74,40,0.12); border-color: var(--gold); }
.biz-icon { font-size: 3.5rem; margin-bottom: var(--sp-s); }
.biz-tag { display: inline-block; font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--goldd); margin-bottom: 0.75rem; }
.biz-card h3 { color: var(--g1); margin-bottom: var(--sp-s); font-size: 2rem; }
.biz-card p { color: var(--textm); margin-bottom: var(--sp-m); }
.biz-card ul { margin-bottom: var(--sp-m); }
.biz-card li { padding: 0.45rem 0; border-bottom: 1px solid var(--cream2); color: var(--textm); font-size: 0.95rem; }
.biz-card li:last-child { border-bottom: none; }
.biz-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.biz-divider {
    display: flex; align-items: center; justify-content: center;
    width: 70px;
}
.biz-divider span {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--goldd), var(--gold));
    color: var(--gd); font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 20px rgba(200,160,90,0.4);
}

/* ============================================================
   WHITE LABEL
   ============================================================ */
.whitelabel { position: relative; overflow: hidden; }
.wl-bg {
    position: absolute; inset: 0;
    background: linear-gradient(150deg, var(--g1) 0%, var(--gd) 40%, var(--g2) 100%);
}
.wl-oil-flow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(200,160,90,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(82,160,106,0.1) 0%, transparent 50%);
    animation: wlOilShift 20s ease-in-out infinite alternate;
}
@keyframes wlOilShift {
    from { transform: scale(1) rotate(0); }
    to { transform: scale(1.04) rotate(0.5deg); }
}
.whitelabel .wrap { position: relative; z-index: 1; }
.wl-intro {
    max-width: 750px; margin: 0 auto var(--sp-l); text-align: center;
    font-size: 1.18rem; color: #FFFFFF !important; line-height: 1.85;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.wl-intro strong { color: var(--gold2) !important; font-weight: 800; }
.wl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: var(--sp-l); }
.wl-card {
    background: rgba(255,255,255,0.06); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.13); border-top: 3px solid var(--goldd);
    padding: var(--sp-m); border-radius: var(--r); transition: all 0.4s;
}
.wl-card:hover { background: rgba(255,255,255,0.11); transform: translateY(-8px); border-top-color: var(--gold2); }
.wlc-icon { font-size: 2.5rem; margin-bottom: var(--sp-s); }
.wl-card h4 { color: var(--gold2); margin-bottom: 0.75rem; font-size: 1.2rem; font-weight: 700; }
.wl-card p { color: rgba(255,255,255,0.92); font-size: 0.93rem; line-height: 1.75; }
.wl-cta-box {
    display: flex; align-items: center; gap: var(--sp-m);
    background: rgba(255,255,255,0.07); backdrop-filter: blur(15px);
    border: 2px solid var(--goldd); border-radius: var(--r-lg);
    padding: var(--sp-m) var(--sp-l);
}
.wl-cta-left { flex: 1; }
.wl-cta-left h3 { color: var(--white); margin-bottom: 0.75rem; font-size: 1.5rem; font-weight: 700; }
.wl-cta-left p { color: rgba(255,255,255,0.92); line-height: 1.8; }
.wl-cta-right { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; }

/* ============================================================
   ORDER
   ============================================================ */
.order { background: linear-gradient(160deg, var(--cream), var(--cream2)); }
.order-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-m); }
.order-side { display: flex; flex-direction: column; gap: var(--sp-s); }
.os-block { background: var(--white); padding: var(--sp-m); border-radius: var(--r); box-shadow: 0 4px 20px rgba(26,74,40,0.07); }
.os-block:hover { box-shadow: 0 8px 30px rgba(26,74,40,0.12); }
.os-primary { background: linear-gradient(135deg, var(--g1), var(--g2)); }
.os-primary h3 { color: var(--white); margin-bottom: 0.5rem; }
.os-primary p { color: rgba(255,255,255,0.94); }
.os-block h4 { color: var(--g2); margin-bottom: var(--sp-s); }
.os-method {
    display: flex; align-items: center; gap: 1rem;
    background: rgba(255,255,255,0.1); padding: 0.9rem;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.15);
    color: var(--white); margin-top: 0.75rem; transition: all 0.3s;
}
.os-method:hover { background: rgba(255,255,255,0.2); transform: translateX(6px); color: var(--white); }
.os-wa { background: rgba(37,211,102,0.15); border-color: rgba(37,211,102,0.35); }
.os-wa:hover { background: rgba(37,211,102,0.28); }
.osm-ico { font-size: 1.6rem; flex-shrink: 0; }
.os-method > div { flex: 1; }
.os-method strong { display: block; color: var(--white); }
.os-method span:not(.osm-ico):not(.osm-arr) { font-size: 0.87rem; opacity: 0.82; }
.osm-arr { transition: transform 0.3s; }
.os-method:hover .osm-arr { transform: translateX(5px); }
.os-list { list-style: none; }
.os-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--cream2); color: var(--textm); font-size: 0.93rem; }
.os-list li:last-child { border-bottom: none; }
.os-store {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--cream); padding: 0.85rem 1rem;
    border-radius: 12px; margin-bottom: 0.6rem; border: 2px solid transparent; transition: all 0.3s;
}
.os-store:hover { background: var(--g2); color: var(--white); border-color: var(--gold); transform: translateX(4px); }
.os-store strong { display: block; font-size: 0.95rem; }
.os-store small { font-size: 0.82rem; opacity: 0.75; }
.os-store > span:last-child { font-weight: 700; }
.os-store > div { flex: 1; }
.os-store > span:first-child { font-size: 1.5rem; }

/* Form */
.order-form { background: var(--white); padding: var(--sp-m); border-radius: var(--r-lg); box-shadow: 0 8px 30px rgba(26,74,40,0.1); border-top: 5px solid var(--gold); }
.of-header { text-align: center; padding-bottom: var(--sp-s); border-bottom: 2px dashed var(--cream2); margin-bottom: var(--sp-m); }
.of-header h3 { color: var(--g2); margin-bottom: 0.25rem; }
.of-header p { color: var(--textl); font-style: italic; }
.of-group { margin-bottom: var(--sp-s); }
.of-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.of-group label { display: block; margin-bottom: 0.4rem; font-weight: 600; color: var(--g2); font-size: 0.88rem; letter-spacing: 0.3px; }
.of-group input, .of-group select, .of-group textarea {
    width: 100%; padding: 0.9rem 1rem; border: 2px solid var(--cream2);
    border-radius: 12px; font-family: var(--ff-body); font-size: 0.95rem;
    background: var(--cream); color: var(--text); transition: all 0.3s;
}
.of-group input:focus, .of-group select:focus, .of-group textarea:focus {
    outline: none; border-color: var(--g2); background: var(--white);
    box-shadow: 0 0 0 4px rgba(26,74,40,0.1);
}
.of-group textarea { resize: vertical; }
.of-note { text-align: center; margin-top: var(--sp-s); font-size: 0.83rem; color: var(--textl); font-style: italic; }

/* ============================================================
   FUTURE PRODUCTS
   ============================================================ */
.future { position: relative; overflow: hidden; }
.future-bg {
    position: absolute; inset: 0;
    background: linear-gradient(155deg, var(--gd) 0%, var(--g1) 50%, var(--g2) 100%);
}
.future-oil-flow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(200,160,90,0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 50%, rgba(200,160,90,0.08) 0%, transparent 45%);
}
.future .wrap { position: relative; z-index: 1; }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: var(--sp-l); }
.fcard {
    background: rgba(255,255,255,0.07); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg);
    padding: var(--sp-m); position: relative; overflow: hidden; transition: all 0.4s;
}
.fcard:hover { background: rgba(255,255,255,0.12); transform: translateY(-10px); border-color: var(--goldd); }
.fcard-glow {
    position: absolute; top: -80px; right: -80px;
    width: 250px; height: 250px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,160,90,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.fcard-ico { font-size: 4rem; margin-bottom: var(--sp-s); }
.fcard-badge {
    display: inline-block; background: var(--goldd); color: var(--gd);
    padding: 0.35rem 1rem; border-radius: 50px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 0.75rem;
}
.fcard:last-child .fcard-badge { background: var(--g4); color: var(--white); }
.fcard h3 { color: var(--gold2); margin-bottom: 0.75rem; font-size: 1.5rem; }
.fcard p { color: rgba(255,255,255,0.92); margin-bottom: var(--sp-s); font-size: 0.95rem; line-height: 1.75; }
.fcard ul { list-style: none; margin-bottom: var(--sp-s); }
.fcard li { padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.88); font-size: 0.92rem; }
.fcard li:last-child { border-bottom: none; }
.fcard-tag {
    display: inline-block; font-size: 0.75rem; color: var(--gold2);
    background: rgba(200,160,90,0.12); border: 1px solid rgba(200,160,90,0.25);
    padding: 0.4rem 0.9rem; border-radius: 50px; margin-top: 0.5rem;
}
.future-notify {
    text-align: center; padding: var(--sp-m) var(--sp-l);
    background: rgba(255,255,255,0.07); border: 2px dashed var(--goldd);
    border-radius: var(--r-lg);
}
.future-notify h3 { color: var(--white); margin-bottom: 0.75rem; font-size: 1.5rem; }
.future-notify p { color: rgba(255,255,255,0.92); margin-bottom: var(--sp-m); max-width: 550px; margin-left: auto; margin-right: auto; line-height: 1.8; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-m); }
.contact-cards { display: flex; flex-direction: column; gap: var(--sp-s); }
.ccard {
    background: var(--cream); padding: var(--sp-m); border-radius: var(--r);
    transition: all 0.3s;
}
.ccard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(26,74,40,0.1); }
.ccard-main {
    background: linear-gradient(145deg, #0E2A18 0%, #1A4A28 50%, #1F5730 100%);
    color: var(--white);
    border: 1px solid rgba(200,160,90,0.2);
    position: relative;
    overflow: hidden;
}
.ccard-main::after {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,160,90,0.12) 0%, transparent 70%);
    pointer-events: none;
}
/* Heading — bright gold so it pops against dark green */
.ccard-main h3 { color: var(--gold2) !important; font-weight: 700; opacity: 1 !important; font-size: 1.6rem; }
/* Body text — warm cream, not plain white */
.ccard-main p { color: rgba(245,238,218,0.95); line-height: 1.9; margin-bottom: var(--sp-s); }
/* COCOHILL label — bright white bold */
.ccard-main p strong { color: #FFFFFF; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.5px; }
/* Pin icon */
.ccard-main .ccard-ico { filter: none; color: var(--gold2); }
.ccard-main p { color: rgba(255,255,255,0.92); line-height: 1.9; margin-bottom: var(--sp-s); }
.ccard-ico { font-size: 2rem; margin-bottom: 0.6rem; }
.ccard h3 { color: var(--g2); margin-bottom: 0.75rem; }
.ccard p { line-height: 1.8; margin-bottom: var(--sp-s); }
.cdet { display: flex; flex-direction: column; gap: 0.65rem; }
.cdet div { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.95rem; }
.cdet strong { color: var(--g2); font-size: 0.83rem; letter-spacing: 0.5px; }
.cdet a, .cdet span { color: var(--textm); }
.cdet a:hover { color: var(--goldd); }
.csocials { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.csoc {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.2rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem;
    background: var(--white); transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.csoc:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.csoc.insta:hover { background: linear-gradient(135deg, #E4405F, #C13584); color: var(--white); }
.csoc.fb:hover { background: #1877F2; color: var(--white); }
.csoc.wa:hover { background: #25D366; color: var(--white); }
.contact-map { border-radius: var(--r-lg); overflow: hidden; min-height: 500px; box-shadow: 0 10px 40px rgba(26,74,40,0.12); border: 4px solid var(--white); }
.contact-map iframe { width: 100%; height: 100%; min-height: 500px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: linear-gradient(150deg, var(--gd), var(--g1));
    padding: var(--sp-xl) 0 var(--sp-m); position: relative; overflow: hidden;
}
.footer-oil {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(200,160,90,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(200,160,90,0.04) 0%, transparent 50%);
}
.footer .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--sp-l); margin-bottom: var(--sp-m); padding-bottom: var(--sp-m); border-bottom: 1px solid rgba(200,160,90,0.2); }
.footer-logo { height: 75px; width: auto; background: rgba(255,255,255,0.92); padding: 0.8rem 1.2rem; border-radius: var(--r); margin-bottom: var(--sp-s); }
.ft-tagline { font-family: var(--ff-elegant); font-style: italic; color: var(--gold2); font-size: 1.15rem; margin-bottom: 0.75rem; }
.ft-desc { color: rgba(251,247,240,0.90); font-size: 0.93rem; line-height: 1.75; margin-bottom: var(--sp-s); }
.ft-social { display: flex; gap: 0.75rem; }
.ft-social a { width: 44px; height: 44px; background: rgba(200,160,90,0.12); border: 1px solid rgba(200,160,90,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all 0.3s; }
.ft-social a:hover { background: var(--gold); transform: translateY(-3px) rotate(5deg); }
.footer-col h5 { color: var(--gold2); margin-bottom: 1rem; font-size: 1rem; position: relative; padding-bottom: 0.5rem; }
.footer-col h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--goldd); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: rgba(251,247,240,0.88); font-size: 0.92rem; transition: all 0.25s; }
.footer-col a:hover { color: var(--gold2); padding-left: 5px; }
.ft-contact li { color: rgba(251,247,240,0.88); font-size: 0.92rem; padding: 0.2rem 0; }
.footer-wa { margin-top: var(--sp-s); }
.footer-bottom { text-align: center; color: rgba(251,247,240,0.78); font-size: 0.88rem; }
.footer-bottom strong { color: var(--gold2); }

/* Floating WhatsApp */
.fab-wa {
    position: fixed; bottom: 28px; right: 28px;
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 30px rgba(37,211,102,0.5);
    z-index: 998; transition: all 0.35s var(--bounce);
}
.fab-wa:hover { transform: scale(1.12); box-shadow: 0 15px 40px rgba(37,211,102,0.6); }
.fabwa-ico { font-size: 1.8rem; z-index: 2; }
.fabwa-pulse { position: absolute; inset:0; border-radius:50%; background:#25D366; animation: waPulse 2.5s ease-in-out infinite; }
@keyframes waPulse { 0%{transform:scale(1);opacity:0.7;} 100%{transform:scale(1.6);opacity:0;} }
.fabwa-tip {
    position: absolute; right: 75px;
    background: var(--gd); color: var(--white); padding: 0.5rem 1rem;
    border-radius: 10px; font-size: 0.85rem; white-space: nowrap;
    opacity: 0; transform: translateX(8px); transition: all 0.3s; pointer-events: none;
}
.fabwa-tip::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--gd); }
.fab-wa:hover .fabwa-tip { opacity:1; transform:translateX(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .wl-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-m); }
    .biz-cards { grid-template-columns: 1fr; }
    .biz-divider { display: none; }
    .process-steps { flex-direction: column; align-items: center; }
    .pstep-arrow { transform: rotate(90deg); margin: -0.5rem 0; }
    .pstep { max-width: 400px; width: 100%; }
}
@media (max-width: 1100px) {
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .nav-burger { display: flex; }
    .nav-links {
        position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
        background: var(--cream); flex-direction: column; padding: 6rem var(--sp-m) var(--sp-m);
        box-shadow: -10px 0 50px rgba(0,0,0,0.15); transition: right 0.4s var(--ease);
        align-items: flex-start; gap: 0.5rem; overflow-y: auto;
    }
    .nav-links.open { right: 0; }
    .nav-wa { display: none; }
    .about-grid, .contact-grid, .order-wrap { grid-template-columns: 1fr; }
    .about-imgs { height: 350px; }
    .vm-cards, .future-grid, .wl-grid { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .sstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .sstat:nth-last-child(-n+2) { border-bottom: none; }
    .hero-btns, .hero-badges { flex-direction: column; align-items: flex-start; }
    .wl-cta-box { flex-direction: column; text-align: center; }
    .wl-cta-right { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    :root { --sp-xl: 3.5rem; --sp-l: 2.5rem; }
    .wrap { padding: 0 1rem; }
    .topbar-inner { font-size: 0.74rem; gap: 0.75rem; }
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .pcard-star { transform: scale(1); }
    .of-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-btns { width: 100%; }
    .btn { width: 100%; }
    .vm-problem { flex-direction: column; }
    .wl-cta-box { padding: var(--sp-m); }
    .future-notify { padding: var(--sp-m); }
}

/* ── Animations on scroll ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-l.visible { opacity: 1; transform: translateX(0); }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-r.visible { opacity: 1; transform: translateX(0); }

/* ── Live Admin Data Styles ───────────────────────────────── */
.live-price {
    display: inline-block;
    font-family: var(--ff-title);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--g2);
    margin-bottom: 0.25rem;
}
.pcard-star .live-price { color: var(--gold2); }

.in-stock {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2D7A3E;
    margin-bottom: 0.5rem;
}
.out-of-stock {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #C0392B;
    margin-bottom: 0.5rem;
}
.pcard-price { text-align: center; margin-bottom: 0.25rem; }
.pcard-stock { text-align: center; margin-bottom: 0.25rem; }

/* Out of stock card — greyed out */
.pcard.oos { opacity: 0.65; filter: grayscale(0.4); pointer-events: none; }
.pcard.oos .btn { background: #ccc !important; color: #888 !important; cursor: not-allowed; }
.pcard.oos::after {
    content: 'OUT OF STOCK';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-15deg);
    font-size: 1.1rem; font-weight: 800; color: #C0392B;
    border: 3px solid #C0392B; padding: 0.5rem 1.5rem; border-radius: 8px;
    pointer-events: none; letter-spacing: 2px; background: rgba(255,255,255,0.85);
    z-index: 10;
}