/*
================================================
  ES COKELAT SEROJA — Main Stylesheet
  Dark Theme | Clean | No Duplicates
  + Mobile Responsive (terintegrasi)
================================================
*/

/* ── CSS VARIABLES ── */
:root {
    --red:         #E3651D;
    --orange:      #f59e0b;
    --green:       #BED754;
    --bg:          #ffffff;
    --bg-card:     #faf6f2;
    --bg-card2:    #fdfaf7;
    --text:        #3b2416;
    --muted:       #5a5a5a;
    --muted-light: #8a8a8a;
    --border:      rgba(107,66,38,0.25);
    --shadow-sm:   0 4px 12px rgba(107,66,38,0.08);
    --shadow-md:   0 8px 24px rgba(107,66,38,0.12);
    --shadow-lg:   0 12px 35px rgba(107,66,38,0.16);
    --transition:  all 0.3s cubic-bezier(0.4,0,0.2,1);
    /* Extended palette */
    --primary-color: #6b4226;
    --primary-dark:  #4b2c20;
    --primary-light: #8b5a3c;
    --accent-color:  #f59e0b;
    --text-dark:     #4A2810;
    --text-gray:     #6b7280;
    --bg-light:      #fef8f3;
    --bg-white:      #ffffff;
}

/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.6; color:var(--text); background:var(--bg);
    overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; color:inherit; transition:var(--transition); -webkit-tap-highlight-color:transparent; }
button,.btn,a.btn { min-height:44px; -webkit-tap-highlight-color:transparent; }
input,textarea,select { font-size:16px; -webkit-appearance:none; appearance:none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#fef8f3; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--red),var(--orange)); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--orange); }

/* ── SELECTION ── */
::selection { background:rgba(245,158,11,0.25); color:#4b2c20; }

/* ── ACCESSIBILITY ── */
*:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
    background:linear-gradient(135deg,#ffffff 0%,#fef8f3 100%) !important;
    padding:1rem 2rem; box-shadow:0 2px 16px rgba(107,66,38,0.08); transition:var(--transition);
}
.navbar.scrolled { backdrop-filter:blur(10px); box-shadow:0 4px 20px rgba(107,66,38,0.12); }
.navbar-brand { font-weight:700; font-size:1.25rem; color:var(--red) !important; }
.navbar-nav .nav-link {
    color:#4b2c20 !important; font-weight:500;
    padding:0.5rem 1rem !important; margin:0 0.25rem;
    border-radius:8px; transition:var(--transition);
}
.navbar-nav .nav-link:hover { background:rgba(107,66,38,0.06); color:var(--orange) !important; }

/* ══════════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════════ */
.sec-badge {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.5rem 1.2rem;
    background:rgba(107,66,38,0.08); color:var(--red);
    border:1px solid rgba(107,66,38,0.18); border-radius:50px;
    font-size:0.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.6px; margin-bottom:0.75rem;
}
.sec-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--text); line-height:1.2; }
.sec-sub { font-size:1rem; color:var(--muted); max-width:560px; margin:0.75rem auto 0; line-height:1.7; }
.sec-header { margin-bottom:3rem; }
.hl { background:linear-gradient(135deg,var(--red),var(--orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ══════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════ */
.hero-section { padding:130px 0 90px; background:linear-gradient(135deg,#fef8f3 0%,#ffffff 50%,#fef8f3 100%); position:relative; overflow:hidden; }

.hero-blobs { position:absolute; inset:0; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; opacity:0.07; animation:blobMorph 18s ease-in-out infinite; }
.blob-1 { width:600px; height:600px; background:linear-gradient(135deg,#f59e0b,#fbbf24); top:-200px; right:-150px; }
.blob-2 { width:400px; height:400px; background:linear-gradient(225deg,#6b4226,#8b5a3c); bottom:-100px; left:-100px; animation-delay:5s; animation-duration:22s; }
.blob-3 { width:250px; height:250px; background:radial-gradient(circle,#f59e0b,transparent); top:50%; left:45%; animation-delay:10s; }
@keyframes blobMorph {
    0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; }
    33%      { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; }
    66%      { border-radius:50% 60% 30% 60%/30% 50% 70% 40%; }
}

.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:1; }
.p { position:absolute; width:7px; height:7px; background:radial-gradient(circle,rgba(245,158,11,0.5) 0%,transparent 70%); border-radius:50%; opacity:0.3; animation:floatP 18s ease-in-out infinite; }
.p1{top:15%;left:10%;animation-duration:15s;}
.p2{top:60%;left:80%;animation-delay:2s;}
.p3{top:35%;left:30%;animation-delay:4s;animation-duration:22s;}
.p4{top:80%;left:55%;animation-delay:1s;animation-duration:20s;}
.p5{top:25%;left:90%;animation-delay:3s;animation-duration:16s;}
@keyframes floatP {
    0%,100%{transform:translate(0,0) scale(1);opacity:0.4;}
    33%{transform:translate(40px,-50px) scale(1.2);opacity:0.6;}
    66%{transform:translate(-25px,-80px) scale(0.8);opacity:0.2;}
}

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

.hero-eyebrow {
    display:inline-flex; align-items:center; gap:0.65rem;
    padding:0.55rem 1.1rem 0.55rem 0.75rem;
    background:rgba(107,66,38,0.08); border:1px solid rgba(107,66,38,0.18);
    border-radius:50px; font-size:0.82rem; font-weight:700; color:var(--red);
    letter-spacing:0.3px; margin-bottom:1.5rem; width:fit-content;
}
.eyebrow-pulse {
    width:8px; height:8px; background:var(--orange); border-radius:50%;
    box-shadow:0 0 0 0 rgba(245,158,11,0.6); animation:eyePulse 2s infinite; flex-shrink:0;
}
@keyframes eyePulse {
    0%  {box-shadow:0 0 0 0 rgba(245,158,11,0.6);}
    70% {box-shadow:0 0 0 8px rgba(245,158,11,0);}
    100%{box-shadow:0 0 0 0 rgba(245,158,11,0);}
}

.hero-title {
    font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900; line-height:1.18;
    color:var(--text); margin-bottom:1.5rem; letter-spacing:-0.5px;
}
.hero-grad-text {
    background:linear-gradient(135deg,var(--orange) 0%,#f59e0b 50%,var(--red) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block;
}
.hero-desc { font-size:1.05rem; color:var(--muted); max-width:520px; line-height:1.8; margin-bottom:2.4rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.btn-hero-primary {
    display:inline-flex; align-items:center; gap:0.85rem;
    padding:0.9rem 1.1rem 0.9rem 1.8rem;
    background:linear-gradient(135deg,var(--red),var(--orange));
    color:white; border-radius:14px; font-weight:700; font-size:0.97rem;
    box-shadow:0 8px 28px rgba(107,66,38,0.3); transition:var(--transition);
    text-decoration:none; position:relative; overflow:hidden;
}
.btn-hero-primary::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,var(--orange),#fbbf24); opacity:0; transition:opacity 0.35s;
}
.btn-hero-primary span,.btn-hero-primary .bh-arrow { position:relative; z-index:1; }
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(107,66,38,0.4); color:white; }
.btn-hero-primary:hover::before { opacity:1; }
.bh-arrow {
    width:34px; height:34px; background:rgba(255,255,255,0.2); border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:0.9rem; transition:transform 0.3s;
}
.btn-hero-primary:hover .bh-arrow { transform:translateX(4px); }

.btn-hero-outline {
    display:inline-flex; align-items:center; gap:0.7rem; padding:1rem 2rem;
    border:2px solid rgba(107,66,38,0.2); color:#6b4226;
    border-radius:14px; font-weight:600; font-size:0.97rem; transition:var(--transition);
}
.btn-hero-outline:hover { border-color:var(--orange); color:var(--orange); background:rgba(245,158,11,0.06); transform:translateY(-3px); }

.hero-img-wrap { position:relative; animation:heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} }

.hero-glow-circle {
    position:absolute; width:480px; height:480px;
    background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 65%);
    border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);
    animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.8;}
    50%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}
}
.hero-product-img {
    width:100%; max-width:480px; margin:0 auto; position:relative; z-index:2;
    filter:drop-shadow(0 24px 48px rgba(74,40,16,0.35));
}
.hero-ring-1,.hero-ring-2 {
    position:absolute; border-radius:50%; border:1px solid rgba(107,66,38,0.1);
    top:50%; left:50%; transform:translate(-50%,-50%);
    animation:ringExpand 4s ease-in-out infinite; pointer-events:none;
}
.hero-ring-1{width:520px;height:520px;}
.hero-ring-2{width:650px;height:650px;animation-delay:1.5s;border-color:rgba(107,66,38,0.06);}
@keyframes ringExpand {
    0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1);}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}
}

.float-badge {
    position:absolute; display:flex; align-items:center; gap:0.7rem;
    padding:0.85rem 1.2rem; background:rgba(255,255,255,0.95);
    border:1px solid rgba(107,66,38,0.1); border-radius:16px;
    box-shadow:0 12px 36px rgba(74,40,16,0.1); backdrop-filter:blur(10px);
    z-index:3; animation:fbFloat 3s ease-in-out infinite;
}
.fb-1{top:10%;right:-4%;animation-delay:0s;}
.fb-2{bottom:18%;left:-4%;animation-delay:1.2s;}
.fb-3{bottom:52%;right:-6%;animation-delay:0.6s;flex-direction:column;text-align:center;gap:0.3rem;}
@keyframes fbFloat { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-12px) rotate(1deg);} }
.fb-icon { width:38px;height:38px;background:linear-gradient(135deg,var(--red),var(--orange));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:white;flex-shrink:0; }
.fb-text { display:flex;flex-direction:column;gap:0.1rem; }
.fb-title { font-size:0.88rem;font-weight:800;color:var(--text); }
.fb-sub   { font-size:0.72rem;color:var(--muted);font-weight:500; }
.fb-stars { color:var(--orange);font-size:0.82rem;display:flex;gap:0.1rem; }

