/* ============================================
   Sandang Garment - Main Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
  --gold: #C9A23F;
  --gold-soft: #E4C878;
  --gold-light: rgba(201,162,63,0.10);
  --black: #1F1D1D;
  --charcoal: #2B2B2B;
  --off-white: #FAF8F2;
  --light-gray: #F3F3F3;
  --white: #FFFFFF;
  --danger: #e74c3c;
  --success: #27ae60;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 48px rgba(0,0,0,0.13);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: all 0.28s ease;
  --nav-height: 80px;
  --section-pad: 96px;
  --section-pad-sm: 60px;
  --section-pad-lg: 120px;

  /* ── Premium additions ── */
  --sg-gold: #C9A23F;
  --sg-gold-light: #E4C878;
  --sg-black: #1F1D1D;
  --sg-dark: #2B2B2B;
  --sg-offwhite: #FAF8F2;
  --sg-light: #F3F3F3;
  --sg-white: #FFFFFF;
  --sg-text: #1F1D1D;
  --sg-muted: #6F6F6F;
  --sg-radius-sm: 10px;
  --sg-radius-md: 16px;
  --sg-radius-lg: 22px;
  --sg-shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --sg-shadow-card: 0 8px 22px rgba(0,0,0,0.06);
  --sg-shadow-elevated: 0 20px 60px rgba(0,0,0,0.12);
  --sg-shadow-glow: 0 12px 26px rgba(201,162,63,0.28);
  --sg-container: 1180px;
  --sg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sg-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--white); line-height: 1.7; font-size: 16px; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; color: var(--black); }
h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.2rem; }
p { margin-bottom: 1rem; }
input,textarea,select,button { font-family: var(--font-body); }

/* --- Layout --- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { color: #666; max-width: 600px; margin: 0 auto; font-size: 1.05rem; }
.section-header .gold-line { width: 60px; height: 3px; background: var(--gold); margin: 16px auto 0; border-radius: 2px; }
.section-alt { background: var(--off-white); }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: var(--transition); text-align: center; justify-content: center; }
.btn-primary { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(201,162,63,0.3); }
.btn-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--white); transform: translateY(-2px); }
.btn-dark { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.btn-dark:hover { background: var(--black); transform: translateY(-2px); }
.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { opacity: 0.85; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }

/* --- Navbar --- */
.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); box-shadow: 0 1px 12px rgba(0,0,0,0.06); height: var(--nav-height); transition: var(--transition); }
.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.1); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); }
.navbar-brand { display: flex; align-items: center; gap: 10px; }
.navbar-logo { height: 45px; width: auto; }
.navbar-brand-text { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; }
.brand-gold { color: var(--gold); }
.navbar-menu { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 28px; }
.nav-link { font-weight: 500; font-size: 0.95rem; color: var(--charcoal); position: relative; padding: 4px 0; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--gold); transition: var(--transition); }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-cta { padding: 10px 22px; font-size: 0.9rem; }
.navbar-toggler { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburger { display: flex; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); transition: var(--transition); }

/* --- Hero --- */
.hero { padding: 140px 0 100px; background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 50%, #3a3a3a 100%); color: var(--white); position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; }
.hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,162,63,0.15) 0%, transparent 70%); border-radius: 50%; }
.hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(228,200,120,0.1) 0%, transparent 70%); border-radius: 50%; }
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero-badge { display: inline-block; background: rgba(201,162,63,0.15); color: var(--gold-soft); padding: 8px 20px; border-radius: 30px; font-size: 0.85rem; font-weight: 500; margin-bottom: 24px; border: 1px solid rgba(201,162,63,0.25); }
.hero h1 { font-size: 3rem; color: var(--white); margin-bottom: 20px; line-height: 1.2; }
.hero h1 span { color: var(--gold); }
.hero p { font-size: 1.15rem; color: rgba(255,255,255,0.8); margin-bottom: 36px; max-width: 560px; line-height: 1.8; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero with background image */
.hero.hero-has-bg { background: none; }
.hero.hero-has-bg::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.6); width: 100%; height: 100%; top: 0; right: 0; border-radius: 0; }
.hero.hero-has-bg::after { display: none; }

