/* ============================================
   Indonesia-Specific Styles & Enhancements
   ============================================ */

/* Indonesia-specific typography adjustments */
body {
  text-rendering: optimizeLegibility;
  /* Critical: prevent horizontal overflow on all devices */
  overflow-x: hidden;
  width: 100%;
  /* DO NOT add position:relative to body - it breaks sticky header! */
}

/* Enhanced sticky header for better visibility */
.hidden-e551 {
  will-change: transform, box-shadow;
}

/* Improve header button visibility on scroll */
.hidden-e551.card_blue_9665 .mask_iron_2be9 {
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.5);
}

/* Add subtle pulse effect to download button */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
  }
  50% {
    box-shadow: 0 2px 14px rgba(16, 185, 129, 0.6);
  }
}

.mask_iron_2be9 {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Ensure no element can cause horizontal scroll */
* {
  max-width: 100%;
}

/* Allow full-width sections */
section,
.north_5b74,
.under_2607,
.complex_6a33,
.box-paper-4cd2,
.progress_3c7d,
.title-7823 {
  max-width: none;
  width: 100%;
}

/* Header MUST be separate to maintain sticky */
.hidden-e551 {
  max-width: none !important;
  width: 100% !important;
}

/* Better readability for Indonesian text */
p, li, td {
  hyphens: auto;
  word-wrap: break-word;
}

/* Indonesia-specific color overrides for better cultural fit */
:root {
  --color-indonesian-red: #ce1126;
  --color-indonesian-white: #ffffff;
}

/* Additional animations for better UX */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fn-show-6928 {
  animation: fadeInUp 0.6s ease-out;
}

/* Mobile optimizations for Indonesia (often slower connections) */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure all containers fit */
  .frame-hard-0b81,
  .orange_0834,
  .progress_stale_09dd,
  .large-7447,
  .item-e44c {
    width: 100%;
    max-width: 100%;
  }
  
  /* Better text wrapping */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Prevent code overflow */
  pre, code {
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

/* Extra small mobile (≤480px) */
@media (max-width: 480px) {
  /* More aggressive space reduction */
  .north_5b74,
  .under_2607,
  .box-paper-4cd2,
  .progress_3c7d {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Full-width buttons */
  .notice-action-580e,
  .article_red_2653,
  .mask-17e7 {
    width: 100%;
    justify-content: center;
  }
  
  /* Stack flex items */
  .mask_simple_1a8a,
  .dirty_8590,
  .next_d685,
  .prev_8d83 {
    flex-direction: column;
    width: 100%;
  }
  
  /* Smaller stat cards */
  .row_dark_97ff {
    padding: 1rem;
  }
  
  .caption-4213 {
    font-size: 1.75rem;
  }
}

/* Improve tap targets for mobile (common in Indonesia) */
@media (hover: none) and (pointer: coarse) {
  .notice-action-580e,
  .table_081f,
  .message_yellow_2ee6 {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* Better contrast for outdoor viewing (common in tropical climate) */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-border: #999999;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-bg-alt: #2d2d2d;
    --color-bg-section: #242424;
    --color-text: #e0e0e0;
    --color-text-light: #b0b0b0;
    --color-border: #404040;
  }
  
  .hidden-e551 {
    background: #2d2d2d;
  }
  
  .pattern_advanced_116c,
  .new_86c6,
  .row_dark_97ff,
  .up_33e2,
  .section-4776 {
    background: #2d2d2d;
  }
}

/* Loading states for slow connections */
.fn-loading-6928 {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.fn-loading-6928::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Optimize for Indonesian payment methods */
.button-medium-9d08 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}

.feature-a65f {
  width: 60px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.feature-a65f:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Whatsapp link styling (popular in Indonesia) */
a[href*="whatsapp.banner-b4a2"] {
  background: #25d366;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a[href*="whatsapp.banner-b4a2"]:hover {
  background: #1da851;
}

/* Indonesia-specific accessibility */
[lang="id"] {
  quotes: '"' '"' "'" "'";
}

/* Better number formatting for Indonesian locale */
.focus_ad3e {
  font-variant-numeric: tabular-nums;
}

/* Rupiah currency formatting */
.main-f607::before {
  content: "Rp ";
}

/* Performance optimizations */
.wrapper-fresh-f7ca {
  opacity: 0;
  transition: opacity 0.3s;
}

.wrapper-fresh-f7ca.fn-loaded-6928 {
  opacity: 1;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================
   2026 EMERALD TECH MODERN LAYOUT & RE-STYLING SYSTEM
   ======================================================== */

:root {
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --amber-50: #fffbeb;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
}

/* Global Reset & Page Canvas */
body {
  background-color: var(--slate-50);
  color: var(--slate-900);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Main Container Constraint & Padding */
.frame-hard-0b81 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* ========================================================
   1. MODERN GLASSMORPHIC HEADER
   ======================================================== */
header.hidden-e551 {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
  transition: all 0.3s ease !important;
}

.breadcrumb-yellow-d01d {
  padding: 0.85rem 0 !important;
}

.label-down-703f {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.alert-last-6850 {
  background: linear-gradient(135deg, var(--emerald-50) 0%, var(--emerald-100) 100%) !important;
  color: var(--emerald-800) !important;
  border: 1px solid var(--emerald-300) !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.02em !important;
}

.component-d229 {
  gap: 8px !important;
}

.table_081f {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: var(--slate-700) !important;
  transition: all 0.2s ease !important;
}

.table_081f:hover,
.table_081f.fn-active-6928 {
  color: var(--emerald-700) !important;
  background: var(--emerald-50) !important;
}

.table_081f.fn-active-6928::after {
  display: none !important;
}

/* Header Buttons */
.mask_simple_1a8a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.popup_0d40 {
  border: 1.5px solid var(--slate-200) !important;
  color: var(--slate-700) !important;
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
}

.popup_0d40:hover {
  background: var(--emerald-50) !important;
  color: var(--emerald-800) !important;
  border-color: var(--emerald-400) !important;
  transform: translateY(-1px) !important;
}

.mask_iron_2be9 {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mask_iron_2be9:hover {
  background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-800) 100%) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Metadata Top Ribbon */
.picture-fd12 {
  background: #ffffff !important;
  border-bottom: 1px solid var(--slate-200) !important;
  padding: 10px 0 !important;
}

.prev_8d83 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  align-items: center !important;
}

.yellow-11c1 {
  color: var(--slate-600) !important;
  font-size: 0.8125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.yellow-11c1 svg {
  color: var(--emerald-600) !important;
}

.yellow-11c1 a {
  color: var(--emerald-700) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ========================================================
   2. HERO SECTION - ULTRA MODERN APP SHOWCASE
   ======================================================== */
.north_5b74 {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 40%, var(--slate-50) 100%) !important;
  padding: 3.5rem 0 3.5rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

.north_5b74::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -100px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(236, 253, 245, 0) 70%);
  pointer-events: none;
  border-radius: 50%;
}

.orange_0834 {
  display: grid !important;
  grid-template-columns: 1.25fr 0.75fr !important;
  gap: 3.5rem !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  .orange_0834 {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

.sidebar_silver_527b {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--emerald-200) !important;
  margin-bottom: 1.25rem !important;
  font-size: 0.8125rem !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08) !important;
}

.sidebar_silver_527b a {
  color: var(--emerald-800) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.stone_80fc {
  font-size: 2.5rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: var(--slate-900) !important;
  margin-bottom: 1.25rem !important;
}

@media (max-width: 640px) {
  .stone_80fc {
    font-size: 1.85rem !important;
  }
}

.title_c1af {
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  color: var(--slate-600) !important;
  margin-bottom: 2rem !important;
}

.title_c1af strong {
  color: var(--emerald-800) !important;
}

/* Feature 3-Item Trust Bar */
.next_d685 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 2.25rem !important;
}

@media (max-width: 768px) {
  .next_d685 {
    grid-template-columns: 1fr !important;
  }
}

.tag-410f {
  background: #ffffff !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
}

.tag-410f:hover {
  border-color: var(--emerald-400) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.12) !important;
}

.hover-warm-590d {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

.grid-stale-efb8 strong {
  font-size: 0.875rem !important;
  font-weight: 750 !important;
  color: var(--slate-900) !important;
}

.grid-stale-efb8 span {
  font-size: 0.75rem !important;
  color: var(--slate-500) !important;
}

/* Dual High-Impact Action Buttons */
.dirty_8590 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.dirty_8590 .fluid-6b85 {
  background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-800) 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.45) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.dirty_8590 .fluid-6b85:hover {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.55) !important;
}

.dirty_8590 .section_up_16f1 {
  background: #ffffff !important;
  color: var(--emerald-800) !important;
  border: 2px solid var(--emerald-400) !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.dirty_8590 .section_up_16f1:hover {
  background: var(--emerald-50) !important;
  border-color: var(--emerald-600) !important;
  color: var(--emerald-900) !important;
  transform: translateY(-2px) !important;
}

/* Right Showcase Card */
.aside_outer_a255 {
  background: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 24px !important;
  padding: 2.25rem 2rem !important;
  box-shadow: 0 20px 40px -10px rgba(5, 150, 105, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.08) !important;
  text-align: center !important;
  position: relative !important;
}

.aside_outer_a255::before {
  content: "⚡ OFFICIAL APK";
  position: absolute;
  top: -12px;
  right: 24px;
  background: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-600) 100%);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.aside_outer_a255 img {
  border-radius: 18px !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.3s ease !important;
}

.aside_outer_a255:hover img {
  transform: scale(1.03) !important;
}

.form_6bca {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--slate-100) !important;
}

.bronze-b265 {
  color: var(--amber-500) !important;
  font-size: 1.35rem !important;
  letter-spacing: 2px !important;
}

.slider_aa40 {
  font-weight: 850 !important;
  color: var(--slate-900) !important;
  font-size: 1.2rem !important;
  margin-left: 6px !important;
}

.detail-fd40 {
  color: var(--emerald-800) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  margin: 6px 0 !important;
}

.footer_98d1 {
  color: var(--slate-500) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

/* ========================================================
   3. STATS STRIP - BENTO METRICS GRID
   ======================================================== */
.under_2607 {
  background: #ffffff !important;
  padding: 2.75rem 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
}

.progress_stale_09dd {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 960px) {
  .progress_stale_09dd {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .progress_stale_09dd {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.row_dark_97ff {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-top: 4px solid var(--emerald-500) !important;
  border-radius: 16px !important;
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.25s ease !important;
}

.row_dark_97ff:hover {
  transform: translateY(-4px) !important;
  background: #ffffff !important;
  border-color: var(--emerald-300) !important;
  border-top-color: var(--emerald-600) !important;
  box-shadow: 0 12px 24px -6px rgba(5, 150, 105, 0.15) !important;
}

.caption-4213 {
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: var(--emerald-700) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 4px !important;
}

.notification-in-c01b {
  font-size: 0.9375rem !important;
  font-weight: 750 !important;
  color: var(--slate-900) !important;
}

.hard-0de0 {
  font-size: 0.75rem !important;
  color: var(--slate-500) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

/* ========================================================
   4. TABLE OF CONTENTS - COMPACT BENTO GRID
   ======================================================== */
.complex_6a33 {
  background: var(--slate-50) !important;
  padding: 3rem 0 !important;
}

.rough_82ed {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 2.25rem !important;
  border: 1px solid var(--slate-200) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.tertiary-8b5a {
  font-size: 1.4rem !important;
  font-weight: 850 !important;
  color: var(--slate-900) !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tertiary-8b5a::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, var(--emerald-500) 0%, var(--emerald-700) 100%);
  border-radius: 4px;
}

.list_3c76 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px 20px !important;
  list-style: none !important;
  counter-reset: toc-counter !important;
  padding-left: 0 !important;
}

@media (max-width: 680px) {
  .list_3c76 {
    grid-template-columns: 1fr !important;
  }
}

.list_3c76 li {
  counter-increment: toc-counter !important;
}

.list_3c76 a {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 12px !important;
  color: var(--slate-800) !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  font-size: 0.9375rem !important;
  transition: all 0.2s ease !important;
}

.list_3c76 a::before {
  content: counter(toc-counter, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--emerald-100);
  color: var(--emerald-800);
  font-size: 0.75rem;
  font-weight: 850;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.list_3c76 a:hover {
  background: var(--emerald-50) !important;
  border-color: var(--emerald-400) !important;
  color: var(--emerald-800) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08) !important;
}

/* ========================================================
   5. ARTICLE CONTENT CARDS
   ======================================================== */
.box-paper-4cd2 {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 3rem 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.box-paper-4cd2.shadow_e677 {
  background: var(--slate-100) !important;
  border-top: 1px solid var(--slate-200) !important;
  border-bottom: 1px solid var(--slate-200) !important;
  box-shadow: none !important;
}

.box-paper-4cd2 > .frame-hard-0b81 {
  background: #ffffff !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 24px !important;
  padding: 3rem !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .box-paper-4cd2 {
    padding: 1.5rem 0 !important;
  }
  .box-paper-4cd2 > .frame-hard-0b81 {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
}

.icon-middle-8804 {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3) !important;
}

.upper_9473 {
  font-size: 1.85rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  color: var(--slate-900) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.85rem !important;
}

@media (max-width: 640px) {
  .upper_9473 {
    font-size: 1.45rem !important;
  }
}

.hot_dffb {
  font-size: 1.05rem !important;
  color: var(--slate-600) !important;
  line-height: 1.7 !important;
  border-bottom: 1px solid var(--slate-100) !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* Headings inside content */
.box-paper-4cd2 h3 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin: 1.75rem 0 0.85rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.box-paper-4cd2 p {
  color: var(--slate-700) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
}

/* Two-column layout in Section 1 & Section 2 */
.item-e44c {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 2rem !important;
  align-items: start !important;
}

.element_clean_4ef8 {
  min-width: 0 !important;
  width: 100% !important;
}

.hovered_6214 {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 960px) {
  .item-e44c {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================
   6. FEATURE LISTS & CALLOUTS (Mengapa Populer)
   ======================================================== */
.background_center_e1fd {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  counter-reset: feature-counter !important;
  padding: 0 !important;
  margin: 1.5rem 0 2rem 0 !important;
}

@media (max-width: 1100px) {
  .background_center_e1fd {
    grid-template-columns: 1fr !important;
  }
}

.background_center_e1fd li {
  counter-increment: feature-counter !important;
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.25rem !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}

.background_center_e1fd li:hover {
  background: #ffffff !important;
  border-color: var(--emerald-300) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.1) !important;
}

.background_center_e1fd li::before {
  content: counter(feature-counter) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3) !important;
}

.background_center_e1fd li strong {
  display: block !important;
  font-size: 1.05rem !important;
  color: var(--slate-900) !important;
  margin-bottom: 0.35rem !important;
}

/* Callout Alert Boxes */
.header-98db {
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin: 1.75rem 0 !important;
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
}

.background-057a {
  background: var(--amber-50) !important;
  border: 1.5px solid var(--amber-400) !important;
}

.menu-rough-758b {
  background: var(--emerald-50) !important;
  border: 1.5px solid var(--emerald-400) !important;
}

.breadcrumb-hovered-9de5 {
  font-size: 1.5rem !important;
  flex-shrink: 0 !important;
}

.panel_wood_fe13 {
  font-size: 0.9375rem !important;
  color: var(--slate-800) !important;
  line-height: 1.65 !important;
}

.panel_wood_fe13 strong {
  color: var(--slate-900) !important;
}

/* Author Box */
.shade_8bf4 {
  background: var(--emerald-50) !important;
  border: 1.5px solid var(--emerald-300) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin: 1.75rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
}

.header_9e6a {
  font-size: 0.9375rem !important;
  color: var(--slate-700) !important;
  line-height: 1.6 !important;
}

.header_9e6a strong {
  color: var(--emerald-900) !important;
}

/* Right Sidebar Spec Card */
.hovered_6214 {
  position: sticky !important;
  top: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.pattern_advanced_116c {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 20px !important;
  padding: 1.75rem !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.pattern_advanced_116c h4 {
  font-size: 1.15rem !important;
  font-weight: 850 !important;
  color: var(--slate-900) !important;
  margin-bottom: 1.25rem !important;
  border-bottom: 2px solid var(--emerald-500) !important;
  padding-bottom: 0.5rem !important;
}

.pattern_advanced_116c.button_9993 {
  background: linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-900) 100%) !important;
  border: 1px solid var(--emerald-600) !important;
  color: #ffffff !important;
}

.pattern_advanced_116c.button_9993 h4 {
  color: #ffffff !important;
  border-bottom: 2px solid var(--emerald-400) !important;
}

.pattern_advanced_116c.button_9993 .lite_b971 {
  background: #ffffff !important;
  color: var(--emerald-800) !important;
  border: 3px solid var(--emerald-400) !important;
}

.pattern_advanced_116c.button_9993 .gradient_medium_257c li {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.modal-hard-a7cd {
  text-align: center !important;
  margin-bottom: 1.25rem !important;
}

.lite_b971 {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  margin: 0 auto 0.5rem auto !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.lite_b971 span {
  font-size: 1rem !important;
  font-weight: 700 !important;
  opacity: 0.7 !important;
}

.gallery-2478 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.box_0a0c {
  display: grid !important;
  grid-template-columns: 110px 1fr 36px !important;
  align-items: center !important;
  gap: 10px !important;
}

.video_b478 {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--slate-700) !important;
}

.hard_ffd5 {
  height: 8px !important;
  background: var(--slate-200) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.popup-lite-4fd2 {
  height: 100% !important;
  background: linear-gradient(90deg, var(--emerald-500) 0%, var(--emerald-400) 100%) !important;
  border-radius: 999px !important;
}

.title-f731 {
  font-size: 0.875rem !important;
  font-weight: 850 !important;
  color: var(--emerald-700) !important;
  text-align: right !important;
}

.breadcrumb-942f {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 1rem !important;
  color: var(--emerald-700) !important;
  font-weight: 750 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.breadcrumb-942f:hover {
  color: var(--emerald-900) !important;
  transform: translateX(4px) !important;
}

.surface_simple_b235 {
  display: flex !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--slate-200) !important;
  font-size: 0.875rem !important;
}

.surface_simple_b235:last-child {
  border-bottom: none !important;
}

.surface_simple_b235 dt {
  color: var(--slate-500) !important;
  font-weight: 600 !important;
}

.surface_simple_b235 dd {
  color: var(--slate-900) !important;
  font-weight: 700 !important;
}

/* ========================================================
   7. BENCHMARK & COMPARISON TABLES & FEATURE GRID
   ======================================================== */
.large-7447 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 2rem 0 !important;
}

@media (max-width: 992px) {
  .large-7447 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .large-7447 {
    grid-template-columns: 1fr !important;
  }
}

.new_86c6 {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 20px !important;
  padding: 1.75rem !important;
  position: relative !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.new_86c6:hover {
  background: #ffffff !important;
  border-color: var(--emerald-400) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(5, 150, 105, 0.12) !important;
}

.hot_9c9d {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--emerald-200) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  line-height: 1 !important;
}

.new_86c6 h4 {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin-bottom: 0.75rem !important;
  padding-right: 2rem !important;
  line-height: 1.4 !important;
}

.new_86c6 p {
  font-size: 0.9375rem !important;
  color: var(--slate-600) !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem !important;
  flex-grow: 1 !important;
}

.component-dynamic-0a9e {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--slate-200) !important;
}

.component-dynamic-0a9e .frame-green-85db {
  font-size: 0.8125rem !important;
  color: var(--slate-500) !important;
  font-weight: 600 !important;
}

.component-dynamic-0a9e .active_f1e9 {
  font-size: 1rem !important;
  font-weight: 850 !important;
  color: var(--emerald-700) !important;
  background: var(--emerald-100) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.hot-96a0 {
  background: var(--emerald-50) !important;
  border: 1.5px solid var(--emerald-300) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
}

.hot-96a0 h4 {
  color: var(--emerald-900) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
}

.hot-96a0 p {
  color: var(--slate-700) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.hot-96a0 a {
  color: var(--emerald-700) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* ========================================================
   7. BENCHMARK & COMPARISON TABLES
   ======================================================== */
.surface_3c7a {
  border: 1px solid var(--slate-200) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 1.75rem 0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

.middle_a3a2,
.notification_11bf {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
}

.middle_a3a2 thead th,
.notification_11bf thead th {
  background: var(--slate-900) !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  font-weight: 750 !important;
  font-size: 0.875rem !important;
  text-align: left !important;
  letter-spacing: 0.02em !important;
}

.middle_a3a2 tbody tr,
.notification_11bf tbody tr {
  border-bottom: 1px solid var(--slate-200) !important;
  transition: background-color 0.15s ease !important;
}

.middle_a3a2 tbody tr:nth-child(even),
.notification_11bf tbody tr:nth-child(even) {
  background-color: var(--slate-50) !important;
}

.middle_a3a2 tbody tr:hover,
.notification_11bf tbody tr:hover {
  background-color: var(--emerald-50) !important;
}

.middle_a3a2 tbody td,
.notification_11bf tbody td {
  padding: 14px 18px !important;
  font-size: 0.9375rem !important;
  color: var(--slate-800) !important;
}

/* ========================================================
   8. SECTION 3 - UNIVERSAL VS ARM DOWNLOAD MATRIX
   ======================================================== */
.status-2572 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin: 2rem 0 !important;
}

@media (max-width: 768px) {
  .status-2572 {
    grid-template-columns: 1fr !important;
  }
}

.backdrop_d2b5 {
  border-radius: 20px !important;
  padding: 2.25rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.25s ease !important;
}

.backdrop_d2b5:hover {
  transform: translateY(-4px) !important;
}

.background_mini_47fb {
  background: linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-900) 100%) !important;
  border: 2px solid var(--emerald-500) !important;
}

.background_mini_47fb::after {
  content: "⭐ RECOMMENDED";
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--amber-500);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 9999px;
}

.lower-d508 {
  background: linear-gradient(135deg, var(--slate-800) 0%, var(--slate-900) 100%) !important;
  border: 1px solid var(--slate-700) !important;
}

.backdrop_d2b5 h4 {
  font-size: 1.4rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  margin-bottom: 1.25rem !important;
}

.backdrop_d2b5 ul {
  list-style: none !important;
  padding: 0 !important;
  margin-bottom: 2rem !important;
}

.backdrop_d2b5 li {
  padding: 8px 0 !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  opacity: 0.95 !important;
}

.backdrop_d2b5 .notice-action-580e {
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.background_mini_47fb .notice-action-580e {
  background: #ffffff !important;
  color: var(--emerald-900) !important;
}

.background_mini_47fb .notice-action-580e:hover {
  background: var(--emerald-50) !important;
  transform: translateY(-2px) !important;
}

.lower-d508 .notice-action-580e {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
}

.lower-d508 .notice-action-580e:hover {
  background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-800) 100%) !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   9. SECTION 4 - STEP-BY-STEP TUTORIAL (MODERN TECH TIMELINE)
   ======================================================== */
.tiny-1a65 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 2rem 0 !important;
  box-shadow: none !important;
}

.item_ce21 {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  position: relative !important;
}

/* Connective timeline line on desktop */
@media (min-width: 769px) {
  .item_ce21::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 28px;
    width: 3px;
    background: linear-gradient(180deg, var(--emerald-400) 0%, var(--emerald-600) 50%, var(--emerald-300) 100%);
    border-radius: 9999px;
    z-index: 1;
    opacity: 0.4;
  }
}

/* Individual Step Card */
.summary_78be {
  background: #ffffff !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 20px !important;
  padding: 2.25rem 2.5rem !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 640px) {
  .summary_78be {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }
}

.summary_78be:hover {
  border-color: var(--emerald-400) !important;
  box-shadow: 0 12px 30px -4px rgba(5, 150, 105, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(-3px) !important;
}

/* Step Header */
.main_9818 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 1.75rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--slate-100) !important;
}

.pagination-40b8 {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 0.8125rem !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

.main_9818 h3 {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 850 !important;
  color: var(--slate-900) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

@media (max-width: 640px) {
  .main_9818 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .main_9818 h3 {
    font-size: 1.25rem !important;
  }
}

/* Step Body: Left instructions & Right Smartphone Mockup */
.status-purple-f438 {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 2.5rem !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  .status-purple-f438 {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
}

/* Left Instructions Typography */
.outline-9146 p {
  color: var(--slate-700) !important;
  font-size: 1.025rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

.outline-9146 ol {
  padding-left: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.outline-9146 ol li {
  color: var(--slate-800) !important;
  padding: 6px 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.outline-9146 ol li strong {
  color: var(--slate-900) !important;
  font-weight: 700 !important;
}

.outline-9146 ul {
  padding-left: 1.25rem !important;
  margin: 0.5rem 0 1rem 0 !important;
}

.outline-9146 ul li {
  color: var(--slate-700) !important;
  padding: 4px 0 !important;
  font-size: 0.9375rem !important;
}

/* Context Callout Boxes inside Step */
.modal-4d92,
.article-last-f02a,
.component_62c2,
.basic_aff8,
.silver_3e61 {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-left: 4px solid var(--emerald-500) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 1.25rem !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--slate-700) !important;
}

.outline-9146 code {
  background: var(--emerald-50) !important;
  color: var(--emerald-800) !important;
  border: 1px solid var(--emerald-200) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.modal-4d92 strong,
.article-last-f02a strong,
.component_62c2 strong,
.basic_aff8 strong,
.silver_3e61 strong {
  color: var(--slate-900) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.primary-warm-49ca {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid var(--amber-500) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 1.25rem !important;
  font-size: 0.9rem !important;
  color: #92400e !important;
}

/* SHA-256 Code Card inside Step 3 */
.dirty-10f3 {
  background: var(--slate-900) !important;
  border: 1px solid var(--slate-700) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  margin: 1.25rem 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.active-e5de {
  color: var(--emerald-400) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.tag-active-24e3 {
  background: #020617 !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  word-break: break-all !important;
  line-height: 1.6 !important;
  display: block !important;
  margin-bottom: 12px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.02em !important;
}

.article-2013 {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 0.875rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.article-2013:hover {
  background: linear-gradient(135deg, var(--emerald-400) 0%, var(--emerald-600) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.45) !important;
}

/* Right Smartphone Screenshot Mockup Box */
.picture_center_9e4d {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem !important;
  background: linear-gradient(135deg, var(--emerald-50) 0%, var(--slate-100) 100%) !important;
  border-radius: 20px !important;
  border: 1px solid var(--slate-200) !important;
}

.picture_center_9e4d img {
  border-radius: 16px !important;
  box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  max-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}

.summary_78be:hover .picture_center_9e4d img {
  transform: scale(1.04) !important;
}

/* Bottom Tutorial Support Box */
.basic-d74e {
  margin-top: 2.5rem !important;
}

.nav-355b {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--emerald-950) 100%) !important;
  border-radius: 20px !important;
  padding: 2.25rem !important;
  color: #ffffff !important;
  text-align: center !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.nav-355b h4 {
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  margin-bottom: 0.5rem !important;
}

.nav-355b p {
  color: var(--emerald-100) !important;
  font-size: 0.95rem !important;
  max-width: 600px !important;
  margin: 0 auto 1.5rem auto !important;
}

.nav-355b p a {
  color: var(--amber-400) !important;
  text-decoration: underline !important;
}

.over_58fb {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.over_58fb .notice-action-580e {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.over_58fb .notice-action-580e:hover {
  background: var(--emerald-600) !important;
  border-color: var(--emerald-500) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4) !important;
}

/* ========================================================
   10. SECTION 5 - CYBER SECURITY & AUDIT GRID
   ======================================================== */
.mask-full-72ad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 2rem 0 !important;
}

@media (max-width: 960px) {
  .mask-full-72ad {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .mask-full-72ad {
    grid-template-columns: 1fr !important;
  }
}

.progress_right_86af {
  border-radius: 18px !important;
  padding: 1.75rem !important;
  border: 1px solid var(--slate-200) !important;
  background: var(--slate-50) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
}

.progress_right_86af:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.08) !important;
  background: #ffffff !important;
}

.progress_right_86af.tabs_0adb {
  border-left: 4px solid var(--emerald-500) !important;
}

.progress_right_86af.header_47a9 {
  border-left: 4px solid var(--amber-500) !important;
}

.gradient_31fa {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 850 !important;
  font-size: 1rem !important;
  margin-bottom: 1rem !important;
}

.tabs_0adb .gradient_31fa {
  background: var(--emerald-100) !important;
  color: var(--emerald-800) !important;
}

.header_47a9 .gradient_31fa {
  background: var(--amber-100) !important;
  color: var(--amber-800) !important;
}

.progress_right_86af h4 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin-bottom: 0.5rem !important;
}

.progress_right_86af p {
  font-size: 0.9375rem !important;
  color: var(--slate-600) !important;
  margin-bottom: 1rem !important;
}

.breadcrumb-52ec {
  background: #ffffff !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 0.8125rem !important;
  color: var(--slate-700) !important;
  line-height: 1.6 !important;
}

.breadcrumb-52ec strong {
  color: var(--slate-900) !important;
}

/* Cyber Terminal / Code Box */
.gold_1522 {
  background: var(--slate-900) !important;
  border: 1px solid var(--slate-700) !important;
  border-radius: 14px !important;
  padding: 1.25rem !important;
  margin: 1.25rem 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.full_5173 {
  color: var(--slate-400) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.gold_1522 code {
  color: var(--emerald-400) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
  word-break: break-all !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* ========================================================
   11. SECTION 7 - MODERN FAQ ACCORDION
   ======================================================== */
.section-4776 {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 16px !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.section-4776:hover {
  border-color: var(--emerald-300) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.06) !important;
}

.message_yellow_2ee6 {
  width: 100% !important;
  padding: 1.25rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  cursor: pointer !important;
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  color: var(--slate-900) !important;
  gap: 16px !important;
}

.message_yellow_2ee6:hover {
  color: var(--emerald-700) !important;
}

.badge-cold-fc17 {
  color: var(--emerald-600) !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.section-4776.fn-active-6928 .badge-cold-fc17 {
  transform: rotate(180deg) !important;
}

.pagination-68a0 {
  padding: 0 1.5rem 1.5rem 1.5rem !important;
  color: var(--slate-700) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  border-top: 1px solid var(--slate-200) !important;
  padding-top: 1.25rem !important;
  background: #ffffff !important;
}

/* ========================================================
   12. SECTION 6 - USER REVIEWS
   ======================================================== */
.description_22b0 {
  text-align: center !important;
  padding: 1.75rem !important;
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 18px !important;
  margin-bottom: 2rem !important;
}

.selected_e3f7 {
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  color: var(--emerald-700) !important;
  line-height: 1 !important;
}

.selected-8a7b {
  color: var(--amber-500) !important;
  font-size: 1.5rem !important;
  margin: 6px 0 !important;
}

.table_over_1f8c {
  color: var(--slate-500) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.thick_4b9f {
  background: var(--slate-200) !important;
  border-radius: 9999px !important;
  height: 8px !important;
  overflow: hidden !important;
}

.banner-in-cb6c {
  background: linear-gradient(90deg, var(--emerald-500) 0%, var(--emerald-400) 100%) !important;
  height: 100% !important;
  border-radius: 9999px !important;
}

.up_33e2 {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 18px !important;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem !important;
  transition: all 0.25s ease !important;
}

.up_33e2:hover {
  background: #ffffff !important;
  border-color: var(--emerald-300) !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.08) !important;
}

.frame-3c6e {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, var(--emerald-100) 0%, var(--emerald-200) 100%) !important;
  color: var(--emerald-900) !important;
  font-weight: 850 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.widget-selected-236a {
  background: var(--emerald-100) !important;
  color: var(--emerald-800) !important;
  font-size: 0.75rem !important;
  font-weight: 750 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

.easy_d788 {
  color: var(--amber-500) !important;
  font-size: 1.1rem !important;
}

.small_eae1 {
  background: var(--emerald-50) !important;
  color: var(--emerald-800) !important;
  border: 1px solid var(--emerald-200) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
}

/* ========================================================
   11. SECTION 8 - FINAL MEGA CTA BANNER
   ======================================================== */
.modal_2b49 {
  background: linear-gradient(135deg, var(--emerald-950) 0%, var(--slate-900) 60%, var(--emerald-900) 100%) !important;
  border-radius: 24px !important;
  padding: 3.5rem 2.5rem !important;
  color: #ffffff !important;
  text-align: center !important;
  box-shadow: 0 20px 40px rgba(2, 44, 34, 0.4) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  margin-top: 2rem !important;
}

.modal_2b49 h3 {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 0.85rem !important;
  justify-content: center !important;
}

.modal_2b49 p {
  color: var(--emerald-100) !important;
  font-size: 1.1rem !important;
  max-width: 650px !important;
  margin: 0 auto 2rem auto !important;
}

.modal_2b49 .mask-17e7.fluid-6b85 {
  background: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-600) 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 1.15rem !important;
  padding: 16px 36px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal_2b49 .mask-17e7.fluid-6b85:hover {
  background: linear-gradient(135deg, #fbbf24 0%, var(--amber-500) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.6) !important;
}

.modal_2b49 .section_up_16f1 {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  padding: 16px 32px !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal_2b49 .section_up_16f1:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   12. FOOTER - DARK SLATE TECH DESIGN
   ======================================================== */
footer.title-7823 {
  background: var(--slate-900) !important;
  border-top: 3px solid var(--emerald-500) !important;
  color: var(--slate-300) !important;
  padding: 4rem 0 2rem 0 !important;
}

.slider-e745 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.caption_pressed_8135 h3 {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin-bottom: 1.25rem !important;
}

.hidden_wide_2fdd {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

footer.title-7823 a {
  color: var(--emerald-400) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-size: 0.9rem !important;
}

footer.title-7823 a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.table-outer-b384 {
  border-top: 1px solid var(--slate-800) !important;
  padding-top: 2rem !important;
  margin-top: 3rem !important;
}

.tag-outer-b3f0 {
  background: var(--slate-800) !important;
  color: var(--emerald-400) !important;
  border: 1px solid var(--slate-700) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}

.tag-outer-b3f0:hover {
  background: var(--emerald-950) !important;
  color: #ffffff !important;
  border-color: var(--emerald-500) !important;
}

/* Related Guides Section */
.progress_3c7d {
  background: var(--slate-100) !important;
  padding: 3.5rem 0 !important;
  border-top: 1px solid var(--slate-200) !important;
}

.east-f0de {
  font-size: 1.85rem !important;
  font-weight: 850 !important;
  color: var(--slate-900) !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.badge-prev-fd6f {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 960px) {
  .badge-prev-fd6f {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .badge-prev-fd6f {
    grid-template-columns: 1fr !important;
  }
}

.white_2c4a {
  background: #ffffff !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.white_2c4a:hover {
  border-color: var(--emerald-400) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.12) !important;
}

.white_2c4a h4 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin: 0.75rem 0 0.5rem 0 !important;
}

.white_2c4a p {
  font-size: 0.875rem !important;
  color: var(--slate-600) !important;
  line-height: 1.5 !important;
}

/* css-noise: d936 */
.widget-item-w3 {
  padding: 0.2rem;
  font-size: 12px;
  line-height: 1.3;
}