.hero-stats-row {
    display:flex; align-items:center; gap:1.5rem; margin-top:2.5rem;
    padding:1.25rem 1.5rem; background:rgba(107,66,38,0.04);
    border:1px solid rgba(107,66,38,0.1); border-radius:16px; width:fit-content;
}
.hsr-item { display:flex; flex-direction:column; }
.hsr-num  { font-size:1.65rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hsr-suf  { font-size:1.1rem;font-weight:900;color:var(--orange);display:inline; }
.hsr-lbl  { font-size:0.72rem;color:var(--muted);font-weight:600;margin-top:4px; }
.hsr-sep  { width:1px;height:36px;background:rgba(107,66,38,0.12); }

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.marquee-section { overflow:hidden; background:linear-gradient(135deg,var(--red),var(--orange)); padding:0.85rem 0; position:relative; z-index:4; }
.marquee-track   { display:flex; width:max-content; animation:marqueeMove 35s linear infinite; }
@keyframes marqueeMove { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-item    { display:inline-flex;align-items:center;gap:0.5rem;padding:0 2rem;font-size:0.82rem;font-weight:700;color:rgba(255,255,255,0.9);white-space:nowrap; }
.marquee-item i  { color:rgba(255,255,255,0.6);font-size:0.75rem; }
.marquee-sep     { color:rgba(255,255,255,0.4); }

/* ══════════════════════════════════════════
   FEATURES SECTION
══════════════════════════════════════════ */
.features-section { padding:80px 0; background:var(--bg-card2); position:relative; z-index:5; }
.feat-box {
    padding:2rem 1.6rem; text-align:center;
    background:linear-gradient(145deg,#ffffff,#fef8f3);
    border:1px solid var(--border); border-radius:20px; height:100%;
    transition:var(--transition); position:relative; overflow:hidden;
}
.feat-box::before {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--red),var(--orange));
    transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.feat-box:hover { transform:translateY(-8px); box-shadow:0 16px 48px rgba(74,40,16,0.1); border-color:rgba(107,66,38,0.15); }
.feat-box:hover::before { transform:scaleX(1); }
.feat-icon { width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1.2rem;transition:transform 0.4s ease; }
.feat-box:hover .feat-icon { transform:scale(1.1) rotate(-5deg); }
.feat-box h4 { font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:0.6rem; }
.feat-box p  { font-size:0.88rem;color:var(--muted);line-height:1.65;margin:0; }

/* ══════════════════════════════════════════
   BEST SELLER
══════════════════════════════════════════ */
.bestseller-section { padding:100px 0; background:var(--bg); }
.prod-card {
    background:#ffffff; border:1px solid var(--border);
    border-radius:22px; overflow:hidden; height:100%; display:flex; flex-direction:column;
    transition:var(--transition); position:relative; box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.prod-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(107,66,38,0.2); }
.prod-number { position:absolute;top:1rem;left:1rem;font-size:4rem;font-weight:900;color:rgba(107,66,38,0.05);line-height:1;z-index:0;user-select:none; }
.prod-img-wrap { position:relative;padding-top:70%;background:#fef8f3;overflow:hidden; }
.prod-img-wrap img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease; }
.prod-card:hover .prod-img-wrap img { transform:scale(1.1); }
.prod-badge { position:absolute;top:1rem;right:1rem;padding:0.4rem 1rem;border-radius:50px;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;z-index:2; }
.badge-bs  { background:linear-gradient(135deg,var(--red),var(--orange));color:white; }
.badge-tr  { background:linear-gradient(135deg,#ef4444,#dc2626);color:white;animation:badgePulse 2s infinite; }
.badge-new { background:linear-gradient(135deg,#10b981,#059669);color:white; }
@keyframes badgePulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.06);} }
.prod-overlay { position:absolute;inset:0;background:rgba(107,66,38,0.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition); }
.prod-card:hover .prod-overlay { opacity:1; }
.btn-order-quick { padding:0.75rem 2rem;background:white;color:var(--red);border-radius:50px;font-weight:700;font-size:0.9rem;transform:translateY(16px);transition:var(--transition); }
.prod-card:hover .btn-order-quick { transform:translateY(0); }
.btn-order-quick:hover { background:var(--orange);color:white; }
.prod-body  { padding:1.4rem;flex:1;display:flex;flex-direction:column; }
.prod-name  { font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:0.4rem;transition:color 0.3s; }
.prod-card:hover .prod-name { color:var(--orange); }
.prod-desc  { font-size:0.82rem;color:var(--muted);line-height:1.6;margin-bottom:auto; }
.prod-foot  { display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--border); }
.prod-price  { font-size:1.3rem;font-weight:900;color:var(--red); }
.prod-rating { display:flex;align-items:center;gap:0.3rem;color:var(--orange);font-weight:700;font-size:0.88rem; }
.btn-view-all { display:inline-flex;align-items:center;padding:1rem 2.5rem;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border-radius:50px;font-weight:700;font-size:0.97rem;box-shadow:0 10px 28px rgba(107,66,38,0.3);transition:var(--transition); }
.btn-view-all:hover { transform:translateY(-3px);box-shadow:0 16px 38px rgba(107,66,38,0.4);color:white; }

/* ══════════════════════════════════════════
   WHY US
══════════════════════════════════════════ */
.whyus-section { padding:100px 0; background:var(--bg-card2); position:relative; overflow:hidden; }
.whyus-bg-text { position:absolute;font-size:clamp(6rem,15vw,14rem);font-weight:900;color:rgba(107,66,38,0.03);top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;user-select:none; }
.whyus-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.why-card {
    display:flex; align-items:flex-start; gap:1rem; padding:1.5rem;
    background:#ffffff;
    border:1px solid var(--border); border-radius:18px;
    transition:var(--transition); position:relative; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.05);
}
.why-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(107,66,38,0.2); }
.why-icon { width:46px;height:46px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.why-content h4 { font-size:0.97rem;font-weight:800;color:var(--text);margin-bottom:0.3rem; }
.why-content p  { font-size:0.82rem;color:var(--muted);line-height:1.6;margin:0; }
.why-number { position:absolute;bottom:-0.5rem;right:0.75rem;font-size:5rem;font-weight:900;color:rgba(107,66,38,0.04);line-height:1;user-select:none; }

/* ══════════════════════════════════════════
   PROMO BANNER
══════════════════════════════════════════ */
.promo-section { padding:60px 0; background:var(--bg); }
.promo-banner {
    display:flex; align-items:center; justify-content:space-between; gap:2rem;
    padding:3rem; background:linear-gradient(135deg,rgba(107,66,38,0.08),rgba(245,158,11,0.06));
    border:1px solid rgba(107,66,38,0.15); border-radius:28px;
    position:relative; overflow:hidden;
}
.promo-banner::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(245,158,11,0.08) 0%,transparent 60%);pointer-events:none; }
.promo-left { position:relative;z-index:1; }
.promo-tag { display:inline-flex;align-items:center;gap:0.4rem;padding:0.4rem 1rem;background:rgba(107,66,38,0.1);border:1px solid rgba(107,66,38,0.2);border-radius:50px;font-size:0.75rem;font-weight:700;color:var(--red);margin-bottom:1rem; }
.promo-title { font-size:clamp(1.3rem,3vw,1.9rem);font-weight:900;color:var(--text);margin-bottom:0.7rem;line-height:1.3; }
.promo-title span { color:var(--orange); }
.promo-sub  { font-size:0.9rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem;max-width:500px; }
.btn-promo  { display:inline-flex;align-items:center;gap:0.6rem;padding:0.9rem 2rem;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border-radius:50px;font-weight:700;font-size:0.97rem;box-shadow:0 8px 24px rgba(107,66,38,0.3);transition:var(--transition); }
.btn-promo:hover { transform:translateY(-3px);box-shadow:0 14px 32px rgba(107,66,38,0.4);color:white; }
.promo-right { flex-shrink:0;position:relative;z-index:1; }
.promo-deal-badge { width:130px;height:130px;background:linear-gradient(135deg,var(--red),var(--orange));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 36px rgba(107,66,38,0.35);animation:heroFloat 3s ease-in-out infinite; }
.deal-pct   { font-size:1.8rem;font-weight:900;color:white;line-height:1; }
.deal-off   { font-size:1rem;font-weight:800;color:rgba(255,255,255,0.9); }
.deal-label { font-size:0.65rem;font-weight:600;color:rgba(255,255,255,0.7);margin-top:2px; }

