{"id":2982,"date":"2023-05-08T11:36:51","date_gmt":"2023-05-08T11:36:51","guid":{"rendered":"https:\/\/themepanthers.com\/wp\/copygen\/v1\/?page_id=2982"},"modified":"2026-05-16T06:44:29","modified_gmt":"2026-05-16T06:44:29","slug":"features","status":"publish","type":"page","link":"https:\/\/gramiewer.com\/features\/","title":{"rendered":"Features"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2982\" class=\"elementor elementor-2982\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c003bec e-con-full e-flex e-con e-parent\" data-id=\"c003bec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29304fa elementor-widget elementor-widget-shortcode\" data-id=\"29304fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\r\n    :root {\r\n  --snapca-features-primary: #9D45EF;\r\n  --snapca-features-secondary: #C08EF0;\r\n  --snapca-features-accent: #9D45EF87;\r\n  --snapca-features-bg: #FAFAFA;\r\n  --snapca-features-white: #FFFFFF;\r\n  --snapca-features-dark: #1A1A1A;\r\n  --snapca-features-text: #54595F;\r\n  --snapca-features-text-light: #8A8F98;\r\n  --snapca-features-border: #EAEAEA;\r\n  --snapca-features-max-width: 1300px;\r\n  --snapca-features-radius: 20px;\r\n  --snapca-features-radius-sm: 12px;\r\n  --snapca-features-card-pad: 36px 30px;\r\n  --snapca-features-showcase-pad: 48px;\r\n}\r\n\r\n.snapca-feat-container {\r\n  max-width: var(--snapca-features-max-width);\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n    }\r\n\r\n\/* ===================== SECTION 1: HERO ===================== *\/\r\n.snapca-feat-hero {\r\n        position: relative;\r\n  padding: 100px 0 80px;\r\n  background: linear-gradient(130deg, #6b14bc 0%, #38224c 100%);\r\n        overflow: hidden;\r\n  min-height: 600px;\r\n  display: flex;\r\n  align-items: center;\r\n    }\r\n\r\n.snapca-feat-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n  top: -200px;\r\n  right: -200px;\r\n  width: 600px;\r\n  height: 600px;\r\n  background: radial-gradient(circle, var(--snapca-features-accent) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n  opacity: 0.3;\r\n  animation: snapca-feat-float 8s ease-in-out infinite;\r\n    }\r\n\r\n.snapca-feat-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n  bottom: -150px;\r\n  left: -100px;\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);\r\n        border-radius: 50%;\r\n  animation: snapca-feat-float 6s ease-in-out infinite reverse;\r\n}\r\n\r\n@keyframes snapca-feat-float {\r\n  0%, 100% { transform: translateY(0px); }\r\n  50% { transform: translateY(-30px); }\r\n}\r\n\r\n.snapca-feat-hero-content {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.snapca-feat-hero-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(226, 196, 255, 0.16));\r\n  border: 1px solid rgba(255, 255, 255, 0.34);\r\n  padding: 8px 18px;\r\n  border-radius: 50px;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n  color: #ffffff;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n.snapca-feat-hero-badge i {\r\n  font-size: 16px;\r\n  color: #f2dcff;\r\n}\r\n\r\n.snapca-feat-hero h1 {\r\n  font-size: clamp(2.2rem, 5vw, 4.5rem);\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n        line-height: 1.15;\r\n  letter-spacing: -0.03em;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n.snapca-feat-hero h1 span {\r\n  background: linear-gradient(135deg, #ffffff 0%, #f2dcff 65%, #dab8ff 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n    }\r\n\r\n.snapca-feat-hero p {\r\n  font-size: 1.05rem;\r\n  color: rgba(255, 255, 255, 0.9);\r\n        line-height: 1.7;\r\n  max-width: 480px;\r\n        margin-bottom: 32px;\r\n        font-weight: 400;\r\n    }\r\n\r\n.snapca-feat-hero-btns {\r\n        display: flex;\r\n  gap: 14px;\r\n        flex-wrap: wrap;\r\n  margin-bottom: 36px;\r\n    }\r\n\r\n.snapca-feat-btn-primary {\r\n        display: inline-flex;\r\n        align-items: center;\r\n  gap: 10px;\r\n  background: var(--snapca-features-primary);\r\n  color: #fff;\r\n  padding: 14px 30px;\r\n  border-radius: 50px;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  border: none;\r\n  cursor: pointer;\r\n        transition: all 0.3s ease;\r\n  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.35);\r\n}\r\n\r\n.snapca-feat-btn-primary:hover {\r\n  background: #7334af;\r\n  color: #fff;\r\n        transform: translateY(-2px);\r\n  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.45);\r\n}\r\n\r\n.snapca-feat-btn-outline {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(226, 196, 255, 0.12));\r\n  color: #ffffff;\r\n  padding: 14px 30px;\r\n  border-radius: 50px;\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  border: 1.5px solid rgba(255, 255, 255, 0.34);\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.snapca-feat-btn-outline:hover {\r\n  border-color: rgba(255, 255, 255, 0.52);\r\n  color: #ffffff;\r\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(226, 196, 255, 0.2));\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 10px 28px rgba(8, 5, 18, 0.24);\r\n}\r\n\r\n.snapca-feat-pills {\r\n  display: flex;\r\n  gap: 10px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.snapca-feat-pill {\r\n  display: inline-flex;\r\n        align-items: center;\r\n  gap: 6px;\r\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(226, 196, 255, 0.12));\r\n  backdrop-filter: blur(12px);\r\n  border: 1px solid rgba(255, 255, 255, 0.32);\r\n  padding: 8px 16px;\r\n  border-radius: 50px;\r\n  font-size: 12.5px;\r\n  font-weight: 500;\r\n  color: rgba(255, 255, 255, 0.92);\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.snapca-feat-pill:hover {\r\n  border-color: rgba(255, 255, 255, 0.52);\r\n  color: #ffffff;\r\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(226, 196, 255, 0.2));\r\n  box-shadow: 0 8px 22px rgba(8, 5, 18, 0.24);\r\n}\r\n\r\n.snapca-feat-pill i {\r\n  color: #f2dcff;\r\n  font-size: 14px;\r\n}\r\n\r\n\/* Hero Dashboard Mockup *\/\r\n.snapca-feat-hero-mockup {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.snapca-feat-dashboard {\r\n  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));\r\n  border-radius: var(--snapca-features-radius);\r\n  border: 1px solid rgba(255, 255, 255, 0.24);\r\n  box-shadow: 0 28px 70px rgba(7, 5, 16, 0.38);\r\n  backdrop-filter: blur(12px);\r\n  overflow: hidden;\r\n  transform: perspective(1200px) rotateY(-5deg) rotateX(3deg);\r\n  transition: transform 0.5s ease;\r\n}\r\n\r\n.snapca-feat-dashboard:hover {\r\n  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);\r\n}\r\n\r\n.snapca-feat-dash-topbar {\r\n        display: flex;\r\n        align-items: center;\r\n  gap: 8px;\r\n  padding: 14px 20px;\r\n  background: rgba(255, 255, 255, 0.12);\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.snapca-feat-dot {\r\n  width: 10px;\r\n  height: 10px;\r\n        border-radius: 50%;\r\n}\r\n\r\n.snapca-feat-dot.red { background: #FF5F57; }\r\n.snapca-feat-dot.yellow { background: #FFBD2E; }\r\n.snapca-feat-dot.green { background: #28CA42; }\r\n\r\n.snapca-feat-dash-url {\r\n  margin-left: 16px;\r\n  background: rgba(255, 255, 255, 0.16);\r\n  border: 1px solid rgba(255, 255, 255, 0.24);\r\n  border-radius: 8px;\r\n  padding: 5px 14px;\r\n  font-size: 12px;\r\n  color: rgba(255, 255, 255, 0.82);\r\n  flex: 1;\r\n}\r\n\r\n.snapca-feat-dash-body {\r\n  padding: 24px;\r\n}\r\n\r\n.snapca-feat-dash-header {\r\n        display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.snapca-feat-dash-title {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  color: #ffffff;\r\n}\r\n\r\n.snapca-feat-dash-badge {\r\n  background: rgba(255, 255, 255, 0.18);\r\n  color: #ffffff;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  padding: 4px 12px;\r\n  border-radius: 50px;\r\n  border: 1px solid rgba(255, 255, 255, 0.22);\r\n}\r\n\r\n.snapca-feat-story-cards {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 14px;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.snapca-feat-story-card {\r\n  background: linear-gradient(135deg, #FDF2F8, #F3E8FF);\r\n  border-radius: var(--snapca-features-radius-sm);\r\n  overflow: hidden;\r\n  position: relative;\r\n  aspect-ratio: 9\/12;\r\n}\r\n\r\n.snapca-feat-story-card img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  opacity: 0.7;\r\n}\r\n\r\n.snapca-feat-story-overlay {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  padding: 12px;\r\n  background: linear-gradient(transparent, rgba(0,0,0,0.5));\r\n}\r\n\r\n.snapca-feat-story-avatar {\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: 50%;\r\n  border: 2px solid var(--snapca-features-primary);\r\n  object-fit: cover;\r\n}\r\n\r\n.snapca-feat-story-name {\r\n  color: #fff;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n}\r\n\r\n.snapca-feat-story-time {\r\n  color: rgba(255,255,255,0.7);\r\n  font-size: 10px;\r\n}\r\n\r\n.snapca-feat-dash-search {\r\n        display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  background: rgba(255, 255, 255, 0.14);\r\n  border: 1px solid rgba(255, 255, 255, 0.24);\r\n  border-radius: var(--snapca-features-radius-sm);\r\n  padding: 10px 16px;\r\n}\r\n\r\n.snapca-feat-dash-search i {\r\n  color: rgba(255, 255, 255, 0.85);\r\n  font-size: 18px;\r\n}\r\n\r\n.snapca-feat-dash-search span {\r\n  color: rgba(255, 255, 255, 0.85);\r\n  font-size: 13px;\r\n}\r\n\r\n\/* Floating cards around hero *\/\r\n.snapca-feat-float-card {\r\n  position: absolute;\r\n  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(225, 194, 255, 0.12));\r\n  backdrop-filter: blur(18px);\r\n  border: 1px solid rgba(255, 255, 255, 0.28);\r\n  border-radius: 16px;\r\n  padding: 14px 18px;\r\n  box-shadow: 0 12px 36px rgba(7, 5, 16, 0.28);\r\n  z-index: 3;\r\n  animation: snapca-feat-float 5s ease-in-out infinite;\r\n}\r\n\r\n.snapca-feat-float-card.card-1 {\r\n  top: 20px;\r\n  right: -30px;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.snapca-feat-float-card.card-2 {\r\n  bottom: 40px;\r\n  left: -20px;\r\n  animation-delay: 1.5s;\r\n}\r\n\r\n.snapca-feat-float-card.card-3 {\r\n  top: 50%;\r\n  right: -50px;\r\n  animation-delay: 3s;\r\n}\r\n\r\n.snapca-feat-float-icon {\r\n  width: 36px;\r\n  height: 36px;\r\n  border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n  margin-bottom: 8px;\r\n  font-size: 18px;\r\n        color: #fff;\r\n    }\r\n\r\n.snapca-feat-float-icon.pink { background: var(--snapca-features-primary); }\r\n.snapca-feat-float-icon.purple { background: #A855F7; }\r\n.snapca-feat-float-icon.blue { background: #6366F1; }\r\n\r\n.snapca-feat-float-label {\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n  color: #ffffff;\r\n}\r\n\r\n.snapca-feat-float-value {\r\n  font-size: 11px;\r\n  color: rgba(255, 255, 255, 0.82);\r\n}\r\n\r\n\/* ===================== SECTION 2: FEATURE CARDS ===================== *\/\r\n.snapca-feat-cards-section {\r\n  padding: 100px 0;\r\n  background: var(--snapca-features-white);\r\n}\r\n\r\n.snapca-feat-section-header {\r\n  text-align: center;\r\n  margin-bottom: 60px;\r\n}\r\n\r\n.snapca-feat-section-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n  color: var(--snapca-features-primary);\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.snapca-feat-section-label i {\r\n  font-size: 14px;\r\n}\r\n\r\n.snapca-feat-section-title {\r\n  font-size: clamp(1.8rem, 3.5vw, 2.5rem);\r\n  font-weight: 700;\r\n  color: var(--snapca-features-dark);\r\n  letter-spacing: -0.02em;\r\n  line-height: 1.2;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.snapca-feat-section-desc {\r\n  font-size: 1rem;\r\n  color: var(--snapca-features-text);\r\n  max-width: 560px;\r\n  margin: 0 auto;\r\n  line-height: 1.7;\r\n}\r\n\r\n.snapca-feat-card {\r\n  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 255, 0.96));\r\n  border: 1px solid rgba(122, 58, 175, 0.12);\r\n  border-radius: var(--snapca-features-radius);\r\n  padding: var(--snapca-features-card-pad);\r\n  transition: all 0.4s ease;\r\n        position: relative;\r\n        overflow: hidden;\r\n  height: 100%;\r\n    }\r\n\r\n.snapca-feat-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 3px;\r\n  background: linear-gradient(90deg, var(--snapca-features-primary), #A855F7);\r\n        opacity: 0;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n.snapca-feat-card:hover {\r\n  border-color: var(--snapca-features-accent);\r\n  box-shadow: 0 20px 60px rgba(236, 72, 153, 0.1), 0 0 0 1px rgba(236, 72, 153, 0.1);\r\n  transform: translateY(-6px);\r\n}\r\n\r\n.snapca-feat-card:hover::before {\r\n        opacity: 1;\r\n    }\r\n\r\n.snapca-feat-card-icon {\r\n        width: 52px;\r\n        height: 52px;\r\n  border-radius: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n  font-size: 24px;\r\n  margin-bottom: 22px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n.snapca-feat-card-icon.pink-bg {\r\n  background: rgba(236, 72, 153, 0.1);\r\n  color: var(--snapca-features-primary);\r\n}\r\n\r\n.snapca-feat-card-icon.purple-bg {\r\n  background: rgba(168, 85, 247, 0.1);\r\n  color: #A855F7;\r\n}\r\n\r\n.snapca-feat-card-icon.blue-bg {\r\n  background: rgba(99, 102, 241, 0.1);\r\n  color: #6366F1;\r\n}\r\n\r\n.snapca-feat-card-icon.green-bg {\r\n  background: rgba(16, 185, 129, 0.1);\r\n  color: #10B981;\r\n}\r\n\r\n.snapca-feat-card-icon.orange-bg {\r\n  background: rgba(245, 158, 11, 0.1);\r\n  color: #F59E0B;\r\n}\r\n\r\n.snapca-feat-card-icon.cyan-bg {\r\n  background: rgba(6, 182, 212, 0.1);\r\n  color: #06B6D4;\r\n}\r\n\r\n.snapca-feat-card:hover .snapca-feat-card-icon {\r\n  transform: scale(1.1);\r\n}\r\n\r\n.snapca-feat-card-badge {\r\n  display: inline-block;\r\n  background: rgba(236, 72, 153, 0.08);\r\n  color: var(--snapca-features-primary);\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  padding: 4px 10px;\r\n  border-radius: 50px;\r\n  margin-bottom: 14px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n.snapca-feat-card h3 {\r\n  font-size: 1.1rem;\r\n  font-weight: 600;\r\n  color: var(--snapca-features-dark);\r\n  margin-bottom: 10px;\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n.snapca-feat-card p {\r\n  font-size: 0.9rem;\r\n  color: var(--snapca-features-text-light);\r\n        line-height: 1.65;\r\n        margin: 0;\r\n    }\r\n\r\n\/* ===================== SECTION 3: LEFT IMAGE + RIGHT CONTENT ===================== *\/\r\n.snapca-feat-showcase {\r\n  padding: 100px 0;\r\n  background: linear-gradient(180deg, var(--snapca-features-bg) 0%, #FDF2F8 50%, var(--snapca-features-bg) 100%);\r\n}\r\n\r\n.snapca-feat-showcase-card {\r\n  background: var(--snapca-features-white);\r\n  border: 1px solid var(--snapca-features-border);\r\n  border-radius: var(--snapca-features-radius);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.06);\r\n  padding: 16px;\r\n  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;\r\n  transform-style: preserve-3d;\r\n  perspective: 1400px;\r\n}\r\n\r\n.snapca-feat-showcase-card:hover {\r\n  transform: translateY(-6px);\r\n  border-color: rgba(157, 69, 239, 0.32);\r\n  box-shadow: 0 28px 70px rgba(36, 20, 59, 0.14);\r\n}\r\n\r\n.snapca-feat-showcase-card > .row {\r\n  border-radius: calc(var(--snapca-features-radius) - 6px);\r\n  overflow: hidden;\r\n  background: var(--snapca-features-white);\r\n}\r\n\r\n.snapca-feat-showcase-card + .snapca-feat-showcase-card {\r\n  margin-top: 28px;\r\n}\r\n\r\n.snapca-feat-showcase-img-wrap {\r\n  position: relative;\r\n  border-radius: var(--snapca-features-radius);\r\n  overflow: hidden;\r\n  background: transparent;\r\n  transform: translateZ(0);\r\n}\r\n\r\n.snapca-feat-showcase-img-wrap::before {\r\n  content: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(120deg, rgba(255,255,255,0.08) 10%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.06) 46%);\r\n  transform: translateX(-120%);\r\n  z-index: 2;\r\n  pointer-events: none;\r\n}\r\n\r\n.snapca-feat-showcase-card:hover .snapca-feat-showcase-img-wrap::before {\r\n  animation: snapcaShimmer 1.15s ease forwards;\r\n}\r\n\r\n.snapca-feat-showcase-img-wrap::after {\r\n  content: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.22) 100%);\r\n  opacity: 0.22;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  transition: opacity 0.45s ease;\r\n}\r\n\r\n.snapca-feat-showcase-img-wrap img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: contain;\r\n  display: block;\r\n  transform-origin: center center;\r\n  transition: transform 0.55s ease, filter 0.55s ease;\r\n  filter: saturate(1.05) contrast(1.04);\r\n  animation: snapcaFloatImage 6.8s ease-in-out infinite;\r\n}\r\n\r\n.snapca-feat-showcase-card:hover .snapca-feat-showcase-img-wrap img {\r\n  transform: scale(1.065) rotateY(-6deg) rotateX(2deg);\r\n  filter: saturate(1.12) contrast(1.08);\r\n}\r\n\r\n.snapca-feat-showcase-card:hover .snapca-feat-showcase-img-wrap::after {\r\n  opacity: 0.1;\r\n}\r\n\r\n.snapca-feat-showcase-img-badge {\r\n  position: absolute;\r\n  top: 20px;\r\n  left: 20px;\r\n  background: rgba(255,255,255,0.9);\r\n  backdrop-filter: blur(10px);\r\n  padding: 8px 16px;\r\n  border-radius: 50px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  color: var(--snapca-features-primary);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  z-index: 3;\r\n  box-shadow: 0 8px 20px rgba(0,0,0,0.12);\r\n  transition: transform 0.35s ease, box-shadow 0.35s ease;\r\n}\r\n\r\n.snapca-feat-showcase-card:hover .snapca-feat-showcase-img-badge {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 24px rgba(0,0,0,0.16);\r\n}\r\n\r\n@keyframes snapcaShimmer {\r\n  0% { transform: translateX(-120%); }\r\n  100% { transform: translateX(130%); }\r\n}\r\n\r\n@keyframes snapcaFloatImage {\r\n  0%, 100% { transform: translateY(0); }\r\n  50% { transform: translateY(-4px); }\r\n}\r\n\r\n.snapca-feat-showcase-content {\r\n  padding: var(--snapca-features-showcase-pad);\r\n}\r\n\r\n.snapca-feat-showcase-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n  color: var(--snapca-features-primary);\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.snapca-feat-showcase-content h2 {\r\n  font-size: clamp(1.6rem, 3vw, 2.2rem);\r\n        font-weight: 700;\r\n  color: var(--snapca-features-dark);\r\n  letter-spacing: -0.02em;\r\n  line-height: 1.2;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.snapca-feat-showcase-content > p {\r\n  font-size: 0.95rem;\r\n  color: var(--snapca-features-text);\r\n        line-height: 1.7;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n.snapca-feat-checklist {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0 0 32px 0;\r\n}\r\n\r\n.snapca-feat-checklist li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 10px 0;\r\n  font-size: 0.9rem;\r\n  color: #000;\r\n  font-weight: 500;\r\n  border-bottom: 1px solid var(--snapca-features-border);\r\n}\r\n\r\n.snapca-feat-checklist li:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.snapca-feat-check-icon {\r\n  width: 26px;\r\n  height: 26px;\r\n  border-radius: 8px;\r\n  background: rgba(16, 185, 129, 0.1);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.snapca-feat-check-icon i {\r\n  font-size: 14px;\r\n  color: #10B981;\r\n}\r\n\r\n\/* ===================== SECTION 4: TAB-BASED TOOLS ===================== *\/\r\n.snapca-feat-tools {\r\n  padding: 100px 0;\r\n  background: var(--snapca-features-white);\r\n}\r\n\r\n.snapca-feat-tabs {\r\n        display: flex;\r\n  gap: 8px;\r\n        justify-content: center;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 48px;\r\n}\r\n\r\n.snapca-feat-tab-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 50px;\r\n  border: 1.5px solid #9D45EF;\r\n  background: var(--snapca-features-white);\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: #000;\r\n  cursor: pointer;\r\n        transition: all 0.3s ease;\r\n  font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.snapca-feat-tab-btn i {\r\n  font-size: 18px;\r\n}\r\n\r\n.snapca-feat-tab-btn:hover {\r\n  border-color: #9D45EF;\r\n  color: #9D45EF;\r\n}\r\n\r\n.snapca-feat-tab-btn.active {\r\n  background: var(--snapca-features-primary);\r\n        color: #fff;\r\n  border-color: var(--snapca-features-primary);\r\n  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.3);\r\n}\r\n\r\n.snapca-feat-tab-btn.active i {\r\n  color: #fff;\r\n}\r\n\r\n.snapca-feat-tab-panel {\r\n  display: none;\r\n  animation: snapca-feat-fadeIn 0.5s ease;\r\n}\r\n\r\n.snapca-feat-tab-panel.active {\r\n  display: block;\r\n}\r\n\r\n@keyframes snapca-feat-fadeIn {\r\n  from { opacity: 0; transform: translateY(15px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.snapca-feat-tool-preview {\r\n  background: #F9FAFB;\r\n  border: 1px solid var(--snapca-features-border);\r\n  border-radius: var(--snapca-features-radius);\r\n  padding: 40px;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 40px;\r\n  align-items: center;\r\n}\r\n\r\n.snapca-feat-tool-visual {\r\n  background: var(--snapca-features-white);\r\n  border-radius: var(--snapca-features-radius-sm);\r\n  box-shadow: 0 10px 40px rgba(0,0,0,0.06);\r\n  overflow: hidden;\r\n}\r\n\r\n.snapca-feat-tool-visual-header {\r\n        display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 16px 20px;\r\n  border-bottom: 1px solid var(--snapca-features-border);\r\n}\r\n\r\n.snapca-feat-tool-visual-title {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  color: var(--snapca-features-dark);\r\n}\r\n\r\n.snapca-feat-tool-visual-body {\r\n        padding: 20px;\r\n}\r\n\r\n.snapca-feat-tool-mock-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 12px 0;\r\n  border-bottom: 1px solid #F3F4F6;\r\n}\r\n\r\n.snapca-feat-tool-mock-item:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.snapca-feat-tool-mock-avatar {\r\n        width: 40px;\r\n        height: 40px;\r\n  border-radius: 12px;\r\n  background: linear-gradient(135deg, #EC4899, #8B5CF6);\r\n  border: 1px solid rgba(236, 72, 153, 0.25);\r\n        flex-shrink: 0;\r\n    }\r\n\r\n.snapca-feat-tool-mock-info h4 {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--snapca-features-dark);\r\n  margin-bottom: 2px;\r\n}\r\n\r\n.snapca-feat-tool-mock-info span {\r\n  font-size: 11px;\r\n  color: var(--snapca-features-text-light);\r\n}\r\n\r\n.snapca-feat-tool-mock-status {\r\n  margin-left: auto;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: #10B981;\r\n}\r\n\r\n.snapca-feat-tool-info h3 {\r\n  font-size: 1.5rem;\r\n        font-weight: 700;\r\n  color: var(--snapca-features-dark);\r\n  letter-spacing: -0.02em;\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.snapca-feat-tool-info p {\r\n  font-size: 0.95rem;\r\n  color: var(--snapca-features-text);\r\n  line-height: 1.7;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n.snapca-feat-tool-features {\r\n  list-style: none;\r\n  padding: 0;\r\n        margin: 0;\r\n    }\r\n\r\n.snapca-feat-tool-features li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 8px 0;\r\n  font-size: 0.9rem;\r\n  color: #000;\r\n  font-weight: 500;\r\n}\r\n\r\n.snapca-feat-tool-features li i {\r\n  color: var(--snapca-features-primary);\r\n  font-size: 18px;\r\n}\r\n\r\n\/* Grid mockup for media tab *\/\r\n.snapca-feat-grid-mock {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  gap: 8px;\r\n  padding: 16px;\r\n}\r\n\r\n.snapca-feat-grid-item {\r\n  aspect-ratio: 1;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(139, 92, 246, 0.24));\r\n  border: 1px solid rgba(236, 72, 153, 0.14);\r\n}\r\n\r\n.snapca-feat-grid-item img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform 0.3s ease;\r\n  opacity: 0;\r\n}\r\n\r\n.snapca-feat-grid-item:hover img {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.snapca-feat-profile-fill {\r\n  width: 80px;\r\n  height: 80px;\r\n  border-radius: 50%;\r\n  border: 3px solid var(--snapca-features-primary);\r\n  margin: 0 auto 14px;\r\n  background: linear-gradient(135deg, #EC4899, #6366F1);\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);\r\n}\r\n\r\n\/* Search mockup *\/\r\n.snapca-feat-search-mock {\r\n  padding: 20px;\r\n}\r\n\r\n.snapca-feat-search-input-mock {\r\n        display: flex;\r\n        align-items: center;\r\n  gap: 12px;\r\n  background: #F9FAFB;\r\n  border: 1.5px solid var(--snapca-features-border);\r\n  border-radius: 14px;\r\n  padding: 14px 18px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.snapca-feat-search-input-mock i {\r\n  color: var(--snapca-features-text-light);\r\n        font-size: 20px;\r\n}\r\n\r\n.snapca-feat-search-input-mock span {\r\n  color: var(--snapca-features-text-light);\r\n  font-size: 14px;\r\n  flex: 1;\r\n}\r\n\r\n.snapca-feat-search-input-mock .snapca-feat-clear-mock {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 6px;\r\n  background: #E5E7EB;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.snapca-feat-search-input-mock .snapca-feat-clear-mock i {\r\n  font-size: 12px;\r\n  color: var(--snapca-features-text-light);\r\n}\r\n\r\n.snapca-feat-recent-searches {\r\n  padding: 0;\r\n}\r\n\r\n.snapca-feat-recent-searches h5 {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.08em;\r\n  color: var(--snapca-features-text-light);\r\n  margin-bottom: 12px;\r\n  padding-left: 4px;\r\n}\r\n\r\n.snapca-feat-recent-tag {\r\n  display: inline-flex;\r\n        align-items: center;\r\n  gap: 6px;\r\n  background: #F3F4F6;\r\n  padding: 6px 14px;\r\n  border-radius: 50px;\r\n  font-size: 12px;\r\n  color: var(--snapca-features-secondary);\r\n  margin: 0 6px 8px 0;\r\n}\r\n\r\n.snapca-feat-recent-tag i {\r\n  font-size: 14px;\r\n  color: var(--snapca-features-text-light);\r\n}\r\n\r\n\/* ===================== SECTION 5: PRIVACY & PERFORMANCE ===================== *\/\r\n.snapca-feat-trust {\r\n  padding: 100px 0;\r\n  background: linear-gradient(160deg, var(--snapca-features-dark) 0%, #1F2937 100%);\r\n  color: #fff;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.snapca-feat-trust::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: -100px;\r\n  right: -100px;\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, var(--snapca-features-accent) 0%, transparent 70%);\r\n  opacity: 0.2;\r\n  border-radius: 50%;\r\n}\r\n\r\n.snapca-feat-trust .snapca-feat-section-label {\r\n  color: rgba(236, 72, 153, 0.8);\r\n}\r\n\r\n.snapca-feat-trust .snapca-feat-section-title {\r\n  color: #fff;\r\n}\r\n\r\n.snapca-feat-trust .snapca-feat-section-desc {\r\n  color: rgba(255,255,255,0.6);\r\n}\r\n\r\n.snapca-feat-trust-points {\r\n  list-style: none;\r\n  padding: 0;\r\n        margin: 0;\r\n    }\r\n\r\n.snapca-feat-trust-points li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  padding: 14px 0;\r\n  border-bottom: 1px solid rgba(255,255,255,0.08);\r\n  font-size: 0.95rem;\r\n  color: rgba(255,255,255,0.75);\r\n        font-weight: 400;\r\n}\r\n\r\n.snapca-feat-trust-points li:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.snapca-feat-trust-icon {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 12px;\r\n  background: rgba(236, 72, 153, 0.15);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.snapca-feat-trust-icon i {\r\n  font-size: 18px;\r\n  color: var(--snapca-features-primary);\r\n}\r\n\r\n.snapca-feat-stats-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 16px;\r\n}\r\n\r\n.snapca-feat-stat-card {\r\n  background: rgba(255,255,255,0.06);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(255,255,255,0.1);\r\n  border-radius: var(--snapca-features-radius-sm);\r\n  padding: 28px 24px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.snapca-feat-stat-card:hover {\r\n  background: rgba(255,255,255,0.1);\r\n  border-color: var(--snapca-features-accent);\r\n  transform: translateY(-4px);\r\n}\r\n\r\n.snapca-feat-stat-value {\r\n  font-size: 2rem;\r\n  font-weight: 700;\r\n  color: var(--snapca-features-primary);\r\n  margin-bottom: 6px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.snapca-feat-stat-label {\r\n  font-size: 0.85rem;\r\n  color: rgba(255,255,255,0.55);\r\n  font-weight: 400;\r\n  line-height: 1.4;\r\n}\r\n\r\n\/* ===================== SECTION 6: HOW IT WORKS ===================== *\/\r\n.snapca-feat-steps {\r\n  padding: 100px 0;\r\n  background: var(--snapca-features-white);\r\n}\r\n\r\n.snapca-feat-steps-timeline {\r\n  position: relative;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.snapca-feat-steps-timeline::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 32px;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 2px;\r\n  background: linear-gradient(to bottom, var(--snapca-features-primary), var(--snapca-features-accent), var(--snapca-features-border));\r\n}\r\n\r\n.snapca-feat-step-item {\r\n  display: flex;\r\n  gap: 28px;\r\n  margin-bottom: 16px;\r\n        position: relative;\r\n    }\r\n\r\n.snapca-feat-step-item:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.snapca-feat-step-number {\r\n  width: 66px;\r\n  height: 66px;\r\n  border-radius: 50%;\r\n  background: var(--snapca-features-white);\r\n  border: 2px solid var(--snapca-features-primary);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n.snapca-feat-step-item:hover .snapca-feat-step-number {\r\n  background: var(--snapca-features-primary);\r\n}\r\n\r\n.snapca-feat-step-item:hover .snapca-feat-step-number span {\r\n  color: #fff;\r\n}\r\n\r\n.snapca-feat-step-number span {\r\n  font-size: 1.2rem;\r\n  font-weight: 700;\r\n  color: var(--snapca-features-primary);\r\n        transition: color 0.3s ease;\r\n    }\r\n\r\n.snapca-feat-step-card {\r\n  background: var(--snapca-features-bg);\r\n  border: 1px solid var(--snapca-features-border);\r\n  border-radius: var(--snapca-features-radius);\r\n  padding: 28px;\r\n  flex: 1;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.snapca-feat-step-item:hover .snapca-feat-step-card {\r\n  border-color: var(--snapca-features-accent);\r\n  box-shadow: 0 10px 40px rgba(236, 72, 153, 0.08);\r\n}\r\n\r\n.snapca-feat-step-card h3 {\r\n  font-size: 1.1rem;\r\n  font-weight: 600;\r\n  color: var(--snapca-features-dark);\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.snapca-feat-step-card p {\r\n  font-size: 0.9rem;\r\n  color: var(--snapca-features-text-light);\r\n        line-height: 1.6;\r\n        margin: 0;\r\n    }\r\n\r\n.snapca-feat-step-arrow {\r\n        position: absolute;\r\n  left: 32px;\r\n  bottom: -22px;\r\n  z-index: 2;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.snapca-feat-step-arrow i {\r\n  font-size: 18px;\r\n  color: var(--snapca-features-accent);\r\n}\r\n\r\n\/* CTA Section *\/\r\n.snapca-feat-cta {\r\n        text-align: center;\r\n\t\t\t\tmargin-top: 60px;\r\n\t\t\t\tpadding: 90px 0px;\r\n\t\t\t\tbackground: linear-gradient(135deg, #9D45EF 0%, #C08EF0 100%);\r\n\t\t\t\tborder-radius: var(--snapca-features-radius);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n.snapca-feat-cta::before {\r\n        content: '';\r\n        position: absolute;\r\n  top: -50px;\r\n  right: -50px;\r\n        width: 200px;\r\n        height: 200px;\r\n  background: radial-gradient(circle, var(--snapca-features-accent) 0%, transparent 70%);\r\n  opacity: 0.3;\r\n        border-radius: 50%;\r\n    }\r\n\r\n.snapca-feat-cta h3 {\r\n  font-size: 2.6rem;\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  margin-bottom: 12px;\r\n        position: relative;\r\n}\r\n\r\n.snapca-feat-cta p {\r\n  font-size: 0.95rem;\r\n  color: rgba(255, 255, 255, 0.92);\r\n  margin-bottom: 28px;\r\n        position: relative;\r\n}\r\n\r\n.snapca-feat-cta .snapca-feat-btn-primary {\r\n        position: relative;\r\n}\r\n\r\n\/* ===================== RESPONSIVE ===================== *\/\r\n@media (max-width: 991px) {\r\n  :root {\r\n      --snapca-features-card-pad: 30px 24px;\r\n      --snapca-features-showcase-pad: 36px;\r\n  }\r\n\r\n  .snapca-feat-hero {\r\n      padding: 70px 0 60px;\r\n  }\r\n\r\n  .snapca-feat-float-card.card-1,\r\n  .snapca-feat-float-card.card-2,\r\n  .snapca-feat-float-card.card-3 {\r\n      display: none;\r\n  }\r\n\r\n  .snapca-feat-dashboard {\r\n      transform: none;\r\n      margin-top: 40px;\r\n  }\r\n\r\n  .snapca-feat-tool-preview {\r\n      grid-template-columns: 1fr;\r\n  }\r\n\r\n  .snapca-feat-trust-points li {\r\n      font-size: 0.9rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  :root {\r\n      --snapca-features-card-pad: 24px 20px;\r\n      --snapca-features-showcase-pad: 28px;\r\n  }\r\n\r\n  .snapca-feat-hero h1 {\r\n      font-size: 2rem;\r\n  }\r\n\r\n  .snapca-feat-story-cards {\r\n      grid-template-columns: 1fr;\r\n  }\r\n\r\n  .snapca-feat-stats-grid {\r\n      grid-template-columns: 1fr;\r\n  }\r\n\r\n  .snapca-feat-steps-timeline::before {\r\n      left: 22px;\r\n  }\r\n\r\n  .snapca-feat-step-number {\r\n      width: 46px;\r\n      height: 46px;\r\n  }\r\n\r\n  .snapca-feat-step-number span {\r\n      font-size: 1rem;\r\n  }\r\n\r\n  .snapca-feat-step-item {\r\n      gap: 18px;\r\n  }\r\n\r\n  .snapca-feat-step-card {\r\n      padding: 20px;\r\n  }\r\n\r\n  .snapca-feat-step-arrow {\r\n      left: 22px;\r\n  }\r\n\r\n  .snapca-feat-tab-btn {\r\n      padding: 10px 18px;\r\n        font-size: 13px;\r\n  }\r\n\r\n  .snapca-feat-tab-btn span {\r\n      display: none;\r\n  }\r\n\r\n  .snapca-feat-tool-preview {\r\n      padding: 24px;\r\n  }\r\n\r\n  .snapca-feat-cta {\r\n      padding: 36px 24px;\r\n  }\r\n\r\n  .snapca-feat-showcase-card:hover {\r\n      transform: none;\r\n  }\r\n\r\n  .snapca-feat-showcase-card:hover .snapca-feat-showcase-img-wrap img {\r\n      transform: scale(1.02);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- ============ SECTION 1: HERO ============ -->\r\n<section class=\"snapca-feat-hero\">\r\n<div class=\"snapca-feat-container\">\r\n  <div class=\"row align-items-center\">\r\n      <div class=\"col-lg-6 snapca-feat-hero-content\">\r\n          <div class=\"snapca-feat-hero-badge\" data-aos=\"fade-down\" data-aos-delay=\"100\">\r\n              <i class='bx bx-sparkles'><\/i>\r\n              Feature Overview\r\n                <\/div>\r\n          <h1 data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n               Gramiewer<br> Features\r\n          <\/h1>\r\n          <p data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n              Explore public Instagram profiles, bios, profile images, followers, and stories through a fast, clean, and privacy-focused viewer experience.\r\n          <\/p>\r\n          <div class=\"snapca-feat-hero-btns\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n<div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='\/';}\">\r\n                  <i class='bx bx-play-circle'><\/i>\r\n                  Start Profile Viewing\r\n                    <\/div>\r\n                    <\/div>\r\n          <div class=\"snapca-feat-pills\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n              <span class=\"snapca-feat-pill\"><i class='bx bx-bolt'><\/i> Fast Profile Lookup<\/span>\r\n              <span class=\"snapca-feat-pill\"><i class='bx bx-layout'><\/i> Clean Viewer Interface<\/span>\r\n              <span class=\"snapca-feat-pill\"><i class='bx bx-mobile'><\/i> Mobile Friendly<\/span>\r\n              <span class=\"snapca-feat-pill\"><i class='bx bx-check-shield'><\/i> No Login Required<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n      <div class=\"col-lg-6 snapca-feat-hero-mockup\" data-aos=\"fade-left\" data-aos-delay=\"300\">\r\n          <div style=\"position:relative;\">\r\n              <!-- Floating Cards -->\r\n              <div class=\"snapca-feat-float-card card-1\">\r\n                  <div class=\"snapca-feat-float-icon pink\"><i class='bx bx-show'><\/i><\/div>\r\n                  <div class=\"snapca-feat-float-label\">Profile Loaded<\/div>\r\n                  <div class=\"snapca-feat-float-value\">Preview ready<\/div>\r\n            <\/div>\r\n              <div class=\"snapca-feat-float-card card-2\">\r\n                  <div class=\"snapca-feat-float-icon purple\"><i class='bx bx-check-circle'><\/i><\/div>\r\n                  <div class=\"snapca-feat-float-label\">100% Secure<\/div>\r\n                  <div class=\"snapca-feat-float-value\">Privacy first<\/div>\r\n                        <\/div>\r\n              <div class=\"snapca-feat-float-card card-3\">\r\n                  <div class=\"snapca-feat-float-icon blue\"><i class='bx bx-timer'><\/i><\/div>\r\n                  <div class=\"snapca-feat-float-label\">Instant<\/div>\r\n                  <div class=\"snapca-feat-float-value\">< 2s load<\/div>\r\n                            <\/div>\r\n\r\n              <!-- Dashboard Mockup -->\r\n              <div class=\"snapca-feat-dashboard\">\r\n                  <div class=\"snapca-feat-dash-topbar\">\r\n                      <div class=\"snapca-feat-dot red\"><\/div>\r\n                      <div class=\"snapca-feat-dot yellow\"><\/div>\r\n                      <div class=\"snapca-feat-dot green\"><\/div>\r\n                      <div class=\"snapca-feat-dash-url\">snapviewer.app\/dashboard<\/div>\r\n                                <\/div>\r\n                  <div class=\"snapca-feat-dash-body\">\r\n                      <div class=\"snapca-feat-dash-header\">\r\n                          <span class=\"snapca-feat-dash-title\">Profile Viewer<\/span>\r\n                          <span class=\"snapca-feat-dash-badge\">Live<\/span>\r\n                                    <\/div>\r\n                      <div class=\"snapca-feat-story-cards\">\r\n                          <div class=\"snapca-feat-story-card\">\r\n                              <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/instagram-hero-1.webp\" alt=\"Story 1\">\r\n                              \r\n                                <\/div>\r\n                          <div class=\"snapca-feat-story-card\">\r\n                              <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/instagram-hero-2.webp\" alt=\"Story 2\">\r\n                             \r\n                            <\/div>\r\n                      <\/div>\r\n                      <div class=\"snapca-feat-dash-search\">\r\n                          <i class='bx bx-search'><\/i>\r\n                          <span>Search username to view profile details...<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- ============ SECTION 2: FEATURE CARDS ============ -->\r\n<section class=\"snapca-feat-cards-section\">\r\n<div class=\"snapca-feat-container\">\r\n  <div class=\"snapca-feat-section-header\" data-aos=\"fade-up\">\r\n      <div class=\"snapca-feat-section-label\">\r\n          <i class='bx bx-grid-alt'><\/i>\r\n          Core Features\r\n            <\/div>\r\n      <h2 class=\"snapca-feat-section-title\">Explore Instagram Profiles Seamlessly<\/h2>\r\n      <p class=\"snapca-feat-section-desc\">A complete set of tools designed for a modern, privacy-focused Instagram profile viewing workflow.<\/p>\r\n                        <\/div>\r\n  <div class=\"row g-4\">\r\n      <!-- Card 1 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Tool<\/span> -->\r\n              <div class=\"snapca-feat-card-icon pink-bg\"><i class='bx bx-show'><\/i><\/div>\r\n              <h3>Gramiewer<\/h3>\r\n              <p>View public Instagram profiles in a clean layout with quick navigation across profile details and highlights.<\/p>\r\n                    <\/div>\r\n                    <\/div>\r\n      <!-- Card 2 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Preview<\/span> -->\r\n              <div class=\"snapca-feat-card-icon purple-bg\"><i class='bx bx-user-circle'><\/i><\/div>\r\n              <h3>Profile Preview<\/h3>\r\n              <p>Display username, bio, and profile stats in an easy-to-read interface for instant reference.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n      <!-- Card 3 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Design<\/span> -->\r\n              <div class=\"snapca-feat-card-icon blue-bg\"><i class='bx bx-mobile-alt'><\/i><\/div>\r\n              <h3>Mobile Optimized Design<\/h3>\r\n              <p>Works smoothly across phones, tablets, and desktop screens with responsive layouts.<\/p>\r\n          <\/div>\r\n      <\/div>\r\n      <!-- Card 4 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Speed<\/span> -->\r\n              <div class=\"snapca-feat-card-icon green-bg\"><i class='bx bx-tachometer'><\/i><\/div>\r\n              <h3>Fast Loading Experience<\/h3>\r\n              <p>Lightweight layout built for quick access and smooth browsing on any connection.<\/p>\r\n          <\/div>\r\n      <\/div>\r\n      <!-- Card 5 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Search<\/span> -->\r\n              <div class=\"snapca-feat-card-icon orange-bg\"><i class='bx bx-search-alt-2'><\/i><\/div>\r\n              <h3>Simple Search Interface<\/h3>\r\n              <p>Use a streamlined search input to find public Instagram usernames quickly and accurately.<\/p>\r\n          <\/div>\r\n      <\/div>\r\n      <!-- Card 6 -->\r\n      <div class=\"col-lg-4 col-md-6\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n          <div class=\"snapca-feat-card\">\r\n<!--                         <span class=\"snapca-feat-card-badge\">Dashboard<\/span> -->\r\n              <div class=\"snapca-feat-card-icon cyan-bg\"><i class='bx bx-grid-alt'><\/i><\/div>\r\n              <h3>Clean Result Dashboard<\/h3>\r\n              <p>View search results in a professional dashboard with organized sections for profile insights.<\/p>\r\n          <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- ============ SECTION 3: LEFT IMAGE + RIGHT CONTENT ============ -->\r\n<section class=\"snapca-feat-showcase\">\r\n<div class=\"snapca-feat-container\">\r\n  <div class=\"snapca-feat-section-header\" data-aos=\"fade-up\" style=\"margin-bottom:24px;\">\r\n      <div class=\"snapca-feat-section-label\">\r\n          <i class='bx bx-heading'><\/i>\r\n          Instagram Tools Overview\r\n        <\/div>\r\n      <h2 class=\"snapca-feat-section-title\">All Gramiewer Tools Overview<\/h2>\r\n      <p class=\"snapca-feat-section-desc\">Explore all Gramiewer tools for profile viewing, image access, follower analysis, page browsing, and story viewing in one place.<\/p>\r\n            <\/div>\r\n\r\n  <div class=\"snapca-feat-showcase-card mt-4\" data-aos=\"fade-up\" data-aos-delay=\"80\">\r\n      <div class=\"row g-0 align-items-stretch flex-lg-row-reverse\">\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-img-wrap\" style=\"height:100%;min-height:400px;\">\r\n                  <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/image-viewer.jpg\" alt=\"Instagram Image Viewer Preview\">\r\n                  <div class=\"snapca-feat-showcase-img-badge\">\r\n                      <i class='bx bx-image'><\/i>\r\n                      Image Viewer Tool\r\n            <\/div>\r\n            <\/div>\r\n            <\/div>\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-content\">\r\n                  <div class=\"snapca-feat-showcase-label\">\r\n                      <i class='bx bx-download'><\/i>\r\n                      Instagram Image Viewer\r\n        <\/div>\r\n                  <h2>View and Save Instagram Images Quickly<\/h2>\r\n                  <p>Open public Instagram image content with a focused interface and smooth browsing workflow for fast profile image checks.<\/p>\r\n                  <ul class=\"snapca-feat-checklist\">\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Public image viewing workflow<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Clean preview before saving<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Fast image rendering<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Mobile-friendly layout<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Simple one-click actions<\/li>\r\n                  <\/ul>\r\n                  <div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='https:\/\/gramiewer.com\/tools\/instagram-image-viewer\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='https:\/\/gramiewer.com\/tools\/instagram-image-viewer\/';}\">\r\n                      <i class='bx bx-external-link'><\/i>\r\n                      Open Instagram Image Viewer\r\n    <\/div>\r\n              <\/div>\r\n          <\/div>\r\n      <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"snapca-feat-showcase-card mt-4\" data-aos=\"fade-up\" data-aos-delay=\"120\">\r\n      <div class=\"row g-0 align-items-stretch\">\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-img-wrap\" style=\"height:100%;min-height:400px;\">\r\n                  <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/Followers-Viewer-Without-Account.jpg\" alt=\"Instagram Followers Viewer Without Account Preview\">\r\n                  <div class=\"snapca-feat-showcase-img-badge\">\r\n                      <i class='bx bx-image'><\/i>\r\n                      Followers Tool\r\n        <\/div>\r\n            <\/div>\r\n            <\/div>\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-content\">\r\n                  <div class=\"snapca-feat-showcase-label\">\r\n                      <i class='bx bx-photo-album'><\/i>\r\n                      Instagram Followers Viewer Without Account\r\n            <\/div>\r\n                  <h2>Check Followers Viewer Without Account<\/h2>\r\n                  <p>Analyze follower and following data from public accounts with a clean workflow and no account requirement. Check the number of followers and following of any public Instagram account.<\/p>\r\n                  <ul class=\"snapca-feat-checklist\">\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>No login requirement<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Followers and following checks<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Fast profile analysis<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Simple filtering options<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Responsive on all devices<\/li>\r\n                  <\/ul>\r\n                  <div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='https:\/\/gramiewer.com\/tools\/instagram-followers-viewer-without-account\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='https:\/\/gramiewer.com\/tools\/instagram-followers-viewer-without-account\/';}\">\r\n                      <i class='bx bx-external-link'><\/i>\r\n                      Open Followers Viewer\r\n            <\/div>\r\n            <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n  <div class=\"snapca-feat-showcase-card mt-4\" data-aos=\"fade-up\" data-aos-delay=\"160\">\r\n      <div class=\"row g-0 align-items-stretch flex-lg-row-reverse\">\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-img-wrap\" style=\"height:100%;min-height:400px;\">\r\n                  <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/Viewer-App.jpg\" alt=\"Instagram Viewer App Preview\">\r\n                  <div class=\"snapca-feat-showcase-img-badge\">\r\n                      <i class='bx bx-mobile-alt'><\/i>\r\n                      Viewer App Tool\r\n        <\/div>\r\n            <\/div>\r\n            <\/div>\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-content\">\r\n                  <div class=\"snapca-feat-showcase-label\">\r\n                      <i class='bx bx-mobile'><\/i>\r\n                      Instagram Viewer App\r\n            <\/div>\r\n                  <h2>Browse Instagram with App-Style Interface<\/h2>\r\n                  <p>Use an app-like viewer to explore public profile content including posts, reels, and highlights in one smooth layout.<\/p>\r\n                  <ul class=\"snapca-feat-checklist\">\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>App-style profile browsing<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Posts, reels, and highlights access<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Smooth tab-based navigation<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Anonymous-friendly workflow<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Optimized for mobile and desktop<\/li>\r\n                  <\/ul>\r\n                  <div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='https:\/\/gramiewer.com\/tools\/instagram-viewer-app\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='https:\/\/gramiewer.com\/tools\/instagram-viewer-app\/';}\">\r\n                      <i class='bx bx-external-link'><\/i>\r\n                      Open Instagram Viewer App\r\n            <\/div>\r\n            <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n  <div class=\"snapca-feat-showcase-card mt-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n      <div class=\"row g-0 align-items-stretch\">\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-img-wrap\" style=\"height:100%;min-height:400px;\">\r\n                  <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/Instagram-Page-Viewer.jpg\" alt=\"Instagram Page Viewer Preview\">\r\n                  <div class=\"snapca-feat-showcase-img-badge\">\r\n                      <i class='bx bx-layout'><\/i>\r\n                      Page Viewer Tool\r\n                    <\/div>\r\n                <\/div>\r\n                            <\/div>\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-content\">\r\n                  <div class=\"snapca-feat-showcase-label\">\r\n                      <i class='bx bx-photo-album'><\/i>\r\n                      Instagram Page Viewer\r\n                        <\/div>\r\n                  <h2>Explore Public Instagram Pages with Ease<\/h2>\r\n                  <p>Open Instagram page layouts with organized sections so users can review profile content faster and more clearly.<\/p>\r\n                  <ul class=\"snapca-feat-checklist\">\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Full page layout overview<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Posts and reels visibility<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Highlight section access<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Simple and readable UI<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Works well on all devices<\/li>\r\n                  <\/ul>\r\n                  <div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='https:\/\/gramiewer.com\/tools\/instagram-page-viewer\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='https:\/\/gramiewer.com\/tools\/instagram-page-viewer\/';}\">\r\n                      <i class='bx bx-external-link'><\/i>\r\n                      Open Instagram Page Viewer\r\n                            <\/div>\r\n                        <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                            <\/div>\r\n\r\n  <div class=\"snapca-feat-showcase-card mt-4\" data-aos=\"fade-up\" data-aos-delay=\"240\">\r\n      <div class=\"row g-0 align-items-stretch flex-lg-row-reverse\">\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-img-wrap\" style=\"height:100%;min-height:400px;\">\r\n                  <img decoding=\"async\" src=\"https:\/\/gramiewer.com\/wp-content\/uploads\/2026\/04\/Instagram-Story-Viewer-Download.jpg\" alt=\"Instagram Story Viewer Preview\">\r\n                  <div class=\"snapca-feat-showcase-img-badge\">\r\n                      <i class='bx bx-show'><\/i>\r\n                      Story Viewer Tool\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n          <div class=\"col-lg-6\">\r\n              <div class=\"snapca-feat-showcase-content\">\r\n                  <div class=\"snapca-feat-showcase-label\">\r\n                      <i class='bx bx-user-circle'><\/i>\r\n                      Instagram Story Viewer\r\n                  <\/div>\r\n                  <h2>Watch Instagram Stories Freely<\/h2>\r\n                  <p>View active story updates through a responsive interface designed for quick access and smooth playback.<\/p>\r\n                  <ul class=\"snapca-feat-checklist\">\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Active story playback<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Quick username lookup<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Fast loading performance<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Simple one-page workflow<\/li>\r\n                      <li><div class=\"snapca-feat-check-icon\"><i class='bx bx-check'><\/i><\/div>Consistent viewer experience<\/li>\r\n                  <\/ul>\r\n                  <div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='https:\/\/gramiewer.com\/tools\/instagram-story-viewer\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='https:\/\/gramiewer.com\/tools\/instagram-story-viewer\/';}\">\r\n                      <i class='bx bx-external-link'><\/i>\r\n                      Open Instagram Story Viewer\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- ============ SECTION 4: TAB-BASED TOOLS ============ -->\r\n<section class=\"snapca-feat-tools\">\r\n<div class=\"snapca-feat-container\">\r\n  <div class=\"snapca-feat-section-header\" data-aos=\"fade-up\">\r\n      <div class=\"snapca-feat-section-label\">\r\n          <i class='bx bx-category'><\/i>\r\n          Tool Breakdown\r\n        <\/div>\r\n      <h2 class=\"snapca-feat-section-title\">Explore Each Tool in Detail<\/h2>\r\n      <p class=\"snapca-feat-section-desc\">Switch between tools to see how each component works within the viewer experience.<\/p>\r\n            <\/div>\r\n\r\n  <!-- Tabs -->\r\n  <div class=\"snapca-feat-tabs\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n      <div class=\"snapca-feat-tab-btn active\" role=\"link\" tabindex=\"0\" data-tab=\"story-viewer\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}\">\r\n          <i class='bx bx-show'><\/i>\r\n          <span>Story Viewer<\/span>\r\n            <\/div>\r\n      <div class=\"snapca-feat-tab-btn\" role=\"link\" tabindex=\"0\" data-tab=\"profile-viewer\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}\">\r\n          <i class='bx bx-user-circle'><\/i>\r\n          <span>Profile Viewer<\/span>\r\n            <\/div>\r\n      <div class=\"snapca-feat-tab-btn\" role=\"link\" tabindex=\"0\" data-tab=\"media-preview\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}\">\r\n          <i class='bx bx-images'><\/i>\r\n          <span>Media Preview<\/span>\r\n        <\/div>\r\n      <div class=\"snapca-feat-tab-btn\" role=\"link\" tabindex=\"0\" data-tab=\"search-tool\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}\">\r\n          <i class='bx bx-search-alt-2'><\/i>\r\n          <span>Search Tool<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Tab Panels -->\r\n  <!-- Story Viewer -->\r\n  <div class=\"snapca-feat-tab-panel active\" id=\"tab-story-viewer\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n      <div class=\"snapca-feat-tool-preview\">\r\n          <div class=\"snapca-feat-tool-visual\">\r\n              <div class=\"snapca-feat-tool-visual-header\">\r\n                  <span class=\"snapca-feat-tool-visual-title\">Story Viewer<\/span>\r\n                  <span style=\"font-size:11px;color:#10B981;font-weight:600;\">\u25cf Active<\/span>\r\n              <\/div>\r\n              <div class=\"snapca-feat-tool-visual-body\">\r\n                  <div class=\"snapca-feat-tool-mock-item\">\r\n                      <div class=\"snapca-feat-tool-mock-avatar\"><\/div>\r\n                      <div class=\"snapca-feat-tool-mock-info\">\r\n                          <h4>emma.watson<\/h4>\r\n                          <span>3 stories \u00b7 1h ago<\/span>\r\n                      <\/div>\r\n                      <div class=\"snapca-feat-tool-mock-status\"><\/div>\r\n                  <\/div>\r\n                  <div class=\"snapca-feat-tool-mock-item\">\r\n                      <div class=\"snapca-feat-tool-mock-avatar\"><\/div>\r\n                      <div class=\"snapca-feat-tool-mock-info\">\r\n                          <h4>alex.design<\/h4>\r\n                          <span>5 stories \u00b7 3h ago<\/span>\r\n                      <\/div>\r\n                      <div class=\"snapca-feat-tool-mock-status\" style=\"background:#F59E0B;\"><\/div>\r\n                  <\/div>\r\n                  <div class=\"snapca-feat-tool-mock-item\">\r\n                      <div class=\"snapca-feat-tool-mock-avatar\"><\/div>\r\n                      <div class=\"snapca-feat-tool-mock-info\">\r\n                          <h4>james_photo<\/h4>\r\n                          <span>2 stories \u00b7 6h ago<\/span>\r\n                      <\/div>\r\n                      <div class=\"snapca-feat-tool-mock-status\" style=\"background:#EF4444;\"><\/div>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n          <div class=\"snapca-feat-tool-info\">\r\n              <h3>Story Viewer<\/h3>\r\n              <p>Browse through story content in a clean, organized visual layout. Each story card shows key details at a glance with smooth navigation between entries.<\/p>\r\n              <ul class=\"snapca-feat-tool-features\">\r\n                  <li><i class='bx bx-check-circle'><\/i> Clean visual story layout<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Smooth navigation between stories<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Status indicators for freshness<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Quick preview on hover<\/li>\r\n                <\/ul>\r\n            <\/div>\r\n                    <\/div>\r\n                        <\/div>\r\n\r\n  <!-- Profile Viewer -->\r\n  <div class=\"snapca-feat-tab-panel\" id=\"tab-profile-viewer\">\r\n      <div class=\"snapca-feat-tool-preview\">\r\n          <div class=\"snapca-feat-tool-visual\">\r\n              <div class=\"snapca-feat-tool-visual-header\">\r\n                  <span class=\"snapca-feat-tool-visual-title\">Profile Viewer<\/span>\r\n                  <span style=\"font-size:11px;color:#10B981;font-weight:600;\">\u25cf Active<\/span>\r\n                        <\/div>\r\n              <div class=\"snapca-feat-tool-visual-body\" style=\"text-align:center;padding:30px 20px;\">\r\n                  <div class=\"snapca-feat-profile-fill\"><\/div>\r\n                  <div style=\"font-size:16px;font-weight:600;color:var(--snapca-features-dark);margin-bottom:4px;\">@nina_creates<\/div>\r\n                  <div style=\"font-size:12px;color:var(--snapca-features-text-light);margin-bottom:16px;\">Digital creator \u00b7 Los Angeles<\/div>\r\n                  <div style=\"display:flex;justify-content:center;gap:24px;margin-bottom:16px;\">\r\n                      <div style=\"text-align:center;\">\r\n                          <div style=\"font-size:16px;font-weight:700;color:var(--snapca-features-dark);\">248<\/div>\r\n                          <div style=\"font-size:10px;color:var(--snapca-features-text-light);\">Stories<\/div>\r\n                        <\/div>\r\n                      <div style=\"text-align:center;\">\r\n                          <div style=\"font-size:16px;font-weight:700;color:var(--snapca-features-dark);\">12.4K<\/div>\r\n                          <div style=\"font-size:10px;color:var(--snapca-features-text-light);\">Views<\/div>\r\n                    <\/div>\r\n                      <div style=\"text-align:center;\">\r\n                          <div style=\"font-size:16px;font-weight:700;color:var(--snapca-features-dark);\">89<\/div>\r\n                          <div style=\"font-size:10px;color:var(--snapca-features-text-light);\">Followers<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n          <div class=\"snapca-feat-tool-info\">\r\n              <h3>Profile Viewer<\/h3>\r\n              <p>Preview username details with an avatar-style profile card. Get a clean snapshot of basic account information in a well-structured format.<\/p>\r\n              <ul class=\"snapca-feat-tool-features\">\r\n                  <li><i class='bx bx-check-circle'><\/i> Username preview display<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Avatar-style profile card<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Basic account details layout<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Quick stats overview<\/li>\r\n              <\/ul>\r\n          <\/div>\r\n      <\/div>\r\n  <\/div>\r\n\r\n  <!-- Media Preview -->\r\n  <div class=\"snapca-feat-tab-panel\" id=\"tab-media-preview\">\r\n      <div class=\"snapca-feat-tool-preview\">\r\n          <div class=\"snapca-feat-tool-visual\">\r\n              <div class=\"snapca-feat-tool-visual-header\">\r\n                  <span class=\"snapca-feat-tool-visual-title\">Media Gallery<\/span>\r\n                  <span style=\"font-size:11px;color:#10B981;font-weight:600;\">\u25cf Active<\/span>\r\n        <\/div>\r\n              <div class=\"snapca-feat-grid-mock\">\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n                  <div class=\"snapca-feat-grid-item\"><\/div>\r\n            <\/div>\r\n            <\/div>\r\n          <div class=\"snapca-feat-tool-info\">\r\n              <h3>Media Preview<\/h3>\r\n              <p>Browse image and video content through a grid-based preview system. Organized media sections make it easy to find specific content quickly.<\/p>\r\n              <ul class=\"snapca-feat-tool-features\">\r\n                  <li><i class='bx bx-check-circle'><\/i> Image\/video style cards<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Grid-based preview layout<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Organized media sections<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Hover zoom interaction<\/li>\r\n              <\/ul>\r\n            <\/div>\r\n            <\/div>\r\n            <\/div>\r\n\r\n  <!-- Search Tool -->\r\n  <div class=\"snapca-feat-tab-panel\" id=\"tab-search-tool\">\r\n      <div class=\"snapca-feat-tool-preview\">\r\n          <div class=\"snapca-feat-tool-visual\">\r\n              <div class=\"snapca-feat-tool-visual-header\">\r\n                  <span class=\"snapca-feat-tool-visual-title\">Search<\/span>\r\n                  <span style=\"font-size:11px;color:#10B981;font-weight:600;\">\u25cf Active<\/span>\r\n            <\/div>\r\n              <div class=\"snapca-feat-search-mock\">\r\n                  <div class=\"snapca-feat-search-input-mock\">\r\n                      <i class='bx bx-search'><\/i>\r\n                      <span>Enter username or profile link...<\/span>\r\n                      <div class=\"snapca-feat-clear-mock\"><i class='bx bx-x'><\/i><\/div>\r\n                  <\/div>\r\n                  <div class=\"snapca-feat-recent-searches\">\r\n                      <h5>Recent Searches<\/h5>\r\n                      <span class=\"snapca-feat-recent-tag\"><i class='bx bx-time-five'><\/i> sarah.j<\/span>\r\n                      <span class=\"snapca-feat-recent-tag\"><i class='bx bx-time-five'><\/i> mike_dev<\/span>\r\n                      <span class=\"snapca-feat-recent-tag\"><i class='bx bx-time-five'><\/i> nina_creates<\/span>\r\n                      <span class=\"snapca-feat-recent-tag\"><i class='bx bx-time-five'><\/i> alex.design<\/span>\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n          <div class=\"snapca-feat-tool-info\">\r\n              <h3>Search Tool<\/h3>\r\n              <p>A smart input design with recent search history and quick clear functionality. The modern search system makes finding profiles effortless.<\/p>\r\n              <ul class=\"snapca-feat-tool-features\">\r\n                  <li><i class='bx bx-check-circle'><\/i> Smart input design<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Recent searches history<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Quick clear button<\/li>\r\n                  <li><i class='bx bx-check-circle'><\/i> Auto-suggest support<\/li>\r\n              <\/ul>\r\n          <\/div>\r\n      <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- ============ SECTION 6: HOW IT WORKS ============ -->\r\n<section class=\"snapca-feat-steps\">\r\n<div class=\"snapca-feat-container\">\r\n  <div class=\"snapca-feat-section-header\" data-aos=\"fade-up\">\r\n      <div class=\"snapca-feat-section-label\">\r\n          <i class='bx bx-route'><\/i>\r\n          How It Works\r\n            <\/div>\r\n      <h2 class=\"snapca-feat-section-title\">Get Started in 4 Simple Steps<\/h2>\r\n      <p class=\"snapca-feat-section-desc\">Follow this straightforward process to preview stories and profiles in seconds.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"snapca-feat-steps-timeline\">\r\n      <!-- Step 1 -->\r\n      <div class=\"snapca-feat-step-item\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n          <div class=\"snapca-feat-step-number\"><span>1<\/span><\/div>\r\n          <div class=\"snapca-feat-step-card\">\r\n              <h3>Enter Username or Profile Link<\/h3>\r\n              <p>User starts with a simple search\/input box. Just type the username or paste the profile link to begin.<\/p>\r\n          <\/div>\r\n          <div class=\"snapca-feat-step-arrow\"><i class='bx bx-chevron-down'><\/i><\/div>\r\n      <\/div>\r\n      <!-- Step 2 -->\r\n      <div class=\"snapca-feat-step-item\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n          <div class=\"snapca-feat-step-number\"><span>2<\/span><\/div>\r\n          <div class=\"snapca-feat-step-card\">\r\n              <h3>Process the Request<\/h3>\r\n              <p>The tool shows a loading or scanning animation while it processes and retrieves the requested profile data.<\/p>\r\n          <\/div>\r\n          <div class=\"snapca-feat-step-arrow\"><i class='bx bx-chevron-down'><\/i><\/div>\r\n      <\/div>\r\n      <!-- Step 3 -->\r\n      <div class=\"snapca-feat-step-item\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n          <div class=\"snapca-feat-step-number\"><span>3<\/span><\/div>\r\n          <div class=\"snapca-feat-step-card\">\r\n              <h3>Preview Story Results<\/h3>\r\n              <p>Results appear in clean story cards or dashboard panels. Browse through available stories and media content.<\/p>\r\n          <\/div>\r\n          <div class=\"snapca-feat-step-arrow\"><i class='bx bx-chevron-down'><\/i><\/div>\r\n      <\/div>\r\n      <!-- Step 4 -->\r\n      <div class=\"snapca-feat-step-item\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n          <div class=\"snapca-feat-step-number\"><span>4<\/span><\/div>\r\n          <div class=\"snapca-feat-step-card\">\r\n              <h3>Explore More Details<\/h3>\r\n              <p>Users can view profile info, media previews, or related story sections. Dive deeper into any content that interests you.<\/p>\r\n          <\/div>\r\n      <\/div>\r\n  <\/div>\r\n\r\n  <!-- CTA -->\r\n  <div class=\"snapca-feat-cta\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n      <h3>Ready to Start Viewing?<\/h3>\r\n      <p>Jump in and explore stories with a clean, fast, and modern viewer experience.<\/p>\r\n<div class=\"snapca-feat-btn-primary\" role=\"link\" tabindex=\"0\" onclick=\"window.location.href='\/';\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();window.location.href='\/';}\">\r\n          <i class='bx bx-play-circle'><\/i>\r\n          Start Viewing\r\n      <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Tab functionality\r\ndocument.querySelectorAll('.snapca-feat-tab-btn').forEach(btn => {\r\n  btn.addEventListener('click', () => {\r\n      \/\/ Remove active from all buttons\r\n      document.querySelectorAll('.snapca-feat-tab-btn').forEach(b => b.classList.remove('active'));\r\n      \/\/ Remove active from all panels\r\n      document.querySelectorAll('.snapca-feat-tab-panel').forEach(p => p.classList.remove('active'));\r\n\r\n      \/\/ Add active to clicked button\r\n      btn.classList.add('active');\r\n\r\n      \/\/ Show corresponding panel\r\n      const tabId = 'tab-' + btn.getAttribute('data-tab');\r\n      const panel = document.getElementById(tabId);\r\n      if (panel) {\r\n          panel.classList.add('active');\r\n          \/\/ Re-trigger AOS for the new panel content\r\n          panel.querySelectorAll('[data-aos]').forEach(el => {\r\n              el.classList.remove('aos-animate');\r\n              setTimeout(() => {\r\n                  AOS.refresh();\r\n              }, 50);\r\n          });\r\n      }\r\n  });\r\n    });\r\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"footnotes":""},"class_list":["post-2982","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/pages\/2982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/comments?post=2982"}],"version-history":[{"count":4,"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/pages\/2982\/revisions"}],"predecessor-version":[{"id":5404,"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/pages\/2982\/revisions\/5404"}],"wp:attachment":[{"href":"https:\/\/gramiewer.com\/wp-json\/wp\/v2\/media?parent=2982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}