/* ─── Digital Marketing & Service Pages – Enhanced Animations ─── */

/* Scroll-reveal base */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-delay-5{transition-delay:.5s}

/* Animated hero badge pulse */
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(123,150,105,.4)}50%{box-shadow:0 0 0 10px rgba(123,150,105,0)}}
.hero-badge-pulse{animation:badgePulse 2.5s infinite}

/* Floating animation for hero images */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-anim{animation:float 4s ease-in-out infinite}

/* Counter animation placeholder (JS fills it) */
.count-up{display:inline-block}

/* Gradient text */
.gradient-text{background:linear-gradient(135deg,#7B9669,#BAC8B1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Language badge strip */
.lang-strip{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.lang-badge{background:rgba(123,150,105,.15);border:1px solid rgba(123,150,105,.4);color:#BAC8B1;padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:600;letter-spacing:.05em}

/* Highlight box */
.highlight-box{background:linear-gradient(135deg,rgba(123,150,105,.1),rgba(64,78,59,.05));border:1px solid rgba(123,150,105,.3);border-radius:14px;padding:24px 28px;margin:20px 0}
.highlight-box h4{color:#2c3a28;font-size:1.05rem;font-weight:700;margin-bottom:8px}
.highlight-box p{color:#555;font-size:.93rem;line-height:1.7;margin:0}

/* Price card enhanced */
.price-card{background:#fff;border:2px solid #e8f0e4;border-radius:20px;padding:36px 28px;text-align:center;position:relative;transition:all .35s;box-shadow:0 4px 20px rgba(64,78,59,.06)}
.price-card:hover{border-color:#7B9669;transform:translateY(-6px);box-shadow:0 16px 48px rgba(123,150,105,.18)}
.price-card.featured{border-color:#7B9669;background:linear-gradient(135deg,#f8faf7,#fff)}
.price-card .badge-featured{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#7B9669,#404E3B);color:#fff;padding:5px 20px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.price-card h3{font-size:1.2rem;font-weight:700;color:#2c3a28;margin-bottom:8px}
.price-card .price{font-size:2.4rem;font-weight:900;color:#7B9669;line-height:1;margin:12px 0 4px}
.price-card .price span{font-size:1rem;font-weight:600;color:#888}
.price-card p{font-size:.88rem;color:#666;line-height:1.6;margin-bottom:20px}
.price-card ul{list-style:none;padding:0;margin:0 0 24px;text-align:left}
.price-card ul li{padding:7px 0 7px 24px;position:relative;font-size:.88rem;color:#444;border-bottom:1px solid #f0f5ee}
.price-card ul li:last-child{border:none}
.price-card ul li::before{content:'✓';position:absolute;left:0;color:#7B9669;font-weight:800}

/* Tech stack pills */
.tech-stack{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.tech-pill{background:#fff;border:1px solid #d0deca;color:#404E3B;padding:7px 16px;border-radius:8px;font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .2s}
.tech-pill:hover{background:#7B9669;color:#fff;border-color:#7B9669}
.tech-pill i{font-size:.9rem}

/* Comparison table */
.compare-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:20px 0}
.compare-table th{background:#2c3a28;color:#BAC8B1;padding:14px 18px;text-align:left;font-weight:700;font-size:.85rem;letter-spacing:.05em}
.compare-table td{padding:12px 18px;border-bottom:1px solid #e8f0e4;color:#444}
.compare-table tr:hover td{background:#f8faf7}
.compare-table .yes{color:#7B9669;font-weight:700}
.compare-table .no{color:#d97706;font-weight:700}

/* seo-table (re-export for new pages) */
.seo-table{width:100%;border-collapse:collapse;font-size:.9rem}
.seo-table th{background:#2c3a28;color:#BAC8B1;padding:12px 18px;text-align:left;font-size:.82rem;letter-spacing:.06em}
.seo-table td{padding:11px 18px;border-bottom:1px solid #e8f0e4;color:#444}
.seo-table tr:hover td{background:#f8faf7}

@media(max-width:768px){
  .compare-table, .seo-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .compare-table th,.compare-table td,.seo-table th,.seo-table td{padding:10px 12px}
}

/* seo-list */
.seo-list{list-style:none;padding:0;margin:16px 0}
.seo-list li{padding:8px 0 8px 32px;position:relative;color:#444;font-size:.95rem;border-bottom:1px solid #f0f5ee;line-height:1.6}
.seo-list li:last-child{border:none}
.seo-list li i{position:absolute;left:0;top:10px;font-size:1rem}

/* Animated number boxes in hero */
.hero-nums{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:40px;padding-top:36px;border-top:1px solid rgba(186,200,177,.15)}
.hero-num{text-align:center}
.hero-num strong{display:block;font-size:2rem;font-weight:900;color:#7B9669}
.hero-num span{font-size:.75rem;color:#BAC8B1;letter-spacing:.09em;text-transform:uppercase}

/* Section divider line */
.sec-divider{height:1px;background:linear-gradient(90deg,transparent,#d0deca 30%,#d0deca 70%,transparent);margin:0 0 60px}

/* CTA inner card */
.cta-inner-card{background:rgba(255,255,255,.06);border:1px solid rgba(186,200,177,.2);border-radius:20px;padding:48px 40px;max-width:800px;margin:0 auto;text-align:center}

/* Responsive fixes */
@media(max-width:600px){
  .hero-nums{gap:20px}
  .hero-num strong{font-size:1.5rem}
  .cta-inner-card{padding:32px 20px}
  .price-card{padding:28px 20px}
}