/* ══════════════════════════════════════════
   OUR STORY
══════════════════════════════════════════ */
.story-section { padding:100px 0; background:var(--bg-card2); position:relative; }
.story-glow { position:absolute;top:0;right:0;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.06) 0%,transparent 65%);pointer-events:none; }
.story-imgs { position:relative;padding-bottom:3rem; }
.story-main-wrap { border-radius:24px;overflow:hidden; }
.story-main { width:100%;border-radius:22px;box-shadow:var(--shadow-lg);transition:transform 0.4s ease; }
.story-main-wrap:hover .story-main { transform:scale(1.03); }
.story-float-wrap { position:absolute;bottom:-2rem;right:-2rem;width:48%;border-radius:16px;overflow:hidden; }
.story-float { width:100%;border-radius:14px;border:6px solid var(--bg-card2);box-shadow:var(--shadow-lg); }
.story-years-badge {
    position:absolute;top:-1.5rem;left:-1.5rem;width:110px;height:110px;
    background:linear-gradient(135deg,var(--red),var(--orange));border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:white;z-index:5;box-shadow:0 10px 32px rgba(117,14,33,0.5);
    animation:yearsRotate 20s linear infinite;
}
.syb-num { font-size:1.9rem;font-weight:900;line-height:1; }
.syb-txt { font-size:0.68rem;font-weight:700;text-align:center;line-height:1.3;margin-top:3px; }
@keyframes yearsRotate { from{transform:rotate(0deg);}to{transform:rotate(360deg);} }
.story-txt { font-size:0.97rem;color:var(--muted);line-height:1.85;margin-bottom:1.2rem; }
.story-feats { display:flex;flex-direction:column;gap:1.2rem;margin-top:2rem; }
.story-feat-item { display:flex;align-items:flex-start;gap:1rem;padding:1rem;border-radius:14px;transition:var(--transition);border:1px solid transparent; }
.story-feat-item:hover { background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.07);transform:translateX(5px); }
.sfi-icon { width:48px;height:48px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:transform 0.3s; }
.story-feat-item:hover .sfi-icon { transform:rotate(-8deg) scale(1.08); }
.story-feat-item h4 { font-size:0.97rem;font-weight:800;color:var(--text);margin-bottom:0.2rem; }
.story-feat-item p  { font-size:0.83rem;color:var(--muted);margin:0;line-height:1.6; }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.testi-section { padding:100px 0; background:var(--bg); }
.testi-filter { display:flex;justify-content:center;gap:0.65rem;flex-wrap:wrap;margin:2.5rem 0; }
.tf-btn { display:inline-flex;align-items:center;gap:0.45rem;padding:0.6rem 1.2rem;border:1px solid rgba(107,66,38,0.12);border-radius:50px;background:#ffffff;color:var(--muted);font-weight:700;font-size:0.85rem;cursor:pointer;transition:var(--transition);font-family:inherit; }
.tf-btn i { color:var(--orange); }
.tf-btn:hover { border-color:rgba(107,66,38,0.3);color:var(--red); }
.tf-btn.active { background:linear-gradient(135deg,var(--red),var(--orange));border-color:transparent;color:white;box-shadow:0 6px 18px rgba(107,66,38,0.3); }
.tf-btn.active i { color:white; }
.tf-count { background:rgba(107,66,38,0.1);padding:0.15rem 0.5rem;border-radius:10px;font-size:0.75rem; }
.testi-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;margin-top:1.5rem; }
.testi-card { display:flex;flex-direction:column;background:#ffffff;border:1px solid var(--border);border-radius:20px;padding:1.6rem;transition:opacity 0.2s ease,transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 4px 16px rgba(0,0,0,0.05); }
.testi-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(107,66,38,0.2); }
.tc-hidden { display:none; }
.tc-head { display:flex;align-items:center;gap:0.9rem;margin-bottom:1rem; }
.tc-avatar { width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(107,66,38,0.15); }
.tc-head h4 { font-size:0.97rem;font-weight:800;color:var(--text);margin:0 0 0.25rem; }
.tc-stars { display:flex;gap:0.1rem; }
.tc-stars i { color:var(--orange);font-size:0.82rem; }
.tc-stars .bi-star { color:rgba(107,66,38,0.15); }
.tc-text { font-size:0.88rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;flex:1; }
.tc-foot { padding-top:0.8rem;border-top:1px solid var(--border); }
.tc-verified { font-size:0.78rem;font-weight:700;color:#25D366;display:flex;align-items:center;gap:0.3rem; }
.btn-show-more { padding:0.75rem 2.2rem;background:transparent;border:1px solid rgba(107,66,38,0.15);color:var(--muted);border-radius:50px;font-weight:700;font-size:0.9rem;cursor:pointer;transition:var(--transition);font-family:inherit;display:inline-flex;align-items:center;gap:0.5rem; }
.btn-show-more:hover { border-color:var(--orange);color:var(--orange); }
.show-more-wrap { text-align:center;margin-top:2.5rem;display:block; }

/* ══════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════ */
.cta-section { padding:80px 0;background:linear-gradient(135deg,#fef8f3 0%,#6b4226 100%);position:relative;overflow:hidden; }
.cta-circles { position:absolute;inset:0;pointer-events:none; }
.cc { position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,0.2) 0%,transparent 65%);animation:ccFloat 20s ease-in-out infinite; }
.cc1{width:400px;height:400px;top:-100px;right:-100px;}
.cc2{width:300px;height:300px;bottom:-80px;left:-80px;animation-delay:7s;}
.cc3{width:200px;height:200px;top:50%;left:50%;animation-delay:14s;}
@keyframes ccFloat { 0%,100%{transform:translate(0,0) scale(1);opacity:0.3;}50%{transform:translate(25px,-25px) scale(1.1);opacity:0.5;} }
.cta-card { background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:24px;padding:3rem;position:relative;z-index:2; }
.cta-icon { width:72px;height:72px;background:rgba(255,255,255,0.2);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;font-size:2.2rem;color:var(--orange);margin-bottom:1.3rem;animation:bounce 2.5s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
.cta-title { font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:white;margin-bottom:0.5rem; }
.cta-sub   { font-size:1.05rem;color:rgba(255,255,255,0.85);margin:0; }
.btn-cta-order { display:inline-flex;align-items:center;padding:1.1rem 2.5rem;background:var(--orange);color:white;border-radius:50px;font-weight:800;font-size:1.05rem;box-shadow:0 10px 28px rgba(245,158,11,0.4);transition:var(--transition); }
.btn-cta-order:hover { transform:scale(1.05) translateY(-3px);box-shadow:0 16px 36px rgba(245,158,11,0.55);color:white; }

/* ══════════════════════════════════════════
   FLOATING WA & BACK TO TOP
══════════════════════════════════════════ */




/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */
.about-hero { padding:130px 0 90px;background:linear-gradient(135deg,#fef8f3 0%,#ffffff 100%);position:relative;overflow:hidden; }
.about-hero::before { content:'';position:absolute;top:-30%;right:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 65%);border-radius:50%; }
.about-main-image { width:100%;border-radius:28px;box-shadow:var(--shadow-lg);transition:var(--transition); }
.about-main-image:hover { transform:scale(1.02); }
.about-badge-float { position:absolute;bottom:-20px;right:30px;background:linear-gradient(135deg,var(--red),var(--orange));padding:1.3rem 1.8rem;border-radius:18px;box-shadow:0 12px 32px rgba(107,66,38,0.35);animation:fbFloat 3s ease-in-out infinite; }
.badge-number { display:block;font-size:1.8rem;font-weight:900;color:white;line-height:1; }
.about-badge { display:inline-block;padding:0.5rem 1.3rem;background:rgba(107,66,38,0.08);color:var(--red);border:1px solid rgba(107,66,38,0.2);border-radius:50px;font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:1.2rem; }
.about-title { font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:var(--text);line-height:1.2;margin-bottom:1.3rem; }
.about-desc  { font-size:1rem;color:var(--muted);line-height:1.85;margin-bottom:1.2rem; }
.about-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2rem 0;margin:2.5rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.stat-box { text-align:center;transition:var(--transition); }
.stat-box:hover { transform:translateY(-5px); }
.stat-number { font-size:2.2rem;font-weight:900;line-height:1;margin-bottom:0.4rem;background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.stat-label { font-size:0.88rem;color:var(--muted);font-weight:600;margin:0; }
.btn-about-cta { display:inline-flex;align-items:center;gap:0.7rem;padding:1.1rem 2.5rem;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 10px 28px rgba(107,66,38,0.3);transition:var(--transition);margin-top:1.2rem; }
.btn-about-cta:hover { transform:translateY(-3px);box-shadow:0 16px 36px rgba(107,66,38,0.4);color:white; }
.story-journey { padding:100px 0;background:var(--bg-card2); }
.timeline-item { display:flex;gap:2rem;margin-bottom:2.5rem; }
.timeline-year { flex-shrink:0;width:110px;text-align:right; }
.year-badge { display:inline-block;padding:0.65rem 1.3rem;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border-radius:50px;font-weight:800;font-size:1.05rem;box-shadow:0 6px 18px rgba(117,14,33,0.35); }
.timeline-content { flex:1;padding:1.8rem;background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:18px;transition:var(--transition); }
.timeline-content:hover { transform:translateX(8px);box-shadow:var(--shadow-md); }
.timeline-content h4 { font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:0.6rem; }
.timeline-content p  { font-size:0.93rem;color:var(--muted);line-height:1.8;margin:0; }
.our-values { padding:100px 0;background:var(--bg); }
.value-card { background:var(--bg-card);padding:2.5rem;border-radius:22px;text-align:center;border:1px solid var(--border);height:100%;transition:var(--transition);position:relative;overflow:hidden; }
.value-card::before { content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),var(--orange),var(--green));transform:scaleX(0);transition:transform 0.4s ease; }
.value-card:hover::before { transform:scaleX(1); }
.value-card:hover { transform:translateY(-10px);box-shadow:var(--shadow-lg); }
.value-icon { width:72px;height:72px;margin:0 auto 1.3rem;background:linear-gradient(135deg,var(--red),var(--orange));border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:white;transition:var(--transition); }
.value-card:hover .value-icon { transform:rotate(360deg) scale(1.1); }
.value-title { font-size:1.15rem;font-weight:800;color:var(--text);margin-bottom:0.8rem; }
.value-desc  { font-size:0.88rem;color:var(--muted);line-height:1.7;margin:0; }
.team-section { padding:100px 0;background:var(--bg-card2); }
.team-card { background:var(--bg-card);border-radius:22px;overflow:hidden;border:1px solid var(--border);transition:var(--transition); }
.team-card:hover { transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:rgba(227,101,29,0.3); }
.team-img-wrap { position:relative;padding-top:100%;overflow:hidden;background:var(--bg-card2); }
.team-img-wrap img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease; }
.team-card:hover .team-img-wrap img { transform:scale(1.1); }
.team-info { padding:2rem;text-align:center; }
.team-name { font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:0.4rem;transition:var(--transition); }
.team-card:hover .team-name { color:var(--orange); }
.team-role { font-size:0.9rem;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.9rem; }
.team-desc { font-size:0.88rem;color:var(--muted);line-height:1.7;margin:0; }
.cta-about { padding:100px 0;background:linear-gradient(135deg,#4b2c20 0%,#6b4226 100%);position:relative;overflow:hidden; }
.cta-about::before { content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.15) 0%,transparent 65%);border-radius:50%; }
.cta-content { position:relative;z-index:2; }
.cta-main-title { font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:white;margin-bottom:1rem; }
.cta-main-sub   { font-size:1.1rem;color:rgba(255,255,255,0.85);margin-bottom:2.5rem; }
.cta-btns { display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap; }
.btn-cta-green { display:inline-flex;align-items:center;gap:0.7rem;padding:1.1rem 2.8rem;background:var(--green);color:var(--bg);border-radius:50px;font-weight:800;font-size:1rem;box-shadow:0 10px 28px rgba(190,215,84,0.35);transition:var(--transition); }
.btn-cta-green:hover { transform:translateY(-3px) scale(1.05);box-shadow:0 16px 36px rgba(190,215,84,0.5);color:var(--bg); }
.btn-cta-white { display:inline-flex;align-items:center;gap:0.7rem;padding:1.1rem 2.8rem;border:2px solid rgba(255,255,255,0.4);color:white;border-radius:50px;font-weight:700;font-size:1rem;transition:var(--transition); }
.btn-cta-white:hover { background:rgba(255,255,255,0.1);border-color:white;color:white;transform:translateY(-3px); }

/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */
.contact-hero { padding:130px 0 80px;background:linear-gradient(135deg,#fef8f3 0%,#ffffff 100%);position:relative;overflow:hidden; }
.contact-hero::before { content:'';position:absolute;top:-30%;right:-15%;width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 65%);border-radius:50%; }
.contact-info { padding:90px 0;background:var(--bg-card2); }
.info-card { background:#ffffff;border:1px solid var(--border);border-radius:20px;padding:2.4rem;transition:var(--transition);position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.05); }
.info-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--orange));transform:scaleX(0);transition:transform 0.5s ease; }
.info-card:hover::before { transform:scaleX(1); }
.info-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.info-card h4 { font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem; }
.info-card p  { font-size:0.93rem;color:var(--muted);line-height:1.8;margin:0; }
.opening-hours { list-style:none;padding:0;margin:0; }
.opening-hours li { display:flex;justify-content:space-between;align-items:center;padding:0.85rem 0;border-bottom:1px solid var(--border);transition:var(--transition); }
.opening-hours li:last-child { border-bottom:none; }
.opening-hours li:hover { padding-left:0.5rem; }
.opening-hours li span:first-child { font-weight:600;color:var(--text);font-size:0.92rem; }
.opening-hours li span:last-child  { font-weight:700;color:var(--orange);font-size:0.92rem; }
.btn-whatsapp { display:inline-flex;align-items:center;justify-content:center;gap:0.7rem;padding:1rem 2rem;width:100%;background:linear-gradient(135deg,#25d366,#1ebe57);color:white;border-radius:14px;font-weight:700;font-size:0.97rem;margin-top:1.2rem;box-shadow:0 8px 22px rgba(37,211,102,0.35);transition:var(--transition); }
.btn-whatsapp:hover { transform:translateY(-3px);box-shadow:0 14px 32px rgba(37,211,102,0.5);color:white; }
.contact-form-card { background:#ffffff;border:1px solid var(--border);border-radius:22px;padding:2.8rem;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.contact-form-card::before { content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--red)); }
.contact-form-card h3 { font-size:1.5rem;font-weight:900;color:var(--text);margin-bottom:0.5rem; }
.contact-form-card>p { font-size:0.9rem;color:var(--muted);margin-bottom:2rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-bottom:1.3rem; }
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#6b7280;margin-bottom:0.5rem; }
.form-group input,.form-group textarea,.form-group select { width:100%;padding:0.9rem 1.1rem;background:#ffffff;border:2px solid #e5e7eb;border-radius:12px;font-size:0.93rem;color:var(--text);font-family:inherit;outline:none;transition:var(--transition);resize:vertical; }
.form-group input::placeholder,.form-group textarea::placeholder { color:#9ca3af; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:rgba(107,66,38,0.5);background:#ffffff;box-shadow:0 0 0 3px rgba(107,66,38,0.08); }
.form-group select option { background:#ffffff; }
.form-group textarea { min-height:140px; }
.btn-contact-submit { width:100%;padding:1.1rem 2rem;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border:none;border-radius:14px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 10px 28px rgba(107,66,38,0.3);font-family:inherit;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:0.7rem; }
.btn-contact-submit:hover { transform:translateY(-3px);box-shadow:0 16px 36px rgba(107,66,38,0.4); }
.faq-section { padding:90px 0;background:var(--bg); }
.faq-item { background:#ffffff;border:1px solid var(--border);border-radius:16px;margin-bottom:1rem;overflow:hidden;transition:var(--transition);box-shadow:0 2px 10px rgba(0,0,0,0.04); }
.faq-item:hover { border-color:rgba(107,66,38,0.2); }
.faq-q { padding:1.3rem 1.6rem;font-weight:700;font-size:0.97rem;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;user-select:none; }
.faq-q i { color:var(--orange);font-size:1.1rem;transition:transform 0.3s ease;flex-shrink:0; }
.faq-item.open .faq-q i { transform:rotate(45deg); }
.faq-a { padding:0 1.6rem;max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease;font-size:0.9rem;color:var(--muted);line-height:1.75; }
.faq-item.open .faq-a { max-height:300px;padding-bottom:1.3rem; }
.location-section { padding:90px 0;background:var(--bg-card2); }
.maps-wrap { width:100%;height:480px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);margin-top:3rem;border:4px solid var(--bg-card);transition:var(--transition); }
.maps-wrap:hover { transform:translateY(-5px);box-shadow:0 24px 60px rgba(74,40,16,0.4); }
.maps-wrap iframe { width:100%;height:100%;border:none; }
.social-btn { display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;color:white;font-size:1.4rem;transition:var(--transition); }
.social-btn:hover { transform:translateY(-4px) scale(1.08);color:white; }
.social-ig     { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-tiktok { background:#000;border:1px solid rgba(255,255,255,0.1); }
.social-wa     { background:linear-gradient(135deg,#25d366,#1ebe57); }
.social-fb     { background:linear-gradient(135deg,#1877f2,#0c63d4); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer { background:linear-gradient(180deg,#1a1a1a 0%,#0a0a0a 100%);color:#ddd;padding:0;position:relative;overflow:hidden; }
.footer-wave { position:relative;width:100%;overflow:hidden;line-height:0;margin-bottom:-1px; }
.footer-wave svg { display:block;width:calc(100% + 1.3px);height:70px; }
.footer-content { padding:80px 0 60px;position:relative; }
.footer-logo { display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem; }
.footer-logo i { font-size:2.2rem;color:var(--orange); }
.footer-logo h3 { color:white;font-weight:700;margin:0;font-size:1.4rem; }
.footer-desc { color:#bbb;font-size:0.9rem;line-height:1.8;margin-bottom:1.3rem; }
.footer-links h4,.footer-contact h4 { color:white;font-weight:700;margin-bottom:1.3rem;font-size:1.05rem;position:relative;padding-bottom:0.65rem; }
.footer-links h4::after,.footer-contact h4::after { content:'';position:absolute;bottom:0;left:0;width:36px;height:3px;background:linear-gradient(90deg,var(--orange),transparent);border-radius:2px; }
.footer-links ul { list-style:none;padding:0;margin:0; }
.footer-links li { margin-bottom:0.65rem; }
.footer-links a { color:#bbb;font-size:0.9rem;display:flex;align-items:center;gap:0.4rem;transition:var(--transition); }
.footer-links a:hover { color:var(--orange);transform:translateX(4px); }
.contact-item { display:flex;gap:0.9rem;margin-bottom:1rem;padding:0.9rem;background:rgba(255,255,255,0.03);border-radius:12px;transition:var(--transition); }
.contact-item:hover { background:rgba(255,255,255,0.06);transform:translateY(-2px); }
.contact-icon { width:42px;height:42px;background:linear-gradient(135deg,var(--orange),#f59e0b);border-radius:11px;display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;flex-shrink:0; }
.contact-label { display:block;font-size:0.7rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.2rem; }
.contact-text a,.contact-text p { color:#bbb;font-size:0.88rem;line-height:1.6;margin:0;text-decoration:none;transition:var(--transition); }
.contact-text a:hover { color:var(--orange); }
.footer-hours { background:rgba(255,255,255,0.04);padding:1.3rem;border-radius:14px;border:1px solid rgba(255,255,255,0.07); }
.footer-hours h5 { color:white;font-size:0.92rem;font-weight:700;margin-bottom:0.9rem;display:flex;align-items:center;gap:0.5rem; }
.footer-hours h5 i { color:var(--orange); }
.hours-item { display:flex;justify-content:space-between;padding:0.65rem 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:0.84rem; }
.hours-item:last-child { border-bottom:none; }
.hours-item span:first-child { color:#bbb; }
.hours-item span:last-child  { color:var(--orange);font-weight:700; }
.footer-bottom { padding:1.2rem 0;border-top:1px solid rgba(255,255,255,0.08);margin-top:1rem; }
.footer-copyright { color:#999;font-size:0.88rem;margin:0; }
.footer-copyright strong { color:var(--orange); }
.social-icons-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem; }
.social-icon { position:relative;width:100%;height:60px;display:flex;align-items:center;justify-content:center;border-radius:16px;color:white;font-size:1.5rem;transition:var(--transition);box-shadow:var(--shadow-sm); }
.social-icon:hover { transform:translateY(-5px) scale(1.05);color:white; }
.social-facebook  { background:linear-gradient(135deg,#1877f2,#0c63d4); }
.social-instagram { background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.social-twitter   { background:linear-gradient(135deg,#1da1f2,#0d8bd9); }
.social-whatsapp  { background:linear-gradient(135deg,#25d366,#1ebe57); }
.footer-stats { display:flex;flex-direction:column;gap:0.75rem; }
.footer-stat-item { display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(255,255,255,0.05);border-radius:12px;transition:var(--transition); }
.footer-stat-item:hover { background:rgba(227,101,29,0.1);transform:translateX(5px); }
.footer-stat-item i    { color:var(--orange);font-size:1.1rem; }
.footer-stat-item span { color:#ddd;font-size:0.88rem;font-weight:500; }
.vision-mission { padding:100px 0;background:var(--bg); }
.vision-card,.mission-card { background:var(--bg-card);padding:3rem;border-radius:24px;box-shadow:var(--shadow-sm);transition:var(--transition);height:100%;position:relative;overflow:hidden;border:1px solid var(--border); }
.vision-card::before,.mission-card::before { content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,var(--red),var(--orange),var(--green));transform:scaleX(0);transition:transform 0.6s ease; }
.vision-card:hover::before,.mission-card:hover::before { transform:scaleX(1); }
.vision-card:hover,.mission-card:hover { transform:translateY(-10px);box-shadow:var(--shadow-lg); }
.vision-card h3,.mission-card h3 { font-size:1.75rem;font-weight:800;color:var(--text);margin-bottom:1.5rem; }
.vision-card p { font-size:1.05rem;color:var(--muted);line-height:1.9; }
.mission-card ul { list-style:none;padding:0; }
.mission-card ul li { font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:1.25rem;padding-left:2.5rem;position:relative;transition:var(--transition); }
.mission-card ul li::before { content:'✓';position:absolute;left:0;top:0;width:28px;height:28px;background:linear-gradient(135deg,var(--red),var(--orange));color:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem; }
.mission-card ul li:hover { padding-left:3rem;color:var(--orange); }
.section-badge    { display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1.4rem;background:linear-gradient(135deg,var(--bg-card),var(--bg-card2));color:var(--orange);border:1px solid rgba(227,101,29,0.35);border-radius:50px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:0.75rem; }
.section-title    { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--text); }
.section-subtitle { font-size:1rem;color:var(--muted);max-width:560px;margin:0.75rem auto 0; }
.section-header   { margin-bottom:4rem; }
.highlight        { background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ══════════════════════════════════════════
   RESPONSIVE ≤ 1024px
══════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero-section { padding:110px 0 80px; }
    .fb-3 { display:none; }
}

/* ══════════════════════════════════════════
   RESPONSIVE ≤ 991px — Tablet
══════════════════════════════════════════ */
@media (max-width:991px) {
    .hero-section   { padding:100px 0 70px; }
    .about-stats    { grid-template-columns:1fr 1fr; }
    .timeline-item  { flex-direction:column;gap:0.8rem; }
    .timeline-year  { width:auto;text-align:left; }
    .story-years-badge { width:90px;height:90px; }
    .syb-num        { font-size:1.6rem; }
    .maps-wrap      { height:400px; }
    .form-row       { grid-template-columns:1fr; }
    .hero-stats-row { flex-wrap:wrap;gap:1rem; }
    .hsr-sep        { display:none; }
    .hero-grad-text { display:inline; }
    .whyus-grid     { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════
   RESPONSIVE ≤ 767px — HP Umum
══════════════════════════════════════════ */
@media (max-width:767px) {

    /* ─── HERO ─── */
    .hero-section   { padding:90px 0 55px; }
    .hero-left      { text-align:center; }
    .hero-eyebrow   { margin:0 auto 1.2rem; }
    .hero-title     { font-size:clamp(1.7rem,7vw,2.2rem); }
    .hero-desc      { font-size:0.92rem;margin:0 auto 1.8rem; }
    .hero-actions   { flex-direction:column;align-items:center;gap:0.75rem; }
    .btn-hero-primary,.btn-hero-outline { width:100%;max-width:320px;justify-content:center; }
    .hero-img-col   { margin-bottom:2rem; }
    .hero-product-img { max-width:240px; }
    .hero-ring-1,.hero-ring-2 { display:none; }
    .fb-1,.fb-2     { padding:0.6rem 0.8rem;gap:0.5rem; }
    .fb-text        { display:none; }
    .fb-icon        { width:30px;height:30px;font-size:0.95rem; }
    .hero-stats-row { gap:1rem;padding:1rem; }
    .hsr-num        { font-size:1.3rem; }

    /* ─── MARQUEE ─── */
    .marquee-track  { animation-duration:22s; }
    .marquee-item   { font-size:0.75rem;padding:0 1.2rem; }

    /* ─── SECTION PADDINGS ─── */
    .features-section   { padding:56px 0; }
    .bestseller-section { padding:64px 0; }
    .story-section      { padding:64px 0; }
    .testi-section      { padding:64px 0; }
    .cta-section        { padding:56px 0; }
    .whyus-section      { padding:64px 0; }
    .promo-section      { padding:48px 0; }

    /* ─── FEATURES 2 KOLOM ─── */
    .features-section .col-md-6 { width:50% !important;flex:0 0 50% !important;max-width:50% !important; }
    .features-section .row { --bs-gutter-x:0.75rem;--bs-gutter-y:0.75rem; }
    .feat-box       { padding:1.4rem 1rem; }
    .feat-icon      { width:48px;height:48px;font-size:1.3rem;border-radius:13px; }
    .feat-box h4    { font-size:0.86rem; }
    .feat-box p     { font-size:0.76rem;line-height:1.5; }

    /* ─── BEST SELLER 2 KOLOM ─── */
    .bestseller-section .col-lg-4,
    .bestseller-section .col-md-6 { width:50% !important;flex:0 0 50% !important;max-width:50% !important; }
    .bestseller-section .row { --bs-gutter-x:0.75rem;--bs-gutter-y:0.75rem; }
    .prod-card      { border-radius:16px; }
    .prod-img-wrap  { padding-top:80%; }
    .prod-body      { padding:0.9rem; }
    .prod-name      { font-size:0.85rem;margin-bottom:0.25rem; }
    .prod-desc      { font-size:0.72rem;line-height:1.5;margin-bottom:0.4rem; }
    .prod-foot      { flex-direction:column;align-items:flex-start;gap:0.2rem;padding-top:0.6rem;margin-top:0.6rem; }
    .prod-price     { font-size:1rem; }
    .prod-rating    { font-size:0.72rem; }
    .prod-badge     { font-size:0.6rem;padding:0.3rem 0.65rem;top:0.5rem;right:0.5rem; }
    .prod-number    { font-size:3rem; }
    .btn-view-all   { padding:0.85rem 1.8rem;font-size:0.88rem; }

    /* ─── WHY US 2 KOLOM ─── */
    .whyus-grid     { grid-template-columns:1fr 1fr !important;gap:0.8rem !important; }
    .why-card       { padding:1.2rem 1rem !important;border-radius:14px !important;flex-direction:column;align-items:flex-start; }
    .why-icon       { width:40px !important;height:40px !important;font-size:1rem !important;border-radius:10px !important;margin-bottom:0.7rem; }
    .why-content h4 { font-size:0.82rem !important; }
    .why-content p  { font-size:0.72rem !important;line-height:1.5 !important; }
    .why-number     { font-size:3.5rem !important; }

    /* ─── PROMO ─── */
    .promo-banner   { flex-direction:column !important;padding:2rem 1.5rem !important;gap:1.5rem !important;text-align:center !important; }
    .promo-title    { font-size:1.35rem !important; }
    .promo-sub      { font-size:0.86rem !important; }
    .btn-promo      { width:100% !important;justify-content:center !important; }
    .promo-deal-badge { margin:0 auto !important;width:110px;height:110px; }
    .deal-pct       { font-size:1.5rem; }

    /* ─── STORY ─── */
    .story-float-wrap { width:42%;bottom:-1rem;right:-1rem; }
    .story-years-badge { width:80px;height:80px;top:-1rem;left:-1rem; }
    .syb-num        { font-size:1.5rem; }
    .syb-txt        { font-size:0.6rem; }
    .story-txt      { font-size:0.9rem; }
    .story-feats    { gap:0.85rem; }
    .story-feat-item { padding:0.8rem; }
    .sfi-icon       { width:42px;height:42px;font-size:1.1rem;border-radius:11px; }
    .story-feat-item h4 { font-size:0.88rem; }
    .story-feat-item p  { font-size:0.78rem; }

    /* ─── TESTIMONIALS 1 KOLOM ─── */
    .testi-grid     { grid-template-columns:1fr !important;gap:1rem !important; }
    .testi-filter   { gap:0.45rem; }
    .tf-btn         { font-size:0.78rem;padding:0.5rem 0.9rem; }
    .tf-count       { font-size:0.68rem; }
    .testi-card     { padding:1.3rem;border-radius:16px; }
    .tc-avatar      { width:44px;height:44px; }
    .tc-head h4     { font-size:0.88rem; }
    .tc-stars i     { font-size:0.72rem; }
    .tc-text        { font-size:0.82rem; }
    .show-more-wrap { display:block; }

    /* ─── CTA ─── */
    .cta-card       { padding:2rem 1.2rem !important;text-align:center !important; }
    .cta-icon       { width:56px;height:56px;font-size:1.7rem;margin-bottom:1rem; }
    .cta-title      { font-size:1.5rem; }
    .cta-sub        { font-size:0.88rem; }
    .btn-cta-order  { width:100%;justify-content:center;padding:1rem;margin-top:1.2rem; }

    /* ─── ABOUT / CONTACT ─── */
    .about-stats    { grid-template-columns:1fr 1fr; }
    .contact-hero   { padding:100px 0 60px; }
    .contact-info   { padding:70px 0; }
    .contact-form-card { padding:2rem 1.5rem; }
    .maps-wrap      { height:320px; }
    .team-section   { padding:70px 0; }
    .our-values     { padding:70px 0; }
    .story-journey  { padding:70px 0; }
    .cta-about      { padding:70px 0; }
    .cta-btns       { flex-direction:column;align-items:center; }
    .btn-cta-green,.btn-cta-white { width:100%;justify-content:center; }

    /* ─── FOOTER ─── */
    .footer-content { padding:60px 0 40px; }

    /* ─── WA & BACK TO TOP ─── */
    .float-wa       { bottom:20px;right:16px; }
    .float-wa-btn   { width:50px;height:50px;font-size:1.5rem; }
    

    /* ─── SHARED LABELS ─── */
    .sec-title      { font-size:clamp(1.5rem,6vw,1.9rem); }
    .sec-sub        { font-size:0.88rem; }
    .sec-badge      { font-size:0.72rem;padding:0.45rem 1rem; }
}

/* ══════════════════════════════════════════
   RESPONSIVE 576–767px — HP Besar / Landscape
   Testimonial 2 kolom
══════════════════════════════════════════ */
@media (min-width:576px) and (max-width:767px) {
    .testi-grid { grid-template-columns:1fr 1fr !important;gap:1rem !important; }
    .testi-card { padding:1.2rem; }
    .tc-text    { font-size:0.8rem; }
}

/* ══════════════════════════════════════════
   RESPONSIVE ≤ 575px — HP Kecil
══════════════════════════════════════════ */
@media (max-width:575px) {
    .hero-title     { font-size:clamp(1.5rem,7.5vw,1.85rem); }
    .hero-product-img { max-width:200px; }
    .feat-icon      { width:44px;height:44px;font-size:1.2rem; }
    .feat-box h4    { font-size:0.8rem; }
    .feat-box p     { font-size:0.72rem; }
    .whyus-grid     { gap:0.65rem !important; }
    .why-card       { padding:0.9rem 0.8rem !important; }
    .why-content h4 { font-size:0.78rem !important; }
    .why-content p  { display:none !important; }
    .testi-filter   { justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:0.4rem;-webkit-overflow-scrolling:touch; }
    .testi-filter::-webkit-scrollbar { height:2px; }
    .testi-filter::-webkit-scrollbar-thumb { background:var(--orange);border-radius:2px; }
    .tf-btn         { flex-shrink:0; }
    .social-icons-grid { grid-template-columns:repeat(4,1fr); }
}

/* ══════════════════════════════════════════
   RESPONSIVE ≤ 400px — HP Sangat Kecil
══════════════════════════════════════════ */
@media (max-width:400px) {
    .hero-section   { padding:70px 0 40px; }
    .hero-title     { font-size:1.4rem; }
    .hero-desc      { font-size:0.85rem; }
    .features-section .col-md-6,
    .bestseller-section .col-md-6,
    .bestseller-section .col-lg-4 { width:50% !important;flex:0 0 50% !important;max-width:50% !important; }
    .prod-img-wrap  { padding-top:85%; }
    .prod-body      { padding:0.65rem; }
    .prod-name      { font-size:0.75rem; }
    .prod-desc      { display:none; }
    .prod-price     { font-size:0.9rem; }
    .prod-rating    { display:none; }
    .about-stats    { grid-template-columns:1fr;gap:1.2rem; }
    .cta-card       { padding:1.8rem 1rem !important; }
    .cta-main-title { font-size:1.4rem; }
    .contact-form-card { padding:1.6rem 1rem; }
    .contact-form-card h3 { font-size:1.3rem; }
    .maps-wrap      { height:260px; }
    .footer-content { padding:50px 0 30px; }
    .sec-title      { font-size:1.3rem; }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
    .navbar,.hero-blobs,.hero-particles,.cta-circles,
    .float-wa,.back-to-top,
    .show-more-wrap,.testi-filter { display:none !important; }
    body { background:white !important;color:black !important; }
}