/* --- Trust Badges --- */
.trust-section { padding: 50px 0; background: var(--white); border-bottom: 1px solid #eee; margin-top: 0; }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.trust-card { text-align: center; padding: 24px 16px; }
.trust-icon { width: 56px; height: 56px; background: var(--gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--gold); font-size: 1.3rem; }
.trust-card h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.trust-card p { font-size: 0.82rem; color: #888; margin: 0; }

/* --- Product Cards --- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); border: 1px solid #f0f0f0; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.product-card-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; max-width: 100%; max-height: 100%; transition: transform 0.5s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; z-index: 2; }
.product-card-body { padding: 20px; }
.product-card-body h3 { font-size: 1.15rem; margin-bottom: 8px; font-family: var(--font-body); }
.product-card-body p { font-size: 0.9rem; color: #666; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { color: var(--gold); font-weight: 700; font-size: 1rem; margin-bottom: 14px; }
.product-card-actions { display: flex; gap: 8px; }
.product-card-actions .btn { flex: 1; font-size: 0.82rem; padding: 10px 14px; }

/* --- Portfolio --- */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.portfolio-card { position: relative; border-radius: var(--radius); overflow: hidden; height: 280px; cursor: pointer; box-shadow: var(--shadow); }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-card:hover img { transform: scale(1.08); }
.portfolio-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(transparent, rgba(31,29,29,0.9)); color: #fff; transform: translateY(20px); opacity: 0; transition: var(--transition); }
.portfolio-card:hover .portfolio-overlay { transform: translateY(0); opacity: 1; }
.portfolio-overlay h3 { font-size: 1.15rem; color: #fff; margin-bottom: 4px; }
.portfolio-overlay p { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0; }

/* --- Why Choose Us --- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
.why-card { padding: 32px 24px; background: var(--white); border-radius: var(--radius); border: 1px solid #f0f0f0; transition: var(--transition); }
.why-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.why-card .icon { width: 52px; height: 52px; background: var(--gold-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--gold); font-size: 1.3rem; }
.why-card h4 { font-family: var(--font-body); font-weight: 600; margin-bottom: 8px; }
.why-card p { font-size: 0.9rem; color: #666; margin: 0; }

/* --- Process Steps --- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.process-step { text-align: center; padding: 24px 16px; position: relative; }
.process-number { width: 48px; height: 48px; background: var(--gold); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin: 0 auto 16px; }
.process-step h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.process-step p { font-size: 0.82rem; color: #888; margin: 0; }

/* --- Testimonials --- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.testimonial-card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); border: 1px solid #f0f0f0; }
.testimonial-card .star-rating { margin-bottom: 16px; }
.star-rating .star { font-size: 1.1rem; color: #ddd; }
.star-rating .star.filled { color: var(--gold); }
.testimonial-card blockquote { font-style: italic; color: #555; margin-bottom: 20px; line-height: 1.7; font-size: 0.95rem; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-author-info h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.testimonial-author-info p { font-size: 0.8rem; color: #888; margin: 0; }

/* --- FAQ --- */
.faq-list { max-width: 750px; margin: 0 auto; }
.faq-item { border: 1px solid #eee; border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 18px 24px; text-align: left; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--charcoal); transition: var(--transition); }
.faq-question:hover { color: var(--gold); }
.faq-question i { transition: var(--transition); color: var(--gold); font-size: 0.85rem; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer-inner { padding: 0 24px 18px; color: #666; font-size: 0.95rem; line-height: 1.7; }

/* --- Consultation Form --- */
.consult-form-wrapper { max-width: 700px; margin: 0 auto; background: var(--white); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--charcoal); }
.form-control { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--radius-sm); font-size: 0.95rem; transition: var(--transition); background: var(--white); }
.form-control:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,63,0.1); }
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control { appearance: auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 0.8rem; color: #999; margin-top: 4px; }

/* --- Page Header --- */
.page-header { padding: 120px 0 50px; background: linear-gradient(135deg, var(--black), var(--charcoal)); color: var(--white); text-align: center; }
.page-header h1 { color: var(--white); margin-bottom: 12px; font-size: 2.4rem; }
.page-header p { color: rgba(255,255,255,0.7); font-size: 1.05rem; }
.breadcrumb { display: flex; justify-content: center; gap: 8px; margin-top: 16px; font-size: 0.85rem; }
.breadcrumb a { color: var(--gold-soft); }
.breadcrumb span { color: rgba(255,255,255,0.5); }

/* --- Product Detail --- */
.product-detail { padding: 40px 0 80px; margin-top: var(--nav-height); }
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.product-main-img { border-radius: var(--radius); overflow: hidden; background: #ffffff; }
.product-main-img img { width: 100%; max-height: 500px; object-fit: contain; object-position: center; }
.product-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.product-gallery img { height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: var(--transition); }
.product-gallery img:hover, .product-gallery img.active { border-color: var(--gold); }
.product-info h1 { font-size: 2rem; margin-bottom: 16px; }
.product-meta { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; padding: 20px; background: var(--off-white); border-radius: var(--radius-sm); }
.product-meta-item { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.product-meta-item i { color: var(--gold); width: 20px; text-align: center; }
.product-description { color: #555; line-height: 1.8; margin-bottom: 28px; }

/* --- Contact Page --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info-cards { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card { display: flex; gap: 16px; padding: 20px; background: var(--off-white); border-radius: var(--radius-sm); }
.contact-info-card i { color: var(--gold); font-size: 1.3rem; margin-top: 4px; }
.contact-info-card h4 { font-family: var(--font-body); font-weight: 600; margin-bottom: 4px; }
.contact-info-card p { font-size: 0.9rem; color: #666; margin: 0; }
.map-placeholder { width: 100%; height: 300px; background: var(--light-gray); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #999; margin-top: 20px; overflow: hidden; }
.map-placeholder iframe { width: 100%; height: 100%; border: 0; }

/* --- About Page --- */
.about-content { max-width: 800px; margin: 0 auto; }
.about-content p { font-size: 1.05rem; color: #555; line-height: 1.8; }
.about-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }

/* --- Category Filter --- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; justify-content: center; }
.filter-btn { padding: 8px 22px; border: 1px solid #ddd; border-radius: 30px; background: var(--white); cursor: pointer; font-size: 0.88rem; font-weight: 500; transition: var(--transition); }
.filter-btn:hover, .filter-btn.active { background: var(--gold); color: var(--white); border-color: var(--gold); }

/* --- Footer --- */
.footer { background: var(--black); color: rgba(255,255,255,0.75); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-logo { height: 40px; }
.footer h3 { color: var(--white); font-size: 1.2rem; }
.footer h4 { color: var(--white); font-size: 1rem; margin-bottom: 18px; font-family: var(--font-body); }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.footer-links a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 14px; font-size: 0.9rem; }
.footer-contact i { color: var(--gold); margin-top: 3px; min-width: 16px; }
.footer-contact a { color: rgba(255,255,255,0.6); }
.footer-contact a:hover { color: var(--gold); }
.footer-bottom { text-align: center; padding: 24px 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; color: rgba(255,255,255,0.4); }

/* --- Sticky WA --- */
.wa-sticky { position: fixed; bottom: 28px; right: 28px; width: 60px; height: 60px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; z-index: 999; box-shadow: 0 4px 20px rgba(37,211,102,0.35); transition: var(--transition); animation: waPulse 2s infinite; }
.wa-sticky:hover { transform: scale(1.1); background: #20bd5a; }
@keyframes waPulse { 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.35); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,0.55); } }

/* --- Flash Messages --- */
.alert { padding: 14px 20px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* --- Badges --- */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-new { background: #e3f2fd; color: #1565c0; }
.badge-contacted { background: #fff3e0; color: #e65100; }
.badge-waiting { background: #fce4ec; color: #c62828; }
.badge-deal { background: #e8f5e9; color: #2e7d32; }
.badge-cancelled { background: #f5f5f5; color: #757575; }
.badge-inactive { background: #f5f5f5; color: #757575; }

/* --- Who We Serve --- */
.who-serve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.who-serve-card { background: var(--white); border-radius: var(--radius); padding: 24px; border: 1px solid #f0f0f0; text-align: center; transition: var(--transition); }
.who-serve-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }
.who-serve-icon { width: 60px; height: 60px; background: var(--off-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gold); margin: 0 auto 16px; }
.who-serve-card h4 { font-family: var(--font-body); font-weight: 600; margin-bottom: 8px; font-size: 1.05rem; }

/* --- About Us --- */
.about-us-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-us-content p { font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 20px; }
.about-us-image { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }

/* --- Important Notes --- */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.note-card { background: var(--off-white); border-left: 4px solid var(--gold); padding: 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.note-card h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--black); }
.note-card p { margin: 0; color: #555; font-size: 0.95rem; }

/* ============================================
   Landing Page - Konveksi Malang
   ============================================ */

/* Hero trust line */
.lp-trust-line { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.lp-trust-line span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.lp-trust-line span i { color: var(--gold); font-size: 0.8rem; }

/* Button sizes */
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }

/* Problem section */
.lp-problem-section { background: var(--white); }
.lp-problem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; }
.lp-problem-card { background: #fff8f8; border: 1px solid #fde8e8; border-radius: var(--radius); padding: 24px 20px; text-align: center; transition: var(--transition); }
.lp-problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-problem-icon { width: 44px; height: 44px; background: #fde8e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #c0392b; font-size: 1rem; }
.lp-problem-card p { font-size: 0.9rem; color: #555; margin: 0; font-weight: 500; }

/* Solution box */
.lp-solution-box { display: flex; align-items: flex-start; gap: 16px; background: #eafaf1; border: 1px solid #a9dfbf; border-radius: var(--radius); padding: 24px 28px; max-width: 700px; margin: 0 auto; }
.lp-solution-icon { color: var(--success); font-size: 1.5rem; margin-top: 2px; flex-shrink: 0; }
.lp-solution-box strong { display: block; margin-bottom: 4px; color: var(--black); font-size: 1rem; }
.lp-solution-box p { color: #555; font-size: 0.95rem; }

/* Process grid with arrows */
.lp-process-grid { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 0; }
.lp-process-grid .process-step { flex: 0 0 120px; }
.lp-process-arrow { display: flex; align-items: center; justify-content: center; padding-top: 20px; color: var(--gold); font-size: 0.9rem; flex: 0 0 28px; }

/* Final CTA */
.lp-final-cta { padding: 80px 0; background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 100%); color: var(--white); text-align: center; position: relative; overflow: hidden; }
.lp-final-cta::before { content: ''; position: absolute; top: -40%; right: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(201,162,63,0.12) 0%, transparent 70%); border-radius: 50%; }
.lp-final-cta-inner { position: relative; z-index: 1; max-width: 650px; margin: 0 auto; }
.lp-final-cta h2 { color: var(--white); margin-bottom: 16px; font-size: 2.2rem; }
.lp-final-cta h2 span { color: var(--gold); }
.lp-final-cta p { color: rgba(255,255,255,0.75); font-size: 1.05rem; margin-bottom: 32px; line-height: 1.7; }

/* Portfolio placeholder */
.lp-portfolio-placeholder { text-align: center; padding: 60px 20px; background: var(--white); border: 2px dashed #ddd; border-radius: var(--radius); }
.lp-portfolio-placeholder i { font-size: 3rem; color: #ccc; margin-bottom: 16px; }
.lp-portfolio-placeholder p { color: #888; max-width: 450px; margin: 0 auto 16px; }

/* --- Responsive --- */
@media (max-width: 992px) {
  h1 { font-size: 2.2rem; }
  .hero h1 { font-size: 2.4rem; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .lp-process-arrow { display: none; }
  .lp-process-grid { gap: 8px; justify-content: center; }
  .lp-process-grid .process-step { flex: 0 0 140px; }
}

@media (max-width: 768px) {
  .navbar-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--white); flex-direction: column; padding: 20px; gap: 20px; box-shadow: var(--shadow); transform: translateY(-120%); transition: var(--transition); opacity: 0; }
  .navbar-menu.active { transform: translateY(0); opacity: 1; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-link { padding: 12px 0; border-bottom: 1px solid #f0f0f0; display: block; }
  .navbar-toggler { display: block; }
  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero h1 { font-size: 2rem; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 50px 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .page-header { padding: 100px 0 40px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .consult-form-wrapper { padding: 24px; }
  .lp-trust-line { gap: 10px; }
  .lp-trust-line span { font-size: 0.8rem; }
  .lp-problem-grid { grid-template-columns: 1fr 1fr; }
  .lp-solution-box { flex-direction: column; text-align: center; align-items: center; }
  .lp-final-cta { padding: 50px 0; }
  .lp-final-cta h2 { font-size: 1.7rem; }
  .btn-lg { padding: 14px 28px; font-size: 0.95rem; }
  .lp-process-grid .process-step { flex: 0 0 calc(33% - 8px); }
}

@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.7rem; }
  h2 { font-size: 1.7rem; }
  .lp-problem-grid { grid-template-columns: 1fr; }
  .lp-trust-line { flex-direction: column; gap: 6px; }
  .lp-process-grid .process-step { flex: 0 0 100%; }
}

/* ============================================
   HIGH CONVERSION SG LAYOUT
   ============================================ */
.sg-section { padding: 80px 0; background: #fff; }
.sg-section.sg-alt { background: var(--off-white); }
.sg-section.sg-dark { background: var(--black); color: #fff; }
.sg-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Section titles */
.sg-section-title { text-align: center; margin-bottom: 50px; }
.sg-section-title h2 { font-size: 2.2rem; margin-bottom: 15px; color: var(--black); font-family: var(--font-heading); }
.sg-section-title p { color: #666; font-size: 1.05rem; max-width: 700px; margin: 0 auto; }
.sg-section-title .sg-line { width: 60px; height: 3px; background: var(--gold); margin: 20px auto 0; border-radius: 2px; }
.sg-section-title.sg-title-light h2 { color: #fff; }
.sg-section-title.sg-title-light p { color: rgba(255,255,255,0.7); }

/* Section CTA */
.sg-section-cta { text-align: center; margin-top: 40px; }

/* ══════ SECTIONS ══════ */
.sg-section { padding:var(--section-pad) 0; background:#fff; }
.sg-section.sg-section-alt   { background:var(--off-white); }
.sg-section.sg-section-dark  { background:var(--black); color:#fff; }
.sg-section.sg-section-gray  { background:var(--light-gray); }
.sg-section.sg-section-white { background:#fff; color:var(--black); }
.sg-section.sg-section-gold  { background:var(--gold); color:#1F1D1D; }
.sg-section.sg-section-gold .sg-section-title h2 { color:#1F1D1D; }
.sg-section.sg-section-gold .sg-section-title p  { color:rgba(0,0,0,0.7); }
.sg-section.sg-section-gold .sg-gold-line { background:#1F1D1D; }
.sg-section.sg-section-notes { background:#fafafa; }
/* Padding size presets — CMS padding_size field (renderer outputs sg-pad-sm / sg-pad-lg) */
.sg-section.sg-pad-sm { padding:48px 0; }
.sg-section.sg-pad-lg { padding:var(--section-pad-lg) 0; }
/* Legacy aliases */
.sg-section.pad-small  { padding:48px 0; }
.sg-section.pad-medium { padding:var(--section-pad) 0; }
.sg-section.pad-large  { padding:var(--section-pad-lg) 0; }
.sg-container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* Section titles */
.sg-section-title { text-align:center; margin-bottom:56px; }
.sg-section-title h2 { font-size:2.2rem; margin-bottom:14px; color:var(--black); font-family:var(--font-heading); }
.sg-section-title p { color:#666; font-size:1.03rem; max-width:680px; margin:0 auto; line-height:1.75; }
.sg-gold-line,.sg-section-title .sg-line { display:block; width:52px; height:3px; background:var(--gold); margin:18px auto 0; border-radius:2px; }
.sg-section-title.sg-title-light h2 { color:#fff; }
.sg-section-title.sg-title-light p { color:rgba(255,255,255,0.65); }

/* Section CTA strip */
.sg-section-cta { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:40px; }


.sg-hero { padding: 140px 0 80px; background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 50%, #3a3a3a 100%); color: #fff; position: relative; overflow: hidden; min-height: 90vh; display: flex; align-items: center; }
.sg-hero::before { content:''; position:absolute; top:-40%; right:-15%; width:600px; height:600px; background:radial-gradient(circle,rgba(201,162,63,0.12) 0%,transparent 70%); border-radius:50%; z-index:1; }
.sg-hero::after { content:''; position:absolute; bottom:-30%; left:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(228,200,120,0.08) 0%,transparent 70%); border-radius:50%; z-index:1; }
.sg-hero.has-bg-image { background-size:cover; background-position:center; }
.sg-hero.has-bg-image::before { inset:0; width:100%; height:100%; border-radius:0; background:rgba(0,0,0,0.65); }
.sg-hero.has-bg-image::after { display:none; }
.sg-hero-split { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.sg-hero-text { max-width:560px; }
.sg-hero-badge { display:inline-block; background:rgba(201,162,63,0.15); color:var(--gold-soft); padding:8px 20px; border-radius:30px; font-size:0.85rem; font-weight:500; margin-bottom:20px; border:1px solid rgba(201,162,63,0.3); }
.sg-hero h1 { font-size:2.8rem; color:#fff; margin-bottom:18px; font-family:var(--font-heading); line-height:1.22; }
.sg-hero h1 span { color:var(--gold); }
.sg-hero-sub { font-size:1.05rem; color:rgba(255,255,255,0.8); margin-bottom:20px; line-height:1.75; }
.sg-hero-trust { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.sg-hero-trust span { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--gold-soft); font-weight:500; }
.sg-hero-trust span i { font-size:0.75rem; }
.sg-hero-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.sg-hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:280px; }
.sg-hero-visual img { width:100%; height:auto; max-width:480px; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,0.4); object-fit:contain; object-position:center; display:block; }
.sg-hero-stat { position:absolute; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); padding:14px 20px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.sg-hero-stat-1 { bottom:20px; left:-20px; }
.sg-hero-stat-2 { top:20px; right:-20px; }
.sg-hero-stat strong { display:block; font-size:1.3rem; color:var(--gold); font-weight:800; }
.sg-hero-stat span { font-size:0.78rem; color:#666; }
.sg-hero-microtrust { font-size:0.78rem; color:rgba(255,255,255,0.45); margin:0; line-height:1.8; }
.sg-hero-microtrust i { color:rgba(201,162,63,0.6); margin-right:3px; }
.sg-hero-placeholder { width:100%; aspect-ratio:4/3; max-width:480px; background:rgba(255,255,255,0.05); border:2px dashed rgba(201,162,63,0.3); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,0.3); }
.sg-hero-placeholder i { font-size:3rem; }
.sg-hero-placeholder span { font-size:0.82rem; }


/* ══════ TRUST SECTION ══════ */
.sg-trust-section { background:var(--off-white); }
.sg-trust-card { background:#fff; border-radius:var(--radius); padding:28px 20px; text-align:center; border:1px solid #f0f0f0; transition:var(--transition); }
.sg-trust-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow); }
.sg-trust-icon { width:60px; height:60px; background:var(--gold-light); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 16px; }
.sg-trust-card h4 { font-family:var(--font-body); font-weight:700; font-size:1rem; margin-bottom:8px; color:var(--black); }
.sg-trust-card p { font-size:0.83rem; color:#666; margin:0; line-height:1.6; }
.sg-trust-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px; padding:20px 24px; background:var(--black); border-radius:var(--radius); }
.sg-trust-bar-item { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,0.85); font-size:0.86rem; font-weight:500; padding:6px 14px; border-radius:20px; background:rgba(255,255,255,0.06); }
.sg-trust-bar-item i { color:var(--gold); font-size:0.85rem; }
/* Legacy proof strip kept for other pages */
.sg-proof-strip { padding:24px 0; background:var(--off-white); border-bottom:1px solid #eee; }
.sg-proof-label { text-transform:uppercase; letter-spacing:1.5px; font-size:0.72rem; color:#999; font-weight:700; margin-bottom:16px; text-align:center; }
.sg-proof-row { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; align-items:center; }
.sg-proof-row img { max-height:40px; opacity:0.5; filter:grayscale(100%); transition:var(--transition); }
.sg-proof-row img:hover { opacity:1; filter:grayscale(0%); }
.sg-proof-row span { font-weight:700; font-size:1.05rem; color:#999; transition:var(--transition); }
.sg-proof-row span:hover { color:var(--gold); }

/* ══════ PRODUCT UPGRADES ══════ */
.sg-product-desc { color:#666; font-size:0.83rem; margin-bottom:10px; flex-grow:1; }
.sg-product-meta { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.sg-product-price { font-weight:700; color:var(--gold); font-size:1rem; display:flex; align-items:center; gap:5px; }
.sg-product-minorder { font-size:0.8rem; color:#888; display:flex; align-items:center; gap:5px; }
.sg-product-price i, .sg-product-minorder i { font-size:0.78rem; }
.sg-product-actions { display:flex; gap:8px; align-items:center; }
.sg-product-actions .sg-btn-full { flex:1; }
.sg-btn-wa { background:linear-gradient(135deg,#25d366,#128c7e)!important; border-color:transparent!important; color:#fff!important; font-size:0.8rem!important; padding:9px 12px!important; }
.sg-btn-wa:hover { background:linear-gradient(135deg,#1ebe5a,#0f7060)!important; transform:translateY(-1px); }
.sg-btn-ghost-sm { width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; font-size:0.82rem; text-decoration:none; transition:var(--transition); flex-shrink:0; }
.sg-btn-ghost-sm:hover { background:var(--gold-light); color:var(--gold); border-color:var(--gold); }
.sg-section-cta { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px; }

/* ══════ CTA SPLIT LAYOUT ══════ */
.sg-cta-split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; position:relative; z-index:2; }
.sg-cta-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--gold-soft); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:16px; }
.sg-cta-left h2 { font-size:2rem; color:#fff; font-family:var(--font-heading); margin-bottom:16px; line-height:1.28; }
.sg-cta-left > p { font-size:0.95rem; color:rgba(255,255,255,0.68); margin-bottom:24px; line-height:1.75; }
.sg-cta-bullets { list-style:none; padding:0; margin:0 0 28px; }
.sg-cta-bullets li { display:flex; align-items:center; gap:10px; font-size:0.92rem; color:rgba(255,255,255,0.85); margin-bottom:10px; }
.sg-cta-bullets li i { color:var(--gold); font-size:0.85rem; flex-shrink:0; }
.sg-cta-subtext { font-size:0.78rem; color:rgba(255,255,255,0.38); margin-top:14px; }
.sg-cta-right .sg-lead-form { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(8px); }
.sg-cta-right .sg-lead-form h3 { color:#fff; font-size:1.2rem; margin-bottom:6px; }
.sg-cta-right .sg-lead-form > p { color:rgba(255,255,255,0.55); font-size:0.83rem; margin-bottom:20px; }
.sg-input { width:100%; padding:11px 14px; border:1px solid rgba(255,255,255,0.15); border-radius:7px; font-size:0.9rem; background:rgba(255,255,255,0.08); color:#fff; transition:var(--transition); }
.sg-input::placeholder { color:rgba(255,255,255,0.35); }
.sg-input:focus { outline:none; border-color:var(--gold); background:rgba(255,255,255,0.12); box-shadow:0 0 0 3px rgba(201,162,63,0.2); }
.sg-input option { background:#2B2B2B; color:#fff; }
.sg-form-group { margin-bottom:14px; }
.sg-form-group label { display:block; font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.7); margin-bottom:6px; }
.sg-form-group .req { color:var(--gold); }
.sg-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.sg-form-success { background:rgba(37,211,102,0.12); border:1px solid rgba(37,211,102,0.3); border-radius:var(--radius-sm); padding:24px; text-align:center; color:#fff; }
.sg-form-success i { font-size:2rem; color:#25d366; margin-bottom:10px; display:block; }
.sg-form-success strong { display:block; font-size:1.1rem; margin-bottom:6px; }
.sg-form-success p { color:rgba(255,255,255,0.65); font-size:0.85rem; margin-bottom:16px; }
.sg-form-error { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.25); border-radius:6px; padding:10px 14px; font-size:0.85rem; color:#fca5a5; margin-bottom:14px; }


/* ══════ GRID + CARDS ══════ */
.sg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px; }
.sg-col-3 { grid-template-columns:repeat(3,1fr); }
.sg-col-4 { grid-template-columns:repeat(4,1fr); }
.sg-col-5 { grid-template-columns:repeat(5,1fr); }
.sg-card { background:#fff; border-radius:var(--radius); padding:32px 24px; box-shadow:0 2px 16px rgba(0,0,0,0.04); text-align:center; border:1px solid #f0f0f0; transition:var(--transition); }
.sg-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold); }
.sg-card-icon { width:56px; height:56px; background:var(--gold-light); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 18px; }
.sg-card h4 { font-size:1.05rem; margin-bottom:10px; color:var(--black); font-family:var(--font-body); font-weight:700; }
.sg-card p { color:#666; font-size:0.88rem; margin:0; line-height:1.6; }

/* ══════ PRODUCT + AUDIENCE + ABOUT + PROCESS + PORTFOLIO + TESTI + NOTES ══════ */
.sg-product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.05); border:1px solid #f0f0f0; transition:var(--transition); display:flex; flex-direction:column; }
.sg-product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.sg-product-image { width:100%; aspect-ratio:4/3; background:#fafafa; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sg-product-image img { width:100%; height:100%; object-fit:contain!important; object-position:center; transition:transform 0.5s; }
.sg-product-card:hover .sg-product-image img { transform:scale(1.05); }
.sg-product-body { padding:24px; flex-grow:1; display:flex; flex-direction:column; }
.sg-product-body h3 { font-size:1.1rem; margin-bottom:8px; color:var(--black); font-family:var(--font-body); font-weight:700; }
.sg-product-body p { color:#666; font-size:0.85rem; margin-bottom:12px; flex-grow:1; }
.sg-product-price { font-weight:700; color:var(--gold); font-size:1.05rem; margin-bottom:16px; }
.sg-btn-full { width:100%; }
.sg-audience-card { background:#fff; border-radius:var(--radius); padding:28px 20px; text-align:center; border:1px solid #f0f0f0; transition:var(--transition); }
.sg-audience-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow); }
.sg-audience-icon { width:60px; height:60px; background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 16px; }
.sg-audience-card h4 { font-family:var(--font-body); font-weight:700; font-size:1rem; margin-bottom:6px; }
.sg-audience-card p { color:#888; font-size:0.82rem; margin:0; }
.sg-about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.sg-about-text h2 { font-size:2rem; font-family:var(--font-heading); margin-bottom:20px; }
.sg-about-text p { font-size:1rem; color:#555; margin-bottom:15px; line-height:1.8; }
.sg-about-img img { border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; }
.sg-advantages { margin-top:30px; }
.sg-advantage-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.sg-advantage-icon { flex-shrink:0; width:40px; height:40px; background:var(--gold-light); color:var(--gold); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.sg-advantage-item h4 { font-family:var(--font-body); font-weight:700; font-size:0.95rem; margin-bottom:2px; }
.sg-advantage-item p { font-size:0.85rem; color:#666; margin:0; }
.sg-process-timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.sg-process-step { text-align:center; padding:30px 20px; }
.sg-step-num { width:52px; height:52px; background:var(--gold); color:var(--black); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; margin:0 auto 18px; }
.sg-process-step h4 { color:#fff; font-family:var(--font-body); font-weight:700; font-size:0.95rem; margin-bottom:8px; }
.sg-process-step p { color:rgba(255,255,255,0.6); font-size:0.82rem; margin:0; }
.sg-portfolio-card { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.sg-portfolio-img { position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; }
.sg-portfolio-img img { width:100%; height:100%; object-fit:contain; object-position:center; background:#fafafa; transition:transform 0.5s; }
.sg-portfolio-card:hover .sg-portfolio-img img { transform:scale(1.06); }
.sg-portfolio-overlay { position:absolute; bottom:0; left:0; right:0; padding:20px; background:linear-gradient(transparent,rgba(31,29,29,0.85)); color:#fff; transform:translateY(10px); opacity:0; transition:var(--transition); }
.sg-portfolio-card:hover .sg-portfolio-overlay { transform:translateY(0); opacity:1; }
.sg-portfolio-overlay h3 { font-size:1rem; color:#fff; margin-bottom:4px; font-family:var(--font-body); }
.sg-portfolio-overlay p { font-size:0.8rem; color:rgba(255,255,255,0.75); margin:0; }
.sg-testimonial-card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:0 2px 16px rgba(0,0,0,0.04); border:1px solid #f0f0f0; display:flex; flex-direction:column; }
.sg-stars { margin-bottom:12px; color:var(--gold); font-size:0.9rem; }
.sg-testimonial-card blockquote { font-style:italic; color:#555; margin-bottom:18px; line-height:1.7; font-size:0.9rem; flex-grow:1; }
.sg-testi-author { border-top:1px solid #f0f0f0; padding-top:12px; }
.sg-testi-author strong { display:block; font-size:0.92rem; color:var(--black); }
.sg-testi-author span { font-size:0.8rem; color:#888; }
.sg-notes-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.sg-note-card { display:flex; gap:16px; padding:22px; background:#fff; border-radius:var(--radius-sm); border-left:4px solid var(--gold); box-shadow:0 2px 10px rgba(0,0,0,0.04); }
.sg-note-icon { flex-shrink:0; width:42px; height:42px; background:var(--gold-light); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.sg-note-body h4 { font-family:var(--font-body); font-weight:700; font-size:0.95rem; margin-bottom:4px; }
.sg-note-body p { font-size:0.85rem; color:#666; margin:0; line-height:1.5; }
.sg-section-notes { background:#fafafa; }
.sg-notes-cta { text-align:center; margin-top:32px; padding:24px; background:#fff; border-radius:var(--radius-sm); border:1px solid #f0ebe0; }
.sg-notes-cta p { font-size:0.9rem; color:#666; margin-bottom:12px; }

/* ══════ AUDIENCE CARD CTA ══════ */
.sg-aud-cta { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:0.8rem; font-weight:600; color:#25d366; border:1px solid rgba(37,211,102,0.3); padding:6px 14px; border-radius:20px; text-decoration:none; transition:var(--transition); }
.sg-aud-cta:hover { background:#25d366; color:#fff; border-color:#25d366; }

/* ══════ MID-FUNNEL CTA STRIP ══════ */
.sg-mid-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:40px; padding:24px 32px; background:linear-gradient(90deg,var(--black),var(--charcoal)); border-radius:var(--radius); }
.sg-mid-cta-text { display:flex; flex-direction:column; gap:4px; }
.sg-mid-cta-text strong { font-size:1rem; color:#fff; font-weight:700; }
.sg-mid-cta-text span { font-size:0.86rem; color:rgba(255,255,255,0.55); }

/* ══════ PORTFOLIO OVERLAY WA ══════ */
.sg-port-wa { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 18px; background:#25d366; color:#fff; border-radius:20px; font-size:0.8rem; font-weight:600; text-decoration:none; transition:var(--transition); }
.sg-port-wa:hover { background:#1ebe5a; }

/* ══════ TESTIMONIAL UPGRADE ══════ */
.sg-testi-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sg-testi-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--gold),#a07a25); color:#fff; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sg-testi-name { display:block; font-weight:700; font-size:0.95rem; color:var(--black); line-height:1.2; }
.sg-testi-company { display:block; font-size:0.78rem; color:#888; margin-bottom:4px; }
.sg-testimonial-card { background:#fff; border-radius:var(--radius); padding:28px; border:1px solid #f0f0f0; box-shadow:0 2px 12px rgba(0,0,0,0.04); position:relative; transition:var(--transition); }
.sg-testimonial-card:hover { border-color:var(--gold); box-shadow:var(--shadow); }
.sg-testi-tag { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:4px 12px; background:var(--gold-light); color:var(--gold); border-radius:20px; font-size:0.75rem; font-weight:600; }

.sg-lead-form { max-width:700px; margin:0 auto; background:#fff; border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-lg); border:1px solid #f0f0f0; }
.sg-lead-form h3 { font-family:var(--font-heading); font-size:1.4rem; margin-bottom:8px; text-align:center; }
.sg-lead-form > p { text-align:center; color:#888; font-size:0.9rem; margin-bottom:24px; }
.sg-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.sg-form-group { margin-bottom:16px; }
.sg-form-group label { display:block; font-size:0.85rem; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.sg-form-group input,.sg-form-group select,.sg-form-group textarea { width:100%; padding:12px 16px; border:1px solid #e0e0e0; border-radius:var(--radius-sm); font-size:0.92rem; transition:var(--transition); }
.sg-form-group input:focus,.sg-form-group select:focus,.sg-form-group textarea:focus { border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--gold-light); }


/* ══════ FINAL CTA ══════ */
.sg-final-cta { padding:100px 0; background:linear-gradient(135deg,var(--black),var(--charcoal)); color:#fff; text-align:center; position:relative; overflow:hidden; }
.sg-final-cta::before { content:''; position:absolute; top:-40%; right:-15%; width:500px; height:500px; background:radial-gradient(circle,rgba(201,162,63,0.12) 0%,transparent 70%); border-radius:50%; }
.sg-final-cta h2 { font-size:2.2rem; color:var(--gold); margin-bottom:16px; position:relative; z-index:1; }
.sg-final-cta p { font-size:1.05rem; color:rgba(255,255,255,0.7); max-width:600px; margin:0 auto 36px; position:relative; z-index:1; }
.sg-final-cta .btn { position:relative; z-index:1; }
.sg-cta-trust { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin-top:28px; position:relative; z-index:1; }
.sg-cta-trust span { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; color:rgba(255,255,255,0.6); }
.sg-cta-trust span i { color:var(--gold); }
.sg-cta-pulse { animation:ctaPulse 2s infinite; }
@keyframes ctaPulse { 0%,100%{box-shadow:0 4px 16px rgba(201,162,63,0.3)} 50%{box-shadow:0 4px 30px rgba(201,162,63,0.55)} }

/* ══════ RESPONSIVE ══════ */
@media(max-width:991px){
  .sg-hero-split{grid-template-columns:1fr;gap:40px;text-align:center}
  .sg-hero-text{max-width:100%}
  .sg-hero-buttons,.sg-hero-trust{justify-content:center}
  /* Image comes AFTER text in column layout (DOM order: text first, visual second) */
  .sg-hero-visual{order:3}
  .sg-hero-visual img{max-width:360px}
  .sg-hero-stat{display:none}
  .sg-col-4{grid-template-columns:repeat(2,1fr)}
  .sg-col-5{grid-template-columns:repeat(3,1fr)}
  .sg-about-wrap{grid-template-columns:1fr;gap:40px}
  .sg-form-row{grid-template-columns:1fr}
  .sg-cta-split{grid-template-columns:1fr;gap:36px}
  .sg-cta-left h2{font-size:1.7rem}
}
@media(max-width:768px){
  /* ── Hero: text first, CTA second, image third ── */
  .sg-hero-split{
    display:flex;
    flex-direction:column;
    gap:28px;
    text-align:left;
  }
  .sg-hero-text{order:1;max-width:100%}
  .sg-hero-buttons{order:2}
  .sg-hero-visual{
    order:3;
    margin-top:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:auto;
  }
  .sg-hero-visual img{
    max-width:300px;
    width:100%;
    height:auto;
    margin:0 auto;
    display:block;
    object-fit:contain;
  }
  .sg-hero-trust{justify-content:flex-start}
  .sg-hero-buttons{justify-content:flex-start;flex-direction:column;gap:10px;width:100%}
  .sg-hero-buttons .btn{width:100%;justify-content:center}
  /* ── Rest of 768px rules ── */
  .sg-hero{padding:110px 0 56px;min-height:65vh}
  .sg-hero h1{font-size:1.85rem;line-height:1.28}
  .sg-hero-sub{font-size:0.92rem}
  .sg-hero-trust{gap:10px}
  .sg-hero-microtrust{display:none}
  .sg-section{padding:60px 0}
  .sg-section-title h2{font-size:1.7rem}
  .sg-col-3,.sg-col-4,.sg-col-5{grid-template-columns:repeat(2,1fr)}
  .sg-proof-row{gap:24px}
  .sg-trust-bar{gap:8px;padding:16px}
  .sg-trust-bar-item{font-size:0.8rem;padding:5px 10px}
  .sg-final-cta{padding:60px 0}
  .sg-final-cta h2,.sg-cta-left h2{font-size:1.6rem}
  .sg-lead-form{padding:24px 18px}
  .sg-section-cta{flex-direction:column;align-items:center}
}
@media(max-width:480px){
  .sg-col-3,.sg-col-4,.sg-col-5,.sg-grid{grid-template-columns:1fr}
  .sg-hero h1{font-size:1.55rem;line-height:1.3}
  .sg-hero-visual img{max-width:260px}
  .sg-hero-trust{flex-direction:column;gap:6px}
  .sg-hero-badge{font-size:0.78rem;padding:6px 14px}
  .sg-process-timeline{grid-template-columns:1fr}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  PREMIUM UI UPGRADE — B2B Konveksi Brand Polish         ║
   ║  Enhances existing sg-* classes. No new HTML required.   ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Global smoothness ────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* ── Premium section spacing & backgrounds ─────────────── */
.sg-section { position: relative; overflow: hidden; }
.sg-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.sg-section-alt::before { background: radial-gradient(ellipse at 20% 0%, rgba(201,162,63,0.04) 0%, transparent 60%); }
.sg-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; }
.sg-gold-line, .sg-section-title .sg-line { width: 52px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 2px; transition: width 0.5s var(--sg-ease); }
.sg-section-title:hover .sg-gold-line,
.sg-section-title:hover .sg-line { width: 80px; }

/* ── Hero premium polish ──────────────────────────────── */
.sg-hero { background: linear-gradient(135deg, #161515 0%, #1F1D1D 35%, #2B2B2B 70%, #333 100%); }
.sg-hero::before { animation: heroGlow 8s ease-in-out infinite alternate; }
@keyframes heroGlow {
  0% { opacity: 0.6; transform: translate(5%, -5%) scale(1); }
  100% { opacity: 1; transform: translate(-5%, 5%) scale(1.15); }
}
.sg-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.12; }
.sg-hero-badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(201,162,63,0.12); border: 1px solid rgba(201,162,63,0.28); transition: all 0.3s var(--sg-ease); }
.sg-hero-badge:hover { background: rgba(201,162,63,0.22); transform: translateY(-1px); }
.sg-hero-sub { font-size: clamp(0.92rem, 1.5vw, 1.1rem); }
.sg-hero-visual img { border-radius: var(--sg-radius-lg); box-shadow: 0 25px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05); transition: transform 0.6s var(--sg-ease), box-shadow 0.6s var(--sg-ease); }
.sg-hero-visual:hover img { transform: scale(1.02) translateY(-4px); box-shadow: 0 35px 100px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,162,63,0.15); }
.sg-hero-stat { border-radius: var(--sg-radius-md); box-shadow: var(--sg-shadow-elevated); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: statFloat 4s ease-in-out infinite alternate; }
.sg-hero-stat-1 { animation-delay: 0s; }
.sg-hero-stat-2 { animation-delay: -2s; }
@keyframes statFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
.sg-hero-trust span { transition: all 0.25s ease; }
.sg-hero-trust span:hover { color: var(--gold); transform: translateX(2px); }
.sg-hero-buttons .btn { transition: all 0.3s var(--sg-ease-bounce); }
.sg-hero-buttons .btn:hover { transform: translateY(-3px); }
.sg-hero-microtrust { letter-spacing: 0.02em; }

/* ── Premium Buttons ──────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; transition: all 0.3s var(--sg-ease); position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: inherit; }
.btn:hover::after { opacity: 1; }
.btn-primary { background: linear-gradient(135deg, var(--gold), #d4ad4a); box-shadow: var(--sg-shadow-glow); }
.btn-primary:hover { box-shadow: 0 16px 36px rgba(201,162,63,0.38); background: linear-gradient(135deg, #d4ad4a, var(--gold-soft)); }
.btn-lg { padding: 16px 32px; font-size: 1rem; letter-spacing: 0.015em; }
.sg-cta-pulse { animation: ctaPulse 2.5s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes ctaPulse { 0%,100%{box-shadow: 0 4px 16px rgba(201,162,63,0.3)} 50%{box-shadow: 0 8px 32px rgba(201,162,63,0.55)} }

/* ── Trust Cards polish ───────────────────────────────── */
.sg-trust-card { border: 1px solid rgba(0,0,0,0.04); transition: all 0.35s var(--sg-ease); }
.sg-trust-card:hover { border-color: rgba(201,162,63,0.3); box-shadow: var(--sg-shadow-card); transform: translateY(-6px); }
.sg-trust-icon { transition: all 0.35s var(--sg-ease-bounce); }
.sg-trust-card:hover .sg-trust-icon { transform: scale(1.1) rotate(-5deg); background: rgba(201,162,63,0.18); }
.sg-trust-bar { background: linear-gradient(135deg, #1a1a1a, #252525); border: 1px solid rgba(201,162,63,0.1); }
.sg-trust-bar-item { transition: all 0.25s ease; }
.sg-trust-bar-item:hover { background: rgba(201,162,63,0.12); color: var(--gold-soft); transform: translateY(-1px); }

/* ── Product Cards premium ────────────────────────────── */
.sg-product-card { border-radius: var(--sg-radius-lg); border: 1px solid rgba(0,0,0,0.05); transition: all 0.35s var(--sg-ease); }
.sg-product-card:hover { transform: translateY(-8px); box-shadow: var(--sg-shadow-elevated); border-color: rgba(201,162,63,0.12); }
.sg-product-image { background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%); position: relative; }
.sg-product-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, rgba(255,255,255,0.8)); pointer-events: none; }
.sg-product-image img { transition: transform 0.6s var(--sg-ease); }
.sg-product-card:hover .sg-product-image img { transform: scale(1.08); }
.sg-product-body h3 { font-size: 1.05rem; letter-spacing: -0.01em; transition: color 0.25s ease; }
.sg-product-card:hover .sg-product-body h3 { color: var(--gold); }
.sg-product-price { background: linear-gradient(90deg, var(--gold), #d4ad4a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; }
.sg-product-price i { -webkit-text-fill-color: var(--gold); }
.sg-btn-wa { border-radius: 999px !important; font-weight: 600 !important; transition: all 0.3s var(--sg-ease) !important; }
.sg-btn-wa:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(37,211,102,0.3) !important; }

/* ── Audience Cards ───────────────────────────────────── */
.sg-audience-card { transition: all 0.35s var(--sg-ease); border-radius: var(--sg-radius-lg); }
.sg-audience-card:hover { border-color: rgba(201,162,63,0.3); transform: translateY(-6px); box-shadow: var(--sg-shadow-card); }
.sg-audience-icon { transition: all 0.4s var(--sg-ease-bounce); }
.sg-audience-card:hover .sg-audience-icon { transform: scale(1.1) rotate(5deg); }
.sg-aud-cta { border-radius: 999px; transition: all 0.3s var(--sg-ease); }
.sg-mid-cta { border-radius: var(--sg-radius-lg); background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border: 1px solid rgba(201,162,63,0.08); transition: all 0.35s ease; }
.sg-mid-cta:hover { border-color: rgba(201,162,63,0.2); box-shadow: var(--sg-shadow-card); }

/* ── About section polish ─────────────────────────────── */
.sg-about-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.sg-about-img img { border-radius: var(--sg-radius-lg); transition: all 0.5s var(--sg-ease); }
.sg-about-img:hover img { transform: scale(1.02); box-shadow: var(--sg-shadow-elevated); }
.sg-advantage-icon { transition: all 0.3s var(--sg-ease-bounce); }
.sg-advantage-item:hover .sg-advantage-icon { transform: scale(1.1); background: rgba(201,162,63,0.18); }

/* ── Process Timeline premium ─────────────────────────── */
.sg-section-dark { background: linear-gradient(135deg, #161515 0%, #1F1D1D 50%, #2a2a2a 100%); }
.sg-section-dark::before { background: radial-gradient(ellipse at 70% 20%, rgba(201,162,63,0.06) 0%, transparent 60%); }
.sg-step-num { box-shadow: 0 6px 20px rgba(201,162,63,0.3); transition: all 0.35s var(--sg-ease-bounce); background: linear-gradient(135deg, var(--gold), #d4ad4a); }
.sg-process-step:hover .sg-step-num { transform: scale(1.12); box-shadow: 0 10px 30px rgba(201,162,63,0.45); }
.sg-process-step { transition: all 0.3s var(--sg-ease); border-radius: var(--sg-radius-md); }
.sg-process-step:hover { background: rgba(255,255,255,0.03); }
.sg-process-step h4 { transition: color 0.25s ease; }
.sg-process-step:hover h4 { color: var(--gold-soft); }

/* ── Portfolio premium ────────────────────────────────── */
.sg-portfolio-card { border-radius: var(--sg-radius-lg); transition: all 0.4s var(--sg-ease); overflow: hidden; }
.sg-portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--sg-shadow-elevated); }
.sg-portfolio-img img { transition: transform 0.7s var(--sg-ease); }
.sg-portfolio-card:hover .sg-portfolio-img img { transform: scale(1.08); }
.sg-portfolio-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sg-port-wa { border-radius: 999px; transition: all 0.3s var(--sg-ease); }
.sg-port-wa:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,211,102,0.3); }

/* ── Testimonials premium ─────────────────────────────── */
.sg-testimonial-card { border-radius: var(--sg-radius-lg); transition: all 0.35s var(--sg-ease); position: relative; }
.sg-testimonial-card::before { content: '"'; position: absolute; top: 12px; right: 20px; font-size: 4rem; font-family: Georgia, serif; color: rgba(201,162,63,0.08); line-height: 1; pointer-events: none; }
.sg-testimonial-card:hover { transform: translateY(-4px); border-color: rgba(201,162,63,0.2); box-shadow: var(--sg-shadow-card); }
.sg-testi-avatar { transition: all 0.3s var(--sg-ease-bounce); }
.sg-testimonial-card:hover .sg-testi-avatar { transform: scale(1.08); }
.sg-stars i { transition: transform 0.2s ease; }
.sg-stars i:hover { transform: scale(1.2); }

/* ── Notes section ────────────────────────────────────── */
.sg-note-card { transition: all 0.3s var(--sg-ease); border-radius: var(--sg-radius-sm); }
.sg-note-card:hover { transform: translateX(4px); box-shadow: var(--sg-shadow-card); border-left-color: var(--gold-soft); }
.sg-note-icon { transition: all 0.3s var(--sg-ease-bounce); }
.sg-note-card:hover .sg-note-icon { transform: scale(1.1); }
.sg-notes-cta { border-radius: var(--sg-radius-md); transition: all 0.3s ease; }
.sg-notes-cta:hover { border-color: rgba(201,162,63,0.3); box-shadow: var(--sg-shadow-card); }

/* ── Final CTA premium ────────────────────────────────── */
.sg-final-cta { background: linear-gradient(135deg, #141313 0%, #1F1D1D 40%, #2a2a2a 100%); }
.sg-final-cta::before { animation: ctaGlow 6s ease-in-out infinite alternate; }
@keyframes ctaGlow {
  0% { opacity: 0.5; transform: translate(0, 0) scale(1); }
  100% { opacity: 1; transform: translate(-10%, 10%) scale(1.2); }
}
.sg-final-cta::after { content: ''; position: absolute; bottom: -30%; left: -15%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(228,200,120,0.06) 0%, transparent 70%); border-radius: 50%; animation: ctaGlow2 7s ease-in-out infinite alternate-reverse; pointer-events: none; }
@keyframes ctaGlow2 {
  0% { opacity: 0.4; transform: translate(0,0) scale(1); }
  100% { opacity: 0.8; transform: translate(10%, -10%) scale(1.15); }
}
.sg-cta-split { position: relative; z-index: 2; }
.sg-cta-eyebrow { letter-spacing: 2px; }
.sg-lead-form { border-radius: var(--sg-radius-lg); transition: all 0.35s ease; }
.sg-lead-form:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.sg-input { border-radius: var(--sg-radius-sm); transition: all 0.3s var(--sg-ease); }
.sg-input:focus { box-shadow: 0 0 0 3px rgba(201,162,63,0.15), 0 4px 12px rgba(201,162,63,0.08); }

/* ── Navbar premium polish ────────────────────────────── */
.navbar { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.04); }
.navbar.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 4px 30px rgba(0,0,0,0.08); }
.nav-link { position: relative; letter-spacing: 0.01em; }
.nav-link::after { height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 1px; }

/* ── Footer premium ──────────────────────────────────── */
.footer { background: linear-gradient(180deg, #1a1a1a, #141313); }
.footer h4 { letter-spacing: 0.03em; }
.footer-links a { transition: all 0.25s ease; }
.footer-links a:hover { color: var(--gold); transform: translateX(3px); }
.footer-bottom { border-top: 1px solid rgba(201,162,63,0.08); }

/* ── WA sticky premium ───────────────────────────────── */
.wa-sticky { box-shadow: 0 6px 24px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4); }
@keyframes waPulse {
  0% { box-shadow: 0 6px 24px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4); }
  70% { box-shadow: 0 6px 24px rgba(37,211,102,0.35), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 24px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0); }
}

/* ── Scroll reveal animation (CSS-only, applied by IntersectionObserver) ── */
.sg-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--sg-ease), transform 0.7s var(--sg-ease); }
.sg-reveal.visible { opacity: 1; transform: translateY(0); }
.sg-reveal-delay-1 { transition-delay: 0.1s; }
.sg-reveal-delay-2 { transition-delay: 0.2s; }
.sg-reveal-delay-3 { transition-delay: 0.3s; }

/* ── Premium selection color ──────────────────────────── */
::selection { background: rgba(201,162,63,0.25); color: var(--black); }
::-moz-selection { background: rgba(201,162,63,0.25); color: var(--black); }

/* ── Premium responsive refinements ───────────────────── */
@media (max-width: 991px) {
  .sg-hero-visual img { border-radius: var(--sg-radius-md); }
}
@media (max-width: 768px) {
  .sg-product-card:hover { transform: translateY(-4px); }
  .sg-portfolio-card:hover { transform: translateY(-3px); }
  .sg-hero-stat { display: none; }
}
@media (max-width: 480px) {
  .sg-testimonial-card::before { font-size: 2.5rem; }
  .btn-lg { padding: 14px 24px; }
}


/* ── Subtle focus states for accessibility ────────────── */
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PREMIUM DESIGN SYSTEM — B2B Layout Components              ║
   ║  Additive only. Zero overrides of existing working rules.   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Background helpers ───────────────────────────────────── */
.sg-bg-offwhite { background: var(--sg-offwhite, #FAF8F2); }
.sg-bg-white    { background: var(--sg-white, #FFFFFF); }
.sg-bg-light    { background: var(--sg-light, #F3F3F3); }
.sg-bg-dark     { background: var(--sg-black, #1F1D1D); color: #fff; }
.sg-bg-gold     { background: var(--sg-gold, #C9A23F); color: #1F1D1D; }

/* ── Section header (centre-aligned, max-width constrained) ── */
.sg-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.sg-section-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--sg-black, #1F1D1D);
  letter-spacing: -0.02em;
}
.sg-section-header p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sg-muted, #6F6F6F);
  margin: 0;
}
.sg-section-header .sg-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sg-gold, #C9A23F);
  margin-bottom: 10px;
}

/* ── Pill button system (sg-btn-* family) ─────────────────── */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.sg-btn-primary {
  background: var(--sg-gold, #C9A23F);
  color: var(--sg-black, #1F1D1D);
  box-shadow: 0 12px 26px rgba(201,162,63,0.28);
}
.sg-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--sg-gold-light, #E4C878);
  box-shadow: 0 16px 34px rgba(201,162,63,0.38);
}
.sg-btn-secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.sg-btn-secondary:hover {
  border-color: var(--sg-gold, #C9A23F);
  color: var(--sg-gold-light, #E4C878);
  background: rgba(201,162,63,0.06);
}
.sg-btn-dark {
  background: var(--sg-black, #1F1D1D);
  color: #fff;
  border-color: transparent;
}
.sg-btn-dark:hover {
  background: var(--sg-dark, #2B2B2B);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.sg-btn-outline-gold {
  background: transparent;
  border-color: var(--sg-gold, #C9A23F);
  color: var(--sg-gold, #C9A23F);
}
.sg-btn-outline-gold:hover {
  background: var(--sg-gold, #C9A23F);
  color: var(--sg-black, #1F1D1D);
}
.sg-btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.sg-btn-lg { padding: 18px 32px; font-size: 1.05rem; }

/* ── Explicit column grids ────────────────────────────────── */
.sg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sg-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

/* ── Hero inner grid (for pages using sg-hero-inner wrapper) ─ */
.sg-hero-inner {
  max-width: var(--sg-container, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.sg-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,162,63,0.14);
  color: var(--sg-gold-light, #E4C878);
  border: 1px solid rgba(201,162,63,0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.sg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* ── Split two-column layout ──────────────────────────────── */
.sg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sg-split.sg-split-reverse { direction: rtl; }
.sg-split.sg-split-reverse > * { direction: ltr; }
.sg-split-image {
  border-radius: var(--sg-radius-lg, 22px);
  overflow: hidden;
  box-shadow: var(--sg-shadow-soft, 0 10px 30px rgba(0,0,0,0.08));
  background: #fff;
  line-height: 0;
}
.sg-split-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.sg-split-content { display: flex; flex-direction: column; justify-content: center; }
.sg-split-content h2 { margin-bottom: 16px; }
.sg-split-content p  { color: var(--sg-muted, #6F6F6F); line-height: 1.75; }

/* ── Feature list (checkmark bullets) ────────────────────── */
.sg-list { display: grid; gap: 12px; margin-top: 22px; list-style: none; padding: 0; }
.sg-list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--sg-text, #1F1D1D);
  line-height: 1.55;
}
.sg-list-item::before {
  content: "✓";
  color: var(--sg-gold, #C9A23F);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.85rem;
}

/* ── Icon container ───────────────────────────────────────── */
.sg-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(201,162,63,0.12);
  color: var(--sg-gold, #C9A23F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.sg-icon-sm { width: 36px; height: 36px; border-radius: 10px; font-size: 0.9rem; }
.sg-icon-lg { width: 58px; height: 58px; border-radius: 18px; font-size: 1.4rem; }
.sg-icon-round { border-radius: 50%; }
.sg-icon-dark { background: rgba(255,255,255,0.08); color: var(--sg-gold-light, #E4C878); }

/* ── Badge / tag pill ─────────────────────────────────────── */
.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--sg-offwhite, #FAF8F2);
  color: var(--sg-dark, #2B2B2B);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
}
.sg-badge-gold { background: rgba(201,162,63,0.12); color: var(--sg-gold, #C9A23F); border-color: rgba(201,162,63,0.25); }
.sg-badge-dark { background: rgba(31,29,29,0.08); color: var(--sg-black, #1F1D1D); }

/* ── Process / numbered steps grid ───────────────────────── */
.sg-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.sg-process-item {
  position: relative;
  background: #fff;
  border-radius: var(--sg-radius-md, 16px);
  padding: 28px 24px;
  box-shadow: var(--sg-shadow-card, 0 8px 22px rgba(0,0,0,0.06));
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.28s ease;
}
.sg-process-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sg-shadow-soft, 0 10px 30px rgba(0,0,0,0.08));
  border-color: rgba(201,162,63,0.2);
}
.sg-process-number {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sg-gold, #C9A23F);
  color: var(--sg-black, #1F1D1D);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(201,162,63,0.28);
}
.sg-process-item h4 { font-size: 1rem; margin-bottom: 8px; color: var(--sg-black, #1F1D1D); }
.sg-process-item p  { font-size: 0.87rem; color: var(--sg-muted, #6F6F6F); margin: 0; line-height: 1.65; }

/* ── Standalone testimonial card ──────────────────────────── */
.sg-testimonial {
  background: #fff;
  border-radius: var(--sg-radius-lg, 22px);
  padding: 28px;
  box-shadow: var(--sg-shadow-card, 0 8px 22px rgba(0,0,0,0.06));
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.28s ease;
  position: relative;
}
.sg-testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,63,0.18);
  box-shadow: var(--sg-shadow-soft, 0 10px 30px rgba(0,0,0,0.08));
}
.sg-testimonial blockquote {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--sg-text, #1F1D1D);
  margin: 0 0 18px;
  font-style: italic;
}
.sg-stars { color: var(--sg-gold, #C9A23F); font-size: 0.85rem; margin-bottom: 12px; letter-spacing: 2px; }

/* ── Portfolio card ───────────────────────────────────────── */
.sg-portfolio-card {
  border-radius: var(--sg-radius-lg, 22px);
  overflow: hidden;
  box-shadow: var(--sg-shadow-card, 0 8px 22px rgba(0,0,0,0.06));
  transition: all 0.35s ease;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
}
.sg-portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--sg-shadow-soft, 0 10px 30px rgba(0,0,0,0.08)); }
.sg-portfolio-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.sg-portfolio-card:hover img { transform: scale(1.04); }
.sg-portfolio-card-body { padding: 18px 20px; }
.sg-portfolio-card-body h4 { font-size: 1rem; margin: 0 0 6px; color: var(--sg-black, #1F1D1D); }
.sg-portfolio-card-body p  { font-size: 0.83rem; color: var(--sg-muted, #6F6F6F); margin: 0; }

/* ── Final CTA box (rounded card variant) ─────────────────── */
.sg-cta-box {
  background: linear-gradient(135deg, #1F1D1D, #2B2B2B);
  color: #fff;
  border-radius: 32px;
  padding: 60px 36px;
  text-align: center;
  max-width: var(--sg-container, 1180px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.sg-cta-box::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(201,162,63,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.sg-cta-box h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0 0 14px; position: relative; z-index: 1; }
.sg-cta-box p  { color: rgba(255,255,255,0.75); max-width: 680px; margin: 0 auto 28px; line-height: 1.75; font-size: 1rem; position: relative; z-index: 1; }
.sg-cta-box .sg-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Divider ──────────────────────────────────────────────── */
.sg-divider { width: 52px; height: 3px; background: linear-gradient(90deg, var(--sg-gold, #C9A23F), var(--sg-gold-light, #E4C878)); border-radius: 2px; margin: 18px auto; }
.sg-divider-left { margin-left: 0; }

/* ── Utility: aspect-ratio boxes ─────────────────────────── */
.sg-ratio-4-3 { aspect-ratio: 4 / 3; }
.sg-ratio-16-9 { aspect-ratio: 16 / 9; }
.sg-ratio-1-1  { aspect-ratio: 1 / 1; }

/* ── Responsive: tablets ─────────────────────────────────── */
@media (max-width: 992px) {
  .sg-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .sg-split      { grid-template-columns: 1fr; gap: 32px; }
  .sg-split.sg-split-reverse { direction: ltr; }
  .sg-grid-4     { grid-template-columns: repeat(2, 1fr); }
  .sg-grid-3     { grid-template-columns: repeat(2, 1fr); }
  .sg-process-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-cta-box { padding: 48px 24px; border-radius: 22px; }
}

/* ── Responsive: phones ──────────────────────────────────── */
@media (max-width: 640px) {
  .sg-section-header { margin-bottom: 32px; }
  .sg-grid-4  { grid-template-columns: 1fr; }
  .sg-grid-3  { grid-template-columns: 1fr; }
  .sg-grid-2  { grid-template-columns: 1fr; }
  .sg-process-grid { grid-template-columns: 1fr; }
  .sg-hero-actions { flex-direction: column; }
  .sg-btn     { width: 100%; justify-content: center; }
  .sg-btn-sm  { width: auto; }
  .sg-cta-box { border-radius: 16px; padding: 36px 18px; }
  .sg-cta-box h2 { font-size: 1.7rem; }
  .sg-cta-box .sg-cta-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════
   CMS RENDER CLASSES — used by cms_render_section_image()
   and frontend section templates.
   ══════════════════════════════════════════════════════════ */

/* ── Image wrapper — alignment ────────────────────────────── */
.cms-image-wrap {
  display: flex;
  width: 100%;
  margin: 18px 0;
}
.cms-image-wrap.align-left   { justify-content: flex-start; }
.cms-image-wrap.align-center { justify-content: center; }
.cms-image-wrap.align-right  { justify-content: flex-end; }

/* ── Image element ────────────────────────────────────────── */
.cms-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sg-radius-md, 16px);
}
.cms-image.fit-contain { object-fit: contain; }
.cms-image.fit-cover   { object-fit: cover; }
.cms-image.fit-fill    { object-fit: fill; }

/* ── Aspect ratio boxes ───────────────────────────────────── */
.cms-ratio-1-1      { aspect-ratio: 1 / 1; }
.cms-ratio-4-3      { aspect-ratio: 4 / 3; }
.cms-ratio-16-9     { aspect-ratio: 16 / 9; }
.cms-ratio-portrait { aspect-ratio: 3 / 4; }

/* ═══════════════════════════════════════════════════════════
   CMS VISUAL BINDING SYSTEM — Sandang Garment
   ═══════════════════════════════════════════════════════════ */

/* ── Background presets (matched to CMS background_preset values) ── */
.cms-bg-white    { background: #FFFFFF !important; color: #1F1D1D !important; }
.cms-bg-offwhite { background: #FAF8F2 !important; color: #1F1D1D !important; }
.cms-bg-light    { background: #F3F3F3 !important; color: #1F1D1D !important; }
.cms-bg-dark     { background: #1F1D1D !important; color: #FFFFFF !important; }
.cms-bg-brand    { background: #C9A23F !important; color: #1F1D1D !important; }

/* ── Padding presets ── */
.cms-padding-small  { padding-top: 48px  !important; padding-bottom: 48px  !important; }
.cms-padding-medium { padding-top: 80px  !important; padding-bottom: 80px  !important; }
.cms-padding-large  { padding-top: 120px !important; padding-bottom: 120px !important; }

/* ── Background image mode ── */
.has-bg-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.has-bg-image > .sg-container { position: relative; z-index: 1; }

/* ── Image wrapper alignment ── */
.cms-image-wrap { display: flex; width: 100%; }
.cms-image-wrap.align-left   { justify-content: flex-start; }
.cms-image-wrap.align-center { justify-content: center; }
.cms-image-wrap.align-right  { justify-content: flex-end; }

/* ── Image display ── */
.cms-image {
  max-width: 100%;
  display: block;
  border-radius: var(--radius-sm, 10px);
}
.cms-image.fit-contain { object-fit: contain; }
.cms-image.fit-cover   { object-fit: cover; }
.cms-image.fit-fill    { object-fit: fill; }

/* ── Typography upgrade — B2B Konveksi ── */
/* Poppins loaded via Google Fonts in header */
h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.sg-hero h1,
.sg-hero-text h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.sg-section-title h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.2;
}

/* Dark section text fix */
.sg-section-dark .sg-section-title h2,
.sg-section-dark h2,
.sg-section-dark h3 { color: #fff; }

.sg-section-dark .sg-section-title p { color: rgba(255,255,255,0.72); }

/* Gold section text fix */
.sg-section-gold .sg-section-title h2,
.sg-section-gold h2,
.sg-section-gold h3 { color: #1F1D1D; }

.sg-section-gold .sg-section-title p { color: rgba(31,29,29,0.75); }

/* CTA button high-contrast */
.btn.btn-primary {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Mobile typography */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .sg-section-title h2 { font-size: 1.5rem; }
  .sg-section-title { margin-bottom: 36px; }
}

/* ══════════════════════════════════════════════════════
   HERO SLIDER — Vanilla fade carousel
   ══════════════════════════════════════════════════════ */
.sg-hero-slider {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* min-height prevents layout shift while images load */
  min-height: 280px;
}

.sg-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.sg-hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative; /* first active slide takes space */
}

/* Images inside slider */
.sg-hero-slide img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  border-radius: var(--radius-sm, 10px);
  display: block;
}

/* Dot navigation */
.sg-hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.sg-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(201,162,63,0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.sg-slider-dot.active {
  background: var(--gold, #C9A23F);
  transform: scale(1.25);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sg-hero-slider { max-width: 100%; min-height: 200px; }
  .sg-hero-slide img { height: 220px; }
}


/* ══════════════════════════════════════════════════════
   AUDIENCE CARDS — Interactive hover state
   ══════════════════════════════════════════════════════ */
.sg-audience-card {
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 10px);
  padding: 20px 16px;
  background: #fff;
  text-align: center;
}

.sg-audience-card.is-active,
.sg-audience-card:hover {
  border-color: var(--gold, #C9A23F);
  box-shadow: 0 12px 32px rgba(201,162,63,.22);
  transform: translateY(-3px);
}

.sg-audience-card.is-active .sg-audience-icon i,
.sg-audience-card:hover .sg-audience-icon i {
  color: var(--gold, #C9A23F);
}

.sg-audience-icon {
  width: 52px;
  height: 52px;
  background: var(--gold-light, rgba(201,162,63,0.10));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--gold, #C9A23F);
  font-size: 1.3rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.sg-audience-card.is-active .sg-audience-icon,
.sg-audience-card:hover .sg-audience-icon {
  background: var(--gold, #C9A23F);
  color: #fff;
}

/* ── AUDIENCE SHOWCASE BLOCK ── */
.sg-audience-showcase {
  margin-top: 56px;
  position: relative;
}

.sg-audience-showcase-header {
  text-align: center;
  margin-bottom: 28px;
}

.sg-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold, #C9A23F);
  margin-bottom: 10px;
}

.sg-audience-showcase-header h3 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--black, #1F1D1D);
}

.sg-audience-showcase-hint {
  font-size: 0.85rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sg-audience-showcase-hint i { color: var(--gold, #C9A23F); }

/* ── SLIDER ── */
.sg-audience-slider {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #f3f3f3;
  /* Fixed height prevents layout shift */
  min-height: 300px;
}

.sg-audience-slide {
  display: none;
  position: relative;
}

.sg-audience-slide.is-active {
  display: block;
  animation: sgAudFade 0.45s ease;
}

@keyframes sgAudFade {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1);     }
}

.sg-audience-slide img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Caption overlay */
.sg-audience-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 32px 20px 16px;
  border-radius: 0 0 20px 20px;
}

/* Dot navigation */
.sg-audience-slider-nav {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 14px 0 4px;
}

.sg-aud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(201,162,63,0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.sg-aud-dot.is-active {
  background: var(--gold, #C9A23F);
  transform: scale(1.4);
}

/* Dark section adjustments */
.sg-section-dark .sg-audience-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.sg-section-dark .sg-audience-card h4 { color: #fff; }
.sg-section-dark .sg-audience-card p  { color: rgba(255,255,255,0.72); }
.sg-section-dark .sg-audience-showcase-header h3 { color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .sg-audience-card { padding: 16px 12px; }
  .sg-audience-slide img { height: 240px; }
  .sg-audience-slider { min-height: 200px; border-radius: 14px; }
  .sg-audience-caption { border-radius: 0 0 14px 14px; }
  .sg-audience-showcase-hint { font-size: 0.78rem; }
  .sg-audience-showcase-hint::before {
    content: "Tap kategori di atas untuk filter gambar.";
    display: block;
  }
}


/* ══════════════════════════════════════════════════════════
   HERO CLEAN — Image Left, Text Right
   ══════════════════════════════════════════════════════════ */

.sg-hero-clean {
  background: #F5F5F2;
  color: #0D2B45;
  padding: 80px 0 56px;
  position: relative;
  overflow: hidden;
}

.sg-hero-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

/* ── LEFT: IMAGE ──────────────────────────────────────── */
.sg-hero-clean-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-hero-clean-img {
  max-width: 520px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  display: block;
}

.sg-hero-clean-placeholder {
  width: 100%;
  min-height: 320px;
  background: #eee;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
  gap: 12px;
}
.sg-hero-clean-placeholder i { font-size: 2.5rem; }

/* Floating stat chips */
.sg-hc-stat {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  pointer-events: none;
}
.sg-hc-stat strong {
  font-size: 1rem;
  font-weight: 800;
  color: #C9A23F;
  line-height: 1;
}
.sg-hc-stat span {
  font-size: 0.65rem;
  color: #6b7280;
  font-weight: 500;
  margin-top: 3px;
  text-align: center;
  white-space: nowrap;
}
.sg-hc-stat-1 { bottom: 40px; right: 12%; }
.sg-hc-stat-2 { top:  40px;   right: 6%;  }

/* ── CLEAN SLIDER ─────────────────────────────────────── */
.sg-hero-clean-slider {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 320px;
}
.sg-hcs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
}
.sg-hcs-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.sg-hcs-slide img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: 24px;
  display: block;
}
.sg-hcs-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.sg-hcs-dot {
  width: 8px; height: 8px;
  border-radius: 50%; border: none;
  background: rgba(13,43,69,0.2);
  cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.sg-hcs-dot.active {
  background: #0D2B45;
  transform: scale(1.3);
}

/* ── RIGHT: CONTENT ───────────────────────────────────── */
.sg-hero-clean-content { max-width: 580px; }

.sg-hero-clean-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(13,43,69,0.08);
  color: #0D2B45;
  border: 1px solid rgba(13,43,69,0.15);
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.sg-hero-clean-content h1 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  color: #0D2B45;
  margin-bottom: 20px;
}

.sg-hero-clean-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  max-width: 520px;
  margin-bottom: 24px;
}

/* Bullet list (from section items) */
.sg-hc-bullets {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-hc-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #334155;
  font-weight: 500;
}
.sg-hc-bullets li i { color: #C9A23F; flex-shrink: 0; }

/* CTA row */
.sg-hc-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sg-btn-primary-clean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0D2B45;
  color: #fff !important;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(13,43,69,0.22);
}
.sg-btn-primary-clean:hover {
  background: #183554;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(13,43,69,0.3);
}
.sg-btn-primary-clean i { font-size: 1.1rem; }

.sg-btn-outline-clean {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #0D2B45 !important;
  border: 2px solid #0D2B45;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}
.sg-btn-outline-clean:hover {
  background: #0D2B45;
  color: #fff !important;
}

.sg-hc-micro {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sg-hc-micro i { color: #C9A23F; margin-right: 2px; }

/* ══ TRUSTED LOGO STRIP ════════════════════════════════ */
.sg-trusted-strip {
  background: #F5F5F2;
  border-top: 1px solid rgba(13,43,69,0.08);
  border-bottom: 1px solid rgba(13,43,69,0.08);
  padding: 32px 0;
}
.sg-trusted-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.sg-trusted-title {
  min-width: 200px;
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #0D2B45;
  font-weight: 700;
}
.sg-trusted-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.sg-trusted-logos::-webkit-scrollbar { display: none; }
.sg-trusted-logos img {
  max-height: 46px;
  max-width: 110px;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.sg-trusted-logos img:hover { opacity: 1; }

/* Logo item wrapper (with optional caption) */
.sg-trusted-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.sg-trusted-logo-caption {
  font-size: 0.65rem;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}


/* ══ WHY CLIENTS TRUST US ══════════════════════════════ */
.sg-hc-trust-section {
  background: #fff;
  padding: 80px 0;
}

.sg-hc-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.sg-hc-trust-card {
  background: #7F8FAA;
  color: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sg-hc-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(127,143,170,0.35);
}

.sg-hc-trust-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.3rem;
  color: #fff;
}

.sg-hc-trust-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.sg-hc-trust-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* ── MOBILE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .sg-hc-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sg-hero-clean { padding: 56px 0 40px; }

  .sg-hero-clean-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Mobile: text first, image below */
  .sg-hero-clean-content { order: 1; }
  .sg-hero-clean-image   { order: 2; }

  .sg-hero-clean-content h1 { font-size: 1.85rem; }

  .sg-hc-stat-1 { bottom: 10px; right: 8%;  }
  .sg-hc-stat-2 { top:    10px; right: 4%;  }

  .sg-trusted-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  .sg-hc-trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .sg-hero-clean-img { max-width: 100%; border-radius: 16px; }
  .sg-hero-clean-slider { max-width: 100%; }
  .sg-hcs-slide img { border-radius: 16px; }
}

@media (max-width: 480px) {
  .sg-hc-cta-row { flex-direction: column; align-items: flex-start; }
  .sg-btn-primary-clean,
  .sg-btn-outline-clean { width: 100%; justify-content: center; }
  .sg-hc-micro { flex-direction: column; align-items: flex-start; }
}