*{
   margin: 0;
   padding: 0;
   font-family: 'DM Sans', sans-serif;
   box-sizing: border-box;
}
/* // Home Navbar section start */
:root {
  --accent-teal:   #00c9b1;
  --accent-pink:   #ff3c7e;
  --accent-purple: #7c3aed;
  --accent-orange: #ff6b35;
  --accent-blue:   #2563eb;
  --accent-yellow: #f59e0b;
  /* Logo-inspired gradient matching the colorful bird/animal logo */
  --logo-grad: linear-gradient(135deg,#00e5d4 0%,#2563eb 25%,#7c3aed 50%,#ff3c7e 75%,#ff6b35 100%);
  --logo-grad-alt: linear-gradient(135deg,#ff6b35 0%,#ff3c7e 30%,#7c3aed 60%,#00c9b1 100%);
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --trans-fast: 0.18s ease;
  --trans-med:  0.3s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] {
  --bg-primary:   #0d0f1a;
  --bg-secondary: #131629;
  --bg-card:      #1a1e35;
  --bg-nav:       rgba(13,15,26,0.98);
  --bg-dropdown:  #181c32;
  --border-color: rgba(255,255,255,0.08);
  --border-accent:rgba(0,201,177,0.4);
  --text-primary: #f0f2ff;
  --text-secondary:#9aa3c8;
  --text-muted:   #5a6490;
  --bar1-bg:      #0a0c1a;
  --bar2-bg:      linear-gradient(90deg,#0d1033,#1a0a2e,#0d1033);
  --shadow-nav:   0 4px 40px rgba(0,0,0,0.6);
  --hover-bg:     rgba(0,201,177,0.08);
  --mega-bg:      #11152a;
  /* Service panel accent colors */
  --dm-accent:    #00c9b1;
  --design-accent:#ff3c7e;
  --dev-accent:   #7c3aed;
}
[data-theme="light"] {
  --bg-primary:   #f5f7ff;
  --bg-secondary: #eef0fa;
  --bg-card:      #ffffff;
  --bg-nav:       rgba(245,247,255,0.98);
  --bg-dropdown:  #ffffff;
  --border-color: rgba(0,0,0,0.08);
  --border-accent:rgba(0,160,140,0.4);
  --text-primary: #0d0f1a;
  --text-secondary:#3a4060;
  --text-muted:   #8090b0;
  --bar1-bg:      #e8ecff;
  --bar2-bg:      linear-gradient(90deg,#dde1ff,#ede8ff,#dde1ff);
  --shadow-nav:   0 4px 30px rgba(0,0,40,0.12);
  --hover-bg:     rgba(0,160,140,0.07);
  --mega-bg:      #f0f3ff;
  --dm-accent:    #00a08c;
  --design-accent:#e0195a;
  --dev-accent:   #6d28d9;
}
[data-theme="teal"] {
  --bg-primary:   #001a1a;
  --bg-secondary: #002626;
  --bg-card:      #003333;
  --bg-nav:       rgba(0,18,22,0.98);
  --bg-dropdown:  #002a2a;
  --border-color: rgba(0,201,177,0.15);
  --border-accent:rgba(0,201,177,0.5);
  --text-primary: #d0fff8;
  --text-secondary:#7dcfc8;
  --text-muted:   #3a8a83;
  --bar1-bg:      #001010;
  --bar2-bg:      linear-gradient(90deg,#001818,#002828,#001818);
  --shadow-nav:   0 4px 40px rgba(0,50,50,0.7);
  --hover-bg:     rgba(0,201,177,0.1);
  --mega-bg:      #001e1e;
  --dm-accent:    #00c9b1;
  --design-accent:#ff3c7e;
  --dev-accent:   #7c3aed;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);transition:background var(--trans-med),color var(--trans-med);}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
img{max-width:100%;height:auto;}

/* ============================================================
   POPUP MODAL
   ============================================================ */
.popup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .4s ease;}
.popup-overlay.hidden{display:none;}
.popup-modal{background:var(--bg-card);border:1px solid var(--border-accent);border-radius:20px;width:100%;max-width:540px;padding:2.2rem 2rem 1.8rem;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:slideUp .4s cubic-bezier(.4,0,.2,1);}
.popup-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--trans-fast);}
.popup-close:hover{background:var(--accent-pink);color:#fff;border-color:var(--accent-pink);}
.popup-logo-name{font-family:var(--font-head);font-size:1.5rem;font-weight:800;background:var(--logo-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:.3rem;}
.popup-badge{display:inline-block;background:linear-gradient(90deg,var(--accent-teal),var(--accent-blue));color:#fff;font-size:.73rem;font-weight:600;border-radius:20px;padding:.2rem .75rem;margin:.3rem auto .7rem;text-align:center;}
.popup-heading{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:.3rem;line-height:1.4;}
.popup-sub{font-size:.88rem;color:var(--text-secondary);text-align:center;line-height:1.6;margin-bottom:1rem;}
.popup-features{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem;}
.popup-feat{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:.55rem .75rem;font-size:.82rem;color:var(--text-secondary);display:flex;align-items:center;gap:.45rem;}
.popup-promo{background:linear-gradient(90deg,rgba(0,201,177,.12),rgba(124,58,237,.12));border:1px solid var(--border-accent);border-radius:10px;padding:.65rem 1rem;font-size:.83rem;color:var(--accent-teal);text-align:center;margin-bottom:1rem;font-weight:600;}
.popup-stars{text-align:center;color:var(--accent-yellow);font-size:.83rem;margin-bottom:.35rem;}
.popup-social-proof{text-align:center;font-size:.8rem;color:var(--text-muted);margin-bottom:1rem;}
.popup-cta-btn{display:block;width:100%;padding:.85rem;background:var(--logo-grad);color:#fff;font-family:var(--font-head);font-size:.95rem;font-weight:700;border-radius:12px;text-align:center;transition:var(--trans-fast);margin-bottom:.55rem;box-shadow:0 6px 20px rgba(124,58,237,.35);}
.popup-cta-btn:hover{opacity:.9;transform:translateY(-2px);}
.popup-later{display:block;text-align:center;font-size:.83rem;color:var(--text-muted);cursor:pointer;transition:color var(--trans-fast);}
.popup-later:hover{color:var(--text-secondary);}

/* ============================================================
   HEADER WRAPPER
   ============================================================ */
#site-header{position:fixed;top:0;left:0;right:0;z-index:999;transition:var(--trans-med);}

/* BAR 1 – Top Info */
.bar-top{background:var(--bar1-bg);border-bottom:1px solid var(--border-color);padding:.42rem 0;transition:all var(--trans-med);overflow:hidden;}
.bar-top-inner{max-width:1400px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.bar-welcome{font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--accent-teal);white-space:nowrap;flex-shrink:0;}
.bar-welcome span{color:var(--text-secondary);font-weight:400;font-family:var(--font-body);}
.bar-whatsapp a{display:flex;align-items:center;gap:.4rem;color:#25d366;font-size:.8rem;font-weight:600;transition:var(--trans-fast);white-space:nowrap;}
.bar-whatsapp a:hover{color:#1da851;}
.bar-social{display:flex;align-items:center;gap:.35rem;}
.bar-social a{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);font-size:.75rem;transition:var(--trans-fast);}
.bar-social a:hover{transform:scale(1.22);}
.bar-social a.fb:hover{background:#1877f2;color:#fff;border-color:#1877f2;}
.bar-social a.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;border-color:#e6683c;}
.bar-social a.tw:hover{background:#000;color:#fff;border-color:#000;}
.bar-social a.li:hover{background:#0077b5;color:#fff;border-color:#0077b5;}
.bar-social a.yt:hover{background:#ff0000;color:#fff;border-color:#ff0000;}

/* BAR 2 – Ticker */
.bar-ticker{background:var(--bar2-bg);border-bottom:1px solid var(--border-color);padding:.32rem 0;overflow:hidden;transition:all var(--trans-med);position:relative;}
.bar-ticker::before,.bar-ticker::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;}
.bar-ticker::before{left:0;background:linear-gradient(90deg,var(--bg-primary) 0%,transparent 100%);}
.bar-ticker::after{right:0;background:linear-gradient(-90deg,var(--bg-primary) 0%,transparent 100%);}
.ticker-track{display:flex;animation:ticker-scroll 40s linear infinite;width:max-content;}
.ticker-track:hover{animation-play-state:paused;}
.ticker-item{white-space:nowrap;font-size:.78rem;font-weight:500;color:var(--text-secondary);padding:0 1.4rem;display:flex;align-items:center;gap:.45rem;}
.ticker-item a{color:var(--accent-teal);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.ticker-item a:hover{color:var(--accent-pink);}
.ticker-dot{color:var(--accent-teal);font-size:.45rem;}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* BAR 3 – Main Navbar */
.bar-nav{background:var(--bg-nav);border-bottom:1px solid var(--border-color);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow-nav);transition:var(--trans-med);}
.bar-nav-inner{max-width:1600px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:3.5rem;height:66px;}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
.nav-logo-img-wrap{width:100px;height:60px;border-radius:11px;border:2px solid transparent;background:linear-gradient(var(--bg-nav),var(--bg-nav)) padding-box,var(--logo-grad) border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:var(--trans-fast);}
.nav-logo-img-wrap:hover{transform:scale(1.07);}
.nav-logo-img-wrap img{width:150px;height:80px;object-fit:cover;border-radius:8px;}
.nav-logo-text{font-family:var(--font-head);font-size:1.2rem;font-weight:800;line-height:1;}
.nav-logo-text .web{color:var(--text-primary);}
.nav-logo-text .matriks{background:var(--logo-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ============================================================
   DESKTOP NAV MENU
   ============================================================ */
.nav-menu{display:flex;align-items:center;gap:.01rem;margin-left:auto;flex-wrap:nowrap;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:.28rem;font-family:var(--font-head);font-size:0.9rem;font-weight:600;color:var(--text-secondary);padding:.45rem .55rem;border-radius:7px;white-space:nowrap;transition:var(--trans-fast);position:relative;letter-spacing:.01em;}
.nav-link::after{content:'';position:absolute;bottom:-1px;left:50%;right:50%;height:2px;background:var(--accent-teal);border-radius:2px;transition:var(--trans-med);opacity:0;}
.nav-item:hover > .nav-link::after,.nav-item.active > .nav-link::after{left:10%;right:10%;opacity:1;}
.nav-item:hover > .nav-link,.nav-item.active > .nav-link{color:var(--accent-teal);background:var(--hover-bg);}
.nav-link .caret{font-size:.6rem;transition:transform var(--trans-fast);opacity:.6;}
.nav-item:hover > .nav-link .caret{transform:rotate(180deg);opacity:1;}

/* Nav Right */
.nav-right{display:flex;align-items:center;gap:.45rem;margin-left:.4rem;flex-shrink:0;}
.btn-seo-check{display:flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:7px;font-size:.85rem;font-weight:700;font-family:var(--font-head);background:transparent;border:1.5px solid var(--accent-teal);color:var(--accent-teal);white-space:nowrap;transition:var(--trans-fast);}
.btn-seo-check:hover{background:var(--accent-teal);color:#0d0f1a;}
.theme-toggle{position:relative;display:flex;align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:30px;padding:.2rem;gap:.12rem;}
.theme-btn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--text-muted);transition:var(--trans-fast);cursor:pointer;}
.theme-btn.active{background:var(--logo-grad);color:#fff;}
.theme-btn:hover:not(.active){color:var(--text-primary);background:var(--hover-bg);}

/* ============================================================
   STICKY BEHAVIOR
   ============================================================ */
.scrolled .bar-top,.scrolled .bar-ticker{max-height:0;padding:0;overflow:hidden;border-bottom-width:0;}
.scrolled .bar-nav{box-shadow:0 4px 30px rgba(0,0,0,.4);}

/* ============================================================
   MEGA NAV PANEL (Desktop)
   ============================================================ */
.mega-panel-wrapper{background:var(--mega-bg);border-bottom:2px solid var(--border-accent);box-shadow:0 8px 40px rgba(0,0,0,.35);overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0;pointer-events:none;}
.mega-panel-wrapper.visible{max-height:1400px;height:655px; overflow-y: auto; opacity:1;pointer-events:all;}
.mega-panel{max-width:1400px;margin:0 auto;overflow-y: visible;  padding:1.4rem 1.5rem 1.6rem;display:grid;gap:0;}

.mega-full{grid-template-columns:repeat(5,1fr);}
.mega-6col{grid-template-columns:repeat(4,1fr) 1fr 280px;}
.mega-4col{grid-template-columns:repeat(4,1fr);}
.mega-3col{grid-template-columns:repeat(3,1fr);}



#panel-services .mega-panel {
  align-items: start;       /* columns don't stretch to equal height */
}

#panel-services .mega-section {
  max-height: 75vh;
  overflow-y: auto;
}
/* ── SECTION base ── */
.mega-section{padding:.2rem .8rem;border-right:1px solid var(--border-color);}
.mega-section:last-child{border-right:none;}
.mega-section-head{font-family:var(--font-head);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-teal);padding:.4rem 0 .6rem;border-bottom:1px solid var(--border-color);margin-bottom:.5rem;display:flex;align-items:center;gap:.35rem;}
.mega-section-head i{font-size:.75rem;}

/* ── MEGA LINKS — 16px+ ── */
.mega-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .55rem;font-size:1rem;color:var(--text-secondary);border-radius:7px;transition:var(--trans-fast);white-space:nowrap;border:1px solid transparent;margin-bottom:.18rem;}
.mega-link i{width:18px;text-align:center;color:var(--accent-teal);font-size:.85rem;flex-shrink:0;}
.mega-link:hover{background:var(--hover-bg);color:var(--accent-teal);padding-left:.8rem;border-color:var(--border-accent);}
.mega-link .badge{margin-left:auto;font-size:.62rem;background:var(--accent-pink);color:#fff;padding:.06rem .38rem;border-radius:20px;white-space:nowrap;}
.mega-link .badge.hot{background:var(--accent-orange);}

/* Nav tab indicators */
.nav-item.mega-trigger > .nav-link{border-radius:7px 7px 0 0;}
.nav-item.mega-trigger.panel-open > .nav-link{color:var(--accent-teal);background:var(--hover-bg);}
.nav-item.mega-trigger.panel-open > .nav-link::after{left:10%;right:10%;opacity:1;}
.nav-item.mega-trigger.panel-open > .nav-link .caret{transform:rotate(180deg);opacity:1;}

/* ============================================================
   SERVICES MEGA PANEL — 3 columns (DM, Design, Dev) + review
   Each column has its own accent color border top
   ============================================================ */
#panel-services .mega-panel{grid-template-columns: 1fr 1fr 1fr 280px;}

/* Column accent strips */
.mega-section.col-dm{border-top:3px solid var(--dm-accent);}
.mega-section.col-design{border-top:3px solid var(--design-accent);}
.mega-section.col-dev{border-top:3px solid var(--dev-accent);}

/* Sub-section dividers inside Services columns */
.mega-sub-section{margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color);}
.mega-sub-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.mega-sub-head{font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .55rem .25rem;margin-bottom:.1rem;border-radius:5px;display:flex;align-items:center;gap:.3rem;}
/* DM sub-head */
.col-dm .mega-sub-head{color:var(--dm-accent);background:rgba(0,201,177,0.06);}
/* Design sub-head */
.col-design .mega-sub-head{color:var(--design-accent);background:rgba(255,60,126,0.06);}
/* Dev sub-head */
.col-dev .mega-sub-head{color:var(--dev-accent);background:rgba(124,58,237,0.06);}

/* Column title banner */
.mega-col-title{font-family:var(--font-head);font-size:1rem;font-weight:800;display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:2px solid;}
.col-dm .mega-col-title{color:var(--dm-accent);border-color:var(--dm-accent);}
.col-design .mega-col-title{color:var(--design-accent);border-color:var(--design-accent);}
.col-dev .mega-col-title{color:var(--dev-accent);border-color:var(--dev-accent);}

/* Icon badge for column title */
.mega-col-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.col-dm .mega-col-icon{background:linear-gradient(135deg,rgba(0,201,177,.25),rgba(37,99,235,.2));color:var(--dm-accent);}
.col-design .mega-col-icon{background:linear-gradient(135deg,rgba(255,60,126,.25),rgba(255,107,53,.2));color:var(--design-accent);}
.col-dev .mega-col-icon{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(37,99,235,.2));color:var(--dev-accent);}

/* Hover accent per column */
.col-dm .mega-link:hover{color:var(--dm-accent);border-color:rgba(0,201,177,0.3);background:rgba(0,201,177,0.07);}
.col-design .mega-link:hover{color:var(--design-accent);border-color:rgba(255,60,126,0.3);background:rgba(255,60,126,0.07);}
.col-dev .mega-link:hover{color:var(--dev-accent);border-color:rgba(124,58,237,0.3);background:rgba(124,58,237,0.07);}

/* ── Review column ── */
.mega-review-col{padding:.2rem .8rem .2rem 1rem;border-left:1px solid var(--border-accent);border-top:3px solid var(--accent-yellow);}
.mega-review-col .mega-section-head{color:var(--accent-yellow);}
.review-card-mega{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:.9rem;margin-bottom:.5rem;position:relative;overflow:hidden;}
.review-card-mega::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--logo-grad);}
.review-stars-mega{color:var(--accent-yellow);font-size:.88rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem;}
.review-stars-mega span{font-size:.72rem;color:var(--text-muted);}
.review-text-mega{font-size:.82rem;color:var(--text-secondary);line-height:1.6;margin-bottom:.6rem;font-style:italic;}
.review-author-mega{display:flex;align-items:center;gap:.5rem;}
.review-avatar{width:32px;height:32px;border-radius:50%;background:var(--logo-grad);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:800;flex-shrink:0;}
.review-name{font-size:.82rem;font-weight:700;color:var(--text-primary);}
.review-role{font-size:.7rem;color:var(--text-muted);}
.review-rating-bar{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;}
.review-rating-bar i{color:var(--accent-yellow);font-size:.78rem;}
.review-rating-text{font-size:.82rem;font-weight:700;color:var(--text-primary);}
.review-rating-sub{font-size:.7rem;color:var(--text-muted);margin-left:auto;}

/* CTA in review col */
.review-cta{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem;}
.review-cta-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .75rem;border-radius:9px;font-family:var(--font-head);font-size:.82rem;font-weight:700;transition:var(--trans-fast);border:1.5px solid;}
.review-cta-btn.primary{background:var(--logo-grad);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(124,58,237,.3);}
.review-cta-btn.primary:hover{opacity:.9;transform:translateY(-1px);}
.review-cta-btn.secondary{background:transparent;color:var(--accent-teal);border-color:var(--accent-teal);}
.review-cta-btn.secondary:hover{background:var(--accent-teal);color:#0d0f1a;}

/* ============================================================
   OTHER MEGA PANELS (unchanged from original)
   ============================================================ */

/* Digital Marketing panel */
#panel-dm .mega-panel{grid-template-columns:1fr 1fr 1fr 1fr 1fr 280px;}

/* ============================================================
   FIXED SIDEBAR CTA
   ============================================================ */
.sidebar-cta{position:fixed;right:0;top:60%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;gap:.35rem;}
.sidebar-btn{writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;gap:.65rem;padding:.75rem .42rem .9rem;background:var(--bg-card);border:1px solid var(--border-color);border-right:none;color:var(--text-secondary);font-family:var(--font-head);font-size:.7rem;font-weight:700;border-radius:10px 0 0 10px;transition:var(--trans-med);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;}
.sidebar-btn i{writing-mode:horizontal-tb;font-size:.88rem;margin-bottom:.28rem;}
.sidebar-btn.cta-call{border-top:3px solid #25d366;}
.sidebar-btn.cta-wa{border-top:3px solid #25d366;}
.sidebar-btn.cta-email{border-top:3px solid var(--accent-blue);}
.sidebar-btn.cta-quote{border-top:3px solid var(--accent-orange);background:var(--accent-orange);color:#fff;border-color:var(--accent-orange);}
.sidebar-btn:hover{transform:translateX(-4px);color:var(--accent-teal);background:var(--hover-bg);}
.sidebar-btn.cta-quote:hover{background:#e05a20;color:#fff;}

/* ============================================================
   HAMBURGER & MOBILE NAV
   ============================================================ */
.hamburger{display:none;flex-direction:column;gap:5px;width:35px;height:35px;padding:.38rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:var(--trans-fast);align-items:center;justify-content:center;}
.hamburger span{display:block;width:19px;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--trans-med);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:998;overflow-y:auto;padding:5rem 1.5rem 2rem;transform:translateX(100%);transition:transform var(--trans-med);}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-list{display:flex;flex-direction:column;gap:.3rem;}
.mobile-nav-item{border-bottom:1px solid var(--border-color);}
.mobile-nav-link{display:flex;align-items:center;justify-content:space-between;padding:.85rem .5rem;font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--text-primary);cursor:pointer;}
.mobile-nav-link i{color:var(--text-muted);font-size:.78rem;transition:transform var(--trans-fast);}
.mobile-nav-item.open > .mobile-nav-link i{transform:rotate(180deg);color:var(--accent-teal);}
.mobile-sub{display:none;padding:.28rem 0 .45rem 1rem;}
.mobile-nav-item.open > .mobile-sub{display:block;}
.mobile-sub a{display:flex;align-items:center;gap:.55rem;padding:.5rem .5rem;font-size:1rem;color:var(--text-secondary);border-radius:8px;border:1px solid transparent;transition:var(--trans-fast);margin-bottom:.15rem;}
.mobile-sub a:hover{color:var(--accent-teal);background:var(--hover-bg);border-color:var(--border-accent);}
.mobile-sub a i{color:var(--accent-teal);width:17px;text-align:center;}
.mobile-contact-bar{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem;padding-top:.9rem;border-top:1px solid var(--border-color);}
.mobile-contact-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem;border-radius:12px;font-family:var(--font-head);font-size:.9rem;font-weight:700;color:#fff;transition:var(--trans-fast);}
.mobile-contact-btn.phone{background:#25d366;}
.mobile-contact-btn.wa{background:#128c7e;}
.mobile-contact-btn.email{background:var(--accent-blue);}
.mobile-contact-btn.consult{background:var(--logo-grad);}
.mobile-contact-btn:hover{opacity:.9;transform:translateY(-1px);}
.mobile-theme-row{display:flex;align-items:center;gap:.55rem;padding-top:.9rem;border-top:1px solid var(--border-color);margin-top:.45rem;}
.mobile-theme-row span{font-size:.83rem;color:var(--text-muted);font-weight:600;}
.mobile-theme-row .theme-toggle{margin-left:auto;}

/* ============================================================
   DEMO PAGE CONTENT
   ============================================================ */
.demo-hero{padding-top:220px;text-align:center;padding-bottom:4rem;min-height:100vh;}
.demo-hero h1{font-family:var(--font-head);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;background:var(--logo-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.8rem;}
.demo-hero p{color:var(--text-secondary);font-size:1rem;}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .nav-menu,.mega-panel-wrapper{display:none!important;}
  .hamburger{display:flex;}
  .nav-right .btn-seo-check{display:none;}
  .mobile-nav{display:block;}
  .bar-top-inner{flex-wrap:wrap;gap:.38rem;}
  .bar-welcome{display:none;}
}
@media(max-width:600px){
  .bar-top-inner{justify-content:center;}
  .sidebar-cta{display:none;}
}

.bar-top,

.bar-ticker {

  transition: max-height 0.35s cubic-bezier(.4,0,.2,1),

              padding    0.35s cubic-bezier(.4,0,.2,1),

              opacity    0.25s ease,

              border     0.35s ease;

  max-height: 60px;   /* enough to show content */

  opacity: 1;

}

.scrolled .bar-top,

.scrolled .bar-ticker {

  opacity: 0;         /* fade out while collapsing */

}
/* // Home Navbar section End */

/* <!-- Home Form 2nd section Start --> */
:root {
  --hf-primary: #1a1f6e;
  --hf-secondary: #e63946;
  --hf-accent: #f4a623;
  --hf-blue-light: #4361ee;
  --hf-cyan: #06d6a0;
  --hf-white: #ffffff;
  --hf-off-white: #f8f9ff;
  --hf-text-dark: #0d0e2b;
  --hf-text-muted: #5c5f7a;
  --hf-glass-bg: rgba(255,255,255,0.12);
  --hf-glass-border: rgba(255,255,255,0.25);
  --hf-shadow-lg: 0 20px 60px rgba(26,31,110,0.18);
  --hf-shadow-glow: 0 0 40px rgba(67,97,238,0.35);
  --hf-radius-xl: 24px;
  --hf-radius-lg: 16px;
  --hf-radius-md: 12px;
  --hf-font-head: 'Syne', sans-serif;
  --hf-font-body: 'DM Sans', sans-serif;
  /* Gradient birds */
  --hf-grad-firebird: linear-gradient(135deg, #ff6b35 0%, #f7c59f 25%, #e63946 50%, #c9184a 75%, #ff4d6d 100%);
  --hf-grad-elephant: linear-gradient(135deg, #4361ee 0%, #7209b7 40%, #3a0ca3 70%, #560bad 100%);
  --hf-grad-dove: linear-gradient(135deg, #06d6a0 0%, #118ab2 33%, #7400b8 66%, #80ffdb 100%);
  --hf-grad-ambient: radial-gradient(ellipse at 20% 50%, rgba(67,97,238,0.15) 0%, transparent 60%),
                     radial-gradient(ellipse at 80% 20%, rgba(230,57,70,0.12) 0%, transparent 50%),
                     radial-gradient(ellipse at 60% 80%, rgba(6,214,160,0.1) 0%, transparent 50%);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===== CUSTOM CURSOR ===== */
#home-form-cursor {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--hf-blue-light);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.15s ease, background 0.2s;
  mix-blend-mode: multiply;
  will-change: transform;
}
#home-form-cursor-ring {
  position: fixed;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--hf-blue-light);
  pointer-events: none;
  z-index: 9998;
  transition: all 0.18s ease;
  will-change: transform;
  opacity: 0.6;
}
#home-form-cursor.home-form-cursor--hover { transform: scale(2.5); background: var(--hf-secondary); }
#home-form-cursor-ring.home-form-cursor--hover { transform: scale(0.5); opacity: 0; }

/* ===== AMBIENT BACKGROUND ===== */
#home-form-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* background: var(--hf-off-white); */
  background: #080c18;
  font-family: var(--hf-font-body);
}
.home-form-ambient-bg {
  position: absolute;
  inset: 0;
  background: var(--hf-grad-ambient);
  z-index: 0;
  pointer-events: none;
}
/* Animated grain overlay */
.home-form-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

/* ===== TSPARTICLES CANVAS ===== */
#home-form-tsparticles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ===== MORPHING BLOB BG ===== */
.home-form-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 2;
  animation: home-form-blob-morph 12s ease-in-out infinite alternate;
}
.home-form-blob--1 {
  width: 520px; height: 480px;
  background: var(--hf-grad-elephant);
  top: -120px; left: -80px;
  animation-delay: 0s;
}
.home-form-blob--2 {
  width: 420px; height: 380px;
  background: var(--hf-grad-firebird);
  top: 30%; right: -60px;
  animation-delay: -4s;
}
.home-form-blob--3 {
  width: 300px; height: 320px;
  background: var(--hf-grad-dove);
  bottom: -80px; left: 35%;
  animation-delay: -8s;
}
@keyframes home-form-blob-morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
  33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.07) rotate(6deg); }
  66%  { border-radius: 50% 40% 60% 50% / 40% 70% 50% 60%; transform: scale(0.95) rotate(-4deg); }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.05) rotate(3deg); }
}

/* ===== DOODLE SVG DECORATIONS ===== */
.home-form-doodle-wrap {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.home-form-doodle-wrap--tl { top: 60px; left: 40px; }
.home-form-doodle-wrap--br { bottom: 40px; right: 180px; }
.home-form-doodle-wrap--mid { top: 40%; left: 46%; }

/* Self-drawing SVG */
.home-form-self-draw path, .home-form-self-draw circle, .home-form-self-draw line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: home-form-draw 3.5s cubic-bezier(.4,0,.2,1) forwards;
}
.home-form-self-draw path:nth-child(2) { animation-delay: 0.4s; }
.home-form-self-draw path:nth-child(3) { animation-delay: 0.8s; }
.home-form-self-draw circle { animation-delay: 1.2s; stroke-dasharray: 300; stroke-dashoffset: 300; }
@keyframes home-form-draw {
  to { stroke-dashoffset: 0; }
}

/* ===== LAYOUT CONTAINER ===== */
.home-form-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: center;
  

}

/* ===== LEFT CONTENT ===== */
.home-form-left { position: relative; }

.home-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(67,97,238,0.1);
  border: 1px solid rgba(67,97,238,0.25);
  border-radius: 100px;
  padding: 6px 16px 6px 8px;
  font-family: var(--hf-font-head);
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-blue-light);
  margin-bottom: 22px;
  animation: home-form-badge-float 3s ease-in-out infinite, home-form-fade-up 0.7s ease forwards;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.home-form-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(67,97,238,0.12), transparent);
  transform: translateX(-100%);
  animation: home-form-shimmer 2.4s infinite 1s;
}
@keyframes home-form-shimmer { to { transform: translateX(200%); } }

.home-form-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hf-blue-light);
  animation: home-form-pulse 1.6s ease-in-out infinite;
}
@keyframes home-form-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(67,97,238,0.5); }
  50% { transform: scale(1.2); opacity: 0.85; box-shadow: 0 0 0 5px rgba(67,97,238,0); }
}
@keyframes home-form-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Heading */
.home-form-heading {
  font-family: var(--hf-font-head);
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--hf-text-white);
  margin-bottom: 16px;
  opacity: 0;
  animation: home-form-fade-up 0.8s ease 0.2s forwards;
}
.home-form-heading em {
  font-style: normal;
  background: var(--hf-grad-elephant);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
/* Gradient shimmer on heading word */
.home-form-heading .home-form-shimmer-text {
  background: linear-gradient(90deg, var(--hf-primary) 0%, var(--hf-blue-light) 30%, var(--hf-secondary) 60%, var(--hf-primary) 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: home-form-grad-shift 4s linear infinite;
}
@keyframes home-form-grad-shift { to { background-position: 200% center; } }

/* Typewriter */
.home-form-typewriter-wrap {
  font-family: var(--hf-font-head);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  color: var(--hf-secondary);
  min-height: 38px;
  margin-bottom: 18px;
  opacity: 0;
  animation: home-form-fade-up 0.8s ease 0.5s forwards;
}
#home-form-typewriter { border-right: 3px solid var(--hf-secondary); padding-right: 3px; animation: home-form-blink 0.75s step-end infinite; }
@keyframes home-form-blink { 50% { border-color: transparent; } }

.home-form-desc {
  font-family: var(--hf-font-body);
  font-size: 15.5px;
  color: var(--hf-text-muted);
  line-height: 1.72;
  margin-bottom: 28px;
  opacity: 0;
  animation: home-form-fade-up 0.8s ease 0.7s forwards;
}

/* CTA */
.home-form-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: home-form-fade-up 0.8s ease 0.9s forwards;
}

.home-form-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--hf-grad-elephant);
  color: #fff;
  font-family: var(--hf-font-head);
  font-weight: 700;
  font-size: 15px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 8px 30px rgba(67,97,238,0.35);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.home-form-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%) skewX(-20deg);
  transition: transform 0.5s ease;
}
.home-form-btn-primary:hover::before { transform: translateX(150%) skewX(-20deg); }
.home-form-btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(67,97,238,0.5); }
.home-form-btn-primary:active { transform: translateY(0) scale(0.98); }

.home-form-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  background: transparent;
  color: var(--hf-primary);
  font-family: var(--hf-font-head);
  font-weight: 600;
  font-size: 14px;
  border-radius: 100px;
  border: 1.5px solid rgba(26,31,110,0.25);
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.home-form-btn-secondary:hover {
  border-color: var(--hf-blue-light);
  color: var(--hf-blue-light);
  background: rgba(67,97,238,0.06);
  transform: translateY(-2px);
}

/* Stats row */
.home-form-stats-row {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  opacity: 0;
  animation: home-form-fade-up 0.8s ease 1.1s forwards;
}
.home-form-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-form-stat-num {
  font-family: var(--hf-font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--hf-primary);
  background: var(--hf-grad-firebird);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-form-stat-label {
  font-size: 12px;
  color: var(--hf-text-muted);
  font-weight: 500;
}
.home-form-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(26,31,110,0.1);
  align-self: center;
}

/* Floating icon badges */
.home-form-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 100px;
  padding: 8px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  font-family: var(--hf-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-text-dark);
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}
.home-form-float-badge--1 { bottom: -20px; right: 20px; animation: home-form-float-y 4s ease-in-out infinite; }
.home-form-float-badge--2 { top: 10px; right: -10px; animation: home-form-float-y 4.5s ease-in-out infinite 1s; }
@keyframes home-form-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== MIDDLE IMAGE ===== */
.home-form-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0;
  animation: home-form-fade-up 0.9s ease 0.4s forwards;
}
.home-form-img-wrapper {
  position: relative;
  width: 300px;
  max-width: 100%;
}
.home-form-img-wrapper::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4361ee, #e63946, #06d6a0, #f4a623, #4361ee);
  animation: home-form-spin-ring 8s linear infinite;
  opacity: 0.4;
  z-index: -1;
}
@keyframes home-form-spin-ring { to { transform: rotate(360deg); } }
.home-form-img-wrapper::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--hf-off-white);
  z-index: -1;
}
.home-form-hero-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow: var(--hf-shadow-lg), var(--hf-shadow-glow);
  border: 4px solid #fff;
  transition: transform 0.5s ease;
}
.home-form-hero-img:hover { transform: scale(1.04) rotate(2deg); }

/* Orbit rings */
.home-form-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(67,97,238,0.2);
  pointer-events: none;
}
.home-form-orbit--1 { width: 360px; height: 360px; top: -30px; left: -30px; animation: home-form-spin-ring 15s linear infinite; }
.home-form-orbit--2 { width: 420px; height: 420px; top: -60px; left: -60px; animation: home-form-spin-ring 25s linear infinite reverse; border-color: rgba(230,57,70,0.15); }

/* Orbit icons */
.home-form-orbit-icon {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  animation: home-form-orbit-spin 15s linear infinite;
  transform-origin: 180px 180px;
}
.home-form-orbit-icon:nth-child(2) { animation-delay: -5s; }
.home-form-orbit-icon:nth-child(3) { animation-delay: -10s; }
@keyframes home-form-orbit-spin {
  from { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

/* Parallax mid section */
.home-form-parallax-layer { will-change: transform; }

/* ===== RIGHT FORM ===== */
.home-form-right {
  opacity: 0;
  animation: home-form-fade-up 0.9s ease 0.6s forwards;
}

/* Glassmorphic form card */
.home-form-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--hf-radius-xl);
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(26,31,110,0.12), 0 0 0 1px rgba(255,255,255,0.5) inset;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.home-form-card:hover { box-shadow: 0 32px 80px rgba(26,31,110,0.18); transform: translateY(-2px); }
.home-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hf-grad-elephant);
}

/* Form steps indicator */
.home-form-steps-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.home-form-step-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hf-font-head);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.35s ease;
  position: relative;
  z-index: 1;
}
.home-form-step-dot.active {
  background: var(--hf-grad-elephant);
  color: #fff;
  box-shadow: 0 4px 16px rgba(67,97,238,0.4);
  animation: home-form-step-pop 0.4s ease;
}
.home-form-step-dot.done {
  background: var(--hf-cyan);
  color: #fff;
}
.home-form-step-dot.inactive {
  background: rgba(26,31,110,0.08);
  color: var(--hf-text-muted);
}
@keyframes home-form-step-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.home-form-step-line {
  flex: 1;
  height: 2px;
  background: rgba(26,31,110,0.1);
  transition: background 0.5s ease;
}
.home-form-step-line.done { background: var(--hf-cyan); }

/* Form title */
.home-form-card-title {
  font-family: var(--hf-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--hf-text-dark);
  margin-bottom: 6px;
}
.home-form-card-subtitle {
  font-size: 13px;
  color: var(--hf-text-muted);
  margin-bottom: 24px;
}

/* Form fields */
.home-form-field-group { display: flex; flex-direction: column; gap: 14px; }
.home-form-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-text-muted);
  font-family: var(--hf-font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.home-form-field input,
.home-form-field select,
.home-form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--hf-radius-md);
  border: 1.5px solid rgba(26,31,110,0.12);
  background: rgba(255,255,255,0.8);
  font-family: var(--hf-font-body);
  font-size: 14px;
  color: var(--hf-text-dark);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  outline: none;
  appearance: none;
}
.home-form-field input:focus,
.home-form-field select:focus,
.home-form-field textarea:focus {
  border-color: var(--hf-blue-light);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
  background: #fff;
}
.home-form-field input::placeholder { color: #aab0c6; }
.home-form-field textarea { resize: none; height: 78px; }

/* Service chips */
.home-form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-form-chip {
  padding: 6px 13px;
  border-radius: 100px;
  border: 1.5px solid rgba(67,97,238,0.2);
  font-size: 12px;
  font-weight: 600;
  color: var(--hf-blue-light);
  font-family: var(--hf-font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  user-select: none;
}
.home-form-chip:hover, .home-form-chip.selected {
  background: var(--hf-blue-light);
  color: #fff;
  border-color: var(--hf-blue-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67,97,238,0.3);
}
.home-form-chip.selected { animation: home-form-step-pop 0.3s ease; }

/* Form nav buttons */
.home-form-nav {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  align-items: center;
}
.home-form-btn-next,
.home-form-btn-submit {
  flex: 1;
  padding: 13px 20px;
  border-radius: 100px;
  border: none;
  background: var(--hf-grad-elephant);
  color: #fff;
  font-family: var(--hf-font-head);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.home-form-btn-next:hover, .home-form-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(67,97,238,0.4);
}
.home-form-btn-back {
  padding: 13px 18px;
  border-radius: 100px;
  border: 1.5px solid rgba(26,31,110,0.15);
  background: transparent;
  color: var(--hf-text-muted);
  font-family: var(--hf-font-head);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex; align-items: center; gap: 6px;
}
.home-form-btn-back:hover { border-color: var(--hf-blue-light); color: var(--hf-blue-light); }

/* Step panels */
.home-form-step-panel { display: none; }
.home-form-step-panel.active { display: block; animation: home-form-step-in 0.4s ease forwards; }
@keyframes home-form-step-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.home-form-step-panel.step-back { animation: home-form-step-back 0.4s ease forwards; }
@keyframes home-form-step-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Success state */
.home-form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 20px 0;
}
.home-form-success.active { display: flex; animation: home-form-step-in 0.5s ease forwards; }
.home-form-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hf-cyan), var(--hf-blue-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  animation: home-form-step-pop 0.6s ease;
  box-shadow: 0 8px 24px rgba(6,214,160,0.4);
}
.home-form-success-title { font-family: var(--hf-font-head); font-weight: 800; font-size: 20px; color: var(--hf-text-dark); }
.home-form-success-msg { font-size: 14px; color: var(--hf-text-muted); line-height: 1.6; }

/* ===== TRUST ICONS ROW ===== */
.home-form-trust-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.home-form-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--hf-text-muted);
  font-weight: 500;
}

/* ===== FADE ANIMATIONS ===== */
@keyframes home-form-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== NEUMORPHIC CARD ELEMENT ===== */
.home-form-neu-card {
  background: #f0f2ff;
  border-radius: 16px;
  box-shadow: 6px 6px 16px #c8cce8, -6px -6px 16px #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  transition: box-shadow 0.3s ease;
}
.home-form-neu-card:hover {
  box-shadow: 8px 8px 22px #c0c4e2, -8px -8px 22px #ffffff, 0 0 0 1px rgba(67,97,238,0.1) inset;
}
.home-form-neu-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, #e0e4ff, #f8f9ff);
  box-shadow: 3px 3px 8px #c8cce8, -3px -3px 8px #fff;
}
.home-form-neu-text strong {
  font-family: var(--hf-font-head);
  font-size: 13px;
  color: var(--hf-text-dark);
  font-weight: 700;
  display: block;
}
.home-form-neu-text span { font-size: 12px; color: var(--hf-text-muted); }

/* ===== GRADIENT SHIMMER BAR ===== */
.home-form-shimmer-bar {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--hf-grad-firebird));
  background: linear-gradient(90deg, #ff6b35, #e63946, #4361ee, #06d6a0, #f4a623);
  background-size: 300%;
  animation: home-form-grad-shift 3s linear infinite;
  margin-bottom: 20px;
  opacity: 0.7;
}

/* ===== LIQUID WAVE BOTTOM ===== */
.home-form-wave-wrap {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  z-index: 5;
  pointer-events: none;
  line-height: 0;
}
.home-form-wave-svg { width: 100%; height: 80px; }
.home-form-wave-path {
  animation: home-form-wave-morph 6s ease-in-out infinite;
}
@keyframes home-form-wave-morph {
  0%, 100% { d: path("M0,40 C200,80 400,0 600,40 C800,80 1000,0 1200,40 C1400,80 1440,60 1440,60 L1440,80 L0,80 Z"); }
  50% { d: path("M0,55 C200,10 400,70 600,30 C800,10 1000,60 1200,20 C1300,5 1400,40 1440,50 L1440,80 L0,80 Z"); }
}

/* ===== PARALLAX DATA ATTRS ===== */
[data-hf-parallax] { will-change: transform; }

/* ===== SCROLL REVEAL ===== */
.home-form-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.home-form-reveal.visible {
  opacity: 1;
  transform: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .home-form-container {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .home-form-mid { display: none; }
}
@media (max-width: 680px) {
  .home-form-container {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 32px;
  }
  .home-form-mid { display: flex; }
  .home-form-hero-img { width: 220px; height: 220px; }
  .home-form-orbit--1 { width: 264px; height: 264px; top: -22px; left: -22px; }
  .home-form-orbit--2 { width: 310px; height: 310px; top: -45px; left: -45px; }
  .home-form-field-row { grid-template-columns: 1fr; }
  .home-form-stats-row { gap: 16px; }
  .home-form-card { padding: 26px 20px; }
}
/* <!-- Home Form 2nd section End --> */


/* <!-- home-technology-stack Start --> */

#home-technology-stack-v2 {
  --hts-bg:           #080c18;
  --hts-surface:      rgba(255,255,255,0.045);
  --hts-surface-h:    rgba(255,255,255,0.085);
  --hts-border:       rgba(255,255,255,0.09);
  --hts-border-h:     rgba(255,255,255,0.22);
  --hts-text:         #f0f2ff;
  --hts-muted:        #6b7194;
  --hts-accent:       #ff5c35;
  --hts-accent2:      #7b5cfa;
  --hts-accent3:      #00d4aa;

  --hts-grad-fire:    linear-gradient(135deg,#ff5c35,#e8194a);
  --hts-grad-wave:    linear-gradient(135deg,#4b5eff,#9c3fff);
  --hts-grad-dove:    linear-gradient(135deg,#00d4aa,#0baaff);
  --hts-grad-cta:     linear-gradient(135deg,#ff5c35 0%,#e8194a 40%,#9c3fff 100%);

  --hts-font-head:    'Syne', sans-serif;
  --hts-font-body:    'DM Sans', sans-serif;
  --hts-radius:       20px;
  --hts-card-size:    130px;
}

/* ─── Wrapper ─────────────────────────────────────────────── */
#home-technology-stack-v2 {
  position: relative;
  overflow: hidden;
  padding: 80px 0 90px;
  background: var(--hts-bg);
  font-family: var(--hts-font-body);
  color: var(--hts-text);
  isolation: isolate;
}

/* ─── Particle canvas ─────────────────────────────────────── */
#home-technology-stack-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Ambient blobs ───────────────────────────────────────── */
.home-technology-stack-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  animation: htsFloat 14s ease-in-out infinite alternate;
}
.home-technology-stack-blob--a {
  width: 500px; height: 500px;
  background: radial-gradient(circle,#ff5c3540,transparent 70%);
  top: -140px; left: -100px;
}
.home-technology-stack-blob--b {
  width: 600px; height: 420px;
  background: radial-gradient(circle,#9c3fff30,transparent 70%);
  bottom: -120px; right: -120px;
  animation-delay: -5s; animation-duration: 18s;
}
.home-technology-stack-blob--c {
  width: 340px; height: 340px;
  background: radial-gradient(circle,#00d4aa28,transparent 70%);
  top: 38%; left: 42%;
  animation-delay: -9s; animation-duration: 22s;
}
@keyframes htsFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(28px,18px) scale(1.07); }
}

/* ─── Dot grid ────────────────────────────────────────────── */
.home-technology-stack-dotgrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* ─── Container ───────────────────────────────────────────── */
.home-technology-stack-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ─── Eyebrow ─────────────────────────────────────────────── */
.home-technology-stack-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hts-font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.home-technology-stack-eyebrow-line {
  width: 32px; height: 2px;
  border-radius: 2px;
  background: var(--hts-grad-fire);
}
.home-technology-stack-eyebrow-text {
  background: var(--hts-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Heading ─────────────────────────────────────────────── */
.home-technology-stack-heading {
  font-family: var(--hts-font-head);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.home-technology-stack-heading em {
  font-style: normal;
  background: var(--hts-grad-cta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Desc ────────────────────────────────────────────────── */
.home-technology-stack-desc {
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--hts-muted);
  max-width: 700px;
  margin: 0 0 36px;
  font-weight: 300;
}

/* ─── Stats row ───────────────────────────────────────────── */
.home-technology-stack-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 52px;
}
.home-technology-stack-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-technology-stack-stat-num {
  font-family: var(--hts-font-head);
  font-size: 1.9rem;
  font-weight: 800;
  background: var(--hts-grad-cta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.home-technology-stack-stat-label {
  font-size: 0.75rem;
  color: var(--hts-muted);
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* ─── Divider line ────────────────────────────────────────── */
.home-technology-stack-divider {
  width: 1px; height: 40px;
  background: var(--hts-border);
  align-self: center;
}

/* ─── Marquee rows ────────────────────────────────────────── */
.home-technology-stack-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
}

.home-technology-stack-track {
  overflow: hidden;
  position: relative;
}
.home-technology-stack-track::before,
.home-technology-stack-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.home-technology-stack-track::before {
  left: 0;
  background: linear-gradient(to right, var(--hts-bg) 0%, transparent 100%);
}
.home-technology-stack-track::after {
  right: 0;
  background: linear-gradient(to left, var(--hts-bg) 0%, transparent 100%);
}

.home-technology-stack-track-inner {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 6px 0;
  will-change: transform;
}

/* Row directions */
.home-technology-stack-track--right .home-technology-stack-track-inner {
  animation: htsScrollRight 36s linear infinite;
}
.home-technology-stack-track--left .home-technology-stack-track-inner {
  animation: htsScrollLeft 30s linear infinite;
}
.home-technology-stack-track:hover .home-technology-stack-track-inner {
  animation-play-state: paused;
}

@keyframes htsScrollRight {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes htsScrollLeft {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ─── CARD ────────────────────────────────────────────────── */
.home-technology-stack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: var(--hts-card-size);
  height: var(--hts-card-size);
  background: var(--hts-surface);
  border: 1px solid var(--hts-border);
  border-radius: var(--hts-radius);
  position: relative;
  cursor: default;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(.23,1.5,.32,1),
    border-color 0.3s,
    box-shadow 0.4s,
    background 0.3s;
  /* Corner dot */
}
/* Top-right corner accent dot */
.home-technology-stack-card::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--hts-border);
  transition: border-color 0.3s, background 0.3s;
}
/* Shimmer sweep */
.home-technology-stack-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transform: skewX(-18deg);
  transition: left 0s;
}
.home-technology-stack-card:hover {
  transform: translateY(-10px) scale(1.06);
  background: var(--hts-surface-h);
  border-color: var(--hts-border-h);
}
.home-technology-stack-card:hover::after {
  left: 160%;
  transition: left 0.6s ease;
}

/* Row-specific glow + dot color on hover */
.home-technology-stack-track--right .home-technology-stack-card:hover {
  box-shadow: 0 20px 50px rgba(255,92,53,0.22), 0 0 0 1px rgba(255,92,53,0.15);
}
.home-technology-stack-track--right .home-technology-stack-card:hover::before {
  background: #ff5c35; border-color: #ff5c35;
}
.home-technology-stack-track--left .home-technology-stack-card:hover {
  box-shadow: 0 20px 50px rgba(123,92,250,0.25), 0 0 0 1px rgba(123,92,250,0.2);
}
.home-technology-stack-track--left .home-technology-stack-card:hover::before {
  background: #7b5cfa; border-color: #7b5cfa;
}

/* ─── Icon ────────────────────────────────────────────────── */
.home-technology-stack-card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  position: relative;
  transition: transform 0.4s cubic-bezier(.23,1.5,.32,1);
}
.home-technology-stack-card:hover .home-technology-stack-card-icon {
  transform: scale(1.15) rotate(-4deg);
}
.home-technology-stack-card-icon svg {
  width: 44px; height: 44px;
  display: block;
}

/* ─── Card label ──────────────────────────────────────────── */
.home-technology-stack-card-name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--hts-muted);
  transition: color 0.25s;
  text-align: center;
  line-height: 1.3;
}
.home-technology-stack-card:hover .home-technology-stack-card-name {
  color: var(--hts-text);
}

/* ─── CTA Block ───────────────────────────────────────────── */
.home-technology-stack-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 0 16px;
}
.home-technology-stack-cta-tagline {
  font-size: 0.82rem;
  color: var(--hts-muted);
  letter-spacing: 0.04em;
  font-weight: 400;
}
.home-technology-stack-cta-tagline strong {
  color: var(--hts-text);
  font-weight: 600;
}

/* CTA Buttons row */
.home-technology-stack-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Primary CTA */
.home-technology-stack-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--hts-grad-cta);
  color: #fff;
  font-family: var(--hts-font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.23,1.5,.32,1), box-shadow 0.3s;
  box-shadow: 0 8px 32px rgba(255,92,53,0.35);
}
.home-technology-stack-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.18),transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.home-technology-stack-btn-primary:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 48px rgba(255,92,53,0.5);
}
.home-technology-stack-btn-primary:hover::before { opacity: 1; }
.home-technology-stack-btn-primary svg { flex-shrink: 0; }

/* Secondary CTA */
.home-technology-stack-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--hts-text);
  font-family: var(--hts-font-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--hts-border-h);
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
  backdrop-filter: blur(8px);
}
.home-technology-stack-btn-secondary:hover {
  transform: translateY(-3px);
  border-color: var(--hts-accent2);
  background: rgba(123,92,250,0.08);
}

/* ─── Trust badges ────────────────────────────────────────── */
.home-technology-stack-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.home-technology-stack-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--hts-muted);
  font-weight: 400;
}
.home-technology-stack-trust-badge svg { flex-shrink: 0; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  --hts-card-size: 108px;
  #home-technology-stack-v2 { --hts-card-size: 108px; }
  .home-technology-stack-track::before,
  .home-technology-stack-track::after { width: 80px; }
  .home-technology-stack-stats { gap: 18px; }
  .home-technology-stack-divider { display: none; }
}
@media (max-width: 480px) {
  #home-technology-stack-v2 { --hts-card-size: 90px; padding: 56px 0 64px; }
  .home-technology-stack-card-icon svg { width: 36px; height: 36px; }
  .home-technology-stack-track::before,
  .home-technology-stack-track::after { width: 48px; }
}
/* <!-- home-technology-stack End --> */

/* <!-- Home Creative Works Case Study start --> */
:root{
  --hcw-fire-a:#FF5E1A; --hcw-fire-b:#FF2D78;
  --hcw-wave-a:#3B82F6; --hcw-wave-b:#7C3AED;
  --hcw-dove-a:#10B981; --hcw-dove-b:#06B6D4;
  --hcw-amber-a:#F59E0B;--hcw-amber-b:#EF4444;
  --hcw-dark:#0D0D14;
  --hcw-card-bg:rgba(255,255,255,0.045);
  --hcw-card-border:rgba(255,255,255,0.10);
  --hcw-txt:#F0EFF8;
  --hcw-muted:rgba(240,239,248,0.52);
  --hcw-rx:24px;
  --hcw-ease:0.38s cubic-bezier(0.22,1,0.36,1);
  --hcw-fh:'Syne',sans-serif;
  --hcw-fb:'DM Sans',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--hcw-fb)}

/* ── SECTION ────────────────────────────────────────────── */
#home-creative-works{
  position:relative;
  background:var(--hcw-dark);
  font-family:var(--hcw-fb);
  color:var(--hcw-txt);
  overflow:hidden;
  padding:72px 0 80px;
}
#home-creative-works-particles{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}

/* orbs */
.hcw-orb{
  position:absolute;border-radius:50%;filter:blur(88px);
  opacity:.16;pointer-events:none;will-change:transform;z-index:0;
}
.hcw-orb--fire{
  width:500px;height:500px;
  background:radial-gradient(circle,var(--hcw-fire-a),var(--hcw-fire-b),transparent 68%);
  top:-120px;left:-90px;
}
.hcw-orb--wave{
  width:460px;height:460px;
  background:radial-gradient(circle,var(--hcw-wave-a),var(--hcw-wave-b),transparent 68%);
  top:38%;right:-130px;
}
.hcw-orb--dove{
  width:380px;height:380px;
  background:radial-gradient(circle,var(--hcw-dove-a),var(--hcw-dove-b),transparent 68%);
  bottom:-70px;left:28%;
}

/* ── CONTAINER ──────────────────────────────────────────── */
.hcw-container{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;padding:0 32px;
}

/* ── TWO-COLUMN LAYOUT ──────────────────────────────────── */
.hcw-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:44px;
  align-items:start;
}

/* ════════════════════════════════════════════════════
   LEFT PANEL
   ════════════════════════════════════════════════════ */
.hcw-panel{
  position:sticky;
  top:72px;
  min-width:0;
}

/* eyebrow */
.hcw-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.hcw-eyebrow-wave{width:42px;height:18px;flex-shrink:0}
.hcw-eyebrow-label{
  font-family:var(--hcw-fh);font-size:12px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--hcw-fire-a),var(--hcw-fire-b));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── HEADING: fully visible, no overflow clip ── */
.hcw-heading{
  font-family:var(--hcw-fh);
  /* clamp so text never overflows its 300 px column */
  font-size:clamp(36px,3.4vw,54px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-1.4px;
  white-space:normal;
  word-break:keep-all;
  overflow:visible;
  margin-bottom:30px;
}
.hcw-h-white{color:var(--hcw-txt);}
.hcw-h-grad{
  background:linear-gradient(135deg,var(--hcw-wave-a) 0%,var(--hcw-wave-b) 55%,var(--hcw-dove-a) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;
}

/* ── FILTER TABS – proper pill buttons ── */
.hcw-tabs{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:36px;
}
.hcw-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-radius:13px;
  border:1.5px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.02);
  font-size:13.5px;
  font-weight:500;
  color:var(--hcw-muted);
  text-align:left;
  width:100%;
  transition:
    background var(--hcw-ease),
    border-color var(--hcw-ease),
    color var(--hcw-ease),
    box-shadow var(--hcw-ease);
  position:relative;
  overflow:hidden;
}
/* glow fill behind active */
.hcw-tab::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,94,26,.15),rgba(255,45,120,.09));
  opacity:0;transition:opacity var(--hcw-ease);border-radius:inherit;
}
.hcw-tab:hover{
  border-color:rgba(255,255,255,0.13);
  color:var(--hcw-txt);
  background:rgba(255,255,255,0.05);
}
.hcw-tab.hcw-active{
  border-color:rgba(255,94,26,0.48);
  color:var(--hcw-txt);
  box-shadow:0 0 20px rgba(255,94,26,0.16), inset 0 0 0 0 transparent;
}
.hcw-tab.hcw-active::before{opacity:1;}

/* pulsing dot */
.hcw-tab-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,0.20);
  transition:background var(--hcw-ease),transform var(--hcw-ease),box-shadow var(--hcw-ease);
}
.hcw-tab.hcw-active .hcw-tab-dot{
  background:linear-gradient(135deg,var(--hcw-fire-a),var(--hcw-fire-b));
  transform:scale(1.35);
  box-shadow:0 0 9px rgba(255,94,26,.75);
}
.hcw-tab:hover:not(.hcw-active) .hcw-tab-dot{background:rgba(255,255,255,0.42);}

/* arrow (slides in when active) */
.hcw-tab-arrow{
  margin-left:auto;flex-shrink:0;
  opacity:0;transform:translateX(-5px);
  transition:opacity var(--hcw-ease),transform var(--hcw-ease);
}
.hcw-tab-arrow svg{width:15px;height:15px;stroke:var(--hcw-fire-a);stroke-width:2.3;fill:none}
.hcw-tab.hcw-active .hcw-tab-arrow{opacity:1;transform:translateX(0);}

/* nav arrows */
.hcw-nav{display:flex;gap:10px;}
.hcw-nav-btn{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--hcw-card-border);
  background:var(--hcw-card-bg);
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  transition:background var(--hcw-ease),border-color var(--hcw-ease),transform var(--hcw-ease),box-shadow var(--hcw-ease);
}
.hcw-nav-btn svg{width:17px;height:17px;stroke:var(--hcw-txt);stroke-width:2.2;fill:none}
.hcw-nav-btn:hover{
  background:linear-gradient(135deg,var(--hcw-fire-a),var(--hcw-fire-b));
  border-color:transparent;transform:scale(1.08);
  box-shadow:0 6px 22px rgba(255,94,26,0.35);
}

/* ════════════════════════════════════════════════════
   RIGHT COLUMN: swiper + pagination stacked
   ════════════════════════════════════════════════════ */
.hcw-swiper-col{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.hcw-swiper-wrap{
  overflow:hidden;
  border-radius:var(--hcw-rx);
  /* no fixed height so cards can breathe */
}

/* Swiper must allow its slides to overflow visually */
.hcw-swiper{ overflow:visible; }
.hcw-swiper .swiper-wrapper{ display:flex; align-items:stretch; }
.hcw-swiper .swiper-slide{ height:auto; display:flex; }

/* ── PAGINATION pinned BELOW cards ── */
.hcw-pagination-row{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
/* detach swiper's absolute positioning */
#home-creative-works-pagination{
  position:static !important;
  width:auto !important;
  bottom:auto !important;
  display:flex !important;
  justify-content:center;
  gap:7px;
  line-height:0;
}
#home-creative-works-pagination .swiper-pagination-bullet{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.22);opacity:1;
  transition:background var(--hcw-ease),width .28s ease,border-radius .28s ease;
  display:inline-block;
}
#home-creative-works-pagination .swiper-pagination-bullet-active{
  background:linear-gradient(90deg,var(--hcw-fire-a),var(--hcw-fire-b));
  width:26px;border-radius:5px;
}

/* ════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════ */
.hcw-card{
  background:var(--hcw-card-bg);
  border:1px solid var(--hcw-card-border);
  border-radius:var(--hcw-rx);
  overflow:hidden;
  display:flex;flex-direction:column;
  width:100%;
  backdrop-filter:blur(14px);
  transition:transform var(--hcw-ease),border-color var(--hcw-ease),box-shadow var(--hcw-ease);
}
.hcw-card:hover{
  transform:translateY(-7px);
  border-color:rgba(255,255,255,0.20);
  box-shadow:0 30px 68px rgba(0,0,0,0.55);
}
.hcw-card::before{
  content:'';display:block;height:3px;
  background:var(--hcw-card-accent,linear-gradient(90deg,var(--hcw-fire-a),var(--hcw-fire-b)));
  opacity:0;transition:opacity var(--hcw-ease);
}
.hcw-card:hover::before{opacity:1;}

/* image */
.hcw-card__img{
  position:relative;overflow:hidden;height:215px;
  background:rgba(255,255,255,0.03);
}
.hcw-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(0.22,1,0.36,1),filter .4s;
  filter:brightness(.88) saturate(1.1);
}
.hcw-card:hover .hcw-card__img img{transform:scale(1.07);filter:brightness(1) saturate(1.25);}

/* hover overlay */
.hcw-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(160deg,transparent,rgba(0,0,0,.55));
  opacity:0;transition:opacity var(--hcw-ease);
  display:flex;align-items:flex-end;padding:16px;
}
.hcw-card:hover .hcw-card__overlay{opacity:1;}
.hcw-card__view{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 17px;border-radius:36px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
  font-family:var(--hcw-fh);font-size:12px;font-weight:700;color:#fff;
  transform:translateY(10px);opacity:0;
  transition:transform .32s ease .04s,opacity .28s ease .04s;
}
.hcw-card:hover .hcw-card__view{transform:translateY(0);opacity:1;}
.hcw-card__view svg{width:12px;height:12px;stroke:#fff;stroke-width:2.3;fill:none}

/* badge */
.hcw-badge{
  position:absolute;top:13px;right:13px;
  padding:5px 13px;border-radius:30px;
  font-size:11px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;font-family:var(--hcw-fh);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);
}
.hcw-badge--fire{background:linear-gradient(135deg,var(--hcw-fire-a),var(--hcw-fire-b));color:#fff}
.hcw-badge--wave{background:linear-gradient(135deg,var(--hcw-wave-a),var(--hcw-wave-b));color:#fff}
.hcw-badge--dove{background:linear-gradient(135deg,var(--hcw-dove-a),var(--hcw-dove-b));color:#fff}
.hcw-badge--amber{background:linear-gradient(135deg,var(--hcw-amber-a),var(--hcw-amber-b));color:#fff}

/* body */
.hcw-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1;}
.hcw-card__cat{
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;font-family:var(--hcw-fh);
}
.hcw-cat--fire{background:linear-gradient(90deg,var(--hcw-fire-a),var(--hcw-fire-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hcw-cat--wave{background:linear-gradient(90deg,var(--hcw-wave-a),var(--hcw-wave-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hcw-cat--dove{background:linear-gradient(90deg,var(--hcw-dove-a),var(--hcw-dove-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hcw-cat--amber{background:linear-gradient(90deg,var(--hcw-amber-a),var(--hcw-amber-b));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hcw-card__title{font-family:var(--hcw-fh);font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.2px}
.hcw-card__desc{font-size:13.5px;line-height:1.65;color:var(--hcw-muted);}
.hcw-card__foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--hcw-card-border);
}
.hcw-tags{display:flex;gap:6px;flex-wrap:wrap;}
.hcw-tag{
  padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);
  color:var(--hcw-muted);
  transition:background var(--hcw-ease),color var(--hcw-ease);
}
.hcw-card:hover .hcw-tag{background:rgba(255,255,255,0.10);color:var(--hcw-txt)}
.hcw-card__arrow{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--hcw-card-border);
  display:grid;place-items:center;
  transition:background var(--hcw-ease),border-color var(--hcw-ease),transform var(--hcw-ease);
}
.hcw-card__arrow svg{width:13px;height:13px;stroke:var(--hcw-muted);stroke-width:2.2;fill:none;transition:stroke var(--hcw-ease)}
.hcw-card:hover .hcw-card__arrow{
  background:linear-gradient(135deg,var(--hcw-fire-a),var(--hcw-fire-b));
  border-color:transparent;transform:rotate(45deg);
}
.hcw-card:hover .hcw-card__arrow svg{stroke:#fff}

/* ════════════════════════════════════════════════════
   MORE CTA
   ════════════════════════════════════════════════════ */
.hcw-more-row{display:flex;justify-content:center;margin-top:48px;}
.hcw-more-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 34px;border-radius:56px;
  background:transparent;border:1.5px solid var(--hcw-card-border);
  font-family:var(--hcw-fh);font-size:14px;font-weight:700;letter-spacing:.4px;
  color:var(--hcw-txt);
  position:relative;overflow:hidden;
  transition:border-color var(--hcw-ease),box-shadow var(--hcw-ease);
}
.hcw-more-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--hcw-fire-a),var(--hcw-fire-b),var(--hcw-wave-b));
  opacity:0;transition:opacity var(--hcw-ease);z-index:0;
}
.hcw-more-btn:hover::before{opacity:1;}
.hcw-more-btn:hover{border-color:transparent;box-shadow:0 10px 36px rgba(255,94,26,.32);}
.hcw-more-btn span,.hcw-more-btn svg{position:relative;z-index:1;}
.hcw-more-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform var(--hcw-ease)}
.hcw-more-btn:hover svg{transform:translateX(5px)}

/* ════════════════════════════════════════════════════
   FLOATING BADGES
   ════════════════════════════════════════════════════ */
.hcw-floats{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.hcw-float{
  position:absolute;display:flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:36px;
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.10);
  font-size:12px;font-weight:600;font-family:var(--hcw-fh);white-space:nowrap;
  animation:hcw-bob 6s ease-in-out infinite;
}
.hcw-float svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.hcw-float--1{background:rgba(255,94,26,.15);border-color:rgba(255,94,26,.28);color:#FFAD8A;top:9%;right:5%;animation-delay:0s}
.hcw-float--2{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.28);color:#93C5FD;top:53%;right:3%;animation-delay:2s}
.hcw-float--3{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.28);color:#6EE7B7;bottom:16%;left:2%;animation-delay:4s}
@keyframes hcw-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}

/* ════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════ */
.hcw-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1)}
.hcw-reveal.hcw-in{opacity:1;transform:translateY(0)}
.hcw-d1{transition-delay:.08s}.hcw-d2{transition-delay:.17s}.hcw-d3{transition-delay:.26s}.hcw-d4{transition-delay:.35s}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .hcw-layout{grid-template-columns:260px 1fr;gap:30px}
  .hcw-heading{font-size:clamp(30px,3.8vw,44px)}
}
@media(max-width:860px){
  .hcw-layout{grid-template-columns:1fr;gap:26px}
  .hcw-panel{position:static}
  .hcw-tabs{flex-direction:row;flex-wrap:wrap;gap:8px}
  .hcw-tab{width:auto;flex:0 0 auto;padding:9px 14px}
  .hcw-tab-arrow{display:none}
  #home-creative-works{padding:52px 0 64px}
}
@media(max-width:560px){
  .hcw-container{padding:0 16px}
  .hcw-heading{font-size:32px;letter-spacing:-1px}
  .hcw-float--1,.hcw-float--3{display:none}
  #home-creative-works{padding:38px 0 50px}
}
/* <!-- Home Creative Works Case Study End --> */

/* <!-- home-process-webtodigital start --> */
    :root {
      --wtd-fire-1: #ff6a00;
      --wtd-fire-2: #ee0979;
      --wtd-fire-3: #ffb347;
      --wtd-ocean-1: #4776e6;
      --wtd-ocean-2: #8e54e9;
      --wtd-ocean-3: #00c6fb;
      --wtd-dove-1: #11998e;
      --wtd-dove-2: #38ef7d;
      --wtd-dove-3: #00b4db;
      --wtd-bg: #07080f;
      --wtd-surface: rgba(255,255,255,0.04);
      --wtd-border: rgba(255,255,255,0.10);
      --wtd-text: #f0f0f5;
      --wtd-muted: rgba(240,240,245,0.55);
      --wtd-radius: 24px;
      --wtd-card-radius: 20px;
      --wtd-transition: 0.45s cubic-bezier(0.22,1,0.36,1);
      --wtd-font-head: 'Syne', sans-serif;
      --wtd-font-body: 'DM Sans', sans-serif;
    }

    /* ─── Reset only what's needed ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img, svg { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* ─── Section wrapper ─── */
    #home-process-webtodigital-section {
      position: relative;
      overflow: hidden;
      padding: 80px 24px 100px;
      background: var(--wtd-bg);
      font-family: var(--wtd-font-body);
      color: var(--wtd-text);
      isolation: isolate;
    }

    /* tsParticles canvas */
    #home-process-webtodigital-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Parallax aurora blobs */
    .home-process-webtodigital-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.18;
      pointer-events: none;
      will-change: transform;
      z-index: 1;
    }
    .home-process-webtodigital-blob--fire {
      width: 520px; height: 520px;
      background: radial-gradient(circle, var(--wtd-fire-1), var(--wtd-fire-2));
      top: -120px; left: -80px;
    }
    .home-process-webtodigital-blob--ocean {
      width: 480px; height: 480px;
      background: radial-gradient(circle, var(--wtd-ocean-1), var(--wtd-ocean-2));
      bottom: -100px; right: -60px;
    }
    .home-process-webtodigital-blob--dove {
      width: 360px; height: 360px;
      background: radial-gradient(circle, var(--wtd-dove-1), var(--wtd-dove-3));
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }

    /* ─── Inner container ─── */
    .home-process-webtodigital-inner {
      position: relative;
      z-index: 2;
      max-width: 1260px;
      margin: 0 auto;
    }

    /* ─── Header ─── */
    .home-process-webtodigital-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .home-process-webtodigital-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--wtd-font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--wtd-fire-3);
      margin-bottom: 18px;
      padding: 6px 16px;
      border: 1px solid rgba(255,179,71,0.25);
      border-radius: 100px;
      background: rgba(255,179,71,0.06);
      backdrop-filter: blur(6px);
    }
    .home-process-webtodigital-eyebrow svg { flex-shrink: 0; }
    .home-process-webtodigital-title {
      font-family: var(--wtd-font-head);
      font-size: clamp(28px, 4.5vw, 54px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .home-process-webtodigital-title-accent {
      background: linear-gradient(90deg, var(--wtd-fire-1), var(--wtd-fire-2), var(--wtd-ocean-2), var(--wtd-dove-2));
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: home-process-webtodigital-shimmer 5s linear infinite;
    }
    @keyframes home-process-webtodigital-shimmer {
      0%   { background-position: 0% 50%; }
      100% { background-position: 300% 50%; }
    }
    .home-process-webtodigital-subtitle {
      margin-top: 18px;
      font-size: clamp(14px, 1.6vw, 17px);
      color: var(--wtd-muted);
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }
    /* Decorative underline bar */
    .home-process-webtodigital-bar {
      width: 64px; height: 4px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--wtd-fire-1), var(--wtd-fire-2));
      margin: 20px auto 0;
    }

    /* ─── Steps Grid ─── */
    .home-process-webtodigital-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr));
      gap: 20px;
      align-items: start;
    }

    /* ─── Step Card ─── */
    .home-process-webtodigital-card {
      position: relative;
      border-radius: var(--wtd-card-radius);
      padding: 36px 22px 32px;
      text-align: center;
      cursor: default;
      transition: transform var(--wtd-transition), box-shadow var(--wtd-transition);
      overflow: hidden;
      border: 1px solid var(--wtd-border);
      background: var(--wtd-surface);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      will-change: transform;
    }
    /* Gradient border glow on hover */
    .home-process-webtodigital-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: calc(var(--wtd-card-radius) + 1px);
      padding: 1px;
      background: var(--wtd-card-grad);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity var(--wtd-transition);
      pointer-events: none;
    }
    .home-process-webtodigital-card:hover::before { opacity: 1; }
    .home-process-webtodigital-card:hover {
      transform: translateY(-10px) scale(1.025);
      box-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 0 40px var(--wtd-glow);
    }

    /* Per-card gradient themes */
    .home-process-webtodigital-card--1 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-fire-1), var(--wtd-fire-2));
      --wtd-glow: rgba(255,106,0,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-fire-1), var(--wtd-fire-2), var(--wtd-fire-3));
    }
    .home-process-webtodigital-card--2 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-ocean-3), var(--wtd-ocean-1));
      --wtd-glow: rgba(71,118,230,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-ocean-3), var(--wtd-ocean-1));
    }
    .home-process-webtodigital-card--3 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-ocean-1), var(--wtd-ocean-2));
      --wtd-glow: rgba(142,84,233,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-ocean-1), var(--wtd-ocean-2));
    }
    .home-process-webtodigital-card--4 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-dove-2), var(--wtd-dove-1));
      --wtd-glow: rgba(17,153,142,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-dove-2), var(--wtd-dove-1));
    }
    .home-process-webtodigital-card--5 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-dove-1), var(--wtd-dove-3));
      --wtd-glow: rgba(0,180,219,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-dove-1), var(--wtd-dove-3));
    }
    .home-process-webtodigital-card--6 {
      --wtd-card-grad: linear-gradient(135deg, var(--wtd-fire-2), var(--wtd-ocean-2));
      --wtd-glow: rgba(238,9,121,0.25);
      --wtd-icon-bg: linear-gradient(135deg, var(--wtd-fire-2), var(--wtd-ocean-2));
    }
    .home-process-webtodigital-card--7 {
      --wtd-card-grad: linear-gradient(135deg, #f7971e, #ffd200);
      --wtd-glow: rgba(255,210,0,0.22);
      --wtd-icon-bg: linear-gradient(135deg, #f7971e, #ffd200);
    }

    /* Step badge */
    .home-process-webtodigital-step-badge {
      position: absolute;
      top: 14px; right: 14px;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--wtd-card-grad);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--wtd-font-head);
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0;
    }

    /* Icon ring */
    .home-process-webtodigital-icon-ring {
      width: 88px; height: 88px;
      border-radius: 50%;
      margin: 0 auto 22px;
      background: var(--wtd-icon-bg);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: transform var(--wtd-transition), box-shadow var(--wtd-transition);
      box-shadow: 0 0 0 0 transparent;
    }
    .home-process-webtodigital-icon-ring::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px dashed rgba(255,255,255,0.18);
      animation: home-process-webtodigital-spin 18s linear infinite;
    }
    @keyframes home-process-webtodigital-spin {
      to { transform: rotate(360deg); }
    }
    .home-process-webtodigital-card:hover .home-process-webtodigital-icon-ring {
      transform: scale(1.12) rotate(-6deg);
      box-shadow: 0 8px 30px var(--wtd-glow);
    }
    .home-process-webtodigital-icon-ring svg {
      width: 38px; height: 38px;
      color: #fff;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    }

    /* Float animation on icons */
    .home-process-webtodigital-card:nth-child(odd) .home-process-webtodigital-icon-ring {
      animation: home-process-webtodigital-float-a 4s ease-in-out infinite;
    }
    .home-process-webtodigital-card:nth-child(even) .home-process-webtodigital-icon-ring {
      animation: home-process-webtodigital-float-b 4.5s ease-in-out infinite;
    }
    @keyframes home-process-webtodigital-float-a {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-7px); }
    }
    @keyframes home-process-webtodigital-float-b {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }
    .home-process-webtodigital-card:hover .home-process-webtodigital-icon-ring {
      animation: none;
    }

    /* Card title */
    .home-process-webtodigital-card-title {
      font-family: var(--wtd-font-head);
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    /* Transparency pill */
    .home-process-webtodigital-transparent-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.65);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 100px;
      padding: 3px 10px;
      margin-bottom: 10px;
      backdrop-filter: blur(4px);
    }
    .home-process-webtodigital-transparent-pill::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--wtd-card-grad);
      flex-shrink: 0;
    }

    /* Card description */
    .home-process-webtodigital-card-desc {
      font-size: 13px;
      color: var(--wtd-muted);
      line-height: 1.65;
    }

    /* Connector dots between cards (desktop only) */
    .home-process-webtodigital-connector {
      display: none;
    }

    /* ─── Floating SVG badges ─── */
    .home-process-webtodigital-float-badge {
      position: absolute;
      pointer-events: none;
      z-index: 3;
      animation: home-process-webtodigital-badge-float 6s ease-in-out infinite;
      opacity: 0.72;
    }
    .home-process-webtodigital-float-badge--1 { top: 60px; right: 8%; animation-delay: 0s; }
    .home-process-webtodigital-float-badge--2 { bottom: 80px; left: 5%; animation-delay: 2s; }
    .home-process-webtodigital-float-badge--3 { top: 45%; right: 3%; animation-delay: 1s; }
    @keyframes home-process-webtodigital-badge-float {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-14px) rotate(5deg); }
    }

    /* ─── Bottom CTA strip ─── */
    .home-process-webtodigital-cta {
      margin-top: 60px;
      text-align: center;
    }
    .home-process-webtodigital-cta-text {
      font-size: 14px;
      color: var(--wtd-muted);
      margin-bottom: 20px;
    }
    .home-process-webtodigital-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--wtd-font-head);
      font-weight: 700;
      font-size: 15px;
      color: #fff;
      padding: 14px 34px;
      border-radius: 100px;
      background: linear-gradient(135deg, var(--wtd-fire-1), var(--wtd-fire-2), var(--wtd-ocean-2));
      background-size: 200% 100%;
      transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 6px 30px rgba(238,9,121,0.35);
      letter-spacing: -0.01em;
    }
    .home-process-webtodigital-cta-link:hover {
      background-position: 100% 0;
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 12px 40px rgba(238,9,121,0.5);
    }
    .home-process-webtodigital-cta-link svg { transition: transform 0.3s ease; }
    .home-process-webtodigital-cta-link:hover svg { transform: translateX(5px); }

    /* ─── Swiper (mobile) ─── */
    .home-process-webtodigital-swiper { display: none; }
    .home-process-webtodigital-swiper .swiper-slide { height: auto; }
    .home-process-webtodigital-swiper .swiper-pagination-bullet {
      background: var(--wtd-ocean-1);
      opacity: 0.4;
    }
    .home-process-webtodigital-swiper .swiper-pagination-bullet-active { opacity: 1; }

    /* ─── Entrance animations ─── */
    .home-process-webtodigital-card {
      opacity: 0;
      transform: translateY(40px) scale(0.96);
    }
    .home-process-webtodigital-card.home-process-webtodigital-visible {
      animation: home-process-webtodigital-enter var(--wtd-transition) forwards;
    }
    @keyframes home-process-webtodigital-enter {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ─── Responsive ─── */
    @media (max-width: 900px) {
      .home-process-webtodigital-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%,160px),1fr)); gap: 16px; }
    }
    @media (max-width: 640px) {
      #home-process-webtodigital-section { padding: 60px 16px 80px; }
      .home-process-webtodigital-grid { display: none; }
      .home-process-webtodigital-swiper { display: block; }
      .home-process-webtodigital-float-badge { display: none; }
    }
    @media (min-width: 1100px) {
      .home-process-webtodigital-grid { grid-template-columns: repeat(7, 1fr); }
    }
/* <!-- home-process-webtodigital End --> */

/* <!-- Home landing Page Section start --> */
    :root {
      --hbls-white:    #ffffff;
      --hbls-white-80: rgba(255,255,255,0.80);
      --hbls-white-60: rgba(255,255,255,0.60);
      --hbls-white-20: rgba(255,255,255,0.18);
      --hbls-white-10: rgba(255,255,255,0.10);
      --hbls-transition: 900ms;
      --hbls-font-head: 'Syne', sans-serif;
      --hbls-font-body: 'DM Sans', sans-serif;
      --hbls-total: 5;
    }

    #home-banner-landing-slider {
      position: relative;
      width: 100%;
      overflow: hidden;
      min-height: 520px;
      max-height: 800px;
      height: 105vh;
      user-select: none;
    }

    .home-banner-landing-track {
      display: flex;
      width: calc(var(--hbls-total) * 100%);
      height: 100%;
      transition: transform var(--hbls-transition) cubic-bezier(0.77, 0, 0.18, 1);
      will-change: transform;
    }

    .home-banner-landing-slide {
      position: relative;
      width: calc(100% / var(--hbls-total));
      flex-shrink: 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    /* ── Gradients ── */
    .home-banner-landing-slide--firebird {
      background: linear-gradient(135deg,#1a0008 0%,#8b0000 18%,#cc2200 32%,#ff4500 48%,#ff6b35 62%,#ff1493 76%,#ff6600 88%,#ffd700 100%);
    }
    .home-banner-landing-slide--elephant {
      background: linear-gradient(135deg,#05001a 0%,#0d0033 15%,#1a1aff 30%,#5b21b6 46%,#7c3aed 60%,#0ea5e9 74%,#06b6d4 88%,#00d4ff 100%);
    }
    .home-banner-landing-slide--dove {
      background: linear-gradient(135deg,#002318 0%,#004d30 15%,#00875a 28%,#00c896 42%,#00bcd4 56%,#43e97b 68%,#38f9d7 80%,#f7971e 92%,#ffd200 100%);
    }
    .home-banner-landing-slide--magenta {
      background: linear-gradient(135deg,#1a001a 0%,#5b0045 16%,#c0006a 30%,#e91e8c 44%,#ff5f6d 58%,#ff9966 72%,#ffcc00 86%,#fff176 100%);
    }
    .home-banner-landing-slide--indigo {
      background: linear-gradient(135deg,#000d1a 0%,#001f4d 16%,#003a8c 30%,#0052cc 44%,#2979ff 58%,#00e5ff 72%,#69ffda 86%,#ccff90 100%);
    }

    /* ── Orbs ── */
    .home-banner-landing-mesh { position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none; }
    .home-banner-landing-orb  { position:absolute;border-radius:50%;filter:blur(60px);opacity:0.35;animation:home-banner-landing-float 8s ease-in-out infinite alternate; }
    .home-banner-landing-orb--a { width:38%;padding-top:38%;top:-10%;right:5%;animation-duration:7s; }
    .home-banner-landing-orb--b { width:28%;padding-top:28%;bottom:-8%;left:10%;animation-duration:9s;animation-delay:-3s; }
    .home-banner-landing-orb--c { width:22%;padding-top:22%;top:20%;left:40%;animation-duration:11s;animation-delay:-5s; }

    .home-banner-landing-slide--firebird .home-banner-landing-orb--a{background:radial-gradient(circle,#ffd700,#ff4500)}
    .home-banner-landing-slide--firebird .home-banner-landing-orb--b{background:radial-gradient(circle,#ff1493,#8b0000)}
    .home-banner-landing-slide--firebird .home-banner-landing-orb--c{background:radial-gradient(circle,#ff6600,#ff4500)}
    .home-banner-landing-slide--elephant .home-banner-landing-orb--a{background:radial-gradient(circle,#06b6d4,#1a1aff)}
    .home-banner-landing-slide--elephant .home-banner-landing-orb--b{background:radial-gradient(circle,#7c3aed,#0d0033)}
    .home-banner-landing-slide--elephant .home-banner-landing-orb--c{background:radial-gradient(circle,#0ea5e9,#5b21b6)}
    .home-banner-landing-slide--dove     .home-banner-landing-orb--a{background:radial-gradient(circle,#38f9d7,#00c896)}
    .home-banner-landing-slide--dove     .home-banner-landing-orb--b{background:radial-gradient(circle,#ffd200,#f7971e)}
    .home-banner-landing-slide--dove     .home-banner-landing-orb--c{background:radial-gradient(circle,#43e97b,#00bcd4)}
    .home-banner-landing-slide--magenta  .home-banner-landing-orb--a{background:radial-gradient(circle,#ffcc00,#e91e8c)}
    .home-banner-landing-slide--magenta  .home-banner-landing-orb--b{background:radial-gradient(circle,#ff5f6d,#5b0045)}
    .home-banner-landing-slide--magenta  .home-banner-landing-orb--c{background:radial-gradient(circle,#ff9966,#c0006a)}
    .home-banner-landing-slide--indigo   .home-banner-landing-orb--a{background:radial-gradient(circle,#00e5ff,#0052cc)}
    .home-banner-landing-slide--indigo   .home-banner-landing-orb--b{background:radial-gradient(circle,#2979ff,#001f4d)}
    .home-banner-landing-slide--indigo   .home-banner-landing-orb--c{background:radial-gradient(circle,#69ffda,#003a8c)}

    @keyframes home-banner-landing-float {
      0%   { transform:translate(0,0) scale(1); }
      100% { transform:translate(3%,5%) scale(1.12); }
    }

    .home-banner-landing-noise {
      position:absolute;inset:0;z-index:2;opacity:0.04;pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:200px 200px;
    }

    /* ── Decorative rings ── */
    .home-banner-landing-shapes { position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden; }
    .home-banner-landing-shape  { position:absolute;border:1.5px solid var(--hbls-white-20);border-radius:50%; }
    .home-banner-landing-shape--1 { width:320px;height:320px;right:8%;top:50%;transform:translateY(-50%);animation:home-banner-landing-spin 22s linear infinite; }
    .home-banner-landing-shape--2 { width:220px;height:220px;right:12%;top:50%;transform:translateY(-50%);animation:home-banner-landing-spin 16s linear infinite reverse; }
    .home-banner-landing-shape--3 { width:120px;height:120px;right:18%;top:50%;transform:translateY(-50%);animation:home-banner-landing-spin 10s linear infinite; }
    .home-banner-landing-shape--dot { width:8px;height:8px;background:var(--hbls-white-60);border:none;border-radius:50%; }
    .home-banner-landing-shape--d1  { right:calc(8% + 154px);top:calc(50% - 4px); }
    .home-banner-landing-shape--d2  { right:calc(12% + 104px);top:calc(50% - 4px); }
    .home-banner-landing-shape--d3  { right:calc(18% + 54px);top:calc(50% - 4px); }

    @keyframes home-banner-landing-spin {
      from { transform:translateY(-50%) rotate(0deg); }
      to   { transform:translateY(-50%) rotate(360deg); }
    }

    .home-banner-landing-parallax-bg { position:absolute;inset:-10%;z-index:0;pointer-events:none;will-change:transform;transition:transform .08s linear; }

    /* ── Content ── */
    .home-banner-landing-content {
      position:relative;z-index:10;
      width:100%;max-width:1300px;margin:0 auto;padding:0 60px;
      display:flex;align-items:center;justify-content:space-between;gap:40px;top: 30px;
    }
    .home-banner-landing-text { flex:0 0 auto;max-width:560px; }

    .home-banner-landing-badge {
      display:inline-flex;align-items:center;gap:8px;
      background:var(--hbls-white-10);border:1px solid var(--hbls-white-20);
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      border-radius:100px;padding:6px 16px 6px 8px;margin-bottom:20px;
      font-family:var(--hbls-font-body);font-size:12px;font-weight:500;
      color:var(--hbls-white-80);letter-spacing:.06em;text-transform:uppercase;
      opacity:0;transform:translateY(20px);
      transition:opacity .5s .2s ease,transform .5s .2s ease;
    }
    .home-banner-landing-badge-dot { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px; }
    .home-banner-landing-slide--firebird .home-banner-landing-badge-dot { background:#ffd700; }
    .home-banner-landing-slide--elephant .home-banner-landing-badge-dot { background:#06b6d4; }
    .home-banner-landing-slide--dove     .home-banner-landing-badge-dot { background:#43e97b; }
    .home-banner-landing-slide--magenta  .home-banner-landing-badge-dot { background:#ffcc00; }
    .home-banner-landing-slide--indigo   .home-banner-landing-badge-dot { background:#00e5ff; }

    .home-banner-landing-headline {
      font-family:var(--hbls-font-head);
      font-size:clamp(1.85rem,3.8vw,3.3rem);font-weight:800;line-height:1.08;
      color:var(--hbls-white);margin:0 0 16px;letter-spacing:-.02em;
      text-shadow:0 4px 32px rgba(0,0,0,.25);
      opacity:0;transform:translateY(30px);
      transition:opacity .6s .35s ease,transform .6s .35s ease;
    }
    .home-banner-landing-headline em { font-style:normal;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .home-banner-landing-slide--firebird .home-banner-landing-headline em { background-image:linear-gradient(90deg,#ffd700,#ff6b35); }
    .home-banner-landing-slide--elephant .home-banner-landing-headline em { background-image:linear-gradient(90deg,#38bdf8,#c084fc); }
    .home-banner-landing-slide--dove     .home-banner-landing-headline em { background-image:linear-gradient(90deg,#6ee7b7,#fbbf24); }
    .home-banner-landing-slide--magenta  .home-banner-landing-headline em { background-image:linear-gradient(90deg,#ffcc00,#ff5f6d); }
    .home-banner-landing-slide--indigo   .home-banner-landing-headline em { background-image:linear-gradient(90deg,#00e5ff,#69ffda); }

    .home-banner-landing-desc {
      font-family:var(--hbls-font-body);font-size:clamp(.92rem,1.35vw,1.08rem);
      font-weight:400;line-height:1.65;color:var(--hbls-white-80);margin:0 0 32px;max-width:440px;
      opacity:0;transform:translateY(20px);
      transition:opacity .5s .5s ease,transform .5s .5s ease;
    }

    .home-banner-landing-ctas {
      display:flex;gap:14px;flex-wrap:wrap;align-items:center;
      opacity:0;transform:translateY(20px);
      transition:opacity .5s .65s ease,transform .5s .65s ease;
    }
    .home-banner-landing-btn-primary {
      display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;
      font-family:var(--hbls-font-body);font-size:.88rem;font-weight:600;
      letter-spacing:.03em;text-decoration:none;color:#111;background:var(--hbls-white);
      border:none;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.22);
      transition:transform .25s ease,box-shadow .25s ease;white-space:nowrap;
    }
    .home-banner-landing-btn-primary:hover { transform:translateY(-3px) scale(1.03);box-shadow:0 14px 40px rgba(0,0,0,.32); }
    .home-banner-landing-btn-primary svg   { transition:transform .25s ease; }
    .home-banner-landing-btn-primary:hover svg { transform:translateX(4px); }

    .home-banner-landing-btn-secondary {
      display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:100px;
      font-family:var(--hbls-font-body);font-size:.88rem;font-weight:500;
      letter-spacing:.03em;text-decoration:none;color:var(--hbls-white);
      background:var(--hbls-white-10);border:1px solid var(--hbls-white-20);
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;
      transition:transform .25s ease,background .25s ease;white-space:nowrap;
    }
    .home-banner-landing-btn-secondary:hover { transform:translateY(-3px);background:var(--hbls-white-20); }

    /* ── Visual ring ── */
    .home-banner-landing-visual {
      flex:0 0 auto;width:clamp(260px,32%,400px);
      display:flex;align-items:center;justify-content:center;position:relative;
      opacity:0;transform:translateX(40px) scale(.92);
      transition:opacity .7s .4s ease,transform .7s .4s ease;
    }
    .home-banner-landing-icon-ring {
      position:relative;
      width:clamp(210px,27vw,320px);height:clamp(210px,27vw,320px);
    }
    .home-banner-landing-icon-ring-circle { position:absolute;inset:0;border-radius:50%;border:1px solid var(--hbls-white-20); }
    .home-banner-landing-icon-ring-circle--inner {
      inset:20%;border:1.5px solid var(--hbls-white-20);
      animation:home-banner-landing-spin 18s linear infinite reverse;
    }
    .home-banner-landing-icon-center {
      position:absolute;inset:30%;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-family:var(--hbls-font-head);font-size:clamp(1rem,1.8vw,1.7rem);font-weight:800;
      color:var(--hbls-white);text-shadow:0 2px 16px rgba(0,0,0,.3);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border:2px solid var(--hbls-white-20);
    }
    .home-banner-landing-slide--firebird .home-banner-landing-icon-center { background:rgba(255,69,0,.35); }
    .home-banner-landing-slide--elephant .home-banner-landing-icon-center { background:rgba(92,33,182,.35); }
    .home-banner-landing-slide--dove     .home-banner-landing-icon-center { background:rgba(0,200,150,.35); }
    .home-banner-landing-slide--magenta  .home-banner-landing-icon-center { background:rgba(233,30,140,.35); }
    .home-banner-landing-slide--indigo   .home-banner-landing-icon-center { background:rgba(41,121,255,.35); }

    /* ── Floating icon pills (emoji + label) — orbit positioned via JS ── */
    .home-banner-landing-floating-icon {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      /* JS sets: left, top, transform:translate(-50%,-50%) + label-offset */
      pointer-events: none;
    }

    .home-banner-landing-floating-icon-emoji {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(255,255,255,0.15);
      border: 1.5px solid rgba(255,255,255,0.30);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
      animation: home-banner-landing-float-icon 3.8s ease-in-out infinite alternate;
    }

    .home-banner-landing-floating-icon-label {
      font-family: var(--hbls-font-body);
      font-size: 9.5px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.35;
      white-space: nowrap;
      /* strong readable shadow so text pops on any gradient */
      text-shadow:
        0 0 8px rgba(0,0,0,0.9),
        0 1px 3px rgba(0,0,0,0.9),
        0 2px 6px rgba(0,0,0,0.6);
      background: rgba(0,0,0,0.28);
      border-radius: 4px;
      padding: 2px 5px;
    }

    /* stagger float per icon — applied by nth-child on the emoji inside */
    .home-banner-landing-floating-icon:nth-child(1) .home-banner-landing-floating-icon-emoji { animation-delay: 0s; }
    .home-banner-landing-floating-icon:nth-child(2) .home-banner-landing-floating-icon-emoji { animation-delay: .55s; }
    .home-banner-landing-floating-icon:nth-child(3) .home-banner-landing-floating-icon-emoji { animation-delay: 1.1s; }
    .home-banner-landing-floating-icon:nth-child(4) .home-banner-landing-floating-icon-emoji { animation-delay: 1.65s; }
    .home-banner-landing-floating-icon:nth-child(5) .home-banner-landing-floating-icon-emoji { animation-delay: .82s; }
    .home-banner-landing-floating-icon:nth-child(6) .home-banner-landing-floating-icon-emoji { animation-delay: 2.2s; }

    @keyframes home-banner-landing-float-icon {
      0%   { transform: translateY(0px) scale(1); }
      100% { transform: translateY(-7px) scale(1.06); }
    }

    /* ── Active reveal ── */
    .home-banner-landing-slide--active .home-banner-landing-badge,
    .home-banner-landing-slide--active .home-banner-landing-headline,
    .home-banner-landing-slide--active .home-banner-landing-desc,
    .home-banner-landing-slide--active .home-banner-landing-ctas,
    .home-banner-landing-slide--active .home-banner-landing-visual {
      opacity:1;transform:translateY(0) translateX(0) scale(1);
    }

    /* ── Nav arrows ── */
    .home-banner-landing-arrow {
      position:absolute;top:50%;transform:translateY(-50%);z-index:20;
      width:48px;height:48px;border-radius:50%;
      background:var(--hbls-white-10);border:1px solid var(--hbls-white-20);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:background .25s ease,transform .25s ease;outline:none;
    }
    .home-banner-landing-arrow:hover { background:var(--hbls-white-20);transform:translateY(-50%) scale(1.1); }
    .home-banner-landing-arrow--prev { left:18px; }
    .home-banner-landing-arrow--next { right:18px; }

    /* ── Dots ── */
    .home-banner-landing-dots {
      position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
      z-index:20;display:flex;gap:10px;align-items:center;
    }
    .home-banner-landing-dot {
      width:8px;height:8px;border-radius:100px;
      background:rgba(255,255,255,.4);border:none;cursor:pointer;
      transition:width .4s ease,background .4s ease;outline:none;padding:0;
    }
    .home-banner-landing-dot--active { width:28px;background:var(--hbls-white); }

    /* ── Progress bar ── */
    .home-banner-landing-progress {
      position:absolute;bottom:0;left:0;height:3px;width:0%;
      z-index:20;border-radius:0 2px 2px 0;transition:width linear;
    }

    /* ── Responsive ── */
    @media (max-width:960px) {
      #home-banner-landing-slider { height:auto;min-height:440px;max-height:none; }
      .home-banner-landing-content { flex-direction:column;padding:48px 28px 68px;text-align:center;gap:24px; }
      .home-banner-landing-text,.home-banner-landing-desc { max-width:100%; }
      .home-banner-landing-ctas   { justify-content:center; }
      .home-banner-landing-visual { width:clamp(200px,55vw,280px); }
      .home-banner-landing-shapes { display:none; }
      .home-banner-landing-arrow--prev { left:8px; }
      .home-banner-landing-arrow--next { right:8px; }
    }
    @media (max-width:520px) {
      .home-banner-landing-content { padding:32px 18px 60px; }
      .home-banner-landing-btn-primary,
      .home-banner-landing-btn-secondary { font-size:.8rem;padding:11px 18px; }
      .home-banner-landing-visual         { width:clamp(170px,62vw,230px); }
      .home-banner-landing-floating-icon-emoji { width:38px;height:38px;font-size:17px; }
      .home-banner-landing-floating-icon-label { font-size:7.5px; }
    }
/* <!-- Home landing Page Section end --> */


/* <!-- Home Services & Pricing Section start --> */
:root {
  /* Brand palette */
  --hp-fire-a:   #ff4500;
  --hp-fire-b:   #ff0080;
  --hp-fire-c:   #ff8c00;
  --hp-wave-a:   #0072ff;
  --hp-wave-b:   #7b2fff;
  --hp-wave-c:   #00c6ff;
  --hp-dove-a:   #00b09b;
  --hp-dove-b:   #96c93d;
  --hp-dove-c:   #00f2fe;

  /* Surface */
  --hp-bg:       #080c18;
  --hp-surface:  #10131f;
  --hp-card:     #161b2e;
  --hp-card-h:   #1c2238;

  /* Typography */
  --hp-text:     #e8eaf6;
  --hp-muted:    rgba(232,234,246,0.55);
  --hp-dim:      rgba(232,234,246,0.28);

  /* Borders */
  --hp-border:   rgba(255,255,255,0.07);
  --hp-border-h: rgba(255,255,255,0.15);

  /* Gradients */
  --hp-g-fire:   linear-gradient(135deg, var(--hp-fire-a), var(--hp-fire-b), var(--hp-fire-c));
  --hp-g-wave:   linear-gradient(135deg, var(--hp-wave-a), var(--hp-wave-b), var(--hp-wave-c));
  --hp-g-dove:   linear-gradient(135deg, var(--hp-dove-a), var(--hp-dove-b), var(--hp-dove-c));
  --hp-g-rainbow:linear-gradient(90deg,#ff4500,#ff0080,#7b2fff,#0072ff,#00b09b,#96c93d);

  /* Radius */
  --hp-r-sm: 10px;
  --hp-r-md: 16px;
  --hp-r-lg: 22px;
  --hp-r-xl: 32px;

  /* Fonts */
  --hp-font-h: 'Syne', sans-serif;
  --hp-font-b: 'DM Sans', sans-serif;

  /* Transitions */
  --hp-ease:  cubic-bezier(0.22, 0.68, 0, 1.2);
  --hp-ease2: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── SECTION WRAPPER ── */
#home-pricing--section {
  position: relative;
  background: var(--hp-bg);
  overflow: hidden;
  padding: 56px 20px 64px;
  isolation: isolate;
  font-family: var(--hp-font-b);
  color: var(--hp-text);
  line-height: 1.6;
}

/* ── PARTICLES ── */
#home-pricing--particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── PARALLAX ORBS ── */
.home-pricing--orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.12s linear;
  z-index: 0;
}
.home-pricing--orb-fire {
  width: 700px; height: 700px;
  background: radial-gradient(circle at 40% 40%, rgba(255,69,0,0.22), rgba(255,0,128,0.10) 55%, transparent 80%);
  top: -200px; left: -180px;
  filter: blur(90px);
  animation: hp-orbPulse 8s ease-in-out infinite;
}
.home-pricing--orb-wave {
  width: 550px; height: 550px;
  background: radial-gradient(circle at 60% 60%, rgba(0,114,255,0.20), rgba(123,47,255,0.12) 55%, transparent 80%);
  top: 30%; right: -160px;
  filter: blur(80px);
  animation: hp-orbPulse 10s 2s ease-in-out infinite;
}
.home-pricing--orb-dove {
  width: 500px; height: 500px;
  background: radial-gradient(circle at 50% 50%, rgba(0,176,155,0.18), rgba(150,201,61,0.10) 55%, transparent 80%);
  bottom: -120px; left: 25%;
  filter: blur(80px);
  animation: hp-orbPulse 12s 4s ease-in-out infinite;
}

/* ── WAVY SVG DIVIDERS ── */
.home-pricing--wave-top,
.home-pricing--wave-bottom {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
}
.home-pricing--wave-top  { top: 0; }
.home-pricing--wave-bottom { bottom: 0; }
.home-pricing--wave-top svg,
.home-pricing--wave-bottom svg { width: 100%; height: auto; display: block; }

/* ── SVG DECORATIONS ── */
.home-pricing--deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.home-pricing--deco-hex {
  width: 260px; height: 260px;
  top: 40px; right: 60px;
  opacity: 0.08;
  animation: hp-spinSlow 55s linear infinite;
}
.home-pricing--deco-rings {
  width: 200px; height: 200px;
  bottom: 100px; left: 40px;
  opacity: 0.07;
  animation: hp-spinSlow 70s linear infinite reverse;
}

/* ── CONTAINER ── */
.home-pricing--container {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── HEADER ── */
.home-pricing--header {
  text-align: center;
  margin-bottom: 44px;
  animation: hp-fadeUp 0.7s var(--hp-ease) both;
}

.home-pricing--eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hp-font-b);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

.home-pricing--heading {
  font-family: var(--hp-font-h);
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--hp-text);
  margin: 0 0 14px;
  animation: hp-fadeUp 0.7s 0.1s var(--hp-ease) both;
}
.home-pricing--heading-accent {
  background: var(--hp-g-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-pricing--subheading {
  font-size: clamp(0.88rem, 1.8vw, 1rem);
  color: var(--hp-muted);
  max-width: 540px;
  margin: 0 auto 28px;
  animation: hp-fadeUp 0.7s 0.18s var(--hp-ease) both;
}

/* Stat badges */
.home-pricing--stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  animation: hp-fadeUp 0.7s 0.25s var(--hp-ease) both;
}
.home-pricing--stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--hp-r-md);
  border: 1px solid var(--hp-border);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.04);
  min-width: 88px;
  animation: hp-float 4s ease-in-out infinite;
}
.home-pricing--stat:nth-child(2) { animation-delay: 1.3s; }
.home-pricing--stat:nth-child(3) { animation-delay: 2.6s; }
.home-pricing--stat-num {
  font-family: var(--hp-font-h);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.home-pricing--stat-lbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin-top: 3px;
}
.home-pricing--stat-fire .home-pricing--stat-num { background: var(--hp-g-fire); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-pricing--stat-wave .home-pricing--stat-num { background: var(--hp-g-wave); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-pricing--stat-dove .home-pricing--stat-num { background: var(--hp-g-dove); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── TABS NAV ── */
.home-pricing--tabs-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
  animation: hp-fadeUp 0.7s 0.32s var(--hp-ease) both;
}

.home-pricing--tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hp-font-b);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--hp-border);
  background: rgba(255,255,255,0.04);
  color: var(--hp-muted);
  cursor: pointer;
  transition: all 0.28s var(--hp-ease2);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.home-pricing--tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s;
  border-radius: inherit;
}
.home-pricing--tab-btn:hover {
  color: #fff;
  border-color: var(--hp-border-h);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.07);
}
.home-pricing--tab-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}
.home-pricing--tab-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.home-pricing--tab-btn.is-active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 8px 28px rgba(0,0,0,0.45);
}
.home-pricing--tab-fire.is-active  { background: var(--hp-g-fire); }
.home-pricing--tab-wave.is-active  { background: var(--hp-g-wave); }
.home-pricing--tab-dove.is-active  { background: var(--hp-g-dove); }
.home-pricing--tab-rainbow.is-active { background: var(--hp-g-rainbow); }

/* ── PANELS ── */
.home-pricing--panel {
  display: none;
}
.home-pricing--panel.is-active {
  display: block;
  animation: hp-fadeUp 0.45s var(--hp-ease) both;
}

/* ── CARDS GRID ── */
.home-pricing--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}

/* ── SINGLE CARD ── */
.home-pricing--card {
  position: relative;
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  overflow: hidden;
  transition: transform 0.38s var(--hp-ease), box-shadow 0.38s ease, border-color 0.3s ease;
  will-change: transform;
  /* Lazy load hidden state */
  opacity: 0;
  translate: 0 28px;
}
.home-pricing--card.is-visible {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.55s var(--hp-ease2), translate 0.55s var(--hp-ease2), transform 0.38s var(--hp-ease), box-shadow 0.38s ease, border-color 0.3s ease;
}
.home-pricing--card:hover {
  transform: translateY(-10px) scale(1.016);
  border-color: var(--hp-border-h);
}
.home-pricing--card-featured {
  border-color: rgba(255,255,255,0.12);
}

/* Gradient glow on hover */
.home-pricing--card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  border-radius: inherit;
}
.home-pricing--card:hover .home-pricing--card-glow { opacity: 1; }
.home-pricing--glow-fire { background: radial-gradient(ellipse at 50% 0%, rgba(255,69,0,0.14), transparent 70%); }
.home-pricing--glow-wave { background: radial-gradient(ellipse at 50% 0%, rgba(0,114,255,0.14), transparent 70%); }
.home-pricing--glow-dove { background: radial-gradient(ellipse at 50% 0%, rgba(0,176,155,0.14), transparent 70%); }

/* Top stripe */
.home-pricing--card-stripe {
  height: 4px;
  width: 100%;
}
.home-pricing--stripe-fire { background: var(--hp-g-fire); }
.home-pricing--stripe-wave { background: var(--hp-g-wave); }
.home-pricing--stripe-dove { background: var(--hp-g-dove); }

/* Hover glow shadow */
.home-pricing--card-fire:hover { box-shadow: 0 28px 60px rgba(255,69,0,0.20); }
.home-pricing--card-wave:hover { box-shadow: 0 28px 60px rgba(0,114,255,0.20); }
.home-pricing--card-dove:hover { box-shadow: 0 28px 60px rgba(0,176,155,0.20); }

/* Popular ribbon */
.home-pricing--popular-ribbon {
  position: absolute;
  top: 20px;
  right: -30px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--hp-g-fire);
  color: #fff;
  font-family: var(--hp-font-b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 42px;
  transform: rotate(45deg);
  white-space: nowrap;
  z-index: 4;
}

/* Card inner */
.home-pricing--card-inner {
  padding: 26px 26px 30px;
  position: relative;
  z-index: 2;
}

/* Icon wrap */
.home-pricing--card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--hp-ease);
}
.home-pricing--card:hover .home-pricing--card-icon { transform: scale(1.1) rotate(-4deg); }
.home-pricing--icon-fire { background: linear-gradient(135deg, rgba(255,69,0,0.28), rgba(255,0,128,0.18)); box-shadow: 0 0 20px rgba(255,69,0,0.25); color: #ff6b35; }
.home-pricing--icon-wave { background: linear-gradient(135deg, rgba(0,114,255,0.28), rgba(123,47,255,0.18)); box-shadow: 0 0 20px rgba(0,198,255,0.25); color: #00c6ff; }
.home-pricing--icon-dove { background: linear-gradient(135deg, rgba(0,176,155,0.28), rgba(150,201,61,0.18)); box-shadow: 0 0 20px rgba(0,242,254,0.25); color: #00b09b; }

/* Tier badge */
.home-pricing--tier-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.home-pricing--badge-fire { background: rgba(255,69,0,0.15); color: #ff7a50; border: 1px solid rgba(255,69,0,0.3); }
.home-pricing--badge-wave { background: rgba(0,114,255,0.15); color: #4db8ff; border: 1px solid rgba(0,114,255,0.3); }
.home-pricing--badge-dove { background: rgba(0,176,155,0.15); color: #33d4c0; border: 1px solid rgba(0,176,155,0.3); }

.home-pricing--card-title {
  font-family: var(--hp-font-h);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 3px;
}
.home-pricing--card-level {
  font-size: 12px;
  color: var(--hp-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 18px;
}

/* Price */
.home-pricing--price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 5px;
}
.home-pricing--currency {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hp-muted);
  line-height: 1;
}
.home-pricing--amount {
  font-family: var(--hp-font-h);
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: filter 0.3s ease;
}
.home-pricing--card:hover .home-pricing--amount { filter: brightness(1.15); }
.home-pricing--amount-fire { background: var(--hp-g-fire); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-pricing--amount-wave { background: var(--hp-g-wave); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-pricing--amount-dove { background: var(--hp-g-dove); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-pricing--per {
  font-size: 1rem;
  font-weight: 400;
  color: var(--hp-muted);
  margin-left: 2px;
}
.home-pricing--price-note {
  font-size: 12px;
  color: var(--hp-dim);
  margin: 0 0 20px;
}

/* Divider */
.home-pricing--divider {
  height: 1px;
  background: var(--hp-border);
  margin-bottom: 20px;
}

/* Features */
.home-pricing--features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-pricing--feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--hp-muted);
  line-height: 1.5;
  transition: color 0.25s;
}
.home-pricing--card:hover .home-pricing--feature { color: rgba(232,234,246,0.72); }
.home-pricing--feat-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.home-pricing--check-fire { background: rgba(255,69,0,0.18); color: #ff7055; }
.home-pricing--check-wave { background: rgba(0,198,255,0.15); color: #00c6ff; }
.home-pricing--check-dove { background: rgba(0,176,155,0.15); color: #00b09b; }

/* CTA link */
.home-pricing--cta {
  display: block;
  width: 100%;
  padding: 13px 16px;
  text-align: center;
  text-decoration: none;
  font-family: var(--hp-font-b);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--hp-r-sm);
  border: 1px solid var(--hp-border-h);
  color: #fff;
  background: transparent;
  transition: all 0.28s var(--hp-ease2);
  position: relative;
  overflow: hidden;
}
.home-pricing--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s;
}
.home-pricing--cta-fire::before  { background: var(--hp-g-fire); }
.home-pricing--cta-wave::before  { background: var(--hp-g-wave); }
.home-pricing--cta-dove::before  { background: var(--hp-g-dove); }
.home-pricing--cta:hover { transform: translateY(-2px) scale(1.02); border-color: transparent; }
.home-pricing--cta:hover::before { opacity: 1; }
.home-pricing--cta:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; }
.home-pricing--cta span { position: relative; z-index: 1; }

.home-pricing--cta-primary {
  color: #fff;
  border-color: transparent;
}
.home-pricing--cta-fire.home-pricing--cta-primary  { background: var(--hp-g-fire); box-shadow: 0 8px 24px rgba(255,69,0,0.32); }
.home-pricing--cta-wave.home-pricing--cta-primary  { background: var(--hp-g-wave); box-shadow: 0 8px 24px rgba(0,114,255,0.32); }
.home-pricing--cta-dove.home-pricing--cta-primary  { background: var(--hp-g-dove); box-shadow: 0 8px 24px rgba(0,176,155,0.32); }
.home-pricing--cta-primary:hover { box-shadow: 0 12px 32px rgba(255,69,0,0.45); filter: brightness(1.08); }
.home-pricing--cta-primary::before { display: none; }

/* ── FORM (Custom panel) ── */
.home-pricing--form-outer {
  max-width: 680px;
  margin: 0 auto;
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-xl);
  overflow: hidden;
  position: relative;
}
.home-pricing--form-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(238,9,121,0.12), transparent 65%);
  pointer-events: none;
}
.home-pricing--form-stripe-rainbow {
  height: 4px;
  background: var(--hp-g-rainbow);
  background-size: 200% 100%;
  animation: hp-rainbowSlide 4s linear infinite;
}
.home-pricing--form-inner {
  padding: 32px 36px 38px;
  position: relative;
  z-index: 2;
}
.home-pricing--form-deco {
  float: right;
  margin: -8px -8px 12px 16px;
  animation: hp-float 5s ease-in-out infinite;
}
.home-pricing--form-title {
  font-family: var(--hp-font-h);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 6px;
}
.home-pricing--form-subtitle {
  font-size: 13.5px;
  color: var(--hp-muted);
  margin: 0 0 26px;
}
.home-pricing--form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.home-pricing--form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-pricing--form-group-full { grid-column: 1 / -1; }
.home-pricing--form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--hp-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-pricing--form-input,
.home-pricing--form-select,
.home-pricing--form-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  padding: 11px 14px;
  color: var(--hp-text);
  font-family: var(--hp-font-b);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s;
  width: 100%;
}
.home-pricing--form-input:focus,
.home-pricing--form-select:focus,
.home-pricing--form-textarea:focus {
  border-color: rgba(238,9,121,0.55);
  box-shadow: 0 0 0 3px rgba(238,9,121,0.10);
}
.home-pricing--form-select option { background: var(--hp-card); color: var(--hp-text); }
.home-pricing--form-textarea {
  resize: vertical;
  min-height: 105px;
}
.home-pricing--form-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.home-pricing--form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: var(--hp-r-sm);
  background: var(--hp-g-rainbow);
  background-size: 200% 100%;
  color: #fff;
  font-family: var(--hp-font-b);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  box-shadow: 0 8px 24px rgba(238,9,121,0.32);
  transition: background-position 0.5s ease, transform 0.25s var(--hp-ease2), box-shadow 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  animation: hp-rainbowSlide 4s linear infinite;
}
.home-pricing--form-submit:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px rgba(238,9,121,0.45);
  filter: brightness(1.08);
}
.home-pricing--form-submit:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}
.home-pricing--form-assurance {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--hp-dim);
}
.home-pricing--form-msg {
  margin-top: 14px;
  font-size: 13px;
  min-height: 20px;
  transition: opacity 0.3s;
}
.home-pricing--form-msg.is-success { color: #33d4c0; }
.home-pricing--form-msg.is-error   { color: #ff7055; }

/* ── ANIMATIONS ── */
@keyframes hp-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes hp-spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes hp-orbPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}
@keyframes hp-rainbowSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .home-pricing--grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width: 680px) {
  #home-pricing--section {
    padding: 40px 14px 52px;
  }
  .home-pricing--heading { font-size: 1.75rem; }
  .home-pricing--tabs-nav { gap: 8px; }
  .home-pricing--tab-btn { font-size: 12px; padding: 8px 14px; }
  .home-pricing--grid { grid-template-columns: 1fr; }
  .home-pricing--form-inner { padding: 22px 18px 26px; }
  .home-pricing--form-grid { grid-template-columns: 1fr; }
  .home-pricing--form-group-full { grid-column: 1; }
  .home-pricing--form-footer { flex-direction: column; align-items: flex-start; }
  .home-pricing--deco-hex,
  .home-pricing--deco-rings { display: none; }
  .home-pricing--orb-fire { width: 400px; height: 400px; }
  .home-pricing--orb-wave { width: 320px; height: 320px; }
  .home-pricing--orb-dove { width: 280px; height: 280px; }
}
@media (max-width: 420px) {
  .home-pricing--card-inner { padding: 18px 16px 22px; }
  .home-pricing--amount { font-size: 2.2rem; }
}

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .home-pricing--card,
  .home-pricing--cta,
  .home-pricing--tab-btn,
  .home-pricing--stat,
  .home-pricing--orb,
  .home-pricing--deco-hex,
  .home-pricing--deco-rings,
  .home-pricing--form-deco,
  .home-pricing--form-stripe-rainbow,
  .home-pricing--form-submit { animation: none; transition: none; }
  .home-pricing--card { opacity: 1; translate: none; }
}
/* <!-- Home Services & Pricing Section End --> */


/* <!-- Home About Our Digital Agency start --> */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { background: #060d1f; }

    :root {
      --hau-bg:           #060d1f;
      --hau-bg2:          #0b1530;
      --hau-card:         rgba(255,255,255,.04);
      --hau-border:       rgba(255,255,255,.10);
      --hau-border-glow:  rgba(255,165,0,.35);

      --hau-fire-a:  #ff6b35;
      --hau-fire-b:  #f7c59f;
      --hau-fire-c:  #e94057;
      --hau-wave-a:  #4361ee;
      --hau-wave-b:  #7209b7;
      --hau-dove-a:  #06d6a0;
      --hau-dove-b:  #118ab2;
      --hau-gold:    #f4c430;

      --hau-text:    #e8eaf6;
      --hau-muted:   #8892b0;

      --hau-font-head: 'Syne', sans-serif;
      --hau-font-body: 'DM Sans', sans-serif;

      --hau-radius:  16px;
      --hau-trans:   .35s cubic-bezier(.4,0,.2,1);
    }

    /* ── Particles canvas ────────────────────────────────────── */
    #home-about-us--particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── ABOUT SECTION ───────────────────────────────────────── */
    #home-about-us--section {
      position: relative;
      z-index: 1;
      padding: 80px 5vw 60px;
      overflow: hidden;
      background: linear-gradient(160deg, #060d1f 0%, #0b1530 60%, #060d1f 100%);
    }

    /* mesh orbs */
    #home-about-us--section::before,
    #home-about-us--section::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: .18;
      pointer-events: none;
    }
    #home-about-us--section::before {
      width: 520px; height: 520px;
      background: radial-gradient(circle, var(--hau-fire-a), var(--hau-fire-c));
      top: -120px; left: -160px;
      animation: hau-orb-float 12s ease-in-out infinite alternate;
    }
    #home-about-us--section::after {
      width: 600px; height: 600px;
      background: radial-gradient(circle, var(--hau-wave-a), var(--hau-wave-b));
      bottom: -180px; right: -160px;
      animation: hau-orb-float 16s ease-in-out infinite alternate-reverse;
    }

    @keyframes hau-orb-float {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(40px) scale(1.08); }
    }

    /* ── Grid layout ─────────────────────────────────────────── */
    .home-about-us--grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 52px;
      align-items: center;
      max-width: 1280px;
      margin: 0 auto;
    }

    /* ── LEFT CARD ───────────────────────────────────────────── */
    .home-about-us--left-card {
      background: var(--hau-card);
      border: 1px solid var(--hau-border);
      border-radius: var(--hau-radius);
      padding: 28px;
      position: relative;
      backdrop-filter: blur(12px);
      transition: border-color var(--hau-trans), box-shadow var(--hau-trans);
    }
    .home-about-us--left-card:hover {
      border-color: var(--hau-border-glow);
      box-shadow: 0 0 40px rgba(255,165,0,.12);
    }

    .home-about-us--logo-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      font-family: var(--hau-font-head);
    }
    .home-about-us--logo-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--hau-fire-a), var(--hau-gold));
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: 0 0 20px rgba(255,107,53,.5);
    }
    .home-about-us--logo-icon svg { width: 22px; height: 22px; }
    .home-about-us--logo-text small {
      display: block;
      font-size: 10px;
      letter-spacing: .12em;
      color: var(--hau-muted);
      text-transform: uppercase;
    }
    .home-about-us--logo-text strong {
      font-size: 14px;
      font-weight: 700;
      color: var(--hau-text);
    }

    /* ── IMAGE / VIDEO MEDIA BLOCK ───────────────────────────── */
    .home-about-us--media-wrap {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      aspect-ratio: 16/9;
      background: #0a1428;
    }

    /* IMAGE LAYER */
    .hau-media-img-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      transition: opacity .9s ease;
    }
    .hau-media-img-layer.hau-hidden { opacity: 0; pointer-events: none; }

    .hau-media-img-layer img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }
    .hau-media-img-layer:hover img { transform: scale(1.04); }

    /* dark gradient overlay on image */
    .hau-media-img-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6,13,31,.2) 0%, rgba(6,13,31,.55) 100%);
      pointer-events: none;
    }

    /* VIDEO LAYER */
    .hau-media-vid-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0;
      transition: opacity .9s ease;
    }
    .hau-media-vid-layer.hau-visible { opacity: 1; z-index: 3; }
    .hau-media-vid-layer iframe {
      width: 100%; height: 100%;
      border: none;
      display: block;
    }

    /* PLAY BUTTON (on image) */
    .hau-play-btn {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 4;
      cursor: pointer;
      background: transparent;
      border: none;
      padding: 0;
    }
    .hau-play-ring {
      width: 64px; height: 64px;
      background: linear-gradient(135deg, var(--hau-fire-a), var(--hau-fire-c));
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 0 rgba(233,64,87,.6);
      animation: hau-ring-pulse 2.4s ease-in-out infinite;
      transition: transform var(--hau-trans), box-shadow var(--hau-trans);
    }
    .hau-play-btn:hover .hau-play-ring {
      transform: scale(1.15);
      animation: none;
      box-shadow: 0 0 50px rgba(233,64,87,.8);
    }
    @keyframes hau-ring-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(233,64,87,.7); }
      70%  { box-shadow: 0 0 0 18px rgba(233,64,87,0); }
      100% { box-shadow: 0 0 0 0 rgba(233,64,87,0); }
    }

    /* PROGRESS BAR (auto-switch countdown) */
    .hau-progress-bar-wrap {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: rgba(255,255,255,.12);
      z-index: 5;
    }
    .hau-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--hau-fire-a), var(--hau-fire-c));
      transition: width linear;
    }

    /* LABEL CHIP — "Now Playing" / timer */
    .hau-media-chip {
      position: absolute;
      top: 10px; left: 10px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(6,13,31,.75);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,.12);
      font-family: var(--hau-font-body);
      font-size: 11px;
      color: var(--hau-text);
      pointer-events: none;
      transition: opacity .4s;
    }
    .hau-media-chip .hau-chip-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--hau-fire-a);
      box-shadow: 0 0 6px var(--hau-fire-a);
      animation: hau-blink 1.2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes hau-blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

    /* BACK-TO-IMAGE BUTTON (shows when video playing) */
    .hau-back-btn {
      position: absolute;
      top: 10px; right: 10px;
      z-index: 6;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(6,13,31,.8);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,.15);
      font-family: var(--hau-font-body);
      font-size: 11px;
      color: var(--hau-text);
      cursor: pointer;
      transition: border-color var(--hau-trans), background var(--hau-trans);
    }
    .hau-back-btn:hover { border-color: var(--hau-fire-a); background: rgba(255,107,53,.15); }
    .hau-back-btn.hau-show { display: inline-flex; }

    /* student avatars row */
    .home-about-us--students {
      display: flex;
      gap: 24px;
      margin-top: 20px;
    }
    .home-about-us--student {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .home-about-us--avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--hau-font-head);
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      flex-shrink: 0;
    }
    .home-about-us--avatar.fire  { background: linear-gradient(135deg, var(--hau-fire-a), var(--hau-fire-c)); }
    .home-about-us--avatar.wave  { background: linear-gradient(135deg, var(--hau-wave-a), var(--hau-wave-b)); }
    .home-about-us--student-info small {
      display: block;
      font-family: var(--hau-font-body);
      font-size: 11px;
      color: var(--hau-muted);
    }
    .home-about-us--student-info strong {
      font-family: var(--hau-font-body);
      font-size: 12.5px;
      color: var(--hau-text);
    }

    /* feature badges below card */
    .home-about-us--badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .home-about-us--badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid var(--hau-border);
      font-family: var(--hau-font-body);
      font-size: 12.5px;
      color: var(--hau-text);
      background: var(--hau-card);
      backdrop-filter: blur(8px);
      cursor: default;
      transition: border-color var(--hau-trans), box-shadow var(--hau-trans), transform var(--hau-trans);
      animation: hau-float 4s ease-in-out infinite;
    }
    .home-about-us--badge:nth-child(2) { animation-delay: .4s; }
    .home-about-us--badge:nth-child(3) { animation-delay: .8s; }
    .home-about-us--badge:nth-child(4) { animation-delay: 1.2s; }
    .home-about-us--badge:nth-child(5) { animation-delay: 1.6s; }
    @keyframes hau-float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    .home-about-us--badge:hover {
      border-color: var(--hau-gold);
      box-shadow: 0 0 16px rgba(244,196,48,.2);
      transform: translateY(-4px) !important;
    }
    .home-about-us--badge .hau-badge-icon { font-size: 15px; }

    /* ── RIGHT CONTENT ───────────────────────────────────────── */
    .home-about-us--right { position: relative; }

    .home-about-us--label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--hau-font-head);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--hau-gold);
      margin-bottom: 14px;
    }
    .home-about-us--label::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--hau-gold);
      box-shadow: 0 0 10px var(--hau-gold);
      animation: hau-pulse 2s ease-in-out infinite;
    }
    @keyframes hau-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(244,196,48,.6); }
      50%      { box-shadow: 0 0 0 8px rgba(244,196,48,0); }
    }

    .home-about-us--heading {
      font-family: var(--hau-font-head);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      color: var(--hau-text);
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .home-about-us--heading .hau-gradient-fire {
      background: linear-gradient(90deg, var(--hau-fire-a), var(--hau-fire-c), var(--hau-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .home-about-us--desc {
      font-family: var(--hau-font-body);
      font-size: 15px;
      line-height: 1.75;
      color: var(--hau-muted);
      margin-bottom: 26px;
      max-width: 540px;
    }

    /* skill pills */
    .home-about-us--pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 28px;
    }
    .home-about-us--pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 16px;
      border-radius: 999px;
      font-family: var(--hau-font-body);
      font-size: 12.5px;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: default;
      transition: transform var(--hau-trans), box-shadow var(--hau-trans);
    }
    .home-about-us--pill:hover { transform: translateY(-3px); }
    .home-about-us--pill.fire {
      background: linear-gradient(135deg,rgba(255,107,53,.18),rgba(233,64,87,.12));
      border-color: rgba(255,107,53,.35);
      color: var(--hau-fire-b);
    }
    .home-about-us--pill.wave {
      background: linear-gradient(135deg,rgba(67,97,238,.18),rgba(114,9,183,.12));
      border-color: rgba(67,97,238,.35);
      color: #a8b4ff;
    }
    .home-about-us--pill.dove {
      background: linear-gradient(135deg,rgba(6,214,160,.18),rgba(17,138,178,.12));
      border-color: rgba(6,214,160,.35);
      color: #5fffcb;
    }
    .home-about-us--pill.gold {
      background: linear-gradient(135deg,rgba(244,196,48,.18),rgba(255,107,53,.12));
      border-color: rgba(244,196,48,.35);
      color: var(--hau-gold);
    }

    /* owner card */
    .home-about-us--owner {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
      border-radius: var(--hau-radius);
      background: var(--hau-card);
      border: 1px solid var(--hau-border);
      backdrop-filter: blur(12px);
      margin-bottom: 28px;
      transition: border-color var(--hau-trans), box-shadow var(--hau-trans);
      position: relative;
      overflow: hidden;
    }
    .home-about-us--owner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(244,196,48,.06) 0%, transparent 60%);
      pointer-events: none;
    }
    .home-about-us--owner:hover {
      border-color: var(--hau-border-glow);
      box-shadow: 0 8px 40px rgba(244,196,48,.08);
    }
    .home-about-us--owner-img {
      width: 64px; height: 64px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 2px solid var(--hau-gold);
      box-shadow: 0 0 20px rgba(244,196,48,.3);
      background: linear-gradient(135deg,var(--hau-fire-a),var(--hau-wave-b));
      display: grid;
      place-items: center;
      font-family: var(--hau-font-head);
      font-size: 22px;
      font-weight: 800;
      color: #fff;
    }
    .home-about-us--owner-label {
      font-family: var(--hau-font-head);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--hau-gold);
      margin-bottom: 5px;
    }
    .home-about-us--owner-name {
      font-family: var(--hau-font-head);
      font-size: 17px;
      font-weight: 700;
      color: var(--hau-text);
    }
    .home-about-us--owner-title {
      font-family: var(--hau-font-body);
      font-size: 12px;
      color: var(--hau-muted);
      margin-bottom: 8px;
    }
    .home-about-us--owner-desc {
      font-family: var(--hau-font-body);
      font-size: 13px;
      line-height: 1.7;
      color: var(--hau-muted);
    }
    .home-about-us--stars { color: var(--hau-gold); font-size: 13px; margin-bottom: 6px; }

    /* CTA row */
    .home-about-us--cta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    .home-about-us--btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 13px 28px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--hau-fire-a), var(--hau-fire-c));
      color: #fff;
      font-family: var(--hau-font-head);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: .05em;
      text-decoration: none;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 24px rgba(233,64,87,.35);
      transition: transform var(--hau-trans), box-shadow var(--hau-trans);
      position: relative;
      overflow: hidden;
    }
    .home-about-us--btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,rgba(255,255,255,.18),transparent);
      opacity: 0;
      transition: opacity var(--hau-trans);
    }
    .home-about-us--btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 36px rgba(233,64,87,.5);
    }
    .home-about-us--btn-primary:hover::after { opacity: 1; }

    .home-about-us--btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 13px 28px;
      border-radius: 999px;
      border: 1px solid var(--hau-border);
      color: var(--hau-text);
      font-family: var(--hau-font-head);
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      background: transparent;
      transition: border-color var(--hau-trans), background var(--hau-trans), transform var(--hau-trans);
    }
    .home-about-us--btn-ghost:hover {
      border-color: var(--hau-gold);
      background: rgba(244,196,48,.06);
      transform: translateY(-3px);
    }

    .home-about-us--rating {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--hau-font-body);
      font-size: 12.5px;
      color: var(--hau-muted);
    }
    .home-about-us--rating .star { color: var(--hau-gold); }

    /* ── STATS ROW ───────────────────────────────────────────── */
    #home-about-us--stats {
      max-width: 1280px;
      margin: 0 auto 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 0 5vw 60px;
      position: relative;
      z-index: 1;
    }
    .home-about-us--stat-card {
      background: var(--hau-card);
      border: 1px solid var(--hau-border);
      border-radius: var(--hau-radius);
      padding: 24px 20px;
      text-align: center;
      backdrop-filter: blur(12px);
      transition: border-color var(--hau-trans), transform var(--hau-trans), box-shadow var(--hau-trans);
      position: relative;
      overflow: hidden;
    }
    .home-about-us--stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
    }
    .home-about-us--stat-card.c1::before { background: linear-gradient(90deg,var(--hau-fire-a),var(--hau-fire-c)); }
    .home-about-us--stat-card.c2::before { background: linear-gradient(90deg,var(--hau-wave-a),var(--hau-wave-b)); }
    .home-about-us--stat-card.c3::before { background: linear-gradient(90deg,var(--hau-dove-a),var(--hau-dove-b)); }
    .home-about-us--stat-card.c4::before { background: linear-gradient(90deg,var(--hau-gold),var(--hau-fire-a)); }
    .home-about-us--stat-card:hover {
      transform: translateY(-6px);
      border-color: var(--hau-border-glow);
      box-shadow: 0 16px 40px rgba(0,0,0,.3);
    }
    .home-about-us--stat-num {
      font-family: var(--hau-font-head);
      font-size: 2.4rem;
      font-weight: 800;
      display: block;
    }
    .home-about-us--stat-card.c1 .home-about-us--stat-num { background: linear-gradient(90deg,var(--hau-fire-a),var(--hau-fire-c)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .home-about-us--stat-card.c2 .home-about-us--stat-num { background: linear-gradient(90deg,var(--hau-wave-a),var(--hau-wave-b)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .home-about-us--stat-card.c3 .home-about-us--stat-num { background: linear-gradient(90deg,var(--hau-dove-a),var(--hau-dove-b)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .home-about-us--stat-card.c4 .home-about-us--stat-num { background: linear-gradient(90deg,var(--hau-gold),var(--hau-fire-a)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .home-about-us--stat-label {
      font-family: var(--hau-font-body);
      font-size: 13px;
      color: var(--hau-muted);
      margin-top: 4px;
    }

    /* ── PAGE WRAPPER (ensures dark bg for all sections) ─────── */
    #home-about-us--page-wrap {
      background: linear-gradient(180deg, #060d1f 0%, #0b1530 40%, #060d1f 80%, #080f22 100%);
      min-height: 100vh;
      position: relative;
    }

    /* ── SERVICES SWIPER ─────────────────────────────────────── */
    #home-about-us--services {
      padding: 70px 0 80px;
      position: relative;
      z-index: 1;
      overflow: hidden;
      background: transparent;
    }
    #home-about-us--services::before {
      content: '';
      position: absolute;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(67,97,238,.15), transparent 70%);
      top: -100px; right: -100px;
      filter: blur(80px);
      pointer-events: none;
    }
    #home-about-us--services::after {
      content: '';
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(6,214,160,.1), transparent 70%);
      bottom: -80px; left: -80px;
      filter: blur(80px);
      pointer-events: none;
    }
    .home-about-us--section-label {
      text-align: center;
      font-family: var(--hau-font-head);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--hau-wave-a);
      margin-bottom: 10px;
      display: block;
    }
    .home-about-us--section-title {
      text-align: center;
      font-family: var(--hau-font-head);
      font-size: clamp(1.6rem,3vw,2.4rem);
      font-weight: 800;
      color: var(--hau-text);
      margin-bottom: 48px;
      padding: 0 5vw;
    }
    .home-about-us--section-title span {
      background: linear-gradient(90deg,var(--hau-wave-a),var(--hau-dove-a));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .home-about-us--swiper { padding: 10px 5vw 60px !important; }
    .home-about-us--swiper .swiper-slide { height: auto; }
    .home-about-us--service-card {
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--hau-radius);
      padding: 28px 22px;
      height: 100%;
      backdrop-filter: blur(10px);
      transition: border-color var(--hau-trans), transform var(--hau-trans), box-shadow var(--hau-trans);
      position: relative;
      overflow: hidden;
    }
    .home-about-us--service-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 10%, var(--card-glow, rgba(255,107,53,.1)) 0%, transparent 65%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }
    .home-about-us--service-card:hover {
      transform: translateY(-8px);
      border-color: var(--hau-border-glow);
      box-shadow: 0 20px 50px rgba(0,0,0,.35);
    }
    .home-about-us--service-card:hover::after { opacity: 1; }
    .home-about-us--svc-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      font-size: 24px;
    }
    .home-about-us--svc-icon.fire { background: linear-gradient(135deg,rgba(255,107,53,.25),rgba(233,64,87,.2)); box-shadow: 0 0 20px rgba(255,107,53,.15); }
    .home-about-us--svc-icon.fire ~ * { --card-glow: rgba(255,107,53,.12); }
    .home-about-us--svc-icon.wave { background: linear-gradient(135deg,rgba(67,97,238,.25),rgba(114,9,183,.2)); box-shadow: 0 0 20px rgba(67,97,238,.15); }
    .home-about-us--svc-icon.dove { background: linear-gradient(135deg,rgba(6,214,160,.25),rgba(17,138,178,.2)); box-shadow: 0 0 20px rgba(6,214,160,.15); }
    .home-about-us--svc-icon.gold { background: linear-gradient(135deg,rgba(244,196,48,.25),rgba(255,107,53,.2)); box-shadow: 0 0 20px rgba(244,196,48,.15); }
    .home-about-us--svc-title {
      font-family: var(--hau-font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--hau-text);
      margin-bottom: 10px;
    }
    .home-about-us--svc-desc {
      font-family: var(--hau-font-body);
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--hau-muted);
    }
    /* Swiper nav arrows */
    .home-about-us--swiper .swiper-button-next,
    .home-about-us--swiper .swiper-button-prev {
      color: var(--hau-fire-a) !important;
      background: rgba(255,107,53,.1);
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255,107,53,.3);
    }
    .home-about-us--swiper .swiper-button-next::after,
    .home-about-us--swiper .swiper-button-prev::after { font-size: 14px !important; }
    .swiper-pagination-bullet { background: var(--hau-muted) !important; opacity: .5; }
    .swiper-pagination-bullet-active { background: var(--hau-fire-a) !important; opacity: 1; }

    /* ── DIVIDER ─────────────────────────────────────────────── */
    .home-about-us--divider {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 5vw;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--hau-border), transparent);
    }

    /* ── FAQ ─────────────────────────────────────────────────── */
    #home-about-us--faq {
      max-width: 860px;
      margin: 0 auto;
      padding: 70px 5vw 90px;
      position: relative;
      z-index: 1;
    }
    #home-about-us--faq .home-about-us--section-label { margin-bottom: 10px; }
    #home-about-us--faq .home-about-us--section-title { margin-bottom: 36px; padding: 0; }
    #home-about-us--faq .home-about-us--section-title span {
      background: linear-gradient(90deg, var(--hau-fire-a), var(--hau-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .home-about-us--faq-item { animation: hau-faq-in .5s ease both; }
    .home-about-us--faq-item:nth-child(1) { animation-delay: .05s; }
    .home-about-us--faq-item:nth-child(2) { animation-delay: .10s; }
    .home-about-us--faq-item:nth-child(3) { animation-delay: .15s; }
    .home-about-us--faq-item:nth-child(4) { animation-delay: .20s; }
    .home-about-us--faq-item:nth-child(5) { animation-delay: .25s; }
    .home-about-us--faq-item:nth-child(6) { animation-delay: .30s; }
    @keyframes hau-faq-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
    .home-about-us--faq-item {
      border: 1px solid var(--hau-border);
      border-radius: var(--hau-radius);
      margin-bottom: 12px;
      background: var(--hau-card);
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: border-color var(--hau-trans), box-shadow var(--hau-trans);
    }
    .home-about-us--faq-item.open,
    .home-about-us--faq-item:hover {
      border-color: var(--hau-border-glow);
      box-shadow: 0 8px 30px rgba(255,165,0,.08);
    }
    .home-about-us--faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      cursor: pointer;
      user-select: none;
      gap: 12px;
    }
    .home-about-us--faq-q-text {
      font-family: var(--hau-font-head);
      font-size: 15px;
      font-weight: 600;
      color: var(--hau-text);
    }
    .home-about-us--faq-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1px solid var(--hau-border);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform var(--hau-trans), background var(--hau-trans), border-color var(--hau-trans);
      color: var(--hau-muted);
    }
    .home-about-us--faq-item.open .home-about-us--faq-icon {
      transform: rotate(45deg);
      background: linear-gradient(135deg,var(--hau-fire-a),var(--hau-fire-c));
      border-color: transparent;
      color: #fff;
    }
    .home-about-us--faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, padding .3s ease;
    }
    .home-about-us--faq-item.open .home-about-us--faq-a { max-height: 400px; }
    .home-about-us--faq-a-inner {
      padding: 0 22px 18px;
      font-family: var(--hau-font-body);
      font-size: 14px;
      line-height: 1.75;
      color: var(--hau-muted);
    }

    /* ── Reveal animations ───────────────────────────────────── */
    .hau-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .hau-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── SVG decorative floats ───────────────────────────────── */
    .hau-float-svg {
      position: absolute;
      pointer-events: none;
      opacity: .18;
      animation: hau-float-svg 8s ease-in-out infinite;
    }
    @keyframes hau-float-svg {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-18px) rotate(8deg); }
    }

    /* ── RESPONSIVE ──────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .home-about-us--grid { grid-template-columns: 1fr; gap: 36px; }
      #home-about-us--stats { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 640px) {
      #home-about-us--section { padding: 50px 4vw 40px; }
      #home-about-us--stats { grid-template-columns: 1fr 1fr; padding: 0 4vw 40px; }
      .home-about-us--cta-row { flex-direction: column; align-items: flex-start; }
      .home-about-us--students { flex-direction: column; gap: 12px; }
    }
/* <!-- Home About Our Digital Agency End --> */

/* <!-- Where We Operate Presence start --> */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* --bg:         #fff; */
    --card-bg:     #111020;
    --card-hover:  #181628;
    --surface:     rgba(255,255,255,0.04);
    --border:      rgba(255,255,255,0.07);
    --border-h:    rgba(255,255,255,0.16);
    --text-1:      #f0eeff;
    --text-2:      rgba(240,238,255,0.55);
    --text-3:      rgba(240,238,255,0.30);

    --fire-a: #ff4500;
    --fire-b: #ffaa00;
    --bird-a: #00d4b1;
    --bird-b: #3a9eff;
    --ele-a:  #d63cf5;
    --ele-b:  #5a4fff;

    --rad-sm: 10px;
    --rad-md: 14px;
    --rad-lg: 20px;
    --rad-pill: 100px;
  }

  html { scroll-behavior: smooth; }

  /* body {
    background: var(--bg);
    color: var(--text-1);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  } */

  /* ─── AMBIENT BACKGROUND ─── */
  .ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
    animation: drift 18s ease-in-out infinite alternate;
  }
  .orb-1 { width:420px; height:420px; background:radial-gradient(circle,#ff450030,transparent 70%); top:-120px; left:-80px; animation-delay:0s; }
  .orb-2 { width:350px; height:350px; background:radial-gradient(circle,#d63cf528,transparent 70%); bottom:-80px; right:-60px; animation-delay:-6s; }
  .orb-3 { width:280px; height:280px; background:radial-gradient(circle,#00d4b120,transparent 70%); top:40%; left:45%; animation-delay:-12s; }
  @keyframes drift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(30px,20px) scale(1.08); }
  }

  /* ─── NOISE TEXTURE ─── */
  body::before {
    content:'';
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:1;
    opacity:0.35;
  }

  /* ─── LAYOUT ─── */
  .page {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
  }

  /* ─── HEADER ─── */
  .header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 3.5rem;
    animation: fadeUp 0.7s ease both;
  }

  .logo-badge {
    width: 60px; height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--fire-a), var(--ele-a));
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 40px rgba(255,69,0,0.3), 0 0 80px rgba(214,60,245,0.15);
  }
  .logo-badge::after {
    content:'';
    position:absolute; inset:1px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent 60%);
    pointer-events:none;
  }

  .brand-info { flex:1; }
  .brand-name {
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:16px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    background:linear-gradient(90deg,var(--fire-b),var(--ele-a),var(--bird-a));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .brand-tagline {
    font-size:11px;
    color:var(--text-3);
    letter-spacing:0.18em;
    text-transform:uppercase;
    margin-top:3px;
  }

  /* ─── HERO TEXT ─── */
  .hero {
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.1s ease both;
  }
  .hero-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--text-3);
    margin-bottom:14px;
  }
  .eyebrow-line {
    width:28px; height:1px;
    background:linear-gradient(90deg,var(--fire-a),transparent);
  }
  .hero-title {
    font-family:'Syne',sans-serif;
    font-size:clamp(28px,4vw,44px);
    font-weight:800;
    line-height:1.15;
    color:var(--text-1);
    margin-bottom:10px;
  }
  .hero-title span {
    background:linear-gradient(90deg,var(--fire-b),var(--ele-a));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .hero-desc {
    font-size:15px;
    color:var(--text-2);
    line-height:1.65;
    max-width:520px;
  }

  /* ─── TABS ─── */
  .tab-bar {
    display:flex;
    gap:8px;
    margin-bottom:2.5rem;
    flex-wrap:wrap;
    animation: fadeUp 0.7s 0.2s ease both;
  }

  .tab-btn {
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'DM Sans',sans-serif;
    font-size:13.5px;
    font-weight:500;
    padding:10px 22px;
    border-radius:var(--rad-pill);
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-2);
    cursor:pointer;
    transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
    letter-spacing:0.02em;
    position:relative;
    overflow:hidden;
  }
  .tab-btn::after {
    content:'';
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 0.25s;
    border-radius:var(--rad-pill);
  }
  .tab-btn:hover:not(.active) {
    border-color:var(--border-h);
    color:var(--text-1);
    background:rgba(255,255,255,0.07);
    transform:translateY(-1px);
  }
  .tab-btn.active {
    border-color:transparent;
    color:#fff;
    font-weight:600;
    box-shadow:0 4px 24px rgba(0,0,0,0.4);
  }
  .tab-btn.tab-india.active  { background:linear-gradient(135deg,var(--fire-a),var(--fire-b)); box-shadow:0 4px 24px rgba(255,69,0,0.35); }
  .tab-btn.tab-intl.active   { background:linear-gradient(135deg,var(--bird-a),var(--bird-b)); box-shadow:0 4px 24px rgba(0,212,177,0.3); }
  .tab-btn.tab-biz.active    { background:linear-gradient(135deg,var(--ele-a),var(--ele-b));   box-shadow:0 4px 24px rgba(214,60,245,0.3); }

  .tab-icon { font-size:16px; line-height:1; }
  .tab-count {
    font-size:10px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
    background:rgba(255,255,255,0.18);
    letter-spacing:0.04em;
  }

  /* ─── PANELS ─── */
  .panel { display:none; }
  .panel.active {
    display:block;
    animation:panelIn 0.4s cubic-bezier(0.4,0,0.2,1) both;
  }
  @keyframes panelIn {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ─── SEARCH ─── */
  .search-wrap {
    position:relative;
    margin-bottom:1.75rem;
  }
  .search-icon-svg {
    position:absolute;
    left:16px; top:50%;
    transform:translateY(-50%);
    width:16px; height:16px;
    opacity:0.4;
    pointer-events:none;
  }
  .search-input {
    width:100%;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--rad-md);
    padding:12px 16px 12px 44px;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:var(--text-1);
    outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
  }
  .search-input::placeholder { color:var(--text-3); }
  .panel.tab-india  .search-input:focus { border-color:rgba(255,69,0,0.5);  box-shadow:0 0 0 3px rgba(255,69,0,0.08); }
  .panel.tab-intl   .search-input:focus { border-color:rgba(0,212,177,0.5); box-shadow:0 0 0 3px rgba(0,212,177,0.08); }
  .panel.tab-biz    .search-input:focus { border-color:rgba(214,60,245,0.5);box-shadow:0 0 0 3px rgba(214,60,245,0.08); }

  /* ─── SECTION LABEL ─── */
  .sec-label {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--text-3);
    margin-bottom:12px;
    margin-top:2rem;
  }
  .sec-label:first-of-type { margin-top:0; }
  .sec-label-line {
    flex:1;
    height:1px;
    background:var(--border);
  }

  /* ─── TAG GRID ─── */
  .tag-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(175px,1fr));
    gap:8px;
    margin-bottom:0.5rem;
  }

  .tag {
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--rad-sm);
    padding:10px 14px;
    font-size:13px;
    color:var(--text-2);
    cursor:pointer;
    transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
    display:flex;
    align-items:center;
    gap:9px;
    position:relative;
    overflow:hidden;
    user-select:none;
  }
  .tag::before {
    content:'';
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 0.22s;
  }
  .panel.tab-india .tag::before { background:linear-gradient(120deg,rgba(255,69,0,0.12),rgba(255,170,0,0.06)); }
  .panel.tab-intl  .tag::before { background:linear-gradient(120deg,rgba(0,212,177,0.12),rgba(58,158,255,0.06)); }
  .panel.tab-biz   .tag::before { background:linear-gradient(120deg,rgba(214,60,245,0.12),rgba(90,79,255,0.06)); }

  .tag:hover {
    border-color:var(--border-h);
    color:var(--text-1);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,0.3);
  }
  .tag:hover::before { opacity:1; }

  .tag-dot {
    width:6px; height:6px;
    border-radius:50%;
    flex-shrink:0;
    position:relative;
    z-index:1;
  }
  .panel.tab-india .tag-dot { background:linear-gradient(135deg,var(--fire-a),var(--fire-b)); }
  .panel.tab-intl  .tag-dot { background:linear-gradient(135deg,var(--bird-a),var(--bird-b)); }
  .panel.tab-biz   .tag-dot { background:linear-gradient(135deg,var(--ele-a),var(--ele-b)); }

  .tag-text { position:relative; z-index:1; }

  /* ─── STATS ROW ─── */
  .stats-row {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:2rem;
  }
  .stat-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:600;
    padding:6px 14px;
    border-radius:var(--rad-pill);
    letter-spacing:0.04em;
  }
  .stat-dot {
    width:7px; height:7px; border-radius:50%;
    animation:pulse 2.5s ease infinite;
  }
  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(0.7); }
  }
  .panel.tab-india .stat-chip { background:rgba(255,69,0,0.1);  color:#ff9a00; border:1px solid rgba(255,69,0,0.22); }
  .panel.tab-india .stat-dot  { background:var(--fire-a); }
  .panel.tab-intl  .stat-chip { background:rgba(0,212,177,0.1); color:#00d4b1; border:1px solid rgba(0,212,177,0.22); }
  .panel.tab-intl  .stat-dot  { background:var(--bird-a); }
  .panel.tab-biz   .stat-chip { background:rgba(214,60,245,0.1);color:#d63cf5; border:1px solid rgba(214,60,245,0.22); }
  .panel.tab-biz   .stat-dot  { background:var(--ele-a); }

  /* ─── EMPTY STATE ─── */
  .empty-state {
    display:none;
    text-align:center;
    padding:3rem 1rem;
    color:var(--text-3);
    font-size:14px;
  }
  .empty-state.visible { display:block; }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ─── FOOTER NOTE ─── */
  .footer-note {
    margin-top:3.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    animation: fadeUp 0.7s 0.4s ease both;
  }
  .footer-left {
    font-size:12px;
    color:var(--text-3);
    letter-spacing:0.06em;
  }
  .footer-badge {
    font-size:11px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:5px 14px;
    border-radius:var(--rad-pill);
    border:1px solid var(--border);
    color:var(--text-3);
  }

  /* ─── SCROLLBAR ─── */
 /* ::-webkit-scrollbar { width:10px;height: 50px; }
  ::-webkit-scrollbar-track { background:transparent; }
 ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff6a00,#ff2d55,#7b61ff,#00d4aa);
  border-radius:10px;
} */


::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track {
  background: rgba(123, 97, 255, 0.06);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    #00d4ff 0%, #00a8e8 18%, #0066cc 35%,
    #4a54e1 52%, #7b61ff 68%, #9b40ff 82%, #b721ff 100%);
  border-radius: 10px;
  min-height: 80px; 
   max-height: 200px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    #33ddff 0%, #22bbf5 18%, #1177dd 35%,
    #6066ee 52%, #9478ff 68%, #b060ff 82%, #cc44ff 100%);
}
  /* ─── RESPONSIVE ─── */
  @media (max-width:600px) {
    .page { padding:2rem 1rem 4rem; }
    .tag-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .hero-title { font-size:26px; }
  }
/* <!-- Where We Operate Presence End --> */

/* <!-- Home What Our Clients Say start --> */
    /* ── Reset / base ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; }

    /* ── Design tokens ────────────────────────────────────── */
    :root {
      --ht-fire-start:   #ff4e00;
      --ht-fire-mid:     #ec9f05;
      --ht-fire-end:     #ff0080;
      --ht-wave-start:   #4776e6;
      --ht-wave-mid:     #8e54e9;
      --ht-wave-end:     #c471ed;
      --ht-dove-start:   #0fd850;
      --ht-dove-mid:     #00c6fb;
      --ht-dove-end:     #f9e030;

      --ht-bg:           #0a0a0f;
      --ht-bg-card:      rgba(18,18,28,0.85);
      --ht-border:       rgba(255,255,255,0.08);
      --ht-text-primary: #f0f0f8;
      --ht-text-muted:   rgba(240,240,248,0.55);
      --ht-accent:       #ff4e00;

      --ht-radius-card:  20px;
      --ht-shadow-card:  0 24px 60px rgba(0,0,0,0.45);
      --ht-transition:   0.38s cubic-bezier(0.4,0,0.2,1);

      --font-head: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }

    /* ── Particle canvas ──────────────────────────────────── */
    #home-testimonial-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── Section wrapper ──────────────────────────────────── */
    #home-testimonial-section {
      position: relative;
      overflow: hidden;
      background: var(--ht-bg);
      padding: 80px 0 90px;
      font-family: var(--font-body);
    }

    /* ── Parallax blobs ───────────────────────────────────── */
    .home-testimonial-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.18;
      pointer-events: none;
      will-change: transform;
    }
    .home-testimonial-blob--fire {
      width: 520px; height: 520px;
      background: radial-gradient(circle, var(--ht-fire-start), var(--ht-fire-end));
      top: -120px; left: -100px;
    }
    .home-testimonial-blob--wave {
      width: 460px; height: 460px;
      background: radial-gradient(circle, var(--ht-wave-start), var(--ht-wave-end));
      bottom: -80px; right: -80px;
    }
    .home-testimonial-blob--dove {
      width: 340px; height: 340px;
      background: radial-gradient(circle, var(--ht-dove-start), var(--ht-dove-end));
      top: 40%; left: 50%;
      transform: translate(-50%,-50%);
    }

    /* ── Floating SVG icons ───────────────────────────────── */
    .home-testimonial-float-icon {
      position: absolute;
      opacity: 0.12;
      pointer-events: none;
      animation: htFloatDrift 8s ease-in-out infinite;
    }
    .home-testimonial-float-icon:nth-child(1){ top:8%;  left:5%;  animation-delay:0s;   width:52px; }
    .home-testimonial-float-icon:nth-child(2){ top:18%; right:6%; animation-delay:1.5s; width:38px; }
    .home-testimonial-float-icon:nth-child(3){ bottom:12%; left:8%; animation-delay:3s;  width:44px; }
    .home-testimonial-float-icon:nth-child(4){ bottom:20%; right:5%; animation-delay:4.5s; width:30px;}
    @keyframes htFloatDrift {
      0%,100%{ transform: translateY(0)   rotate(0deg); }
      33%    { transform: translateY(-18px) rotate(6deg); }
      66%    { transform: translateY(10px)  rotate(-4deg); }
    }

    /* ── Container ────────────────────────────────────────── */
    .home-testimonial-container {
      position: relative;
      z-index: 1;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── Header ───────────────────────────────────────────── */
    .home-testimonial-header {
      text-align: center;
      margin-bottom: 52px;
    }
    .home-testimonial-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      border-radius: 100px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ht-text-primary);
      margin-bottom: 22px;
      backdrop-filter: blur(8px);
    }
    .home-testimonial-badge svg { flex-shrink: 0; }

    .home-testimonial-title {
      font-family: var(--font-head);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 800;
      color: var(--ht-text-primary);
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .home-testimonial-title-fire {
      background: linear-gradient(90deg, var(--ht-fire-start), var(--ht-fire-mid), var(--ht-fire-end));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .home-testimonial-subtitle {
      font-size: 1rem;
      color: var(--ht-text-muted);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── Stats row ────────────────────────────────────────── */
    .home-testimonial-stats {
      display: flex;
      justify-content: center;
      gap: 0;
      margin-bottom: 56px;
      flex-wrap: wrap;
    }
    .home-testimonial-stat {
      text-align: center;
      padding: 0 36px;
      position: relative;
    }
    .home-testimonial-stat + .home-testimonial-stat::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 1px; height: 44px;
      background: var(--ht-border);
    }
    .home-testimonial-stat-value {
      font-family: var(--font-head);
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 800;
      color: var(--ht-text-primary);
      line-height: 1;
      margin-bottom: 6px;
    }
    .home-testimonial-stat--fire .home-testimonial-stat-value {
      background: linear-gradient(135deg, var(--ht-fire-start), var(--ht-fire-end));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .home-testimonial-stat--wave .home-testimonial-stat-value {
      background: linear-gradient(135deg, var(--ht-wave-start), var(--ht-wave-end));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .home-testimonial-stat--dove .home-testimonial-stat-value {
      background: linear-gradient(135deg, var(--ht-dove-start), var(--ht-dove-mid));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .home-testimonial-stat-label {
      font-size: 0.82rem;
      color: var(--ht-text-muted);
      font-weight: 500;
      letter-spacing: 0.03em;
    }

    /* ── Swiper wrapper ───────────────────────────────────── */
    .home-testimonial-swiper-wrap {
      position: relative;
      padding: 16px 0 20px;
    }
    .home-testimonial-swiper {
      overflow: visible;
    }
    /* nav buttons */
    .home-testimonial-btn-prev,
    .home-testimonial-btn-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 46px; height: 46px;
      border-radius: 50%;
      border: 1px solid var(--ht-border);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--ht-transition), border-color var(--ht-transition), transform var(--ht-transition);
    }
    .home-testimonial-btn-prev { left: -24px; }
    .home-testimonial-btn-next { right: -24px; }
    .home-testimonial-btn-prev:hover,
    .home-testimonial-btn-next:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.26);
      transform: translateY(-50%) scale(1.1);
    }
    .home-testimonial-btn-prev svg,
    .home-testimonial-btn-next svg { color: #fff; }

    /* ── Card ─────────────────────────────────────────────── */
    .home-testimonial-card {
      background: var(--ht-bg-card);
      border: 1px solid var(--ht-border);
      border-radius: var(--ht-radius-card);
      padding: 32px 28px 26px;
      backdrop-filter: blur(18px);
      box-shadow: var(--ht-shadow-card);
      position: relative;
      overflow: hidden;
      transition: transform var(--ht-transition), box-shadow var(--ht-transition), border-color var(--ht-transition);
      height: 100%;
      display: flex;
      flex-direction: column;
      cursor: default;
    }
    .home-testimonial-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0;
      transition: opacity var(--ht-transition);
      pointer-events: none;
    }
    .home-testimonial-card--fire::before  { background: linear-gradient(135deg, rgba(255,78,0,0.08), rgba(255,0,128,0.06)); }
    .home-testimonial-card--wave::before  { background: linear-gradient(135deg, rgba(71,118,230,0.08), rgba(196,113,237,0.06)); }
    .home-testimonial-card--dove::before  { background: linear-gradient(135deg, rgba(15,216,80,0.07), rgba(0,198,251,0.06)); }

    .home-testimonial-card:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 36px 80px rgba(0,0,0,0.55);
    }
    .home-testimonial-card:hover::before { opacity: 1; }
    .home-testimonial-card--fire:hover  { border-color: rgba(255,78,0,0.35); }
    .home-testimonial-card--wave:hover  { border-color: rgba(71,118,230,0.35); }
    .home-testimonial-card--dove:hover  { border-color: rgba(15,216,80,0.35); }

    /* quote mark */
    .home-testimonial-quote-icon {
      display: inline-flex;
      margin-bottom: 14px;
    }
    .home-testimonial-quote-icon svg { width: 36px; height: 28px; }
    .home-testimonial-card--fire .home-testimonial-quote-icon svg path { fill: var(--ht-fire-start); }
    .home-testimonial-card--wave .home-testimonial-quote-icon svg path { fill: var(--ht-wave-start); }
    .home-testimonial-card--dove .home-testimonial-quote-icon svg path { fill: var(--ht-dove-start); }

    /* stars */
    .home-testimonial-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 16px;
    }
    .home-testimonial-star {
      width: 16px; height: 16px;
    }

    /* text */
    .home-testimonial-text {
      font-size: 0.93rem;
      line-height: 1.72;
      color: var(--ht-text-muted);
      flex: 1;
      margin-bottom: 24px;
      font-style: italic;
    }

    /* author */
    .home-testimonial-author {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .home-testimonial-avatar-wrap {
      position: relative;
      flex-shrink: 0;
    }
    .home-testimonial-avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--ht-border);
      loading: lazy;
    }
    .home-testimonial-verified {
      position: absolute;
      bottom: -2px; right: -2px;
      width: 18px; height: 18px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid var(--ht-bg);
    }
    .home-testimonial-card--fire .home-testimonial-verified { background: var(--ht-fire-start); }
    .home-testimonial-card--wave .home-testimonial-verified { background: var(--ht-wave-start); }
    .home-testimonial-card--dove .home-testimonial-verified { background: var(--ht-dove-start); }

    .home-testimonial-author-name {
      font-family: var(--font-head);
      font-size: 0.96rem;
      font-weight: 700;
      color: var(--ht-text-primary);
      margin-bottom: 2px;
    }
    .home-testimonial-author-role {
      font-size: 0.78rem;
      color: var(--ht-text-muted);
      margin-bottom: 8px;
    }
    .home-testimonial-tag {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .home-testimonial-card--fire .home-testimonial-tag {
      background: linear-gradient(90deg, var(--ht-fire-start), var(--ht-fire-end));
      color: #fff;
    }
    .home-testimonial-card--wave .home-testimonial-tag {
      background: linear-gradient(90deg, var(--ht-wave-start), var(--ht-wave-end));
      color: #fff;
    }
    .home-testimonial-card--dove .home-testimonial-tag {
      background: linear-gradient(90deg, var(--ht-dove-start), var(--ht-dove-mid));
      color: #0a0a0f;
    }

    /* ── Pagination ───────────────────────────────────────── */
    .home-testimonial-pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 36px;
    }
    .home-testimonial-pagination .swiper-pagination-bullet {
      width: 8px; height: 8px;
      background: rgba(255,255,255,0.25);
      border-radius: 100px;
      transition: width 0.3s, background 0.3s;
      cursor: pointer;
      opacity: 1;
    }
    .home-testimonial-pagination .swiper-pagination-bullet-active {
      width: 28px;
      background: linear-gradient(90deg, var(--ht-fire-start), var(--ht-fire-end));
    }

    /* ── CTA ──────────────────────────────────────────────── */
    .home-testimonial-cta-wrap {
      text-align: center;
      margin-top: 52px;
    }
    .home-testimonial-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 40px;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--ht-fire-start), var(--ht-fire-mid), var(--ht-fire-end));
      background-size: 200% 100%;
      color: #fff;
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      border: none;
      cursor: pointer;
      transition: background-position 0.5s ease, transform var(--ht-transition), box-shadow var(--ht-transition);
      box-shadow: 0 8px 30px rgba(255,78,0,0.35);
      position: relative;
      overflow: hidden;
    }
    .home-testimonial-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background var(--ht-transition);
      border-radius: inherit;
    }
    .home-testimonial-cta:hover {
      background-position: 100% 0;
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 16px 48px rgba(255,78,0,0.55);
    }
    .home-testimonial-cta:hover::after {
      background: rgba(255,255,255,0.07);
    }
    .home-testimonial-cta-arrow {
      display: inline-flex;
      transition: transform var(--ht-transition);
    }
    .home-testimonial-cta:hover .home-testimonial-cta-arrow {
      transform: translateX(5px);
    }

    /* ── Decorative top border gradient line ──────────────── */
    .home-testimonial-gradient-line {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg,
        var(--ht-fire-start), var(--ht-fire-end),
        var(--ht-wave-start), var(--ht-wave-end),
        var(--ht-dove-start), var(--ht-dove-end)
      );
      background-size: 300% 100%;
      animation: htLineShift 6s linear infinite;
      margin-bottom: 0;
    }
    @keyframes htLineShift {
      0%   { background-position: 0% 0; }
      100% { background-position: 300% 0; }
    }

    /* ── Entrance animation ───────────────────────────────── */
    .home-testimonial-reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .home-testimonial-reveal.home-testimonial-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Responsive ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .home-testimonial-btn-prev { left: 0; }
      .home-testimonial-btn-next { right: 0; }
      .home-testimonial-stat { padding: 0 20px; }
    }
    @media (max-width: 600px) {
      #home-testimonial-section { padding: 60px 0 70px; }
      .home-testimonial-stat { padding: 16px 18px; }
      .home-testimonial-stat + .home-testimonial-stat::before { display: none; }
      .home-testimonial-stats { flex-direction: row; flex-wrap: wrap; gap: 0; }
      .home-testimonial-btn-prev,
      .home-testimonial-btn-next { display: none; }
    }

/* <!-- Home What Our Clients Say End --> */

/* <!-- Home Limited Time Offer! start --> */
    :root {
      --hdo-bg-deep:        #0a0b10;
      --hdo-bg-card:        #11141f;
      --hdo-bg-card2:       #161a28;
      --hdo-accent-gold:    #f5c842;
      --hdo-accent-fire1:   #ff6a00;
      --hdo-accent-fire2:   #ee0979;
      --hdo-accent-blue1:   #4f46e5;
      --hdo-accent-blue2:   #7c3aed;
      --hdo-accent-teal1:   #06b6d4;
      --hdo-accent-teal2:   #10b981;
      --hdo-text-primary:   #f0f2fa;
      --hdo-text-muted:     #8b91aa;
      --hdo-text-link:      #a78bfa;
      --hdo-border:         rgba(255,255,255,0.08);
      --hdo-radius-lg:      20px;
      --hdo-radius-md:      12px;
      --hdo-radius-sm:      8px;
      --hdo-shadow-glow-gold: 0 0 40px rgba(245,200,66,0.18);
      --hdo-shadow-glow-fire: 0 0 60px rgba(238,9,121,0.22);
      --hdo-shadow-glow-blue: 0 0 60px rgba(79,70,229,0.25);
      --hdo-transition:     0.35s cubic-bezier(0.4,0,0.2,1);
    }

    /* ─── Section & Wrapper ─────────────────────────────── */
    #home-discount-offers-section {
      position: relative;
      overflow: hidden;
      background: var(--hdo-bg-deep);
      padding: 72px 0 80px;
      font-family: 'DM Sans', sans-serif;
      color: var(--hdo-text-primary);
    }

    #home-discount-offers-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .home-discount-offers-container {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }

    /* ─── Wavy SVG Dividers ─────────────────────────────── */
    .home-discount-offers-wave-top,
    .home-discount-offers-wave-bottom {
      position: absolute;
      left: 0; right: 0;
      width: 100%;
      z-index: 1;
      line-height: 0;
      pointer-events: none;
    }
    .home-discount-offers-wave-top  { top: -1px; }
    .home-discount-offers-wave-bottom { bottom: -1px; transform: rotate(180deg); }

    /* ─── Ambient Blobs (parallax targets) ──────────────── */
    .home-discount-offers-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.28;
      pointer-events: none;
      z-index: 1;
      will-change: transform;
      animation: hdo-blob-float 8s ease-in-out infinite alternate;
    }
    .home-discount-offers-blob--fire {
      width: 520px; height: 520px;
      background: radial-gradient(circle, #ff6a00 0%, #ee0979 55%, transparent 80%);
      top: -120px; left: -80px;
    }
    .home-discount-offers-blob--blue {
      width: 480px; height: 480px;
      background: radial-gradient(circle, #4f46e5 0%, #7c3aed 55%, transparent 80%);
      bottom: -80px; right: -60px;
      animation-delay: -4s;
    }
    .home-discount-offers-blob--teal {
      width: 300px; height: 300px;
      background: radial-gradient(circle, #06b6d4 0%, #10b981 55%, transparent 80%);
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      opacity: 0.14;
      animation-delay: -2s;
    }

    @keyframes hdo-blob-float {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(30px,20px) scale(1.06); }
    }

    /* ─── LEFT COLUMN ────────────────────────────────────── */
    .home-discount-offers-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .home-discount-offers-badge-launch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(245,200,66,0.1);
      border: 1px solid rgba(245,200,66,0.35);
      color: var(--hdo-accent-gold);
      font-family: 'Syne', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 99px;
      width: fit-content;
      animation: hdo-badge-pulse 2.5s ease-in-out infinite;
    }
    .home-discount-offers-badge-launch span.hdo-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--hdo-accent-gold);
      box-shadow: 0 0 8px var(--hdo-accent-gold);
      animation: hdo-dot-blink 1.2s ease-in-out infinite;
    }
    @keyframes hdo-badge-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(245,200,66,0.25); }
      50%      { box-shadow: 0 0 0 6px rgba(245,200,66,0); }
    }
    @keyframes hdo-dot-blink {
      0%,100% { opacity: 1; } 50% { opacity: 0.3; }
    }

    .home-discount-offers-headline {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .home-discount-offers-headline .hdo-fire-text {
      background: linear-gradient(90deg, #ff6a00, #ee0979, #f5c842);
      background-size: 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: hdo-fire-shift 3s linear infinite;
    }
    @keyframes hdo-fire-shift {
      0%   { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    .home-discount-offers-subtext {
      font-size: 15px;
      color: var(--hdo-text-muted);
      line-height: 1.7;
      max-width: 440px;
      margin: 0;
    }
    .home-discount-offers-subtext .hdo-highlight-link {
      color: var(--hdo-text-link);
      text-decoration: none;
      position: relative;
    }
    .home-discount-offers-subtext .hdo-highlight-link::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      height: 1px;
      background: var(--hdo-text-link);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--hdo-transition);
    }
    .home-discount-offers-subtext .hdo-highlight-link:hover::after { transform: scaleX(1); }

    /* Feature list */
    .home-discount-offers-features {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 4px 0;
    }
    .home-discount-offers-feature-item {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--hdo-text-primary);
      opacity: 0;
      transform: translateX(-18px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .home-discount-offers-feature-item.hdo-visible {
      opacity: 1;
      transform: translateX(0);
    }
    .home-discount-offers-feature-icon {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--hdo-border);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background var(--hdo-transition), border-color var(--hdo-transition);
    }
    .home-discount-offers-feature-item:hover .home-discount-offers-feature-icon {
      background: rgba(245,200,66,0.12);
      border-color: rgba(245,200,66,0.4);
    }
    .home-discount-offers-feature-icon svg { width: 18px; height: 18px; }

    /* CTA row */
    .home-discount-offers-cta-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .home-discount-offers-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--hdo-accent-gold) 0%, #f97316 100%);
      color: #0a0b10;
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 14px 28px;
      border-radius: 99px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform var(--hdo-transition), box-shadow var(--hdo-transition);
      box-shadow: 0 8px 32px rgba(245,200,66,0.35);
      will-change: transform;
    }
    .home-discount-offers-btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.15);
      transform: translateX(-110%) skewX(-15deg);
      transition: transform 0.55s ease;
    }
    .home-discount-offers-btn-primary:hover::before { transform: translateX(110%) skewX(-15deg); }
    .home-discount-offers-btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 16px 48px rgba(245,200,66,0.5);
    }
    .home-discount-offers-btn-primary:active { transform: translateY(0) scale(0.98); }

    .home-discount-offers-hurry {
      font-size: 13px;
      color: var(--hdo-text-muted);
    }
    .home-discount-offers-hurry strong { color: var(--hdo-accent-fire2); }

    /* ─── RIGHT COLUMN – Pricing Card ────────────────────── */
    .home-discount-offers-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .home-discount-offers-card {
      background: var(--hdo-bg-card);
      border: 1px solid var(--hdo-border);
      border-radius: var(--hdo-radius-lg);
      padding: 32px 28px 24px;
      width: 100%;
      max-width: 400px;
      position: relative;
      box-shadow: 0 32px 80px rgba(0,0,0,0.5), var(--hdo-shadow-glow-blue);
      transition: transform var(--hdo-transition), box-shadow var(--hdo-transition);
      opacity: 0;
      transform: translateY(30px);
    }
    .home-discount-offers-card.hdo-visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s, box-shadow var(--hdo-transition);
    }
    .home-discount-offers-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 48px 100px rgba(0,0,0,0.55), var(--hdo-shadow-glow-fire);
    }

    /* Badge 30% OFF */
    .home-discount-offers-badge-off {
      position: absolute;
      top: -16px; right: 20px;
      width: 62px; height: 62px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f5c842, #f97316);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      line-height: 1.1;
      color: #0a0b10;
      font-size: 11px;
      box-shadow: 0 8px 24px rgba(245,200,66,0.4);
      animation: hdo-badge-spin-float 3s ease-in-out infinite;
    }
    .home-discount-offers-badge-off .hdo-pct { font-size: 18px; }
    @keyframes hdo-badge-spin-float {
      0%,100% { transform: rotate(-4deg) translateY(0); }
      50%      { transform: rotate(4deg) translateY(-4px); }
    }

    /* Offer ends chip */
    .home-discount-offers-chip-ends {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: linear-gradient(90deg, rgba(238,9,121,0.22), rgba(255,106,0,0.18));
      border: 1px solid rgba(238,9,121,0.4);
      color: #ff6a7a;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 99px;
      margin-bottom: 14px;
      width: fit-content;
      animation: hdo-chip-glow 2s ease-in-out infinite;
    }
    .home-discount-offers-chip-ends svg { width: 14px; height: 14px; flex-shrink: 0; }
    @keyframes hdo-chip-glow {
      0%,100% { box-shadow: none; }
      50%      { box-shadow: 0 0 14px rgba(238,9,121,0.3); }
    }

    .home-discount-offers-price-old {
      font-size: 16px;
      color: var(--hdo-text-muted);
      text-decoration: line-through;
      margin-bottom: 4px;
    }

    .home-discount-offers-price-new {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.4rem, 5vw, 3.2rem);
      font-weight: 800;
      color: var(--hdo-text-primary);
      line-height: 1;
      margin-bottom: 6px;
    }

    .home-discount-offers-price-save {
      font-size: 13px;
      font-weight: 600;
      color: var(--hdo-accent-teal2);
      margin-bottom: 18px;
    }

    .home-discount-offers-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--hdo-border), transparent);
      margin: 0 -4px 18px;
    }

    .home-discount-offers-card-desc {
      font-size: 13.5px;
      color: var(--hdo-text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .home-discount-offers-card-desc strong { color: var(--hdo-text-primary); }

    /* Includes list */
    .home-discount-offers-includes {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 18px;
    }
    .home-discount-offers-include-item {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      color: var(--hdo-text-muted);
    }
    .home-discount-offers-include-item svg {
      width: 15px; height: 15px;
      flex-shrink: 0;
      color: var(--hdo-accent-teal2);
    }

    /* Seats filling chip */
    .home-discount-offers-seats-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 99px;
      padding: 6px 13px;
      font-size: 12px;
      color: var(--hdo-text-muted);
      margin-bottom: 18px;
    }
    .home-discount-offers-seats-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--hdo-accent-teal2);
      box-shadow: 0 0 8px var(--hdo-accent-teal2);
      animation: hdo-dot-blink 1.4s ease-in-out infinite;
    }

    /* Trust strip */
    .home-discount-offers-trust-strip {
      background: linear-gradient(135deg, rgba(79,70,229,0.2), rgba(6,182,212,0.15));
      border: 1px solid rgba(79,70,229,0.25);
      border-radius: var(--hdo-radius-md);
      padding: 12px 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .home-discount-offers-trust-item {
      font-size: 12px;
      color: var(--hdo-text-muted);
      line-height: 1.5;
    }
    .home-discount-offers-trust-item strong { color: var(--hdo-text-primary); }

    /* Live badge */
    .home-discount-offers-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: linear-gradient(90deg, rgba(16,185,129,0.2), rgba(6,182,212,0.15));
      border: 1px solid rgba(16,185,129,0.35);
      border-radius: 99px;
      padding: 5px 13px 5px 9px;
      font-size: 12px;
      font-weight: 600;
      color: var(--hdo-accent-teal2);
    }
    .home-discount-offers-live-avatar {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, #06b6d4, #10b981);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px;
      color: #fff;
      font-weight: 700;
    }

    /* ─── Floating Icon Badges ───────────────────────────── */
    .home-discount-offers-float-icon {
      position: absolute;
      border-radius: 14px;
      background: var(--hdo-bg-card2);
      border: 1px solid var(--hdo-border);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color: var(--hdo-text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      z-index: 3;
      white-space: nowrap;
      backdrop-filter: blur(10px);
    }
    .home-discount-offers-float-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

    .home-discount-offers-fi--star {
      top: 6%; left: -2%;
      animation: hdo-float-a 5s ease-in-out infinite;
    }
    .home-discount-offers-fi--clock {
      bottom: 14%; left: 2%;
      animation: hdo-float-b 6s ease-in-out infinite;
    }
    .home-discount-offers-fi--students {
      top: 8%; right: 5%;
      animation: hdo-float-c 5.5s ease-in-out infinite;
    }

    @keyframes hdo-float-a {
      0%,100% { transform: translateY(0) rotate(-2deg); }
      50%      { transform: translateY(-10px) rotate(2deg); }
    }
    @keyframes hdo-float-b {
      0%,100% { transform: translateY(0) rotate(1deg); }
      50%      { transform: translateY(-8px) rotate(-2deg); }
    }
    @keyframes hdo-float-c {
      0%,100% { transform: translateY(0) rotate(2deg); }
      50%      { transform: translateY(-12px) rotate(-1deg); }
    }

    /* ─── Responsive ────────────────────────────────────── */
    @media (max-width: 900px) {
      .home-discount-offers-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .home-discount-offers-right {
        order: -1;
      }
      .home-discount-offers-card {
        max-width: 480px;
      }
      .home-discount-offers-fi--star,
      .home-discount-offers-fi--clock,
      .home-discount-offers-fi--students {
        display: none;
      }
    }
    @media (max-width: 540px) {
      #home-discount-offers-section {
        padding: 56px 0 60px;
      }
      .home-discount-offers-cta-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .home-discount-offers-trust-strip {
        grid-template-columns: 1fr;
      }
    }

    /* ─── Scroll-reveal utility ──────────────────────────── */
    .hdo-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .hdo-reveal.hdo-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .hdo-reveal-delay-1 { transition-delay: 0.1s; }
    .hdo-reveal-delay-2 { transition-delay: 0.2s; }
    .hdo-reveal-delay-3 { transition-delay: 0.3s; }
    .hdo-reveal-delay-4 { transition-delay: 0.4s; }
    .hdo-reveal-delay-5 { transition-delay: 0.5s; }
/* <!-- Home Limited Time Offer! End --> */

/* <!-- Home Page FAQ Section start --> */
:root {
  --home-faq--bg:            #080c18;
  --home-faq--surface:       rgba(255,255,255,0.04);
  --home-faq--glass:         rgba(255,255,255,0.07);
  --home-faq--border:        rgba(255,255,255,0.10);
  --home-faq--border-hover:  rgba(255,255,255,0.22);
  --home-faq--text-primary:  #f0eff8;
  --home-faq--text-muted:    rgba(240,239,248,0.55);
  --home-faq--text-faint:    rgba(240,239,248,0.30);

  /* brand gradients */
  --home-faq--grad-fire:     linear-gradient(135deg,#ff6b1a 0%,#e8304e 55%,#ff1f8f 100%);
  --home-faq--grad-wave:     linear-gradient(135deg,#5b34f5 0%,#7b2ff7 50%,#b43fce 100%);
  --home-faq--grad-dove:     linear-gradient(135deg,#00d2c8 0%,#00c87a 40%,#48f984 80%,#b3fd6a 100%);
  --home-faq--grad-accent:   linear-gradient(90deg,#ff6b1a,#e8304e,#b43fce,#5b34f5,#00d2c8);

  /* glow colors */
  --home-faq--glow-fire:     rgba(232,48,78,0.38);
  --home-faq--glow-wave:     rgba(91,52,245,0.38);
  --home-faq--glow-dove:     rgba(0,210,200,0.28);

  --home-faq--radius-sm:     10px;
  --home-faq--radius-md:     18px;
  --home-faq--radius-lg:     28px;
  --home-faq--radius-xl:     40px;

  --home-faq--font-head:     'Syne', sans-serif;
  --home-faq--font-body:     'DM Sans', sans-serif;

  --home-faq--transition:    0.38s cubic-bezier(0.25,0.8,0.25,1);
  --home-faq--spring:        0.55s cubic-bezier(0.34,1.56,0.64,1);
}

/* ============================================================
   SECTION BASE
   ============================================================ */
#home-faq--section {
  position: relative;
  background: var(--home-faq--bg);
  overflow: hidden;
  padding: 80px 0 90px;
  font-family: var(--home-faq--font-body);
  color: var(--home-faq--text-primary);
}

/* ── particles canvas ── */
#home-faq--particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── ambient mesh blobs ── */
.home-faq--blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
  animation: home-faq--float-blob 14s ease-in-out infinite alternate;
}
.home-faq--blob--fire {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,107,26,0.25) 0%, rgba(232,48,78,0.12) 60%, transparent 80%);
  top: -120px; left: -80px;
  animation-delay: 0s; animation-duration: 18s;
}
.home-faq--blob--wave {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(91,52,245,0.22) 0%, rgba(180,63,206,0.12) 60%, transparent 80%);
  bottom: -120px; right: -80px;
  animation-delay: -8s; animation-duration: 22s;
}
.home-faq--blob--dove {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,210,200,0.18) 0%, rgba(0,200,122,0.08) 60%, transparent 80%);
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: -4s; animation-duration: 16s;
}

@keyframes home-faq--float-blob {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.08); }
  66%  { transform: translate(-20px,30px) scale(0.96); }
  100% { transform: translate(15px,10px) scale(1.04); }
}

/* ── wavy SVG dividers ── */
.home-faq--wave-top,
.home-faq--wave-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.home-faq--wave-top  { top: 0; }
.home-faq--wave-bottom { bottom: 0; }

/* ── grid noise texture overlay ── */
#home-faq--section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

/* ── custom cursor ── */
#home-faq--cursor {
  position: fixed;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--home-faq--grad-fire);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  mix-blend-mode: screen;
  opacity: 0;
}
#home-faq--cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,48,78,0.5);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease, opacity 0.2s;
  opacity: 0;
}

/* ============================================================
   LAYOUT CONTAINER
   ============================================================ */
.home-faq--container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* ── section badge ── */
.home-faq--badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 10px;
  border-radius: 999px;
  background: var(--home-faq--glass);
  border: 1px solid var(--home-faq--border);
  font-family: var(--home-faq--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--home-faq--text-muted);
  margin-bottom: 20px;
  animation: home-faq--badge-levitate 3.5s ease-in-out infinite;
  backdrop-filter: blur(10px);
}
.home-faq--badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--home-faq--grad-fire);
  box-shadow: 0 0 8px rgba(255,107,26,0.7);
  animation: home-faq--pulse-dot 1.8s ease-in-out infinite;
}
@keyframes home-faq--badge-levitate {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}
@keyframes home-faq--pulse-dot {
  0%,100% { box-shadow: 0 0 8px rgba(255,107,26,0.7); }
  50%      { box-shadow: 0 0 18px rgba(255,107,26,1); }
}

/* ── heading ── */
.home-faq--heading {
  font-family: var(--home-faq--font-head);
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--home-faq--text-primary);
}
.home-faq--heading-grad {
  background: var(--home-faq--grad-accent);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: home-faq--grad-shift 6s linear infinite;
}
@keyframes home-faq--grad-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.home-faq--subheading {
  font-family: var(--home-faq--font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 300;
  color: var(--home-faq--text-muted);
  margin: 0 0 48px;
  max-width: 420px;
  line-height: 1.65;
}

/* ============================================================
   MAIN GRID
   ============================================================ */
.home-faq--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
@media (max-width: 900px) {
  .home-faq--grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   LEFT — FAQ ACCORDION
   ============================================================ */
.home-faq--left { position: relative; }

.home-faq--wavy-left {
  position: absolute;
  left: -36px; top: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.home-faq--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ── FAQ item ── */
.home-faq--item {
  background: var(--home-faq--surface);
  border: 1px solid var(--home-faq--border);
  border-radius: var(--home-faq--radius-md);
  overflow: hidden;
  transition: border-color var(--home-faq--transition),
              box-shadow var(--home-faq--transition),
              transform var(--home-faq--transition);
  backdrop-filter: blur(14px);
  position: relative;
}
.home-faq--item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--home-faq--grad-fire);
  opacity: 0;
  transition: opacity var(--home-faq--transition);
  border-radius: inherit;
  z-index: 0;
}
.home-faq--item:hover {
  border-color: var(--home-faq--border-hover);
  box-shadow: 0 0 32px rgba(232,48,78,0.14), 0 8px 32px rgba(0,0,0,0.3);
  transform: translateX(4px);
}
.home-faq--item.home-faq--active {
  border-color: rgba(232,48,78,0.4);
  box-shadow: 0 0 48px rgba(232,48,78,0.18), 0 8px 40px rgba(0,0,0,0.35);
}

/* question button */
.home-faq--question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--home-faq--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--home-faq--text-primary);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  transition: color var(--home-faq--transition);
}
.home-faq--question:focus-visible {
  outline: 2px solid rgba(232,48,78,0.6);
  outline-offset: -2px;
}
.home-faq--question-num {
  font-family: var(--home-faq--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--home-faq--text-faint);
  flex-shrink: 0;
  transition: color var(--home-faq--transition);
}
.home-faq--active .home-faq--question-num { color: rgba(232,48,78,0.8); }
.home-faq--question-text { flex: 1; }
.home-faq--question-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--home-faq--border);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--home-faq--spring), background var(--home-faq--transition), border-color var(--home-faq--transition);
  background: var(--home-faq--glass);
}
.home-faq--active .home-faq--question-icon {
  transform: rotate(45deg);
  background: var(--home-faq--grad-fire);
  border-color: transparent;
}
.home-faq--question-icon svg { width: 14px; height: 14px; }

/* answer panel */
.home-faq--answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.48s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  z-index: 1;
}
.home-faq--answer-inner {
  padding: 0 22px 20px;
  font-family: var(--home-faq--font-body);
  font-size: 14.5px;
  font-weight: 300;
  color: var(--home-faq--text-muted);
  line-height: 1.7;
}
.home-faq--answer-inner a {
  color: rgba(255,107,26,0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,107,26,0.3);
  transition: border-color 0.2s, color 0.2s;
}
.home-faq--answer-inner a:hover {
  color: #ff6b1a;
  border-color: rgba(255,107,26,0.7);
}
.home-faq--divider {
  height: 1px;
  background: var(--home-faq--border);
  margin: 0 22px 16px;
  opacity: 0.6;
}

/* ── still have questions CTA ── */
.home-faq--cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--home-faq--glass);
  border: 1px solid var(--home-faq--border);
  border-radius: var(--home-faq--radius-md);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 1;
  transition: border-color var(--home-faq--transition), box-shadow var(--home-faq--transition);
}
.home-faq--cta:hover {
  border-color: rgba(0,210,200,0.35);
  box-shadow: 0 0 32px rgba(0,210,200,0.12);
}
.home-faq--cta-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--home-faq--grad-dove);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.home-faq--cta-text { flex: 1; }
.home-faq--cta-label {
  font-family: var(--home-faq--font-head);
  font-size: 14px; font-weight: 700;
  color: var(--home-faq--text-primary);
  margin: 0 0 2px;
}
.home-faq--cta-sub {
  font-family: var(--home-faq--font-body);
  font-size: 12.5px; font-weight: 300;
  color: var(--home-faq--text-muted);
  margin: 0;
}
.home-faq--cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--home-faq--grad-dove);
  border: none;
  border-radius: 999px;
  font-family: var(--home-faq--font-body);
  font-size: 13px; font-weight: 600;
  color: #020f10;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--home-faq--transition), transform var(--home-faq--transition);
  white-space: nowrap;
}
.home-faq--cta-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ============================================================
   RIGHT — DYNAMIC VISUAL PANEL
   ============================================================ */
.home-faq--right {
  position: sticky;
  top: 80px;
}

/* ── morphing blob card ── */
.home-faq--visual-wrap {
  position: relative;
  border-radius: var(--home-faq--radius-xl);
  overflow: hidden;
  background: var(--home-faq--surface);
  border: 1px solid var(--home-faq--border);
  padding: 28px 28px 20px;
  backdrop-filter: blur(18px);
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

/* morphing SVG background */
.home-faq--morph-bg {
  position: absolute;
  inset: -20%;
  width: 140%; height: 140%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.home-faq--morph-path {
  animation: home-faq--morph 12s ease-in-out infinite;
}
@keyframes home-faq--morph {
  0%,100% { d: path("M421.5,308Q396,366,341.5,398Q287,430,218,408.5Q149,387,109,333Q69,279,72,208Q75,137,133.5,97Q192,57,257.5,40.5Q323,24,378,65.5Q433,107,450.5,178Q468,249,421.5,308Z"); }
  25%      { d: path("M441,302.5Q408,365,349,397Q290,429,221.5,416Q153,403,105.5,352.5Q58,302,58.5,228Q59,154,111.5,101Q164,48,236,37Q308,26,370,67.5Q432,109,454,179Q476,249,441,302.5Z"); }
  50%      { d: path("M416,297.5Q383,345,333,381.5Q283,418,216.5,413.5Q150,409,103,356.5Q56,304,68,232Q80,160,130.5,111Q181,62,248.5,44Q316,26,375,68Q434,110,449.5,179.5Q465,249,416,297.5Z"); }
  75%      { d: path("M429,303Q398,356,345,389Q292,422,226,414Q160,406,113.5,353.5Q67,301,67,228Q67,155,118.5,105Q170,55,238,43Q306,31,366,70Q426,109,446,179.5Q466,250,429,303Z"); }
}

/* ── creature SVG cards (swiper) ── */
.home-faq--swiper {
  position: relative;
  z-index: 1;
  flex: 1;
}
.home-faq--slide {
  border-radius: var(--home-faq--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 320px;
  position: relative;
}

/* creature SVG art wrapper */
.home-faq--creature-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.home-faq--creature-svg {
  width: 240px;
  max-width: 90%;
  height: auto;
  filter: drop-shadow(0 0 40px var(--creature-glow, rgba(255,107,26,0.5)));
  animation: home-faq--creature-float 4s ease-in-out infinite;
}
@keyframes home-faq--creature-float {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33%      { transform: translateY(-10px) rotate(1.5deg); }
  66%      { transform: translateY(-5px) rotate(-1deg); }
}

/* creature label */
.home-faq--creature-label {
  text-align: center;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}
.home-faq--creature-name {
  font-family: var(--home-faq--font-head);
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--creature-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 4px;
}
.home-faq--creature-desc {
  font-family: var(--home-faq--font-body);
  font-size: 13px; font-weight: 300;
  color: var(--home-faq--text-muted);
  margin: 0;
}

/* swiper pagination */
.home-faq--pagination {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px;
  position: relative; z-index: 2;
}
.home-faq--pag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--home-faq--border-hover);
  transition: width 0.3s, background 0.3s;
  cursor: pointer;
}
.home-faq--pag-dot.home-faq--pag-active {
  width: 22px;
  border-radius: 3px;
  background: var(--home-faq--grad-fire);
}

/* ── stats strip ── */
.home-faq--stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--home-faq--border);
  border-radius: var(--home-faq--radius-md);
  overflow: hidden;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.home-faq--stat {
  flex: 1;
  padding: 14px 10px;
  text-align: center;
  border-right: 1px solid var(--home-faq--border);
  transition: background var(--home-faq--transition);
  cursor: default;
}
.home-faq--stat:last-child { border-right: none; }
.home-faq--stat:hover { background: var(--home-faq--glass); }
.home-faq--stat-num {
  font-family: var(--home-faq--font-head);
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 2px;
}
.home-faq--stat-num--fire  { background: var(--home-faq--grad-fire);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-faq--stat-num--wave  { background: var(--home-faq--grad-wave);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-faq--stat-num--dove  { background: var(--home-faq--grad-dove);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-faq--stat-label {
  font-family: var(--home-faq--font-body);
  font-size: 11px; font-weight: 400;
  color: var(--home-faq--text-faint);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

/* ── float badges ── */
.home-faq--float-badge {
  position: absolute;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(8,12,24,0.85);
  border: 1px solid var(--home-faq--border-hover);
  backdrop-filter: blur(14px);
  font-family: var(--home-faq--font-body);
  font-size: 12px; font-weight: 500;
  color: var(--home-faq--text-primary);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.home-faq--float-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
#home-faq--badge-1 {
  top: 22px; right: -14px;
  animation: home-faq--badge-levitate 4s ease-in-out infinite;
}
#home-faq--badge-2 {
  bottom: 60px; left: -14px;
  animation: home-faq--badge-levitate 5s ease-in-out infinite 1.5s;
}
#home-faq--badge-3 {
  top: 50%; right: -14px;
  transform: translateY(-50%);
  animation: home-faq--badge-levitate 3.8s ease-in-out infinite 0.8s;
}
@media (max-width: 900px) {
  .home-faq--float-badge { display: none; }
  .home-faq--right { position: static; }
}

/* ── shimmer gradient animation ── */
.home-faq--shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: home-faq--shimmer-anim 3s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes home-faq--shimmer-anim {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ============================================================
   PARALLAX LAYER
   ============================================================ */
.home-faq--parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.home-faq--parallax-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.18;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.home-faq--reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.home-faq--reveal.home-faq--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 600px) {
  .home-faq--stats { flex-direction: column; }
  .home-faq--stat { border-right: none; border-bottom: 1px solid var(--home-faq--border); }
  .home-faq--stat:last-child { border-bottom: none; }
  .home-faq--question { font-size: 14px; padding: 16px 16px; }
  .home-faq--answer-inner { padding: 0 16px 16px; font-size: 13.5px; }
  .home-faq--cta { flex-direction: column; text-align: center; }
}
/* <!-- Home Page FAQ Section End --> */
    
/* <!-- Home Client Video Review End --> */

     :root {
      --hvr-fire-a: #ff4e1a;
      --hvr-fire-b: #ff2d78;
      --hvr-fire-c: #ffd166;
      --hvr-wave-a: #2563eb;
      --hvr-wave-b: #7c3aed;
      --hvr-wave-c: #06b6d4;
      --hvr-dove-a: #10b981;
      --hvr-dove-b: #14b8a6;
      --hvr-dove-c: #a78bfa;
      --hvr-card-bg: #ffffff;
      --hvr-card-radius: 22px;
      --hvr-shadow: 0 20px 60px rgba(0,0,0,.12);
      --hvr-text-dark: #0f0d1a;
      --hvr-text-mid: #4a4760;
      --hvr-star-on: #f59e0b;
      --hvr-star-off: #e2e2e2;
      --hvr-badge-radius: 100px;
      --hvr-section-bg: #f4f2ff;
      --font-head: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }

    /* ── Section Shell ─────────────────────────────────────────── */
    #home-video-reviews-section {
      position: relative;
      padding: 80px 24px 100px;
      overflow: hidden;
      /* background: var(--hvr-section-bg); */
      background:#080c18  ;
      font-family: var(--font-body);
    }

    /* Particles canvas layer */
    #home-video-reviews-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── Wavy SVG top & bottom ─────────────────────────────────── */
    .home-video-reviews-wave {
      position: absolute;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      z-index: 1;
    }
    .home-video-reviews-wave--top { top: -2px; }
    .home-video-reviews-wave--bottom { bottom: -2px; transform: rotate(180deg); }
    .home-video-reviews-wave svg { display: block; width: 100%; height: 60px; }

    /* ── Inner content wrapper ─────────────────────────────────── */
    #home-video-reviews-inner {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ── Floating decorative badges ────────────────────────────── */
    .home-video-reviews-float-badge {
      position: absolute;
      z-index: 3;
      pointer-events: none;
      animation: hvr-float 6s ease-in-out infinite;
      opacity: .85;
    }
    .home-video-reviews-float-badge:nth-child(1){ top: 60px; left: 3%; animation-delay: 0s; }
    .home-video-reviews-float-badge:nth-child(2){ top: 30px; right: 5%; animation-delay: 1.5s; }
    .home-video-reviews-float-badge:nth-child(3){ bottom: 120px; left: 6%; animation-delay: 3s; }
    .home-video-reviews-float-badge:nth-child(4){ bottom: 80px; right: 4%; animation-delay: 1s; }

    @keyframes hvr-float {
      0%,100%{ transform: translateY(0) rotate(-4deg); }
      50%     { transform: translateY(-14px) rotate(4deg); }
    }

    /* ── Heading block ─────────────────────────────────────────── */
    .home-video-reviews-heading-wrap {
      text-align: center;
      margin-bottom: 52px;
    }
    .home-video-reviews-heading-wrap h2 {
      font-family: var(--font-head);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      color: var(--hvr-text-dark);
      line-height: 1.15;
      margin: 0 0 14px;
    }
    .home-video-reviews-heading-wrap h2 .hvr-accent {
      background: linear-gradient(90deg, var(--hvr-fire-a), var(--hvr-fire-b));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .home-video-reviews-subtitle {
      font-size: 1.05rem;
      color: var(--hvr-text-mid);
      margin: 0;
      line-height: 1.6;
    }
    .home-video-reviews-subtitle strong {
      color: var(--hvr-fire-a);
    }
    .home-video-reviews-stars-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: 10px;
    }
    .home-video-reviews-stars-row svg { width: 20px; height: 20px; }

    /* ── Swiper ────────────────────────────────────────────────── */
    #home-video-reviews-swiper {
      width: 100%;
      padding-bottom: 56px !important;
    }
    .home-video-reviews-swiper-slide {
      height: auto;
    }

    /* ── Card ──────────────────────────────────────────────────── */
    .home-video-reviews-card {
      background: var(--hvr-card-bg);
      border-radius: var(--hvr-card-radius);
      overflow: hidden;
      box-shadow: var(--hvr-shadow);
      transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
      cursor: default;
      display: flex;
      flex-direction: column;
      border: 2px solid transparent;
      background-clip: padding-box;
      position: relative;
    }
    .home-video-reviews-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--hvr-card-radius) + 2px);
      z-index: -1;
      opacity: 0;
      transition: opacity .35s;
    }
    .home-video-reviews-card:hover { transform: translateY(-8px); box-shadow: 0 32px 80px rgba(0,0,0,.18); }
    .home-video-reviews-card:hover::before { opacity: 1; }

    /* per-card gradient borders */
    .home-video-reviews-card--fire::before {
      background: linear-gradient(135deg, var(--hvr-fire-a), var(--hvr-fire-b), var(--hvr-fire-c));
    }
    .home-video-reviews-card--wave::before {
      background: linear-gradient(135deg, var(--hvr-wave-a), var(--hvr-wave-b), var(--hvr-wave-c));
    }
    .home-video-reviews-card--dove::before {
      background: linear-gradient(135deg, var(--hvr-dove-a), var(--hvr-dove-b), var(--hvr-dove-c));
    }

    /* ── Video thumb ───────────────────────────────────────────── */
    .home-video-reviews-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 16/10;
      overflow: hidden;
      background: #111;
    }
    .home-video-reviews-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
      filter: brightness(.9);
    }
    .home-video-reviews-card:hover .home-video-reviews-thumb img { transform: scale(1.05); filter: brightness(1); }

    /* gradient overlay on thumb */
    .home-video-reviews-thumb-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
    }

    /* play button */
    .home-video-reviews-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) scale(1);
      width: 60px; height: 60px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform .3s cubic-bezier(.22,.68,0,1.4), box-shadow .3s;
      z-index: 2;
    }
    .home-video-reviews-card--fire .home-video-reviews-play {
      background: linear-gradient(135deg, var(--hvr-fire-a), var(--hvr-fire-b));
      box-shadow: 0 0 0 8px rgba(255,78,26,.18);
    }
    .home-video-reviews-card--wave .home-video-reviews-play {
      background: linear-gradient(135deg, var(--hvr-wave-a), var(--hvr-wave-b));
      box-shadow: 0 0 0 8px rgba(37,99,235,.18);
    }
    .home-video-reviews-card--dove .home-video-reviews-play {
      background: linear-gradient(135deg, var(--hvr-dove-a), var(--hvr-dove-b));
      box-shadow: 0 0 0 8px rgba(16,185,129,.18);
    }
    .home-video-reviews-play:hover { transform: translate(-50%,-50%) scale(1.15); }
    .home-video-reviews-play svg { width: 22px; height: 22px; margin-left: 4px; }

    /* edu logo badge on thumb */
    .home-video-reviews-edu-badge {
      position: absolute;
      top: 14px; left: 14px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(6px);
      border-radius: 10px;
      padding: 5px 10px;
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-head);
      font-size: .75rem;
      font-weight: 700;
      color: var(--hvr-text-dark);
      z-index: 2;
    }
    .home-video-reviews-edu-badge svg { width: 18px; height: 18px; }

    /* ── Card body ─────────────────────────────────────────────── */
    .home-video-reviews-card-body {
      padding: 22px 24px 26px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    .home-video-reviews-identity {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .home-video-reviews-identity-name {
      font-family: var(--font-head);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--hvr-text-dark);
    }
    .home-video-reviews-country-badge {
      font-family: var(--font-body);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: var(--hvr-badge-radius);
      color: #fff;
    }
    .hvr-badge--fire { background: linear-gradient(90deg, var(--hvr-fire-a), var(--hvr-fire-b)); }
    .hvr-badge--wave { background: linear-gradient(90deg, var(--hvr-wave-a), var(--hvr-wave-b)); }
    .hvr-badge--dove { background: linear-gradient(90deg, var(--hvr-dove-a), var(--hvr-dove-b)); }

    .home-video-reviews-quote {
      font-size: .94rem;
      color: var(--hvr-text-mid);
      line-height: 1.65;
      font-style: italic;
      margin: 0;
    }
    .home-video-reviews-rating {
      display: flex;
      gap: 3px;
      margin-top: 4px;
    }
    .home-video-reviews-rating svg { width: 18px; height: 18px; }

    /* ── Swiper pagination / nav ───────────────────────────────── */
    #home-video-reviews-swiper .swiper-pagination-bullet {
      background: var(--hvr-fire-a);
      opacity: .4;
      width: 8px; height: 8px;
      transition: width .3s, opacity .3s;
    }
    #home-video-reviews-swiper .swiper-pagination-bullet-active {
      opacity: 1; width: 24px; border-radius: 4px;
    }
    #home-video-reviews-swiper .swiper-button-next,
    #home-video-reviews-swiper .swiper-button-prev {
      color: var(--hvr-fire-a);
      width: 40px; height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 16px rgba(0,0,0,.12);
    }
    #home-video-reviews-swiper .swiper-button-next::after,
    #home-video-reviews-swiper .swiper-button-prev::after { font-size: 14px; font-weight: 700; }

    /* ── CTA block ─────────────────────────────────────────────── */
    #home-video-reviews-cta {
      text-align: center;
      margin-top: 54px;
      position: relative;
      z-index: 2;
    }
    #home-video-reviews-cta p {
      font-size: 1.05rem;
      color: var(--hvr-text-mid);
      margin: 0 0 22px;
    }
    .home-video-reviews-cta-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center;
      align-items: center;
    }
    .home-video-reviews-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      border-radius: 100px;
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform .28s cubic-bezier(.22,.68,0,1.3), box-shadow .28s;
      letter-spacing: .02em;
      position: relative;
      overflow: hidden;
    }
    .home-video-reviews-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.15);
      opacity: 0;
      transition: opacity .2s;
    }
    .home-video-reviews-btn:hover { transform: translateY(-3px) scale(1.03); }
    .home-video-reviews-btn:hover::after { opacity: 1; }
    .home-video-reviews-btn:active { transform: scale(.97); }

    .home-video-reviews-btn--primary {
      background: linear-gradient(135deg, var(--hvr-fire-a) 0%, var(--hvr-fire-b) 100%);
      color: #fff;
      box-shadow: 0 8px 28px rgba(255,78,26,.35);
    }
    .home-video-reviews-btn--primary:hover { box-shadow: 0 14px 36px rgba(255,45,120,.45); }

    .home-video-reviews-btn--secondary {
      background: #fff;
      color: var(--hvr-fire-a);
      border: 2px solid var(--hvr-fire-a);
      box-shadow: 0 4px 14px rgba(0,0,0,.07);
    }
    .home-video-reviews-btn--secondary:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }

    /* trust badges row */
    .home-video-reviews-trust-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 32px;
    }
    .home-video-reviews-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .88rem;
      color: var(--hvr-text-mid);
      font-weight: 500;
    }
    .home-video-reviews-trust-item svg { flex-shrink: 0; }

    /* ── Video modal ───────────────────────────────────────────── */
    #home-video-reviews-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,.8);
      backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #home-video-reviews-modal.active { display: flex; animation: hvr-modal-in .3s ease; }
    @keyframes hvr-modal-in { from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
    .home-video-reviews-modal-inner {
      position: relative;
      width: 100%;
      max-width: 800px;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,.5);
    }
    .home-video-reviews-modal-inner iframe {
      width: 100%;
      aspect-ratio: 16/9;
      display: block;
      border: none;
    }
    #home-video-reviews-modal-close {
      position: absolute;
      top: -44px; right: 0;
      background: none;
      border: none;
      color: #fff;
      font-size: 2rem;
      cursor: pointer;
      line-height: 1;
      font-family: var(--font-head);
      transition: transform .2s;
    }
    #home-video-reviews-modal-close:hover { transform: rotate(90deg) scale(1.2); }

    /* ── Scroll-reveal ─────────────────────────────────────────── */
    .hvr-reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.22,.68,0,1);
    }
    .hvr-reveal.hvr-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .hvr-reveal-delay-1 { transition-delay: .1s; }
    .hvr-reveal-delay-2 { transition-delay: .22s; }
    .hvr-reveal-delay-3 { transition-delay: .34s; }

    /* ── Responsive ────────────────────────────────────────────── */
    @media(max-width: 900px) {
      #home-video-reviews-section { padding: 60px 16px 80px; }
      .home-video-reviews-float-badge { display: none; }
    }
    @media(max-width: 600px) {
      .home-video-reviews-heading-wrap h2 { font-size: 1.6rem; }
      .home-video-reviews-btn { padding: 12px 22px; font-size: .9rem; }
    }
/* <!-- Home Client Video Review End --> */






/* Seo page pricing section start */
:root {
  --seo-fire-from: #ff4500;
  --seo-fire-mid: #e91e8c;
  --seo-fire-to: #ff6b35;
  --seo-wave-from: #1a1aff;
  --seo-wave-mid: #7c3aed;
  --seo-wave-to: #06b6d4;
  --seo-dove-from: #0d9488;
  --seo-dove-mid: #16a34a;
  --seo-dove-to: #84cc16;
  --seo-bg-dark: #080c18;
  --seo-bg-card: rgba(255,255,255,0.03);
  --seo-bg-card-hover: rgba(255,255,255,0.07);
  --seo-border: rgba(255,255,255,0.08);
  --seo-border-hover: rgba(255,255,255,0.2);
  --seo-text-primary: #f0f4ff;
  --seo-text-muted: rgba(200,210,240,0.65);
  --seo-text-subtle: rgba(160,175,210,0.45);
  --seo-font-head: 'Syne', sans-serif;
  --seo-font-body: 'DM Sans', sans-serif;
  --seo-radius-sm: 10px;
  --seo-radius-md: 18px;
  --seo-radius-lg: 28px;
  --seo-radius-xl: 40px;
  --seo-shadow-fire: 0 0 40px rgba(255,69,0,0.15), 0 0 80px rgba(233,30,140,0.08);
  --seo-shadow-wave: 0 0 40px rgba(26,26,255,0.15), 0 0 80px rgba(124,58,237,0.08);
  --seo-shadow-dove: 0 0 40px rgba(13,148,136,0.15), 0 0 80px rgba(22,163,74,0.08);
  --seo-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--seo-font-body); }

/* ===== TYPOGRAPHY ===== */
.seo-pricing-page {
  font-family: var(--seo-font-body);
  color: var(--seo-text-primary);
  background: var(--seo-bg-dark);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* ===== GLOBAL WRAPPER ===== */
.seo-pricing-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== PARTICLE CANVAS ===== */
#seo-particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== BREADCRUMB ===== */
.seo-breadcrumb-section {
  position: relative;
  z-index: 10;
  padding: 18px 0 12px;
}

.seo-breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--seo-font-body);
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}

.seo-breadcrumb-inner a {
  color: var(--seo-text-muted);
  transition: color 0.25s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.seo-breadcrumb-inner a:hover { color: #fff; }

.seo-breadcrumb-inner .seo-bc-sep {
  color: var(--seo-text-subtle);
  font-size: 11px;
}

.seo-breadcrumb-inner .seo-bc-current {
  background: linear-gradient(90deg, var(--seo-fire-from), var(--seo-fire-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

.seo-breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--seo-border);
  border-radius: 50px;
  padding: 8px 20px;
  backdrop-filter: blur(12px);
  width: fit-content;
}

/* ===== HERO SECTION ===== */
.seo-pricing-hero {
  position: relative;
  z-index: 5;
  padding: 60px 0 40px;
  text-align: center;
  overflow: hidden;
}

.seo-pricing-hero::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(233,30,140,0.12) 0%, rgba(124,58,237,0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.seo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255,69,0,0.15), rgba(233,30,140,0.12));
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: 50px;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ff8c55;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
}

.seo-hero-badge .seo-pulse-dot {
  width: 7px; height: 7px;
  background: #ff4500;
  border-radius: 50%;
  animation: seo-pulse 2s ease-in-out infinite;
}

@keyframes seo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,69,0,0.4); }
  50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 0 6px rgba(255,69,0,0); }
}

.seo-hero-h1 {
  font-family: var(--seo-font-head);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.seo-hero-h1 .seo-grad-fire {
  background: linear-gradient(135deg, var(--seo-fire-from) 0%, var(--seo-fire-mid) 50%, #ff9a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-hero-h1 .seo-grad-wave {
  background: linear-gradient(135deg, var(--seo-wave-from) 0%, var(--seo-wave-mid) 50%, var(--seo-wave-to) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-hero-sub {
  font-size: 18px;
  color: var(--seo-text-muted);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ===== STATS STRIP ===== */
.seo-stats-strip {
  position: relative;
  z-index: 5;
  padding: 0 0 50px;
}

.seo-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.seo-stat-card {
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-md);
  padding: 24px 20px;
  text-align: center;
  backdrop-filter: blur(16px);
  transition: var(--seo-transition);
  position: relative;
  overflow: hidden;
}

.seo-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--seo-radius-md);
  opacity: 0;
  transition: opacity 0.4s;
}

.seo-stat-card.seo-stat-fire::before { background: linear-gradient(135deg, rgba(255,69,0,0.08), rgba(233,30,140,0.05)); }
.seo-stat-card.seo-stat-wave::before { background: linear-gradient(135deg, rgba(26,26,255,0.08), rgba(124,58,237,0.05)); }
.seo-stat-card.seo-stat-dove::before { background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(22,163,74,0.05)); }

.seo-stat-card:hover { border-color: var(--seo-border-hover); transform: translateY(-4px); }
.seo-stat-card:hover::before { opacity: 1; }

.seo-stat-num {
  font-family: var(--seo-font-head);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}

.seo-stat-fire .seo-stat-num {
  background: linear-gradient(135deg, var(--seo-fire-from), var(--seo-fire-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-stat-wave .seo-stat-num {
  background: linear-gradient(135deg, #7c3aed, var(--seo-wave-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-stat-dove .seo-stat-num {
  background: linear-gradient(135deg, var(--seo-dove-from), var(--seo-dove-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-stat-label {
  font-size: 13px;
  color: var(--seo-text-muted);
  font-weight: 500;
}

/* ===== WAVY SVG DIVIDERS ===== */
.seo-wave-divider { line-height: 0; position: relative; z-index: 4; }
.seo-wave-divider svg { display: block; width: 100%; }

/* ===== BILLING TABS ===== */
.seo-billing-tabs-section {
  position: relative;
  z-index: 5;
  padding: 20px 0 14px;
}

.seo-billing-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.seo-billing-tabs {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--seo-border);
  border-radius: 50px;
  padding: 5px;
  gap: 4px;
  backdrop-filter: blur(20px);
}

.seo-billing-tab {
  font-family: var(--seo-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--seo-text-muted);
  padding: 10px 26px;
  border-radius: 50px;
  transition: var(--seo-transition);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-billing-tab:hover { color: #fff; }

.seo-billing-tab.seo-tab-active {
  background: linear-gradient(135deg, var(--seo-fire-from), var(--seo-fire-mid));
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,69,0,0.35);
}

.seo-tab-save-badge {
  background: rgba(255,255,255,0.22);
  border-radius: 50px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.seo-billing-hint {
  text-align: center;
  font-size: 13px;
  color: var(--seo-text-muted);
  padding-bottom: 4px;
}

/* ===== PLANS GRID SECTION ===== */
.seo-plans-section {
  position: relative;
  z-index: 5;
  padding: 20px 0 60px;
}

.seo-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

/* ===== PLAN CARD ===== */
.seo-plan-card {
  border-radius: var(--seo-radius-lg);
  padding: 2px;
  position: relative;
  transition: var(--seo-transition);
}

.seo-plan-card-inner {
  background: rgba(12,16,32,0.92);
  border-radius: calc(var(--seo-radius-lg) - 2px);
  padding: 36px 30px 32px;
  height: 100%;
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.seo-plan-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--seo-radius-lg) - 2px);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

/* Fire – Basic */
.seo-plan-fire {
  background: linear-gradient(135deg, rgba(255,69,0,0.7), rgba(233,30,140,0.7), rgba(255,107,53,0.5));
}
.seo-plan-fire .seo-plan-card-inner::after {
  background: radial-gradient(ellipse at 30% 0%, rgba(255,69,0,0.1) 0%, transparent 60%);
}
.seo-plan-fire:hover .seo-plan-card-inner::after { opacity: 1; }

/* Wave – Intermediate (POPULAR) */
.seo-plan-wave {
  background: linear-gradient(135deg, rgba(26,26,255,0.8), rgba(124,58,237,0.8), rgba(6,182,212,0.6));
}
.seo-plan-wave .seo-plan-card-inner::after {
  background: radial-gradient(ellipse at 30% 0%, rgba(124,58,237,0.15) 0%, transparent 60%);
}
.seo-plan-wave:hover .seo-plan-card-inner::after { opacity: 1; }

/* Dove – Advanced */
.seo-plan-dove {
  background: linear-gradient(135deg, rgba(13,148,136,0.7), rgba(22,163,74,0.7), rgba(132,204,22,0.5));
}
.seo-plan-dove .seo-plan-card-inner::after {
  background: radial-gradient(ellipse at 30% 0%, rgba(13,148,136,0.12) 0%, transparent 60%);
}
.seo-plan-dove:hover .seo-plan-card-inner::after { opacity: 1; }

.seo-plan-card:hover { transform: translateY(-8px); }
.seo-plan-wave { transform: translateY(-12px); }
.seo-plan-wave:hover { transform: translateY(-20px); }

/* Popular badge */
.seo-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--seo-wave-from), var(--seo-wave-mid), var(--seo-wave-to));
  color: #fff;
  font-family: var(--seo-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 20px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(124,58,237,0.5);
}

/* Plan top icon */
.seo-plan-icon-wrap {
  width: 62px; height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.seo-plan-fire .seo-plan-icon-wrap {
  background: linear-gradient(135deg, rgba(255,69,0,0.25), rgba(233,30,140,0.2));
  border: 1px solid rgba(255,107,53,0.4);
}
.seo-plan-wave .seo-plan-icon-wrap {
  background: linear-gradient(135deg, rgba(26,26,255,0.25), rgba(124,58,237,0.2));
  border: 1px solid rgba(124,58,237,0.4);
}
.seo-plan-dove .seo-plan-icon-wrap {
  background: linear-gradient(135deg, rgba(13,148,136,0.25), rgba(22,163,74,0.2));
  border: 1px solid rgba(13,148,136,0.4);
}

.seo-plan-icon-wrap svg { width: 30px; height: 30px; }

.seo-plan-tier-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.seo-plan-fire .seo-plan-tier-label { color: #ff8c55; }
.seo-plan-wave .seo-plan-tier-label { color: #a78bfa; }
.seo-plan-dove .seo-plan-tier-label { color: #34d399; }

.seo-plan-name {
  font-family: var(--seo-font-head);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.1;
}

.seo-plan-tagline {
  font-size: 14px;
  color: var(--seo-text-muted);
  margin-bottom: 28px;
  line-height: 1.55;
}

/* Pricing display */
.seo-plan-price-block {
  margin-bottom: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--seo-border);
}

.seo-price-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}

.seo-price-currency {
  font-family: var(--seo-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--seo-text-muted);
  line-height: 1.3;
  padding-bottom: 6px;
}

.seo-price-amount {
  font-family: var(--seo-font-head);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  transition: var(--seo-transition);
}

.seo-plan-fire .seo-price-amount {
  background: linear-gradient(135deg, #fff 40%, rgba(255,107,53,0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seo-plan-wave .seo-price-amount {
  background: linear-gradient(135deg, #fff 40%, rgba(167,139,250,0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seo-plan-dove .seo-price-amount {
  background: linear-gradient(135deg, #fff 40%, rgba(52,211,153,0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-price-period {
  font-size: 14px;
  color: var(--seo-text-muted);
  font-weight: 500;
  padding-bottom: 10px;
}

.seo-price-total-note {
  font-size: 12px;
  color: var(--seo-text-subtle);
}

.seo-price-saving {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50px;
  padding: 3px 12px;
  margin-top: 8px;
}
.seo-plan-fire .seo-price-saving { background: rgba(255,69,0,0.18); color: #ff8c55; }
.seo-plan-wave .seo-price-saving { background: rgba(124,58,237,0.18); color: #a78bfa; }
.seo-plan-dove .seo-price-saving { background: rgba(13,148,136,0.18); color: #34d399; }

/* Features list */
.seo-features-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 32px;
  flex: 1;
}

.seo-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: rgba(210,225,255,0.82);
  line-height: 1.4;
}

.seo-feature-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.seo-plan-fire .seo-feature-check { background: rgba(255,69,0,0.2); }
.seo-plan-wave .seo-feature-check { background: rgba(124,58,237,0.2); }
.seo-plan-dove .seo-feature-check { background: rgba(13,148,136,0.2); }

.seo-feature-check svg { width: 11px; height: 11px; }

.seo-plan-fire .seo-feature-check svg path { stroke: #ff8c55; }
.seo-plan-wave .seo-feature-check svg path { stroke: #a78bfa; }
.seo-plan-dove .seo-feature-check svg path { stroke: #34d399; }

.seo-feature-name { font-weight: 500; }
.seo-feature-sub { display: block; font-size: 12px; color: var(--seo-text-subtle); margin-top: 1px; }

/* CTA button */
.seo-plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border-radius: var(--seo-radius-md);
  font-family: var(--seo-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: var(--seo-transition);
  cursor: pointer;
  text-align: center;
  border: none;
}

.seo-plan-fire .seo-plan-cta {
  background: linear-gradient(135deg, var(--seo-fire-from), var(--seo-fire-mid));
  color: #fff;
  box-shadow: 0 6px 28px rgba(255,69,0,0.4);
}
.seo-plan-fire .seo-plan-cta:hover {
  box-shadow: 0 10px 40px rgba(255,69,0,0.6);
  transform: translateY(-2px);
}

.seo-plan-wave .seo-plan-cta {
  background: linear-gradient(135deg, var(--seo-wave-from), var(--seo-wave-mid), var(--seo-wave-to));
  color: #fff;
  box-shadow: 0 6px 28px rgba(124,58,237,0.45);
}
.seo-plan-wave .seo-plan-cta:hover {
  box-shadow: 0 10px 40px rgba(124,58,237,0.65);
  transform: translateY(-2px);
}

.seo-plan-dove .seo-plan-cta {
  background: linear-gradient(135deg, var(--seo-dove-from), var(--seo-dove-mid), var(--seo-dove-to));
  color: #fff;
  box-shadow: 0 6px 28px rgba(13,148,136,0.4);
}
.seo-plan-dove .seo-plan-cta:hover {
  box-shadow: 0 10px 40px rgba(13,148,136,0.6);
  transform: translateY(-2px);
}

/* ===== FEATURES COMPARISON STRIP ===== */
.seo-compare-section {
  position: relative;
  z-index: 5;
  padding: 60px 0;
}

.seo-section-head {
  text-align: center;
  margin-bottom: 50px;
}

.seo-section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seo-text-subtle);
  margin-bottom: 12px;
}

.seo-section-h2 {
  font-family: var(--seo-font-head);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.seo-section-sub {
  font-size: 16px;
  color: var(--seo-text-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* Compare table */
.seo-compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--seo-radius-lg);
  border: 1px solid var(--seo-border);
}

.seo-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(10,14,30,0.85);
  backdrop-filter: blur(20px);
}

.seo-compare-table th {
  padding: 22px 20px;
  font-family: var(--seo-font-head);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid var(--seo-border);
  white-space: nowrap;
}

.seo-compare-table th:first-child { text-align: left; color: var(--seo-text-muted); font-size: 13px; }

.seo-th-fire { color: #ff8c55; }
.seo-th-wave { color: #a78bfa; }
.seo-th-dove { color: #34d399; }

.seo-compare-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--seo-text-muted);
}

.seo-compare-table td:first-child { text-align: left; color: var(--seo-text-primary); font-weight: 500; }

.seo-compare-table tr:last-child td { border-bottom: none; }
.seo-compare-table tr:hover td { background: rgba(255,255,255,0.02); }

.seo-check-yes { color: #34d399; font-size: 17px; }
.seo-check-no { color: rgba(255,255,255,0.18); font-size: 17px; }
.seo-check-partial { color: #f59e0b; font-size: 13px; font-weight: 600; }

/* ===== TOPICS SWIPER ===== */
.seo-topics-section {
  position: relative;
  z-index: 5;
  padding: 60px 0;
  overflow: hidden;
}

.seo-topics-swiper-wrap {
  padding: 16px 8px 30px;
}

.seo-topic-card {
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-md);
  padding: 24px 20px;
  backdrop-filter: blur(16px);
  transition: var(--seo-transition);
  height: auto;
}

.seo-topic-card:hover {
  border-color: var(--seo-border-hover);
  transform: translateY(-4px);
  background: var(--seo-bg-card-hover);
}

.seo-topic-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}

.seo-topic-name {
  font-family: var(--seo-font-head);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.seo-topic-desc {
  font-size: 13px;
  color: var(--seo-text-muted);
  line-height: 1.55;
}

.seo-topic-badge {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 50px;
}

/* ===== MEDIA RICH SECTION ===== */
.seo-media-section {
  position: relative;
  z-index: 5;
  padding: 60px 0;
}

.seo-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.seo-media-card {
  border-radius: var(--seo-radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  transition: var(--seo-transition);
  cursor: pointer;
}

.seo-media-card:hover { transform: scale(1.015); }

.seo-media-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.seo-media-card-1::before { background: linear-gradient(135deg, rgba(255,69,0,0.9), rgba(233,30,140,0.8)); }
.seo-media-card-2::before { background: linear-gradient(135deg, rgba(26,26,255,0.9), rgba(6,182,212,0.7)); }
.seo-media-card-3::before { background: linear-gradient(135deg, rgba(124,58,237,0.9), rgba(233,30,140,0.7)); }
.seo-media-card-4::before { background: linear-gradient(135deg, rgba(13,148,136,0.9), rgba(132,204,22,0.7)); }

.seo-media-card-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
}

.seo-media-content { position: relative; z-index: 2; }

.seo-media-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}

.seo-media-title {
  font-family: var(--seo-font-head);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.seo-media-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ===== FLOATING ICONS / DECORATIVE ===== */
.seo-float-icons {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.seo-float-icon {
  position: absolute;
  opacity: 0.06;
  animation: seo-float linear infinite;
}

@keyframes seo-float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.06; }
  50% { transform: translateY(-30px) rotate(10deg); opacity: 0.1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.06; }
}

/* ===== CUSTOM CTA SECTION ===== */
.seo-custom-section {
  position: relative;
  z-index: 5;
  padding: 60px 0 80px;
}

.seo-custom-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-xl);
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.seo-custom-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.seo-custom-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,69,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.seo-custom-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-custom-h2 {
  font-family: var(--seo-font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.seo-custom-h2 span {
  background: linear-gradient(135deg, var(--seo-wave-from), var(--seo-wave-mid), var(--seo-wave-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-custom-text {
  font-size: 16px;
  color: var(--seo-text-muted);
  line-height: 1.65;
  max-width: 500px;
  margin-bottom: 20px;
}

.seo-custom-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #60a5fa;
  font-weight: 600;
  transition: color 0.25s;
  margin-bottom: 30px;
}

.seo-custom-mail:hover { color: #93c5fd; }

.seo-custom-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.seo-btn-expert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: linear-gradient(135deg, var(--seo-wave-from), var(--seo-wave-mid), var(--seo-wave-to));
  color: #fff;
  border-radius: var(--seo-radius-md);
  font-family: var(--seo-font-head);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 28px rgba(124,58,237,0.45);
  transition: var(--seo-transition);
  border: none;
  cursor: pointer;
}

.seo-btn-expert:hover {
  box-shadow: 0 10px 42px rgba(124,58,237,0.65);
  transform: translateY(-2px);
}

.seo-btn-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: var(--seo-radius-md);
  font-family: var(--seo-font-head);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--seo-border);
  transition: var(--seo-transition);
  cursor: pointer;
}

.seo-btn-mail:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--seo-border-hover);
  transform: translateY(-2px);
}

.seo-custom-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seo-custom-visual-ring {
  width: 200px;
  height: 200px;
  position: relative;
  flex-shrink: 0;
}

/* ===== FAQ TEASER ===== */
.seo-faq-section {
  position: relative;
  z-index: 5;
  padding: 0 0 60px;
}

.seo-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.seo-faq-card {
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-md);
  padding: 24px 22px;
  backdrop-filter: blur(12px);
  transition: var(--seo-transition);
}

.seo-faq-card:hover {
  border-color: var(--seo-border-hover);
  background: var(--seo-bg-card-hover);
}

.seo-faq-q {
  font-family: var(--seo-font-head);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.seo-faq-a {
  font-size: 13px;
  color: var(--seo-text-muted);
  line-height: 1.6;
}

/* ===== LOADING / ANIMATION ===== */
.seo-price-amount { transition: opacity 0.25s, transform 0.25s; }
.seo-price-amount.seo-animating { opacity: 0; transform: translateY(8px); }

/* ===== TRUST BADGES ===== */
.seo-trust-strip {
  position: relative;
  z-index: 5;
  padding: 40px 0;
  text-align: center;
}

.seo-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.seo-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--seo-text-muted);
  backdrop-filter: blur(12px);
  transition: var(--seo-transition);
}

.seo-trust-badge:hover { border-color: var(--seo-border-hover); color: #fff; }

.seo-trust-badge-icon {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .seo-custom-card {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    text-align: center;
  }
  .seo-custom-visual { display: none; }
  .seo-custom-ctas { justify-content: center; }
  .seo-custom-mail { justify-content: center; }
  .seo-media-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .seo-plans-grid { grid-template-columns: 1fr; }
  .seo-plan-wave { transform: none; }
  .seo-billing-tabs { flex-direction: column; border-radius: 18px; }
  .seo-billing-tab { border-radius: 14px; text-align: center; justify-content: center; }
  .seo-hero-sub { font-size: 16px; }
  .seo-custom-card { padding: 32px 20px; }
  .seo-custom-ctas { flex-direction: column; }
  .seo-btn-expert, .seo-btn-mail { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .seo-pricing-wrapper { padding: 0 16px; }
  .seo-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== PARALLAX ELEMENTS ===== */
.seo-parallax-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.seo-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,69,0,0.08), transparent);
  top: -200px; left: -200px;
}

.seo-orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,0.07), transparent);
  top: 30%; right: -250px;
}

.seo-orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(13,148,136,0.07), transparent);
  bottom: 0; left: 30%;
}
/* Seo page pricing section End */

/* <!-- Seo Page Case Study start --> */

:root {
  --hpr-bg-page:        #f5f6fa;
  --hpr-card-bg:        #ffffff;
  --hpr-card-border:    rgba(0,0,0,0.07);
  --hpr-text-primary:   #080c18;
  --hpr-text-secondary: #555e7b;
  --hpr-text-light:     #8891aa;
  --hpr-fire-grad:      linear-gradient(135deg,#ff4d00 0%,#ff2d78 55%,#ffb347 100%);
  --hpr-elephant-grad:  linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --hpr-dove-grad:      linear-gradient(135deg,#11998e 0%,#38ef7d 55%,#56ccf2 100%);
  --hpr-rose-grad:      linear-gradient(135deg,#f953c6 0%,#b91d73 55%,#ff6b6b 100%);
  --hpr-cyber-grad:     linear-gradient(135deg,#00c6ff 0%,#7b2ff7 55%,#0072ff 100%);
  --hpr-ocean-grad:     linear-gradient(135deg,#43cea2 0%,#185a9d 55%,#00c6ff 100%);
  --hpr-radius-card:    24px;
  --hpr-radius-btn:     50px;
  --hpr-shadow-card:    0 20px 60px rgba(8,12,24,.10),0 4px 16px rgba(8,12,24,.06);
  --hpr-shadow-hover:   0 32px 80px rgba(8,12,24,.16),0 8px 24px rgba(8,12,24,.10);
  --hpr-transition:     0.38s cubic-bezier(0.4,0,0.2,1);
  --hpr-font-head:      'Syne', sans-serif;
  --hpr-font-body:      'DM Sans', sans-serif;
}

#home-proven-results {
  position:relative; background:#080c18;
  overflow:hidden; padding:0 0 20px; font-family:var(--hpr-font-body);
}
.home-proven-results-particles { position:absolute; inset:0; z-index:0; pointer-events:none; }
.home-proven-results-wave-top,.home-proven-results-wave-bottom { position:relative; z-index:1; line-height:0; }
.home-proven-results-wave-top svg,.home-proven-results-wave-bottom svg { display:block; width:100%; height:60px; }
.home-proven-results-container { position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:36px 24px 50px; }

/* Float badges */
.home-proven-results-float-badges { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.home-proven-results-badge {
  position:absolute; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--hpr-font-body); font-size:11px; font-weight:600;
  padding:7px 13px; border-radius:50px; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); color:#fff;
  animation:hpr-float 6s ease-in-out infinite; white-space:nowrap;
}
.home-proven-results-badge--1{top:18%;left:3%;background:rgba(255,77,0,.22);animation-delay:0s}
.home-proven-results-badge--2{top:12%;right:6%;background:rgba(102,126,234,.22);animation-delay:1.5s}
.home-proven-results-badge--3{bottom:30%;left:2%;background:rgba(17,153,142,.22);animation-delay:3s}
.home-proven-results-badge--4{bottom:22%;right:4%;background:rgba(255,45,120,.22);animation-delay:4.5s}
@keyframes hpr-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}

/* Heading */
.home-proven-results-heading{text-align:center;margin-bottom:28px}
.home-proven-results-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--hpr-font-body);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#ff4d00;margin-bottom:14px}
.home-proven-results-label-dot{width:5px;height:5px;border-radius:50%;background:var(--hpr-fire-grad);display:inline-block}
.home-proven-results-title{font-family:var(--hpr-font-head);font-size:clamp(26px,5vw,52px);font-weight:800;line-height:1.12;color:#fff;margin:0 0 8px;letter-spacing:-.5px}
.home-proven-results-title-gradient{background:var(--hpr-fire-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-title-underline{display:block;width:min(420px,90%);margin:0 auto 16px;height:18px}
.home-proven-results-subtitle{font-family:var(--hpr-font-body);font-size:clamp(14px,1.8vw,17px);color:rgba(255,255,255,.55);max-width:580px;margin:0 auto;line-height:1.7}

/* Tabs — horizontally scrollable */
.home-proven-results-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-bottom:24px}
.home-proven-results-tabs-wrap::-webkit-scrollbar{display:none}
.home-proven-results-tabs{display:flex;justify-content:center;gap:8px;min-width:max-content;padding:0 4px}

.home-proven-results-tab{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--hpr-font-body);font-size:13.5px;font-weight:600;
  padding:9px 18px;border-radius:var(--hpr-radius-btn);
  border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.65);cursor:pointer;transition:var(--hpr-transition);
  outline:none;white-space:nowrap;
}
.home-proven-results-tab:hover{border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-2px)}
.home-proven-results-tab--active{color:#fff!important;border-color:transparent!important}
.home-proven-results-tab--active[data-color="fire"]    {background:var(--hpr-fire-grad);    box-shadow:0 6px 24px rgba(255,77,0,.35)}
.home-proven-results-tab--active[data-color="elephant"]{background:var(--hpr-elephant-grad);box-shadow:0 6px 24px rgba(102,126,234,.35)}
.home-proven-results-tab--active[data-color="dove"]    {background:var(--hpr-dove-grad);    box-shadow:0 6px 24px rgba(17,153,142,.35)}
.home-proven-results-tab--active[data-color="rose"]    {background:var(--hpr-rose-grad);    box-shadow:0 6px 24px rgba(249,83,198,.35)}
.home-proven-results-tab--active[data-color="cyber"]   {background:var(--hpr-cyber-grad);   box-shadow:0 6px 24px rgba(0,198,255,.35)}
.home-proven-results-tab--active[data-color="ocean"]   {background:var(--hpr-ocean-grad);   box-shadow:0 6px 24px rgba(67,206,162,.35)}
.home-proven-results-tab-icon{width:22px;height:22px;border-radius:50%;flex-shrink:0}

/* Panels */
.home-proven-results-panel{display:none}
.home-proven-results-panel--active{display:block;animation:hpr-panel-in .45s cubic-bezier(.4,0,.2,1)}
@keyframes hpr-panel-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Card */
.home-proven-results-card{
  background:var(--hpr-card-bg);border-radius:var(--hpr-radius-card);
  border:1px solid var(--hpr-card-border);box-shadow:var(--hpr-shadow-card);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  transition:box-shadow var(--hpr-transition),transform var(--hpr-transition);
}
.home-proven-results-card:hover{box-shadow:var(--hpr-shadow-hover)}

.home-proven-results-card-left{padding:38px 34px;border-right:1px solid var(--hpr-card-border)}
.home-proven-results-card-client{display:flex;align-items:center;gap:14px;margin-bottom:20px}

/* Avatar — real image */
.home-proven-results-card-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.home-proven-results-avatar-img{width:100%;height:100%;object-fit:cover;display:block}

.home-proven-results-card-name{display:block;font-family:var(--hpr-font-head);font-size:15px;font-weight:700;color:var(--hpr-text-primary);line-height:1.3}
.home-proven-results-card-category{display:block;font-family:var(--hpr-font-body);font-size:12px;color:var(--hpr-text-light);margin-top:2px}
.home-proven-results-card-results-title{font-family:var(--hpr-font-head);font-size:20px;font-weight:700;color:var(--hpr-text-primary);margin:0 0 8px}
.home-proven-results-card-desc{font-family:var(--hpr-font-body);font-size:14px;color:var(--hpr-text-secondary);line-height:1.72;margin:0 0 22px}

/* Stats */
.home-proven-results-stats{display:flex;gap:28px;margin-bottom:22px;flex-wrap:wrap}
.home-proven-results-stat{display:flex;flex-direction:column;gap:3px}
.home-proven-results-stat-num{font-family:var(--hpr-font-head);font-size:30px;font-weight:800;line-height:1;letter-spacing:-.5px}
.home-proven-results-stat-num--fire    {background:var(--hpr-fire-grad);   -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-num--elephant{background:var(--hpr-elephant-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-num--dove    {background:var(--hpr-dove-grad);   -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-num--rose    {background:var(--hpr-rose-grad);   -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-num--cyber   {background:var(--hpr-cyber-grad);  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-num--ocean   {background:var(--hpr-ocean-grad);  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-proven-results-stat-label{font-family:var(--hpr-font-body);font-size:12px;color:var(--hpr-text-light);font-weight:500}

/* Rankings */
.home-proven-results-rankings-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--hpr-font-head);font-size:14px;font-weight:700;margin-bottom:10px}
.home-proven-results-rankings-label--fire    {color:#ff4d00}
.home-proven-results-rankings-label--elephant{color:#667eea}
.home-proven-results-rankings-label--dove    {color:#11998e}
.home-proven-results-rankings-label--rose    {color:#f953c6}
.home-proven-results-rankings-label--cyber   {color:#00c6ff}
.home-proven-results-rankings-label--ocean   {color:#43cea2}
.home-proven-results-rankings-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.home-proven-results-rankings-list li{font-family:var(--hpr-font-body);font-size:13.5px;color:var(--hpr-text-secondary);padding-left:18px;position:relative}
.home-proven-results-rankings-list li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%}
#home-proven-results-panel-automotive .home-proven-results-rankings-list li::before{background:var(--hpr-elephant-grad)}
#home-proven-results-panel-education  .home-proven-results-rankings-list li::before{background:var(--hpr-dove-grad)}
#home-proven-results-panel-reiki      .home-proven-results-rankings-list li::before{background:var(--hpr-fire-grad)}
#home-proven-results-panel-fashion    .home-proven-results-rankings-list li::before{background:var(--hpr-rose-grad)}
#home-proven-results-panel-arvr       .home-proven-results-rankings-list li::before{background:var(--hpr-cyber-grad)}
#home-proven-results-panel-travel     .home-proven-results-rankings-list li::before{background:var(--hpr-ocean-grad)}

/* Card right */
.home-proven-results-card-right{padding:38px 34px;background:#f9fafc;display:flex;align-items:center}
.home-proven-results-seo-box{width:100%}
.home-proven-results-seo-box-title{font-family:var(--hpr-font-head);font-size:18px;font-weight:700;color:var(--hpr-text-primary);margin:0 0 14px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REAL IMAGE SLOT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.home-proven-results-real-img-wrap{
  position:relative;border-radius:16px;overflow:hidden;
  margin-bottom:18px;border:2.5px solid transparent;
}
.home-proven-results-real-img-wrap--fire    {border-color:#ff4d00;box-shadow:0 6px 28px rgba(255,77,0,.18)}
.home-proven-results-real-img-wrap--elephant{border-color:#667eea;box-shadow:0 6px 28px rgba(102,126,234,.18)}
.home-proven-results-real-img-wrap--dove    {border-color:#11998e;box-shadow:0 6px 28px rgba(17,153,142,.18)}
.home-proven-results-real-img-wrap--rose    {border-color:#f953c6;box-shadow:0 6px 28px rgba(249,83,198,.18)}
.home-proven-results-real-img-wrap--cyber   {border-color:#00c6ff;box-shadow:0 6px 28px rgba(0,198,255,.18)}
.home-proven-results-real-img-wrap--ocean   {border-color:#43cea2;box-shadow:0 6px 28px rgba(67,206,162,.18)}

.home-proven-results-real-img{
  display:block;width:100%;height:auto;object-fit:cover;
  border-radius:13px;min-height:160px;
  transition:transform .42s ease,filter .42s ease;
}
.home-proven-results-real-img-wrap:hover .home-proven-results-real-img{transform:scale(1.03);filter:brightness(1.04)}
.home-proven-results-real-img-badge{
  position:absolute;top:10px;left:10px;
  font-family:var(--hpr-font-body);font-size:10px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:rgba(8,12,24,.72);color:#fff;
  padding:4px 10px;border-radius:20px;backdrop-filter:blur(6px);pointer-events:none;
}

/* Lazy fade-in */
img.home-proven-results-lazy{opacity:0;transition:opacity .55s ease}
img.home-proven-results-lazy.home-proven-results-lazy--loaded{opacity:1}

/* Audit button */
.home-proven-results-audit-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--hpr-font-body);font-size:14px;font-weight:700;
  color:#fff;text-decoration:none;padding:13px 26px;
  border-radius:var(--hpr-radius-btn);transition:var(--hpr-transition);
  width:100%;box-shadow:0 6px 20px rgba(0,0,0,.18);position:relative;overflow:hidden;
}
.home-proven-results-audit-btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .3s}
.home-proven-results-audit-btn:hover::before{background:rgba(255,255,255,.12)}
.home-proven-results-audit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.home-proven-results-audit-btn--fire    {background:var(--hpr-fire-grad)}
.home-proven-results-audit-btn--elephant{background:var(--hpr-elephant-grad)}
.home-proven-results-audit-btn--dove    {background:var(--hpr-dove-grad)}
.home-proven-results-audit-btn--rose    {background:var(--hpr-rose-grad)}
.home-proven-results-audit-btn--cyber   {background:var(--hpr-cyber-grad)}
.home-proven-results-audit-btn--ocean   {background:var(--hpr-ocean-grad)}

/* Stats bar */
.home-proven-results-statsbar{display:flex;align-items:center;justify-content:center;gap:0;margin-top:30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 10px;flex-wrap:wrap;backdrop-filter:blur(10px)}
.home-proven-results-statsbar-item{display:flex;align-items:center;gap:12px;padding:8px 28px;flex:1 1 140px;min-width:120px}
.home-proven-results-statsbar-item svg{flex-shrink:0}
.home-proven-results-statsbar-item strong{display:block;font-family:var(--hpr-font-head);font-size:20px;font-weight:800;color:#fff;line-height:1}
.home-proven-results-statsbar-item small{font-family:var(--hpr-font-body);font-size:11px;color:rgba(255,255,255,.45);display:block;margin-top:3px}
.home-proven-results-statsbar-divider{width:1px;height:40px;background:rgba(255,255,255,.1);flex-shrink:0}

/* Responsive */
@media(max-width:960px){
  .home-proven-results-card{grid-template-columns:1fr}
  .home-proven-results-card-left{border-right:none;border-bottom:1px solid var(--hpr-card-border);padding:26px 20px}
  .home-proven-results-card-right{padding:26px 20px}
  .home-proven-results-statsbar-divider{display:none}
  .home-proven-results-tabs{justify-content:flex-start}
}
@media(max-width:600px){
  .home-proven-results-container{padding:24px 14px 36px}
  .home-proven-results-statsbar-item{padding:8px 12px;flex:1 1 110px}
  .home-proven-results-stats{gap:16px}
  .home-proven-results-badge--1,.home-proven-results-badge--3{left:-6px}
}
/* <!-- Seo Page Case Study End --> */




/* Digital Marketing Page Start */
:root {
    --c-purple: #8B5CF6;
    --c-pink: #EC4899;
    --c-orange: #F97316;
    --c-teal: #14B8A6;
    --c-blue: #3B82F6;
    --c-yellow: #FBBF24;
    --c-dark: #0f0e1a;
    --c-dark2: #16142b;
    --c-card: rgba(255,255,255,0.04);
    --c-border: rgba(255,255,255,0.08);
    --c-text: #f0eeff;
    --c-muted: rgba(240,238,255,0.55);
    --grad1: linear-gradient(135deg, #8B5CF6, #EC4899);
    --grad2: linear-gradient(135deg, #F97316, #EC4899);
    --grad3: linear-gradient(135deg, #14B8A6, #3B82F6);
    --grad4: linear-gradient(135deg, #FBBF24, #F97316);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 36px;
    --trans: 0.35s cubic-bezier(0.4,0,0.2,1);
    --ff-head: 'Syne', sans-serif;
    --ff-body: 'DM Sans', sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; font-size: 16px; }

  .page-wrap {
    background: var(--c-dark);
    color: var(--c-text);
    font-family: var(--ff-body);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* ── NOISE OVERLAY ── */
  .page-wrap::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  /* ── GLOW ORBS ── */
  .orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
  }
  .orb-1 { width: 600px; height: 600px; background: rgba(139,92,246,0.18); top: -200px; left: -200px; animation: orbFloat 18s ease-in-out infinite; }
  .orb-2 { width: 500px; height: 500px; background: rgba(236,72,153,0.14); bottom: 10%; right: -150px; animation: orbFloat 22s ease-in-out infinite reverse; }
  .orb-3 { width: 400px; height: 400px; background: rgba(249,115,22,0.10); top: 40%; left: 30%; animation: orbFloat 25s ease-in-out infinite 5s; }
  @keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.05)} 66%{transform:translate(-20px,40px) scale(0.95)} }

  /* ── NAV ── */
  nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5%;
    background: rgba(15,14,26,0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--c-border);
    transition: var(--trans);
  }
  .nav-logo {
    font-family: var(--ff-head);
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--grad1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    letter-spacing: -0.5px;
  }
  .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
  .nav-links a {
    color: var(--c-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--trans);
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 2px;
    background: var(--grad1);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--trans);
    transform-origin: left;
  }
  .nav-links a:hover { color: var(--c-text); }
  .nav-links a:hover::after { transform: scaleX(1); }

  .btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.3rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    background: var(--grad1);
    color: #fff;
    text-decoration: none;
    transition: transform var(--trans), box-shadow var(--trans);
    position: relative;
    overflow: hidden;
  }
  .btn-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background var(--trans);
  }
  .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139,92,246,0.45); }
  .btn-nav:hover::before { background: rgba(255,255,255,0.12); }
  .btn-nav:active { transform: translateY(0) scale(0.98); }

  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
  .hamburger span { width: 24px; height: 2px; background: var(--c-text); border-radius: 2px; transition: var(--trans); display: block; }

  /* ── HERO ── */
  .hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 5% 4rem;
    overflow: hidden;
  }
  .hero-inner { max-width: 900px; }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(139,92,246,0.4);
    background: rgba(139,92,246,0.1);
    font-size: 0.8rem;
    font-weight: 500;
    color: #c4b5fd;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.8s ease both;
  }
  .hero h1 {
    font-family: var(--ff-head);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.8s 0.1s ease both;
  }
  .grad-text {
    background: var(--grad1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .grad-text-2 {
    background: var(--grad2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero p {
    font-size: 1.15rem;
    color: var(--c-muted);
    max-width: 620px;
    margin: 0 auto 2.5rem;
    animation: fadeUp 0.8s 0.2s ease both;
    font-weight: 300;
  }
  .hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.8s 0.3s ease both;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    background: var(--grad1);
    color: #fff;
    text-decoration: none;
    transition: transform var(--trans), box-shadow var(--trans);
    position: relative;
    overflow: hidden;
  }
  .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.15), transparent);
    border-radius: inherit;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(139,92,246,0.5); }
  .btn-primary:active { transform: translateY(-1px) scale(0.99); }
  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: rgba(255,255,255,0.04);
    color: var(--c-text);
    text-decoration: none;
    transition: var(--trans);
    backdrop-filter: blur(8px);
  }
  .btn-outline:hover { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.08); transform: translateY(-2px); }

  .hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 4rem;
    animation: fadeUp 0.8s 0.5s ease both;
    flex-wrap: wrap;
  }
  .hero-stat { text-align: center; }
  .hero-stat strong {
    display: block;
    font-family: var(--ff-head);
    font-size: 2.2rem;
    font-weight: 800;
    background: var(--grad1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
  }
  .hero-stat span { font-size: 0.8rem; color: var(--c-muted); margin-top: 4px; display: block; }

  /* ── SCROLL TICKER ── */
  .ticker-wrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 1rem 0;
    background: rgba(139,92,246,0.05);
  }
  .ticker {
    display: flex;
    gap: 4rem;
    animation: ticker 25s linear infinite;
    white-space: nowrap;
    width: max-content;
  }
  .ticker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
  }
  .ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad1); flex-shrink: 0; }
  @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* ── SECTIONS ── */
  .section { position: relative; z-index: 1; padding: 5rem 5%; }
  .section-center { text-align: center; }
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 1rem;
  }
  .section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background: rgba(167,139,250,0.3); }
  .section-label::before { width: 30px; }
  h2.section-title {
    font-family: var(--ff-head);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 1rem;
  }
  .section-sub { color: var(--c-muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto 3rem; font-weight: 300; }

  /* ── TABS ── */
  .tabs-wrap { max-width: 1200px; margin: 0 auto; }
  .tab-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
  }
  .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1.4rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: rgba(255,255,255,0.03);
    color: var(--c-muted);
    transition: var(--trans);
    font-family: var(--ff-body);
  }
  .tab-btn:hover { border-color: rgba(139,92,246,0.4); color: var(--c-text); background: rgba(139,92,246,0.08); }
  .tab-btn.active {
    background: var(--grad1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px rgba(139,92,246,0.4);
  }
  .tab-pane { display: none; animation: fadeUp 0.45s ease; }
  .tab-pane.active { display: block; }

  .tab-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .tab-img-side {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
  }
  .tab-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tab-svg-art { width: 100%; height: 100%; }

  .tab-text h3 {
    font-family: var(--ff-head);
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
  }
  .tab-text p { color: var(--c-muted); font-weight: 300; font-size: 1.02rem; margin-bottom: 1.5rem; }
  .tab-features { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
  .tab-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.925rem;
    color: var(--c-muted);
  }
  .feat-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
  }

  /* ── CARDS SECTION ── */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--trans);
    border-radius: inherit;
  }
  .card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); border-color: rgba(139,92,246,0.3); }
  .card:hover::before { opacity: 1; }
  .card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
  }
  .card h4 { font-family: var(--ff-head); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; position: relative; z-index: 1; }
  .card p { color: var(--c-muted); font-size: 0.9rem; font-weight: 300; line-height: 1.6; position: relative; z-index: 1; }

  /* ── PROCESS ── */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }
  .process-grid::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), transparent);
    pointer-events: none;
  }
  .process-step { text-align: center; position: relative; }
  .step-num {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--c-dark2);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 1.1rem;
    position: relative;
    transition: var(--trans);
  }
  .process-step:hover .step-num { background: var(--grad1); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 30px rgba(139,92,246,0.5); }
  .process-step h5 { font-family: var(--ff-head); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
  .process-step p { font-size: 0.85rem; color: var(--c-muted); }

  /* ── REVIEWS ── */
  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .review-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    transition: transform var(--trans), box-shadow var(--trans);
    position: relative;
    overflow: hidden;
  }
  .review-card::before {
    content: '❝';
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 3rem;
    color: rgba(139,92,246,0.15);
    font-family: serif;
    line-height: 1;
  }
  .review-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,0.35); border-color: rgba(236,72,153,0.3); }
  .stars { color: #FBBF24; font-size: 1rem; margin-bottom: 1rem; letter-spacing: 2px; }
  .review-card p { font-size: 0.9rem; color: var(--c-muted); font-weight: 300; line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
  .reviewer { display: flex; align-items: center; gap: 0.75rem; }
  .reviewer-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    flex-shrink: 0;
  }
  .reviewer-name { font-weight: 600; font-size: 0.875rem; }
  .reviewer-role { font-size: 0.75rem; color: var(--c-muted); }

  /* ── FAQ ── */
  .faq-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
  .faq-item {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--trans);
  }
  .faq-item.open { border-color: rgba(139,92,246,0.35); }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    user-select: none;
    transition: color var(--trans);
  }
  .faq-q:hover { color: #c4b5fd; }
  .faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    transition: transform var(--trans), background var(--trans), border-color var(--trans);
    color: var(--c-muted);
  }
  .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--grad1); border-color: transparent; color: #fff; }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding var(--trans);
    padding: 0 1.5rem;
    font-size: 0.9rem;
    color: var(--c-muted);
    font-weight: 300;
    line-height: 1.7;
  }
  .faq-item.open .faq-a { max-height: 300px; padding: 0 1.5rem 1.25rem; }

  /* ── CTA ── */
  .cta-block {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--r-xl);
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.15));
    border: 1px solid rgba(139,92,246,0.2);
  }
  .cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.25) 0%, transparent 70%);
    pointer-events: none;
  }
  .cta-block h2 {
    font-family: var(--ff-head);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
  }
  .cta-block p { color: var(--c-muted); font-size: 1.05rem; margin-bottom: 2rem; position: relative; z-index: 1; }
  .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

  /* ── FOOTER ── */
  footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--c-border);
    padding: 3rem 5% 2rem;
  }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
  .footer-brand p { color: var(--c-muted); font-size: 0.875rem; line-height: 1.7; margin-top: 0.75rem; max-width: 280px; font-weight: 300; }
  .footer-col h6 { font-family: var(--ff-head); font-size: 0.875rem; font-weight: 700; margin-bottom: 1rem; color: var(--c-text); letter-spacing: 0.5px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
  .footer-col ul a { color: var(--c-muted); text-decoration: none; font-size: 0.875rem; transition: color var(--trans); }
  .footer-col ul a:hover { color: var(--c-text); }
  .footer-bottom { border-top: 1px solid var(--c-border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: gap; gap: 1rem; }
  .footer-bottom p { font-size: 0.8rem; color: var(--c-muted); }
  .social-links { display: flex; gap: 0.75rem; }
  .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--c-muted);
    transition: var(--trans);
  }
  .social-link:hover { background: var(--grad1); border-color: transparent; color: #fff; transform: translateY(-2px); }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ── PARALLAX ── */
  .parallax-layer { will-change: transform; }

  /* ── CONFETTI CANVAS ── */
  #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

  /* ── BADGES ── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .badge-purple { background: rgba(139,92,246,0.15); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3); }
  .badge-pink { background: rgba(236,72,153,0.12); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.25); }
  .badge-orange { background: rgba(249,115,22,0.12); color: #fdba74; border: 1px solid rgba(249,115,22,0.25); }
  .badge-teal { background: rgba(20,184,166,0.12); color: #5eead4; border: 1px solid rgba(20,184,166,0.25); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .tab-content-grid { grid-template-columns: 1fr; }
    .tab-img-side { order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .process-grid::before { display: none; }
  }
  @media (max-width: 640px) {
    .nav-links { display: none; position: fixed; top: 70px; left: 0; right: 0; flex-direction: column; background: rgba(15,14,26,0.97); backdrop-filter: blur(20px); padding: 2rem; gap: 1.5rem; border-bottom: 1px solid var(--c-border); z-index: 999; }
    .nav-links.open { display: flex; }
    .hamburger { display: flex; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 1.5rem; }
    .cta-block { padding: 2.5rem 1.5rem; }
    .tab-nav { gap: 0.4rem; }
    .tab-btn { padding: 0.55rem 1rem; font-size: 0.8rem; }
  }

  /* ── GRADIENT CARD BGs ── */
  .bg-grad1 { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.08)); }
  .bg-grad2 { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(251,191,36,0.08)); }
  .bg-grad3 { background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(59,130,246,0.08)); }
  .bg-grad4 { background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(139,92,246,0.08)); }
  .bg-grad5 { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(20,184,166,0.08)); }
  .bg-grad6 { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(249,115,22,0.08)); }

  /* ── GLOW SEPARATOR ── */
  .glow-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(236,72,153,0.5), transparent); margin: 0 5%; }

  /* ── PULSE ANIMATION ── */
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
  @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
  @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Digital Marketing Page End */

/* <!-- Seo page Process start --> */
/* ── CSS reset & variables ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --spp-bg:          #080c18;
      --spp-bg2:         #0d1225;
      --spp-surface:     rgba(255,255,255,.04);
      --spp-border:      rgba(255,255,255,.08);

      --spp-fire-a:      #ff4500;
      --spp-fire-b:      #ff0080;
      --spp-fire-c:      #ffb347;

      --spp-ocean-a:     #1a6dff;
      --spp-ocean-b:     #8b2fc9;
      --spp-ocean-c:     #00d4ff;

      --spp-nature-a:    #00c9a7;
      --spp-nature-b:    #22c55e;
      --spp-nature-c:    #a8ff78;

      --spp-text:        #f0f4ff;
      --spp-muted:       #8892b0;
      --spp-accent:      #ff4500;

      --spp-font-head:   'Syne', sans-serif;
      --spp-font-body:   'DM Sans', sans-serif;

      --spp-radius:      1.25rem;
      --spp-trans:       .35s cubic-bezier(.4,0,.2,1);
    }

    /* ── Utility ── */
    .seo-page-hidden { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
    .seo-page-visible { opacity: 1; transform: translateY(0); }

    /* ════════════════════════════════════════════
       PROCESS SECTION WRAPPER
    ════════════════════════════════════════════ */
    #seo-page-services-process-section {
      position: relative;
      overflow: hidden;
      background: var(--spp-bg);
      padding: 5rem 1rem 4rem;
      font-family: var(--spp-font-body);
      color: var(--spp-text);
    }

    /* ── tsParticles canvas ── */
    #seo-page-services-process-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── Parallax orbs ── */
    .seo-page-services-process-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .28;
      pointer-events: none;
      will-change: transform;
    }
    .seo-page-services-process-orb--fire {
      width: 540px; height: 540px;
      background: radial-gradient(circle, var(--spp-fire-a), var(--spp-fire-b));
      top: -160px; left: -140px;
    }
    .seo-page-services-process-orb--ocean {
      width: 480px; height: 480px;
      background: radial-gradient(circle, var(--spp-ocean-a), var(--spp-ocean-b));
      top: 40%; right: -160px;
    }
    .seo-page-services-process-orb--nature {
      width: 400px; height: 400px;
      background: radial-gradient(circle, var(--spp-nature-a), var(--spp-nature-b));
      bottom: -120px; left: 30%;
    }

    /* ── Wavy SVG divider top ── */
    .seo-page-services-process-wave-top {
      position: absolute;
      top: 0; left: 0; width: 100%;
      line-height: 0;
      z-index: 1;
    }
    .seo-page-services-process-wave-bottom {
      position: absolute;
      bottom: 0; left: 0; width: 100%;
      line-height: 0;
      z-index: 1;
      transform: rotate(180deg);
    }

    /* ── Inner container ── */
    .seo-page-services-process-container {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ── Header badge ── */
    .seo-page-services-process-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: linear-gradient(135deg, rgba(255,69,0,.18), rgba(255,0,128,.18));
      border: 1px solid rgba(255,69,0,.35);
      border-radius: 100px;
      padding: .35rem 1rem;
      font-family: var(--spp-font-head);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--spp-fire-c);
      margin-bottom: 1.1rem;
    }
    .seo-page-services-process-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ── Section heading ── */
    .seo-page-services-process-heading {
      font-family: var(--spp-font-head);
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 800;
      line-height: 1.12;
      margin-bottom: .75rem;
    }
    .seo-page-services-process-heading-grad {
      background: linear-gradient(90deg, #fff 0%, #ff8c42 40%, #ff0080 70%, #1a6dff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .seo-page-services-process-subheading {
      font-size: 1.05rem;
      color: var(--spp-muted);
      max-width: 560px;
      line-height: 1.7;
      margin-bottom: 3.5rem;
    }

    /* ── Steps grid ── */
    .seo-page-services-process-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
      gap: 1.6rem;
    }

    /* ── Step card ── */
    .seo-page-services-process-card {
      position: relative;
      background: var(--spp-surface);
      border: 1px solid var(--spp-border);
      border-radius: var(--spp-radius);
      padding: 1.8rem 1.6rem 1.6rem;
      overflow: hidden;
      transition: transform var(--spp-trans), border-color var(--spp-trans), box-shadow var(--spp-trans);
      cursor: default;
    }
    .seo-page-services-process-card:hover {
      transform: translateY(-6px) scale(1.015);
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 24px 60px rgba(0,0,0,.45);
    }

    /* card accent line */
    .seo-page-services-process-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--spp-radius);
      padding: 1px;
      background: var(--spp-card-grad, linear-gradient(135deg, #ff4500, #ff0080));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity var(--spp-trans);
    }
    .seo-page-services-process-card:hover::before { opacity: 1; }

    /* card glow blob */
    .seo-page-services-process-card-glow {
      position: absolute;
      width: 200px; height: 200px;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0;
      transition: opacity var(--spp-trans);
      pointer-events: none;
      top: -40px; right: -40px;
    }
    .seo-page-services-process-card:hover .seo-page-services-process-card-glow { opacity: .22; }

    /* Step number pill */
    .seo-page-services-process-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.2rem; height: 2.2rem;
      border-radius: 50%;
      font-family: var(--spp-font-head);
      font-weight: 800;
      font-size: .85rem;
      margin-bottom: 1rem;
      flex-shrink: 0;
    }

    /* Icon wrapper */
    .seo-page-services-process-icon-wrap {
      position: absolute;
      top: 1.5rem; right: 1.5rem;
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
    }
    .seo-page-services-process-icon-wrap img {
      width: 30px; height: 30px;
      object-fit: contain;
      loading: lazy;
    }

    .seo-page-services-process-card-title {
      font-family: var(--spp-font-head);
      font-size: 1.08rem;
      font-weight: 700;
      margin-bottom: .55rem;
      color: #fff;
    }
    .seo-page-services-process-card-desc {
      font-size: .9rem;
      color: var(--spp-muted);
      line-height: 1.65;
    }

    /* Star badge on special cards */
    .seo-page-services-process-star-badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      background: linear-gradient(135deg, rgba(255,179,71,.18), rgba(255,69,0,.18));
      border: 1px solid rgba(255,179,71,.4);
      border-radius: 100px;
      padding: .22rem .65rem;
      font-size: .7rem;
      font-weight: 600;
      color: var(--spp-fire-c);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: .85rem;
      width: fit-content;
    }

    /* ── Float icons strip ── */
    .seo-page-services-process-float-icons {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    .seo-page-services-process-float-icon {
      position: absolute;
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      display: flex; align-items: center; justify-content: center;
      animation: sppFloat var(--dur, 7s) ease-in-out infinite var(--delay, 0s);
    }
    .seo-page-services-process-float-icon svg { width: 18px; height: 18px; }

    @keyframes sppFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-18px) rotate(6deg); }
    }

    /* ── Bottom CTA strip ── */
    .seo-page-services-process-cta-strip {
      margin-top: 3.5rem;
      background: linear-gradient(135deg, rgba(26,109,255,.12), rgba(139,47,201,.12));
      border: 1px solid rgba(26,109,255,.22);
      border-radius: var(--spp-radius);
      padding: 2rem 2.2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.2rem;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .seo-page-services-process-cta-strip::after {
      content: '';
      position: absolute;
      right: -80px; top: -80px;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(26,109,255,.2), transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .seo-page-services-process-cta-text {
      font-family: var(--spp-font-head);
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
    }
    .seo-page-services-process-cta-text span { color: var(--spp-ocean-c); }
    .seo-page-services-process-cta-sub {
      font-size: .88rem;
      color: var(--spp-muted);
      margin-top: .25rem;
    }

    .seo-page-services-process-btn {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      background: linear-gradient(135deg, var(--spp-fire-a), var(--spp-fire-b));
      color: #fff;
      font-family: var(--spp-font-head);
      font-weight: 700;
      font-size: .92rem;
      padding: .78rem 1.75rem;
      border-radius: 100px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 1;
      transition: transform var(--spp-trans), box-shadow var(--spp-trans), filter var(--spp-trans);
      box-shadow: 0 4px 24px rgba(255,69,0,.35);
      white-space: nowrap;
    }
    .seo-page-services-process-btn:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 10px 36px rgba(255,0,128,.45);
      filter: brightness(1.08);
    }
    .seo-page-services-process-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ── Stats row ── */
    .seo-page-services-process-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 3rem;
      justify-content: center;
    }
    .seo-page-services-process-stat {
      flex: 1 1 160px;
      text-align: center;
      padding: 1.2rem 1rem;
      background: var(--spp-surface);
      border: 1px solid var(--spp-border);
      border-radius: 1rem;
      transition: transform var(--spp-trans);
    }
    .seo-page-services-process-stat:hover { transform: translateY(-4px); }
    .seo-page-services-process-stat-num {
      font-family: var(--spp-font-head);
      font-size: 2rem;
      font-weight: 800;
      background: linear-gradient(90deg, var(--spp-fire-a), var(--spp-fire-b));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .seo-page-services-process-stat-label {
      font-size: .8rem;
      color: var(--spp-muted);
      margin-top: .25rem;
    }

    /* ── Connector line between cards on wide ── */
    @media (min-width: 900px) {
      .seo-page-services-process-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media (max-width: 600px) {
      .seo-page-services-process-cta-strip { flex-direction: column; text-align: center; }
      .seo-page-services-process-cta-strip::after { display: none; }
    }

    /* ── Wavy line SVG strip ── */
    .seo-page-services-process-wavy-divider {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      margin-bottom: 2.5rem;
    }

    /* ── Scroll progress pip ── */
    .seo-page-services-process-progress-ring {
      position: fixed;
      bottom: 2rem; right: 2rem;
      width: 52px; height: 52px;
      z-index: 999;
      display: none;
    }
    .seo-page-services-process-progress-ring svg { transform: rotate(-90deg); }
    .seo-page-services-process-progress-ring circle {
      fill: none;
      stroke-width: 4;
      stroke-linecap: round;
    }
    #seo-page-services-process-progress-bg { stroke: rgba(255,255,255,.1); }
    #seo-page-services-process-progress-fg {
      stroke: url(#sppGrad);
      stroke-dasharray: 138;
      stroke-dashoffset: 138;
      transition: stroke-dashoffset .2s;
    }

    /* ── Tooltip ── */
    .seo-page-services-process-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) scale(.9);
      background: #1a2040;
      color: #fff;
      font-size: .75rem;
      padding: .35rem .7rem;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s, transform .2s;
      border: 1px solid rgba(255,255,255,.12);
    }
    .seo-page-services-process-step-num:hover .seo-page-services-process-tooltip {
      opacity: 1; transform: translateX(-50%) scale(1);
    }
    .seo-page-services-process-step-num { position: relative; }
/* <!-- Seo page Process End --> */


/* <!-- Seo page Services start --> */
:root {
  --seo-page-services-bg-dark: #080c18;
  --seo-page-services-bg-card: #0d1225;
  --seo-page-services-bg-card-alt: #101628;
  --seo-page-services-firebird-1: #ff4500;
  --seo-page-services-firebird-2: #ff6b35;
  --seo-page-services-firebird-3: #ff1744;
  --seo-page-services-firebird-4: #ff6ec7;
  --seo-page-services-elephant-1: #1565c0;
  --seo-page-services-elephant-2: #7b1fa2;
  --seo-page-services-elephant-3: #4a148c;
  --seo-page-services-elephant-4: #0288d1;
  --seo-page-services-dove-1: #00897b;
  --seo-page-services-dove-2: #43a047;
  --seo-page-services-dove-3: #00bcd4;
  --seo-page-services-dove-4: #76ff03;
  --seo-page-services-text-primary: #f0f4ff;
  --seo-page-services-text-secondary: #a0aec0;
  --seo-page-services-text-muted: #64748b;
  --seo-page-services-border: rgba(255,255,255,0.07);
  --seo-page-services-radius: 20px;
  --seo-page-services-radius-sm: 12px;
  --seo-page-services-transition: 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  --seo-page-services-font-head: 'Syne', sans-serif;
  --seo-page-services-font-body: 'DM Sans', sans-serif;
}

/* ===== SECTION BASE ===== */
#home-services-seo-section {
  position: relative;
  background: var(--seo-page-services-bg-dark);
  overflow: hidden;
  padding: 70px 0 80px;
  font-family: var(--seo-page-services-font-body);
}

/* ===== PARTICLES CANVAS ===== */
#home-services-seo-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== WAVY SVG DIVIDERS ===== */
.hso-wavy-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  line-height: 0;
  z-index: 1;
}
.hso-wavy-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  line-height: 0;
  z-index: 1;
}
.hso-wavy-top svg,
.hso-wavy-bottom svg { width: 100%; height: 60px; display: block; }

/* ===== PARALLAX MESH BLOBS ===== */
.hso-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: hso-float-blob 12s ease-in-out infinite;
}
.hso-blob--fire {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--seo-page-services-firebird-1), var(--seo-page-services-firebird-4));
  top: -120px; left: -100px;
  animation-duration: 14s;
}
.hso-blob--elephant {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--seo-page-services-elephant-2), var(--seo-page-services-elephant-4));
  bottom: 60px; right: -80px;
  animation-duration: 17s;
  animation-delay: -5s;
}
.hso-blob--dove {
  width: 340px; height: 340px;
  background: radial-gradient(circle, var(--seo-page-services-dove-1), var(--seo-page-services-dove-3));
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-duration: 11s;
  animation-delay: -8s;
}
@keyframes hso-float-blob {
  0%,100% { transform: translateY(0) scale(1); }
  33% { transform: translateY(-30px) scale(1.06); }
  66% { transform: translateY(20px) scale(0.96); }
}

/* ===== CONTAINER ===== */
.hso-container {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== SECTION HEADER ===== */
.hso-header {
  text-align: center;
  margin-bottom: 52px;
}
.hso-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--seo-page-services-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seo-page-services-firebird-2);
  background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.25);
  border-radius: 100px;
  padding: 6px 18px;
  margin-bottom: 18px;
}
.hso-eyebrow svg { flex-shrink: 0; }
.hso-heading {
  font-family: var(--seo-page-services-font-head);
  font-size: clamp(28px, 4.5vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--seo-page-services-text-primary);
  margin: 0 0 16px;
}
.hso-heading .hso-grad-fire {
  background: linear-gradient(90deg, var(--seo-page-services-firebird-1), var(--seo-page-services-firebird-2), var(--seo-page-services-firebird-4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hso-subtext {
  font-size: 16px;
  color: var(--seo-page-services-text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ===== LIFECYCLE RING ===== */
.hso-lifecycle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
  perspective: 900px;
}
.hso-lifecycle-ring {
  position: relative;
  width: 320px;
  height: 320px;
  flex-shrink: 0;
}
.hso-lifecycle-ring svg.hso-ring-svg {
  width: 100%;
  height: 100%;
  animation: hso-spin-ring 24s linear infinite;
}
@keyframes hso-spin-ring { to { transform: rotate(360deg); } }
.hso-lifecycle-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hso-lifecycle-center span {
  font-family: var(--seo-page-services-font-head);
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--seo-page-services-dove-1), var(--seo-page-services-dove-3), var(--seo-page-services-dove-4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hso-lifecycle-center small {
  font-size: 11px;
  color: var(--seo-page-services-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== STATS ROW ===== */
.hso-stats-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.hso-stat-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--seo-page-services-border);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  color: var(--seo-page-services-text-primary);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--seo-page-services-transition), background var(--seo-page-services-transition), transform var(--seo-page-services-transition);
}
.hso-stat-badge:hover {
  border-color: rgba(255,107,53,0.4);
  background: rgba(255,107,53,0.08);
  transform: translateY(-2px);
}
.hso-stat-badge strong {
  font-family: var(--seo-page-services-font-head);
  font-size: 16px;
  font-weight: 700;
}
.hso-stat-badge--fire strong { color: var(--seo-page-services-firebird-2); }
.hso-stat-badge--elephant strong { color: var(--seo-page-services-elephant-4); }
.hso-stat-badge--dove strong { color: var(--seo-page-services-dove-3); }

/* ===== CARDS GRID ===== */
.hso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

/* ===== SERVICE CARD ===== */
.seo-page-services {
  position: relative;
  background: var(--seo-page-services-bg-card);
  border: 1px solid var(--seo-page-services-border);
  border-radius: var(--seo-page-services-radius);
  padding: 28px 26px 26px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--seo-page-services-transition), border-color var(--seo-page-services-transition), box-shadow var(--seo-page-services-transition);
  text-decoration: none;
  display: block;
  color: inherit;
}
.seo-page-services:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 28px 60px rgba(0,0,0,0.45);
}
.seo-page-services:hover .seo-page-services__glow { opacity: 1; }
.seo-page-services:hover .seo-page-services__icon-wrap { transform: scale(1.08) rotate(-4deg); }
.seo-page-services:hover .seo-page-services__arrow { opacity: 1; transform: translate(0,0); }

/* gradient border on hover via pseudo */
.seo-page-services::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--seo-page-services-radius);
  padding: 1px;
  background: var(--seo-page-services-border-grad, linear-gradient(135deg, #ff4500, #ff6ec7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--seo-page-services-transition);
  pointer-events: none;
}
.seo-page-services:hover::before { opacity: 1; }

/* ===== CARD GLOW ===== */
.seo-page-services__glow {
  position: absolute;
  inset: -1px;
  border-radius: var(--seo-page-services-radius);
  opacity: 0;
  transition: opacity var(--seo-page-services-transition);
  pointer-events: none;
  z-index: 0;
}
.seo-page-services__inner { position: relative; z-index: 1; }

/* ===== CARD ICON ===== */
.seo-page-services__icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: transform var(--seo-page-services-transition);
  flex-shrink: 0;
}

/* ===== CARD BADGE ===== */
.seo-page-services__badge {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
}
.seo-page-services__badge--fire {
  color: var(--seo-page-services-firebird-2);
  border-color: rgba(255,107,53,0.4);
  background: rgba(255,69,0,0.1);
}
.seo-page-services__badge--elephant {
  color: #82b1ff;
  border-color: rgba(130,177,255,0.35);
  background: rgba(21,101,192,0.12);
}
.seo-page-services__badge--dove {
  color: var(--seo-page-services-dove-3);
  border-color: rgba(0,188,212,0.35);
  background: rgba(0,137,123,0.1);
}
.seo-page-services__badge--rainbow {
  color: #f48fb1;
  border-color: rgba(244,143,177,0.35);
  background: rgba(244,143,177,0.08);
}

/* ===== CARD TEXT ===== */
.seo-page-services__title {
  font-family: var(--seo-page-services-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--seo-page-services-text-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}
.seo-page-services__desc {
  font-size: 14px;
  color: var(--seo-page-services-text-secondary);
  line-height: 1.65;
  margin: 0 0 16px;
}

/* ===== CARD TAGS ===== */
.seo-page-services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.hso-tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  color: var(--seo-page-services-text-muted);
  border: 1px solid rgba(255,255,255,0.07);
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.seo-page-services:hover .hso-tag { color: var(--seo-page-services-text-secondary); background: rgba(255,255,255,0.08); }

/* ===== CARD ARROW LINK ===== */
.seo-page-services__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-8px, 4px);
  transition: opacity var(--seo-page-services-transition), transform var(--seo-page-services-transition), color var(--seo-page-services-transition);
  color: var(--seo-page-services-text-secondary);
  text-decoration: none;
}
.seo-page-services__arrow svg { width: 14px; height: 14px; }

/* ===== GRADIENT THEMES PER CARD ===== */
.seo-page-services--fire .seo-page-services__glow { box-shadow: 0 0 60px rgba(255,69,0,0.18) inset; }
.seo-page-services--fire { --seo-page-services-border-grad: linear-gradient(135deg,#ff4500,#ff6ec7); }
.seo-page-services--fire .seo-page-services__icon-wrap { background: linear-gradient(135deg,rgba(255,69,0,0.18),rgba(255,110,199,0.1)); border: 1px solid rgba(255,69,0,0.25); }
.seo-page-services--fire .seo-page-services__title { color: #fff5f0; }
.seo-page-services--fire .seo-page-services__arrow { color: var(--seo-page-services-firebird-2); }

.seo-page-services--elephant .seo-page-services__glow { box-shadow: 0 0 60px rgba(123,31,162,0.2) inset; }
.seo-page-services--elephant { --seo-page-services-border-grad: linear-gradient(135deg,#1565c0,#7b1fa2,#0288d1); }
.seo-page-services--elephant .seo-page-services__icon-wrap { background: linear-gradient(135deg,rgba(21,101,192,0.18),rgba(123,31,162,0.14)); border: 1px solid rgba(123,31,162,0.25); }
.seo-page-services--elephant .seo-page-services__arrow { color: #82b1ff; }

.seo-page-services--dove .seo-page-services__glow { box-shadow: 0 0 60px rgba(0,188,212,0.15) inset; }
.seo-page-services--dove { --seo-page-services-border-grad: linear-gradient(135deg,#00897b,#00bcd4,#76ff03); }
.seo-page-services--dove .seo-page-services__icon-wrap { background: linear-gradient(135deg,rgba(0,137,123,0.18),rgba(0,188,212,0.12)); border: 1px solid rgba(0,188,212,0.22); }
.seo-page-services--dove .seo-page-services__arrow { color: var(--seo-page-services-dove-3); }

.seo-page-services--rainbow { --seo-page-services-border-grad: linear-gradient(135deg,#ff4500,#7b1fa2,#00bcd4); }
.seo-page-services--rainbow .seo-page-services__glow { box-shadow: 0 0 60px rgba(244,143,177,0.12) inset; }
.seo-page-services--rainbow .seo-page-services__icon-wrap { background: linear-gradient(135deg,rgba(255,69,0,0.1),rgba(123,31,162,0.12),rgba(0,188,212,0.1)); border: 1px solid rgba(255,255,255,0.1); }
.seo-page-services--rainbow .seo-page-services__arrow { color: #f48fb1; }

/* ===== FLOAT ICONS (badges) ===== */
.hso-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--seo-page-services-text-primary);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
  animation: hso-float-badge-anim 6s ease-in-out infinite;
}
.hso-float-badge svg { flex-shrink:0; }
.hso-float-badge--1 { top: 18%; left: 3%; background: rgba(255,69,0,0.15); animation-delay: 0s; }
.hso-float-badge--2 { top: 38%; right: 2%; background: rgba(21,101,192,0.18); animation-delay: -2s; }
.hso-float-badge--3 { bottom: 24%; left: 2%; background: rgba(0,137,123,0.15); animation-delay: -4s; }
@keyframes hso-float-badge-anim {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== SWIPER CAROUSEL (Mobile fallback showcase) ===== */
.hso-swiper-wrap {
  position: relative;
  margin-bottom: 50px;
  padding: 0 4px;
}
.hso-swiper-title {
  font-family: var(--seo-page-services-font-head);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--seo-page-services-text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hso-swiper-title span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg,var(--seo-page-services-dove-1),var(--seo-page-services-dove-3));
  color: #080c18;
}
.hso-swiper { overflow: hidden; border-radius: var(--seo-page-services-radius); }
.hso-swiper-slide {
  background: var(--seo-page-services-bg-card-alt);
  border: 1px solid var(--seo-page-services-border);
  border-radius: var(--seo-page-services-radius);
  padding: 24px 22px;
  height: auto;
}
.hso-swiper-slide__step {
  font-family: var(--seo-page-services-font-head);
  font-size: 36px;
  font-weight: 800;
  opacity: 0.08;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.hso-swiper-slide__title {
  font-family: var(--seo-page-services-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--seo-page-services-text-primary);
  margin-bottom: 8px;
}
.hso-swiper-slide__text {
  font-size: 13px;
  color: var(--seo-page-services-text-secondary);
  line-height: 1.65;
}
.swiper-pagination-bullet { background: var(--seo-page-services-text-muted) !important; opacity: 0.5; }
.swiper-pagination-bullet-active { background: var(--seo-page-services-firebird-2) !important; opacity: 1 !important; }

/* ===== CTA STRIP ===== */
.hso-cta-strip {
  position: relative;
  border-radius: var(--seo-page-services-radius);
  padding: 44px 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border: 1px solid rgba(255,255,255,0.07);
  z-index: 2;
}
.hso-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,rgba(255,69,0,0.12),rgba(123,31,162,0.12),rgba(0,188,212,0.1));
  z-index: 0;
}
.hso-cta-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--seo-page-services-bg-card);
  z-index: -1;
}
.hso-cta-strip__inner { position: relative; z-index: 1; }
.hso-cta-strip__title {
  font-family: var(--seo-page-services-font-head);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  color: var(--seo-page-services-text-primary);
  margin: 0 0 8px;
}
.hso-cta-strip__sub {
  font-size: 15px;
  color: var(--seo-page-services-text-secondary);
  margin: 0;
}
.hso-cta-strip__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ===== BUTTONS ===== */
.hso-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  font-family: var(--seo-page-services-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--seo-page-services-transition), box-shadow var(--seo-page-services-transition), opacity var(--seo-page-services-transition);
  white-space: nowrap;
}
.hso-btn:hover { transform: translateY(-2px); }
.hso-btn--fire {
  background: linear-gradient(135deg,var(--seo-page-services-firebird-1),var(--seo-page-services-firebird-2),var(--seo-page-services-firebird-4));
  color: #fff;
  box-shadow: 0 8px 30px rgba(255,69,0,0.35);
}
.hso-btn--fire:hover { box-shadow: 0 14px 40px rgba(255,69,0,0.5); }
.hso-btn--ghost {
  background: rgba(255,255,255,0.05);
  color: var(--seo-page-services-text-primary);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}
.hso-btn--ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.hso-btn svg { flex-shrink: 0; }

/* ===== LAZY FADE IN ===== */
.hso-lazy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.hso-lazy.hso-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hso-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .hso-float-badge { display: none; }
}
@media (max-width: 600px) {
  #home-services-seo-section { padding: 50px 0 60px; }
  .hso-grid { grid-template-columns: 1fr; gap: 14px; }
  .hso-cta-strip { padding: 30px 22px; }
  .hso-lifecycle-ring { width: 220px; height: 220px; }
}
@media (max-width: 480px) {
  .hso-stats-row { gap: 8px; }
  .hso-stat-badge { font-size: 12px; padding: 8px 14px; }
}

/* <!-- Seo page Services End --> */



/* <!-- About us page section start here --> */
/* ==========================================================================
   About Us Page — Main Content Styles
   File   : aboutus-page.css
   Prefix : aboutus-page-
   BG     : #080c18
   Fonts  : Syne (headings) | DM Sans (body)
   ========================================================================== */

/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  --ap-bg:          #080c18;
  --ap-bg-alt:      #0c1020;
  --ap-surface:     rgba(255,255,255,.04);
  --ap-surface-h:   rgba(255,255,255,.07);
  --ap-border:      rgba(255,255,255,.08);
  --ap-border-h:    rgba(255,255,255,.18);
  --ap-text:        #f0f4ff;
  --ap-muted:       rgba(240,244,255,.55);

  /* gradient stops */
  --ap-fire-a: #FF6B35; --ap-fire-b: #E8003D; --ap-fire-c: #FF0F7B;
  --ap-ele-a:  #7B2FFF; --ap-ele-b:  #2563EB; --ap-ele-c:  #06B6D4;
  --ap-dove-a: #34D399; --ap-dove-b: #06B6D4; --ap-dove-c: #818CF8;
  --ap-gold-a: #F59E0B; --ap-gold-b: #FF6B35;

  /* type */
  --ap-font-h: 'Syne', sans-serif;
  --ap-font-b: 'DM Sans', sans-serif;

  /* motion */
  --ap-ease: cubic-bezier(.22,1,.36,1);
  --ap-dur:  .65s;
}

/* ── Base helpers ───────────────────────────────────────────────────────── */
.aboutus-page-container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* gradient text helper */
.aboutus-page-gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}
.aboutus-page-gradient-text--fire     { background-image: linear-gradient(135deg, var(--ap-fire-a), var(--ap-fire-c)); }
.aboutus-page-gradient-text--elephant { background-image: linear-gradient(135deg, var(--ap-ele-a),  var(--ap-ele-c));  }
.aboutus-page-gradient-text--dove     { background-image: linear-gradient(135deg, var(--ap-dove-a), var(--ap-dove-c)); }
.aboutus-page-gradient-text--gold     { background-image: linear-gradient(135deg, var(--ap-gold-a), var(--ap-gold-b)); }

/* section title */
.aboutus-page-section-title {
  font-family: var(--ap-font-h);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ap-text);
  margin: 0 0 18px;
  letter-spacing: -.02em;
}
.aboutus-page-section-title--center { text-align: center; }

/* section header block */
.aboutus-page-section-header { margin-bottom: 48px; }

/* eyebrow */
.aboutus-page-eyebrow {
  font-family: var(--ap-font-b);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ap-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.aboutus-page-eyebrow--center { justify-content: center; }
.aboutus-page-eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aboutus-page-eyebrow-dot--fire     { background: linear-gradient(var(--ap-fire-a), var(--ap-fire-c)); }
.aboutus-page-eyebrow-dot--elephant { background: linear-gradient(var(--ap-ele-a),  var(--ap-ele-c));  }
.aboutus-page-eyebrow-dot--dove     { background: linear-gradient(var(--ap-dove-a), var(--ap-dove-c)); }
.aboutus-page-eyebrow-dot--gold     { background: linear-gradient(var(--ap-gold-a), var(--ap-gold-b)); }
.aboutus-page-eyebrow-line {
  display: block;
  height: 1px;
  width: 36px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

/* body text */
.aboutus-page-body-text {
  font-family: var(--ap-font-b);
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  line-height: 1.75;
  color: var(--ap-muted);
  margin: 0 0 24px;
}

/* CTA buttons */
.aboutus-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ap-font-b);
  font-size: .88rem;
  font-weight: 500;
  border-radius: 50px;
  padding: 12px 26px;
  text-decoration: none;
  transition: transform .3s var(--ap-ease), box-shadow .3s ease, opacity .3s ease;
  cursor: pointer;
}
.aboutus-page-btn svg { width: 16px; height: 16px; transition: transform .3s var(--ap-ease); }
.aboutus-page-btn:hover svg { transform: translateX(4px); }
.aboutus-page-btn--primary {
  background: linear-gradient(135deg, var(--ap-fire-a), var(--ap-fire-c));
  color: #fff;
  box-shadow: 0 8px 28px rgba(255,107,53,.35);
}
.aboutus-page-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(255,107,53,.5);
}
.aboutus-page-btn--ghost {
  background: transparent;
  color: var(--ap-text);
  border: 1px solid var(--ap-border-h);
}
.aboutus-page-btn--ghost:hover {
  background: var(--ap-surface-h);
  transform: translateY(-2px);
}
.aboutus-page-btn--sm { padding: 10px 22px; font-size: .82rem; }

/* ── two-col layout ─────────────────────────────────────────────────────── */
.aboutus-page-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}
.aboutus-page-two-col--reverse { direction: rtl; }
.aboutus-page-two-col--reverse > * { direction: ltr; }
@media (max-width: 860px) {
  .aboutus-page-two-col,
  .aboutus-page-two-col--reverse { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  .aboutus-page-two-col--reverse > * { direction: ltr; }
}

/* ── Image frame ────────────────────────────────────────────────────────── */
.aboutus-page-img-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ap-border);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.aboutus-page-img-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,53,.08), rgba(123,47,255,.06));
  pointer-events: none;
  z-index: 1;
}
.aboutus-page-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--ap-ease);
}
.aboutus-page-img-frame:hover .aboutus-page-img { transform: scale(1.04); }

/* floating badge inside image */
.aboutus-page-img-badge-float {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 80px; height: 80px;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.5));
  animation: ap-float-badge 4s ease-in-out infinite alternate;
}
@keyframes ap-float-badge {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px) rotate(8deg); }
}

/* ── Waves (shared) ─────────────────────────────────────────────────────── */
.aboutus-page-wave-top,
.aboutus-page-wave-bottom,
.aboutus-page-wave-top-alt,
.aboutus-page-wave-bottom-alt,
.aboutus-page-wave-divider {
  position: absolute;
  left: 0; width: 100%;
  pointer-events: none; z-index: 1;
}
.aboutus-page-wave-top,
.aboutus-page-wave-top-alt { top: -1px; height: 90px; }
.aboutus-page-wave-bottom,
.aboutus-page-wave-bottom-alt { bottom: -1px; height: 90px; }
.aboutus-page-wave-divider { bottom: 0; height: 50px; }
.aboutus-page-wave-top svg,  .aboutus-page-wave-bottom svg,
.aboutus-page-wave-top-alt svg, .aboutus-page-wave-bottom-alt svg,
.aboutus-page-wave-divider svg { display: block; width: 100%; height: 100%; }

/* ── Float orbs ─────────────────────────────────────────────────────────── */
.aboutus-page-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.aboutus-page-float {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  animation: ap-float 12s ease-in-out infinite alternate;
  will-change: transform;
}
.aboutus-page-float--fire     { width:300px;height:300px;top:-80px;left:-60px;background:radial-gradient(circle,var(--ap-fire-a),var(--ap-fire-c));animation-duration:14s; }
.aboutus-page-float--elephant { width:220px;height:220px;top:30px;right:5%;background:radial-gradient(circle,var(--ap-ele-a),var(--ap-ele-c));animation-duration:10s;animation-delay:-4s; }
.aboutus-page-float--dove     { width:180px;height:180px;bottom:-40px;left:40%;background:radial-gradient(circle,var(--ap-dove-a),var(--ap-dove-c));animation-duration:16s;animation-delay:-8s; }
@keyframes ap-float {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(32px,24px) scale(1.1); }
}

/* ── SVG Badges (hero) ──────────────────────────────────────────────────── */
.aboutus-page-badges { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.aboutus-page-badge  { position: absolute; animation: ap-badge-spin 18s linear infinite; }
.aboutus-page-badge--a { width:60px;height:60px;top:18%;right:12%;animation-duration:22s; }
.aboutus-page-badge--b { width:50px;height:50px;bottom:22%;left:8%;animation-duration:16s;animation-direction:reverse; }
.aboutus-page-badge--c { width:56px;height:56px;top:55%;right:28%;animation-duration:28s; }
@keyframes ap-badge-spin {
  from { transform: rotate(0deg) translateY(0); }
  50%  { transform: rotate(180deg) translateY(-14px); }
  to   { transform: rotate(360deg) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   § 1 HERO
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ap-bg);
  padding: 100px 0 90px;
  min-height: 600px;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.aboutus-page-hero-particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.aboutus-page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.aboutus-page-hero-title {
  font-family: var(--ap-font-h);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--ap-text);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 12px;
}
.aboutus-page-hero-sub {
  font-family: var(--ap-font-b);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: var(--ap-muted);
  margin: 0 0 24px;
}
.aboutus-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ap-font-b);
  font-size: .8rem;
  color: var(--ap-muted);
}
.aboutus-page-breadcrumb-link {
  color: var(--ap-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.aboutus-page-breadcrumb-link:hover { color: var(--ap-text); }
.aboutus-page-breadcrumb-sep { opacity: .4; }
.aboutus-page-breadcrumb-current { color: rgba(240,244,255,.8); }

/* ════════════════════════════════════════════════════════════════════════════
   § 2 WELCOME
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-welcome {
  position: relative;
  background: var(--ap-bg);
  padding: 70px 0 60px;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 3 JOURNEY / TIMELINE
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-journey {
  position: relative;
  background: var(--ap-bg-alt);
  padding: 70px 0;
}
.aboutus-page-timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aboutus-page-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.aboutus-page-timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.aboutus-page-timeline-dot--fire     { background: linear-gradient(135deg,var(--ap-fire-a),var(--ap-fire-c)); box-shadow: 0 0 8px var(--ap-fire-a); }
.aboutus-page-timeline-dot--elephant { background: linear-gradient(135deg,var(--ap-ele-a), var(--ap-ele-c));  box-shadow: 0 0 8px var(--ap-ele-a); }
.aboutus-page-timeline-dot--dove     { background: linear-gradient(135deg,var(--ap-dove-a),var(--ap-dove-c)); box-shadow: 0 0 8px var(--ap-dove-a); }
.aboutus-page-timeline-dot--gold     { background: linear-gradient(135deg,var(--ap-gold-a),var(--ap-gold-b)); box-shadow: 0 0 8px var(--ap-gold-a); }
.aboutus-page-timeline-year {
  font-family: var(--ap-font-h);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ap-text);
  margin-right: 8px;
}
.aboutus-page-timeline-desc {
  font-family: var(--ap-font-b);
  font-size: .88rem;
  color: var(--ap-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   § 4 TEAM — skill tags
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-team {
  position: relative;
  background: var(--ap-bg);
  padding: 70px 0;
}
.aboutus-page-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.aboutus-page-skill-tag {
  font-family: var(--ap-font-b);
  font-size: .78rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid transparent;
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease;
}
.aboutus-page-skill-tag:hover { transform: translateY(-2px); }
.aboutus-page-skill-tag--fire     { background: rgba(255,107,53,.12); border-color: rgba(255,107,53,.3); color: #FF9060; }
.aboutus-page-skill-tag--elephant { background: rgba(123,47,255,.12); border-color: rgba(123,47,255,.3); color: #A78BFA; }
.aboutus-page-skill-tag--dove     { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #6EE7B7; }
.aboutus-page-skill-tag--gold     { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #FBBF24; }

/* ════════════════════════════════════════════════════════════════════════════
   § 5 WHAT SETS US APART
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-apart {
  position: relative;
  background: var(--ap-bg-alt);
  padding: 70px 0;
  overflow: hidden;
}
.aboutus-page-apart-bg-orb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,47,255,.06), transparent 70%);
  pointer-events: none;
}
.aboutus-page-feature-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aboutus-page-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ap-font-b);
  font-size: .92rem;
  color: var(--ap-muted);
  transition: color .2s;
}
.aboutus-page-feature-item:hover { color: var(--ap-text); }
.aboutus-page-feature-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   § 6 STATS
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-stats {
  position: relative;
  background: linear-gradient(160deg, #0e1228 0%, #080c18 60%, #0d1020 100%);
  padding: 80px 0;
  overflow: hidden;
}
.aboutus-page-stats-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.aboutus-page-stats-orb--a {
  width: 350px; height: 350px;
  top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(255,107,53,.12), transparent);
  animation: ap-float 16s ease-in-out infinite alternate;
}
.aboutus-page-stats-orb--b {
  width: 280px; height: 280px;
  bottom: -60px; right: -40px;
  background: radial-gradient(circle, rgba(52,211,153,.1), transparent);
  animation: ap-float 12s ease-in-out infinite alternate-reverse;
}
.aboutus-page-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
@media (max-width: 900px) { .aboutus-page-stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .aboutus-page-stats-grid { grid-template-columns: 1fr; } }

.aboutus-page-stats-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 20px 26px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: transform var(--ap-dur) var(--ap-ease), border-color .3s, box-shadow .3s;
}
.aboutus-page-stats-card:hover {
  transform: translateY(-7px) scale(1.02);
  border-color: var(--ap-border-h);
  box-shadow: 0 28px 60px rgba(0,0,0,.5);
}
.aboutus-page-stats-glow {
  position: absolute;
  top: -50px; left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 140px;
  border-radius: 50%;
  filter: blur(44px);
  opacity: .28;
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.aboutus-page-stats-card:hover .aboutus-page-stats-glow { opacity: .55; transform: translateX(-50%) scale(1.25); }
.aboutus-page-stats-glow--fire     { background: radial-gradient(circle, var(--ap-fire-a), var(--ap-fire-c)); }
.aboutus-page-stats-glow--elephant { background: radial-gradient(circle, var(--ap-ele-a),  var(--ap-ele-c));  }
.aboutus-page-stats-glow--dove     { background: radial-gradient(circle, var(--ap-dove-a), var(--ap-dove-c)); }
.aboutus-page-stats-glow--gold     { background: radial-gradient(circle, var(--ap-gold-a), var(--ap-gold-b)); }

.aboutus-page-stats-icon {
  width: 48px; height: 48px;
  margin-bottom: 16px;
  display: block;
  transition: transform .3s var(--ap-ease);
}
.aboutus-page-stats-card:hover .aboutus-page-stats-icon { transform: rotate(-8deg) scale(1.15); }

.aboutus-page-stats-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-bottom: 8px;
}
.aboutus-page-stats-num {
  font-family: var(--ap-font-h);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: var(--ap-text);
  letter-spacing: -.02em;
}
.aboutus-page-stats-suf {
  font-family: var(--ap-font-h);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--ap-muted);
}
#aboutus-page-stats-card-projects .aboutus-page-stats-num { background: linear-gradient(135deg,var(--ap-fire-a),var(--ap-fire-c)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#aboutus-page-stats-card-clients  .aboutus-page-stats-num { background: linear-gradient(135deg,var(--ap-ele-a), var(--ap-ele-c));  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#aboutus-page-stats-card-leads    .aboutus-page-stats-num { background: linear-gradient(135deg,var(--ap-dove-a),var(--ap-dove-c)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#aboutus-page-stats-card-years    .aboutus-page-stats-num { background: linear-gradient(135deg,var(--ap-gold-a),var(--ap-gold-b)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.aboutus-page-stats-label {
  font-family: var(--ap-font-b);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ap-muted);
  margin: 0;
  transition: color .2s;
}
.aboutus-page-stats-card:hover .aboutus-page-stats-label { color: rgba(240,244,255,.8); }

.aboutus-page-stats-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background: rgba(255,255,255,.05);
}
.aboutus-page-stats-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .8s var(--ap-ease);
}
.aboutus-page-stats-card:hover .aboutus-page-stats-bar::after { width: 100%; }
.aboutus-page-stats-bar--fire::after     { background: linear-gradient(90deg,var(--ap-fire-a),var(--ap-fire-c)); }
.aboutus-page-stats-bar--elephant::after { background: linear-gradient(90deg,var(--ap-ele-a), var(--ap-ele-c));  }
.aboutus-page-stats-bar--dove::after     { background: linear-gradient(90deg,var(--ap-dove-a),var(--ap-dove-c)); }
.aboutus-page-stats-bar--gold::after     { background: linear-gradient(90deg,var(--ap-gold-a),var(--ap-gold-b)); }

/* ════════════════════════════════════════════════════════════════════════════
   § 7 CORE VALUES
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-values {
  position: relative;
  background: var(--ap-bg);
  padding: 70px 0;
}
.aboutus-page-values-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
@media (max-width: 860px) { .aboutus-page-values-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .aboutus-page-values-grid { grid-template-columns: 1fr; } }

.aboutus-page-value-card {
  position: relative;
  border-radius: 18px;
  padding: 28px 24px 24px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  overflow: hidden;
  transition: transform var(--ap-dur) var(--ap-ease), border-color .3s, box-shadow .3s;
}
.aboutus-page-value-card:hover {
  transform: translateY(-6px);
  border-color: var(--ap-border-h);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.aboutus-page-value-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ap-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform .3s var(--ap-ease), background .3s;
}
.aboutus-page-value-card:hover .aboutus-page-value-icon-wrap {
  transform: rotate(-6deg) scale(1.1);
  background: rgba(255,255,255,.09);
}
.aboutus-page-value-icon { width: 24px; height: 24px; display: block; }
.aboutus-page-value-title {
  font-family: var(--ap-font-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ap-text);
  margin: 0 0 10px;
}
.aboutus-page-value-desc {
  font-family: var(--ap-font-b);
  font-size: .85rem;
  line-height: 1.65;
  color: var(--ap-muted);
  margin: 0;
  transition: color .2s;
}
.aboutus-page-value-card:hover .aboutus-page-value-desc { color: rgba(240,244,255,.75); }
.aboutus-page-value-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  border-radius: 0 0 18px 18px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ap-ease);
}
.aboutus-page-value-card:hover .aboutus-page-value-bar { transform: scaleX(1); }
.aboutus-page-value-bar--fire     { background: linear-gradient(90deg,var(--ap-fire-a),var(--ap-fire-c)); }
.aboutus-page-value-bar--elephant { background: linear-gradient(90deg,var(--ap-ele-a), var(--ap-ele-c));  }
.aboutus-page-value-bar--dove     { background: linear-gradient(90deg,var(--ap-dove-a),var(--ap-dove-c)); }
.aboutus-page-value-bar--gold     { background: linear-gradient(90deg,var(--ap-gold-a),var(--ap-gold-b)); }

/* ════════════════════════════════════════════════════════════════════════════
   § 8 SERVICES SWIPER
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-services {
  position: relative;
  background: var(--ap-bg-alt);
  padding: 70px 0 80px;
  overflow: hidden;
}
.aboutus-page-services-bg-wave { position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none; }
.aboutus-page-services-bg-wave svg { display: block; width: 100%; }

.aboutus-page-services-swiper {
  padding-bottom: 50px !important;
  overflow: visible;
}
.aboutus-page-services-slide { height: auto; }

.aboutus-page-service-card {
  position: relative;
  border-radius: 18px;
  padding: 28px 22px 24px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ap-dur) var(--ap-ease), border-color .3s, box-shadow .3s;
}
.aboutus-page-service-card:hover {
  transform: translateY(-6px);
  border-color: var(--ap-border-h);
  box-shadow: 0 24px 55px rgba(0,0,0,.45);
}
.aboutus-page-service-card-glow {
  position: absolute;
  top: -60px; right: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .15;
  pointer-events: none;
  transition: opacity .4s;
}
.aboutus-page-service-card:hover .aboutus-page-service-card-glow { opacity: .35; }
.aboutus-page-service-card--fire     .aboutus-page-service-card-glow { background: radial-gradient(circle,var(--ap-fire-a),var(--ap-fire-c)); }
.aboutus-page-service-card--elephant .aboutus-page-service-card-glow { background: radial-gradient(circle,var(--ap-ele-a), var(--ap-ele-c));  }
.aboutus-page-service-card--dove     .aboutus-page-service-card-glow { background: radial-gradient(circle,var(--ap-dove-a),var(--ap-dove-c)); }
.aboutus-page-service-card--gold     .aboutus-page-service-card-glow { background: radial-gradient(circle,var(--ap-gold-a),var(--ap-gold-b)); }

.aboutus-page-service-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ap-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform .3s var(--ap-ease);
}
.aboutus-page-service-card:hover .aboutus-page-service-icon-wrap { transform: rotate(-6deg) scale(1.1); }
.aboutus-page-service-icon { width: 28px; height: 28px; }
.aboutus-page-service-title {
  font-family: var(--ap-font-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ap-text);
  margin: 0 0 10px;
}
.aboutus-page-service-desc {
  font-family: var(--ap-font-b);
  font-size: .84rem;
  line-height: 1.65;
  color: var(--ap-muted);
  margin: 0 0 auto;
  padding-bottom: 18px;
  flex: 1;
}
.aboutus-page-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ap-font-b);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 18px;
  transition: gap .25s ease, opacity .2s;
}
.aboutus-page-service-link svg { width: 14px; height: 14px; transition: transform .25s ease; }
.aboutus-page-service-link:hover svg { transform: translateX(4px); }
.aboutus-page-service-card--fire     .aboutus-page-service-link { color: #FF9060; }
.aboutus-page-service-card--elephant .aboutus-page-service-link { color: #A78BFA; }
.aboutus-page-service-card--dove     .aboutus-page-service-link { color: #6EE7B7; }
.aboutus-page-service-card--gold     .aboutus-page-service-link { color: #FBBF24; }

/* Swiper overrides */
.aboutus-page-services-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,.25);
  opacity: 1;
  transition: background .3s, transform .3s;
}
.aboutus-page-services-swiper .swiper-pagination-bullet-active {
  background: linear-gradient(90deg, var(--ap-fire-a), var(--ap-fire-c));
  transform: scale(1.3);
}
.aboutus-page-services-prev,
.aboutus-page-services-next {
  color: var(--ap-text) !important;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  transition: background .2s, border-color .2s;
}
.aboutus-page-services-prev:hover,
.aboutus-page-services-next:hover { background: var(--ap-surface-h); border-color: var(--ap-border-h); }
.aboutus-page-services-prev::after,
.aboutus-page-services-next::after { font-size: 14px !important; }

.aboutus-page-services-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.aboutus-page-services-cta-text {
  font-family: var(--ap-font-b);
  font-size: .95rem;
  color: var(--ap-muted);
  margin: 0;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 9 COMMITMENT
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-commitment {
  position: relative;
  background: var(--ap-bg);
  padding: 70px 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 10 FUTURE / SPLIT CARDS
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-future {
  position: relative;
  background: var(--ap-bg-alt);
  padding: 70px 0;
}
.aboutus-page-split-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 680px) { .aboutus-page-split-cards { grid-template-columns: 1fr; } }

.aboutus-page-split-card {
  border-radius: 20px;
  padding: 36px 30px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  overflow: hidden;
  position: relative;
  transition: transform var(--ap-dur) var(--ap-ease), border-color .3s, box-shadow .3s;
}
.aboutus-page-split-card:hover {
  transform: translateY(-5px);
  border-color: var(--ap-border-h);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
}
.aboutus-page-split-card--elephant::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(123,47,255,.06), transparent);
  pointer-events: none;
}
.aboutus-page-split-card--dove::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(52,211,153,.05), transparent);
  pointer-events: none;
}
.aboutus-page-split-card-icon {
  width: 64px; height: 64px;
  margin-bottom: 20px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.aboutus-page-split-title {
  font-family: var(--ap-font-h);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ap-text);
  margin: 0 0 12px;
}
.aboutus-page-split-text {
  font-family: var(--ap-font-b);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ap-muted);
  margin: 0 0 20px;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 11 CAREERS
   ════════════════════════════════════════════════════════════════════════════ */
#aboutus-page-careers {
  position: relative;
  background: var(--ap-bg);
  padding: 70px 0 80px;
  overflow: hidden;
}
.aboutus-page-careers-wave {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; pointer-events: none;
}
.aboutus-page-careers-wave svg { display: block; width: 100%; }
.aboutus-page-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 28px;
}
.aboutus-page-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ap-font-b);
  font-size: .82rem;
  color: var(--ap-muted);
}
.aboutus-page-perk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: ap-perk-pulse 2.5s ease-in-out infinite;
}
.aboutus-page-perk-dot--fire     { background: var(--ap-fire-a); animation-delay: 0s; }
.aboutus-page-perk-dot--elephant { background: var(--ap-ele-a);  animation-delay: .5s; }
.aboutus-page-perk-dot--dove     { background: var(--ap-dove-a); animation-delay: 1s; }
.aboutus-page-perk-dot--gold     { background: var(--ap-gold-a); animation-delay: 1.5s; }
@keyframes ap-perk-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}

/* ════════════════════════════════════════════════════════════════════════════
   AOS (inline fallback — if using IntersectionObserver approach in JS)
   ════════════════════════════════════════════════════════════════════════════ */
[data-aos] {
  opacity: 0;
  transition: opacity .7s var(--ap-ease), transform .7s var(--ap-ease);
}
[data-aos="fade-up"]    { transform: translateY(28px); }
[data-aos="fade-right"] { transform: translateX(-28px); }
[data-aos="fade-left"]  { transform: translateX(28px); }
[data-aos].aos-animate  { opacity: 1; transform: none; }

/* Stagger delays */
[data-aos-delay="50"]  { transition-delay: 50ms; }
[data-aos-delay="60"]  { transition-delay: 60ms; }
[data-aos-delay="80"]  { transition-delay: 80ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="110"] { transition-delay: 110ms; }
[data-aos-delay="120"] { transition-delay: 120ms; }
[data-aos-delay="130"] { transition-delay: 130ms; }
[data-aos-delay="160"] { transition-delay: 160ms; }
[data-aos-delay="170"] { transition-delay: 170ms; }
[data-aos-delay="180"] { transition-delay: 180ms; }
[data-aos-delay="210"] { transition-delay: 210ms; }
[data-aos-delay="220"] { transition-delay: 220ms; }
[data-aos-delay="230"] { transition-delay: 230ms; }
[data-aos-delay="240"] { transition-delay: 240ms; }
[data-aos-delay="290"] { transition-delay: 290ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="320"] { transition-delay: 320ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }

/* ─── Responsive container ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .aboutus-page-container { width: 94%; }
  .aboutus-page-hero-title { letter-spacing: -.03em; }
  .aboutus-page-services-cta { flex-direction: column; gap: 14px; }
}

/* <!-- About us page section end here --> */

/* <!-- About us page Reasons To Work Together start --> */
:root {
  --aboutus-page-rtw-bg:               #080c18;
  --aboutus-page-rtw-surface:          #0d1224;
  --aboutus-page-rtw-border:           rgba(255,255,255,0.07);
  --aboutus-page-rtw-border-hover:     rgba(255,120,50,0.45);

  /* Gradient palettes */
  --aboutus-page-rtw-fire-start:       #ff4500;
  --aboutus-page-rtw-fire-mid:         #ff2d78;
  --aboutus-page-rtw-fire-end:         #ffb347;

  --aboutus-page-rtw-ocean-start:      #1a6dff;
  --aboutus-page-rtw-ocean-mid:        #a855f7;
  --aboutus-page-rtw-ocean-end:        #06b6d4;

  --aboutus-page-rtw-nature-start:     #00e5a0;
  --aboutus-page-rtw-nature-mid:       #22d3ee;
  --aboutus-page-rtw-nature-end:       #84cc16;

  --aboutus-page-rtw-text-primary:     #ffffff;
  --aboutus-page-rtw-text-secondary:   rgba(255,255,255,0.62);
  --aboutus-page-rtw-text-muted:       rgba(255,255,255,0.38);

  --aboutus-page-rtw-radius:           18px;
  --aboutus-page-rtw-radius-lg:        26px;
  --aboutus-page-rtw-transition:       0.38s cubic-bezier(0.4,0,0.2,1);
}

/* ═══════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════ */
#aboutus-page-reasontowork {
  position: relative;
  overflow: hidden;
  background: var(--aboutus-page-rtw-bg);
  padding: 80px 0 90px;
  isolation: isolate;
}

/* Particles canvas */
#aboutus-page-rtw-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Ambient glow blobs */
#aboutus-page-reasontowork::before,
#aboutus-page-reasontowork::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
#aboutus-page-reasontowork::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--aboutus-page-rtw-fire-start), transparent 70%);
  top: -160px; left: -160px;
  animation: aboutus-rtw-blob-drift 14s ease-in-out infinite alternate;
}
#aboutus-page-reasontowork::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--aboutus-page-rtw-ocean-mid), transparent 70%);
  bottom: -140px; right: -120px;
  animation: aboutus-rtw-blob-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes aboutus-rtw-blob-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.12); }
}

/* ═══════════════════════════════════════════
   INNER CONTAINER
═══════════════════════════════════════════ */
.aboutus-page-rtw-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════
   WAVY SVG DIVIDER TOP
═══════════════════════════════════════════ */
.aboutus-page-rtw-wave-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  line-height: 0;
}
.aboutus-page-rtw-wave-top svg {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════
   HEADING AREA
═══════════════════════════════════════════ */
.aboutus-page-rtw-heading-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.aboutus-page-rtw-accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(180deg,
    var(--aboutus-page-rtw-fire-start),
    var(--aboutus-page-rtw-fire-mid)
  );
  position: relative;
  overflow: visible;
}
.aboutus-page-rtw-accent-bar::after {
  content: "";
  position: absolute;
  width: 5px; height: 100%;
  top: 0; left: 0;
  background: inherit;
  filter: blur(8px);
  opacity: 0.8;
}

.aboutus-page-rtw-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  color: var(--aboutus-page-rtw-text-primary);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}
.aboutus-page-rtw-title span {
  background: linear-gradient(90deg,
    var(--aboutus-page-rtw-fire-start),
    var(--aboutus-page-rtw-fire-mid) 50%,
    var(--aboutus-page-rtw-fire-end)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* intro paragraph */
.aboutus-page-rtw-intro {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 400;
  color: var(--aboutus-page-rtw-text-secondary);
  line-height: 1.75;
  max-width: 860px;
  margin: 0 0 52px 0;
}
.aboutus-page-rtw-intro strong {
  color: var(--aboutus-page-rtw-text-primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   GRID
═══════════════════════════════════════════ */
.aboutus-page-rtw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ═══════════════════════════════════════════
   CARD
═══════════════════════════════════════════ */
.aboutus-page-rtw-card {
  position: relative;
  background: var(--aboutus-page-rtw-surface);
  border: 1px solid var(--aboutus-page-rtw-border);
  border-radius: var(--aboutus-page-rtw-radius-lg);
  padding: 34px 32px 30px;
  overflow: hidden;
  cursor: default;
  transition:
    border-color var(--aboutus-page-rtw-transition),
    transform var(--aboutus-page-rtw-transition),
    box-shadow var(--aboutus-page-rtw-transition);
  /* lazy-reveal */
  opacity: 0;
  transform: translateY(40px);
}
.aboutus-page-rtw-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color var(--aboutus-page-rtw-transition),
    box-shadow var(--aboutus-page-rtw-transition);
}
.aboutus-page-rtw-card:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: var(--aboutus-page-rtw-border-hover);
  box-shadow:
    0 24px 56px -12px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,120,50,0.12);
}

/* card shimmer on hover */
.aboutus-page-rtw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    transparent 60%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--aboutus-page-rtw-transition);
  pointer-events: none;
}
.aboutus-page-rtw-card:hover::before { opacity: 1; }

/* bottom gradient glow line */
.aboutus-page-rtw-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--aboutus-page-rtw-transition);
}
.aboutus-page-rtw-card:hover::after { opacity: 1; }

/* Gradient variants per card */
.aboutus-page-rtw-card[data-rtw-palette="fire"]::after {
  background: linear-gradient(90deg,
    var(--aboutus-page-rtw-fire-start),
    var(--aboutus-page-rtw-fire-mid),
    var(--aboutus-page-rtw-fire-end)
  );
}
.aboutus-page-rtw-card[data-rtw-palette="ocean"]::after {
  background: linear-gradient(90deg,
    var(--aboutus-page-rtw-ocean-start),
    var(--aboutus-page-rtw-ocean-mid),
    var(--aboutus-page-rtw-ocean-end)
  );
}
.aboutus-page-rtw-card[data-rtw-palette="nature"]::after {
  background: linear-gradient(90deg,
    var(--aboutus-page-rtw-nature-start),
    var(--aboutus-page-rtw-nature-mid),
    var(--aboutus-page-rtw-nature-end)
  );
}

/* ═══════════════════════════════════════════
   CARD ICON BADGE
═══════════════════════════════════════════ */
.aboutus-page-rtw-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  margin-bottom: 18px;
  position: relative;
  flex-shrink: 0;
  animation: aboutus-rtw-float 3.6s ease-in-out infinite;
}
.aboutus-page-rtw-icon-badge svg {
  width: 26px; height: 26px;
  position: relative; z-index: 1;
}
/* Float keyframes with stagger via custom property */
@keyframes aboutus-rtw-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}
.aboutus-page-rtw-card:nth-child(1) .aboutus-page-rtw-icon-badge { animation-delay: 0s; }
.aboutus-page-rtw-card:nth-child(2) .aboutus-page-rtw-icon-badge { animation-delay: 0.6s; }
.aboutus-page-rtw-card:nth-child(3) .aboutus-page-rtw-icon-badge { animation-delay: 1.2s; }
.aboutus-page-rtw-card:nth-child(4) .aboutus-page-rtw-icon-badge { animation-delay: 1.8s; }
.aboutus-page-rtw-card:nth-child(5) .aboutus-page-rtw-icon-badge { animation-delay: 0.3s; }
.aboutus-page-rtw-card:nth-child(6) .aboutus-page-rtw-icon-badge { animation-delay: 0.9s; }

/* badge bg colors */
.aboutus-page-rtw-card[data-rtw-palette="fire"] .aboutus-page-rtw-icon-badge {
  background: linear-gradient(135deg,
    rgba(255,69,0,0.22),
    rgba(255,45,120,0.15)
  );
  box-shadow: 0 0 0 1px rgba(255,69,0,0.22), 0 6px 24px -6px rgba(255,69,0,0.3);
}
.aboutus-page-rtw-card[data-rtw-palette="ocean"] .aboutus-page-rtw-icon-badge {
  background: linear-gradient(135deg,
    rgba(26,109,255,0.22),
    rgba(168,85,247,0.15)
  );
  box-shadow: 0 0 0 1px rgba(26,109,255,0.22), 0 6px 24px -6px rgba(168,85,247,0.3);
}
.aboutus-page-rtw-card[data-rtw-palette="nature"] .aboutus-page-rtw-icon-badge {
  background: linear-gradient(135deg,
    rgba(0,229,160,0.22),
    rgba(34,211,238,0.15)
  );
  box-shadow: 0 0 0 1px rgba(0,229,160,0.22), 0 6px 24px -6px rgba(0,229,160,0.3);
}

/* ═══════════════════════════════════════════
   CARD NUMBER + TITLE
═══════════════════════════════════════════ */
.aboutus-page-rtw-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.aboutus-page-rtw-card-number {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.6;
  flex-shrink: 0;
}
.aboutus-page-rtw-card[data-rtw-palette="fire"] .aboutus-page-rtw-card-number {
  background: linear-gradient(90deg, var(--aboutus-page-rtw-fire-start), var(--aboutus-page-rtw-fire-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(255,69,0,0.3);
}
.aboutus-page-rtw-card[data-rtw-palette="ocean"] .aboutus-page-rtw-card-number {
  background: linear-gradient(90deg, var(--aboutus-page-rtw-ocean-start), var(--aboutus-page-rtw-ocean-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(26,109,255,0.3);
}
.aboutus-page-rtw-card[data-rtw-palette="nature"] .aboutus-page-rtw-card-number {
  background: linear-gradient(90deg, var(--aboutus-page-rtw-nature-start), var(--aboutus-page-rtw-nature-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(0,229,160,0.3);
}

.aboutus-page-rtw-card-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--aboutus-page-rtw-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.aboutus-page-rtw-card-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--aboutus-page-rtw-text-secondary);
  line-height: 1.72;
  margin: 0;
}

/* ═══════════════════════════════════════════
   PARALLAX DECORATIVE SVG ELEMENTS
═══════════════════════════════════════════ */
.aboutus-page-rtw-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
#aboutus-page-rtw-deco-fire {
  top: 8%; right: 4%;
  width: clamp(80px, 10vw, 140px);
  opacity: 0.55;
}
#aboutus-page-rtw-deco-wave {
  bottom: 6%; left: 3%;
  width: clamp(70px, 8vw, 110px);
  opacity: 0.4;
}
#aboutus-page-rtw-deco-dove {
  top: 42%; right: 1%;
  width: clamp(55px, 6vw, 90px);
  opacity: 0.38;
  transform: scaleX(-1);
}

/* ═══════════════════════════════════════════
   WAVY DIVIDER BOTTOM
═══════════════════════════════════════════ */
.aboutus-page-rtw-wave-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  line-height: 0;
}
.aboutus-page-rtw-wave-bottom svg {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 820px) {
  .aboutus-page-rtw-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #aboutus-page-reasontowork {
    padding: 60px 0 70px;
  }
}
@media (max-width: 480px) {
  .aboutus-page-rtw-card {
    padding: 24px 20px 22px;
  }
  .aboutus-page-rtw-intro {
    margin-bottom: 36px;
  }
}

/* <!-- About us page Reasons To Work Together End--> */


/* <!-- contact us page map start  --> */
:root {
  --contactus-page-map-font-head: 'Syne', sans-serif;
  --contactus-page-map-font-body: 'DM Sans', sans-serif;

  --contactus-page-map-bg-deep:      #080c18;
  --contactus-page-map-bg-card:      #0d1224;
  --contactus-page-map-bg-glass:     rgba(13, 18, 36, 0.72);
  --contactus-page-map-border:       rgba(255,255,255,0.08);
  --contactus-page-map-border-glow:  rgba(255,120,50,0.35);

  /* Fire-bird gradient */
  --contactus-page-map-grad-fire:    linear-gradient(135deg, #ff4e00 0%, #ec9f05 30%, #ff0080 70%, #d63031 100%);
  /* Ocean/elephant wave */
  --contactus-page-map-grad-ocean:   linear-gradient(135deg, #2d00f7 0%, #6a00f4 35%, #8900f2 60%, #a100f2 100%);
  /* Dove/teal rainbow */
  --contactus-page-map-grad-dove:    linear-gradient(135deg, #00b4d8 0%, #06d6a0 35%, #80ed99 65%, #caffbf 100%);

  --contactus-page-map-text-primary: #f0f4ff;
  --contactus-page-map-text-muted:   rgba(200,210,240,0.6);

  --contactus-page-map-radius-lg:    20px;
  --contactus-page-map-radius-md:    12px;
  --contactus-page-map-radius-sm:    8px;

  --contactus-page-map-shadow-fire:  0 0 40px rgba(255,78,0,0.25), 0 0 80px rgba(236,159,5,0.12);
  --contactus-page-map-shadow-ocean: 0 0 40px rgba(45,0,247,0.25), 0 0 80px rgba(137,0,242,0.12);
  --contactus-page-map-shadow-dove:  0 0 40px rgba(0,180,216,0.25), 0 0 80px rgba(6,214,160,0.12);
  --contactus-page-map-transition:   all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   SECTION WRAPPER
============================================================ */
.contactus-page-map-section {
  position: relative;
  overflow: hidden;
  background: var(--contactus-page-map-bg-deep);
  padding: 72px 0 80px;
  isolation: isolate;
}

/* ============================================================
   PARTICLES CANVAS
============================================================ */
#contactus-page-map-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   WAVY SVG DIVIDERS
============================================================ */
.contactus-page-map-wave-top,
.contactus-page-map-wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
.contactus-page-map-wave-top    { top: -1px; }
.contactus-page-map-wave-bottom { bottom: -1px; transform: rotate(180deg); }
.contactus-page-map-wave-top svg,
.contactus-page-map-wave-bottom svg {
  display: block;
  width: 100%;
  height: 56px;
}

/* ============================================================
   AMBIENT ORB BLOBS
============================================================ */
.contactus-page-map-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  animation: contactus-page-map-orb-drift 12s ease-in-out infinite alternate;
}
.contactus-page-map-orb--fire  { width: 480px; height: 480px; background: radial-gradient(circle, #ff4e00, #ec9f05); top: -100px; left: -80px; }
.contactus-page-map-orb--ocean { width: 400px; height: 400px; background: radial-gradient(circle, #6a00f4, #2d00f7); bottom: -80px; right: -60px; animation-delay: -4s; }
.contactus-page-map-orb--dove  { width: 320px; height: 320px; background: radial-gradient(circle, #00b4d8, #06d6a0); top: 40%; left: 50%; animation-delay: -8s; }

@keyframes contactus-page-map-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.08); }
}

/* ============================================================
   CONTAINER
============================================================ */
.contactus-page-map-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   SECTION HEADER
============================================================ */
.contactus-page-map-header {
  text-align: center;
  margin-bottom: 52px;
}

.contactus-page-map-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,78,0,0.12);
  border: 1px solid rgba(255,78,0,0.3);
  border-radius: 50px;
  padding: 6px 18px;
  font-family: var(--contactus-page-map-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff9f60;
  margin-bottom: 20px;
  animation: contactus-page-map-badge-pulse 3s ease-in-out infinite;
}
.contactus-page-map-badge svg { flex-shrink: 0; }

@keyframes contactus-page-map-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,78,0,0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(255,78,0,0); }
}

.contactus-page-map-title {
  font-family: var(--contactus-page-map-font-head);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--contactus-page-map-text-primary);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.contactus-page-map-title-grad {
  background: var(--contactus-page-map-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contactus-page-map-subtitle {
  font-family: var(--contactus-page-map-font-body);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  color: var(--contactus-page-map-text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ============================================================
   LAYOUT GRID
============================================================ */
.contactus-page-map-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: start;
}

/* ============================================================
   INFO PANEL (LEFT)
============================================================ */
.contactus-page-map-info-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Glass card base */
.contactus-page-map-card {
  background: var(--contactus-page-map-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--contactus-page-map-border);
  border-radius: var(--contactus-page-map-radius-lg);
  padding: 24px 22px;
  transition: var(--contactus-page-map-transition);
  position: relative;
  overflow: hidden;
}
.contactus-page-map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,78,0,0.35), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}
.contactus-page-map-card:hover {
  border-color: rgba(255,120,50,0.3);
  transform: translateY(-3px);
  box-shadow: var(--contactus-page-map-shadow-fire);
}

/* Icon rows */
.contactus-page-map-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--contactus-page-map-border);
}
.contactus-page-map-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.contactus-page-map-info-row:first-child { padding-top: 0; }

.contactus-page-map-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contactus-page-map-info-icon--fire  { background: linear-gradient(135deg, #ff4e00, #ec9f05); box-shadow: 0 4px 15px rgba(255,78,0,0.4); }
.contactus-page-map-info-icon--ocean { background: linear-gradient(135deg, #2d00f7, #8900f2); box-shadow: 0 4px 15px rgba(45,0,247,0.4); }
.contactus-page-map-info-icon--dove  { background: linear-gradient(135deg, #00b4d8, #06d6a0); box-shadow: 0 4px 15px rgba(0,180,216,0.4); }

.contactus-page-map-info-label {
  font-family: var(--contactus-page-map-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--contactus-page-map-text-muted);
  margin-bottom: 4px;
}
.contactus-page-map-info-value {
  font-family: var(--contactus-page-map-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--contactus-page-map-text-primary);
  line-height: 1.5;
}
.contactus-page-map-info-value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
}
.contactus-page-map-info-value a:hover { color: #ff9f60; }

/* Rating card */
.contactus-page-map-rating-card {
  background: linear-gradient(135deg, rgba(255,78,0,0.12), rgba(236,159,5,0.08));
  border-color: rgba(255,78,0,0.2);
}
.contactus-page-map-rating-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contactus-page-map-rating-score {
  font-family: var(--contactus-page-map-font-head);
  font-size: 44px;
  font-weight: 800;
  background: var(--contactus-page-map-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.contactus-page-map-rating-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 5px;
}
.contactus-page-map-rating-stars svg { width: 16px; height: 16px; }
.contactus-page-map-rating-count {
  font-family: var(--contactus-page-map-font-body);
  font-size: 13px;
  color: var(--contactus-page-map-text-muted);
}

/* CTA Button */
.contactus-page-map-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--contactus-page-map-radius-md);
  font-family: var(--contactus-page-map-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--contactus-page-map-grad-fire);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: var(--contactus-page-map-transition);
  position: relative;
  overflow: hidden;
}
.contactus-page-map-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.3s;
}
.contactus-page-map-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,78,0,0.5);
}
.contactus-page-map-cta:hover::after { background: rgba(255,255,255,0.08); }

/* Float badges */
.contactus-page-map-float-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contactus-page-map-float-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 50px;
  font-family: var(--contactus-page-map-font-body);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  animation: contactus-page-map-float 4s ease-in-out infinite;
}
.contactus-page-map-float-badge:nth-child(2) { animation-delay: -1.5s; }
.contactus-page-map-float-badge:nth-child(3) { animation-delay: -3s; }

.contactus-page-map-float-badge--fire  { color: #ff9f60; border-color: rgba(255,78,0,0.3);  background: rgba(255,78,0,0.08);  }
.contactus-page-map-float-badge--ocean { color: #a78bfa; border-color: rgba(106,0,244,0.3); background: rgba(106,0,244,0.08); }
.contactus-page-map-float-badge--dove  { color: #6ee7b7; border-color: rgba(0,180,216,0.3); background: rgba(0,180,216,0.08); }

@keyframes contactus-page-map-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ============================================================
   MAP WRAPPER (RIGHT)
============================================================ */
.contactus-page-map-wrapper {
  position: relative;
  border-radius: var(--contactus-page-map-radius-lg);
  overflow: hidden;
  border: 1px solid var(--contactus-page-map-border);
  box-shadow: var(--contactus-page-map-shadow-ocean);
  transition: var(--contactus-page-map-transition);
  min-height: 480px;
}
.contactus-page-map-wrapper:hover {
  border-color: rgba(106,0,244,0.4);
  box-shadow: 0 0 60px rgba(45,0,247,0.3), 0 0 120px rgba(137,0,242,0.15);
}

.contactus-page-map-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  border: none;
  border-radius: inherit;
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.4s;
}
.contactus-page-map-wrapper:hover iframe { filter: saturate(1) contrast(1.08); }

/* Map overlay corner badge */
.contactus-page-map-overlay-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--contactus-page-map-bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--contactus-page-map-border);
  border-radius: var(--contactus-page-map-radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
  animation: contactus-page-map-float 5s ease-in-out infinite;
}
.contactus-page-map-overlay-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #06d6a0;
  box-shadow: 0 0 0 0 rgba(6,214,160,0.5);
  animation: contactus-page-map-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes contactus-page-map-ping {
  75%, 100% { box-shadow: 0 0 0 10px rgba(6,214,160,0); }
}
.contactus-page-map-overlay-badge-text {
  font-family: var(--contactus-page-map-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--contactus-page-map-text-primary);
}

/* Map gradient border glow (animated) */
.contactus-page-map-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--contactus-page-map-radius-lg) + 2px);
  background: conic-gradient(from var(--contactus-page-map-glow-angle, 0deg), #ff4e00, #ec9f05, #ff0080, #2d00f7, #00b4d8, #06d6a0, #ff4e00);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  animation: contactus-page-map-spin 6s linear infinite;
}
.contactus-page-map-wrapper:hover::before { opacity: 0.6; }

@property --contactus-page-map-glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes contactus-page-map-spin {
  to { --contactus-page-map-glow-angle: 360deg; }
}

/* ============================================================
   STATS SWIPER (bottom strip)
============================================================ */
.contactus-page-map-stats-strip {
  margin-top: 36px;
  position: relative;
}
.contactus-page-map-stats-strip .swiper { overflow: visible; }
.contactus-page-map-stat-slide {
  background: var(--contactus-page-map-bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--contactus-page-map-border);
  border-radius: var(--contactus-page-map-radius-lg);
  padding: 22px 20px;
  text-align: center;
  transition: var(--contactus-page-map-transition);
  overflow: hidden;
  position: relative;
}
.contactus-page-map-stat-slide::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 var(--contactus-page-map-radius-lg) var(--contactus-page-map-radius-lg);
}
.contactus-page-map-stat-slide--fire::after  { background: var(--contactus-page-map-grad-fire); }
.contactus-page-map-stat-slide--ocean::after { background: var(--contactus-page-map-grad-ocean); }
.contactus-page-map-stat-slide--dove::after  { background: var(--contactus-page-map-grad-dove); }

.contactus-page-map-stat-slide:hover {
  transform: translateY(-4px);
  border-color: rgba(255,120,50,0.25);
}

.contactus-page-map-stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.contactus-page-map-stat-icon--fire  { background: linear-gradient(135deg,#ff4e00,#ec9f05); box-shadow: 0 4px 20px rgba(255,78,0,0.4); }
.contactus-page-map-stat-icon--ocean { background: linear-gradient(135deg,#2d00f7,#8900f2); box-shadow: 0 4px 20px rgba(45,0,247,0.4); }
.contactus-page-map-stat-icon--dove  { background: linear-gradient(135deg,#00b4d8,#06d6a0); box-shadow: 0 4px 20px rgba(0,180,216,0.4); }

.contactus-page-map-stat-num {
  font-family: var(--contactus-page-map-font-head);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.contactus-page-map-stat-num--fire  { background: var(--contactus-page-map-grad-fire);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.contactus-page-map-stat-num--ocean { background: var(--contactus-page-map-grad-ocean); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.contactus-page-map-stat-num--dove  { background: var(--contactus-page-map-grad-dove);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.contactus-page-map-stat-label {
  font-family: var(--contactus-page-map-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--contactus-page-map-text-muted);
}

/* ============================================================
   PARALLAX LAYER (JS-driven)
============================================================ */
.contactus-page-map-parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ============================================================
   REVEAL ANIMATIONS (intersection observer)
============================================================ */
.contactus-page-map-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.contactus-page-map-reveal.contactus-page-map-revealed {
  opacity: 1;
  transform: translateY(0);
}
.contactus-page-map-reveal--delay-1 { transition-delay: 0.1s; }
.contactus-page-map-reveal--delay-2 { transition-delay: 0.2s; }
.contactus-page-map-reveal--delay-3 { transition-delay: 0.3s; }
.contactus-page-map-reveal--delay-4 { transition-delay: 0.4s; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .contactus-page-map-grid {
    grid-template-columns: 1fr;
  }
  .contactus-page-map-info-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contactus-page-map-float-badges { justify-content: center; }
}
@media (max-width: 768px) {
  .contactus-page-map-info-panel {
    grid-template-columns: 1fr;
  }
  .contactus-page-map-wrapper,
  .contactus-page-map-wrapper iframe { min-height: 320px; }
}
@media (max-width: 480px) {
  .contactus-page-map-title { font-size: 28px; }
}
/* <!-- contact us page map End  --> */



/* <!-- About us page project counter start--> */
#aboutus-project-counter-section {
  /* Palette */
  --aboutus-counter-bg: #080c18;
  --aboutus-counter-surface: rgba(255,255,255,.04);
  --aboutus-counter-border: rgba(255,255,255,.08);
  --aboutus-counter-text-primary: #f0f4ff;
  --aboutus-counter-text-muted: rgba(240,244,255,.55);

  /* Gradient stops */
  --aboutus-counter-fire-a: #FF6B35;
  --aboutus-counter-fire-b: #E8003D;
  --aboutus-counter-fire-c: #FF0F7B;
  --aboutus-counter-elephant-a: #7B2FFF;
  --aboutus-counter-elephant-b: #2563EB;
  --aboutus-counter-elephant-c: #06B6D4;
  --aboutus-counter-dove-a: #34D399;
  --aboutus-counter-dove-b: #06B6D4;
  --aboutus-counter-dove-c: #818CF8;
  --aboutus-counter-gold-a: #F59E0B;
  --aboutus-counter-gold-b: #FF6B35;

  /* Typography */
  --aboutus-counter-font-head: 'Syne', sans-serif;
  --aboutus-counter-font-body: 'DM Sans', sans-serif;

  /* Motion */
  --aboutus-counter-ease: cubic-bezier(.22,1,.36,1);
  --aboutus-counter-duration: .7s;
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.aboutus-project-counter-section {
  position: relative;
  overflow: hidden;
  background: var(--aboutus-counter-bg);
  padding: 60px 0 50px;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   tsParticles canvas
   -------------------------------------------------------------------------- */
.aboutus-project-counter-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Wavy SVG separators
   -------------------------------------------------------------------------- */
.aboutus-project-counter-wave-top,
.aboutus-project-counter-wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}
.aboutus-project-counter-wave-top  { top: -1px; }
.aboutus-project-counter-wave-bottom { bottom: -1px; }
.aboutus-project-counter-wave-top  svg,
.aboutus-project-counter-wave-bottom svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Floating gradient orbs
   -------------------------------------------------------------------------- */
.aboutus-project-counter-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.aboutus-project-counter-float {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  animation: aboutus-float-drift 9s ease-in-out infinite alternate;
  will-change: transform, opacity;
  opacity: .55;
}
.aboutus-project-counter-float--firebird  {
  width: 260px; height: 260px;
  top: -60px; left: -40px;
  animation-duration: 11s;
}
.aboutus-project-counter-float--elephant  {
  width: 200px; height: 200px;
  top: 20px; right: 8%;
  animation-duration: 9s;
  animation-delay: -3s;
}
.aboutus-project-counter-float--dove {
  width: 180px; height: 180px;
  bottom: -30px; left: 38%;
  animation-duration: 13s;
  animation-delay: -6s;
}

@keyframes aboutus-float-drift {
  from { transform: translate(0, 0)   rotate(0deg) scale(1); }
  to   { transform: translate(28px, 22px) rotate(18deg) scale(1.08); }
}

/* --------------------------------------------------------------------------
   Inner container
   -------------------------------------------------------------------------- */
.aboutus-project-counter-inner {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 20px;
}

/* --------------------------------------------------------------------------
   Eyebrow label
   -------------------------------------------------------------------------- */
.aboutus-project-counter-eyebrow {
  font-family: var(--aboutus-counter-font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aboutus-counter-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 36px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--aboutus-counter-ease), transform .6s var(--aboutus-counter-ease);
}
.aboutus-project-counter-eyebrow.is-visible {
  opacity: 1;
  transform: none;
}
.aboutus-project-counter-eyebrow-line {
  display: block;
  height: 1px;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* --------------------------------------------------------------------------
   Stats grid
   -------------------------------------------------------------------------- */
.aboutus-project-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .aboutus-project-counter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .aboutus-project-counter-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.aboutus-project-counter-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 24px 28px;
  background: var(--aboutus-counter-surface);
  border: 1px solid var(--aboutus-counter-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;

  /* entrance */
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition:
    opacity var(--aboutus-counter-duration) var(--aboutus-counter-ease),
    transform var(--aboutus-counter-duration) var(--aboutus-counter-ease),
    border-color .35s ease,
    box-shadow .35s ease;
}
.aboutus-project-counter-card.is-visible {
  opacity: 1;
  transform: none;
}

/* Hover lift */
.aboutus-project-counter-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.aboutus-project-counter-card:hover .aboutus-project-counter-card-glow {
  opacity: .65;
  transform: scale(1.2);
}
.aboutus-project-counter-card:hover .aboutus-project-counter-card-bar::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Card glow (per theme)
   -------------------------------------------------------------------------- */
.aboutus-project-counter-card-glow {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%) scale(1);
  width: 130px; height: 130px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .3;
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.aboutus-project-counter-card-glow--fire     { background: radial-gradient(circle, var(--aboutus-counter-fire-a), var(--aboutus-counter-fire-c)); }
.aboutus-project-counter-card-glow--elephant { background: radial-gradient(circle, var(--aboutus-counter-elephant-a), var(--aboutus-counter-elephant-c)); }
.aboutus-project-counter-card-glow--dove     { background: radial-gradient(circle, var(--aboutus-counter-dove-a), var(--aboutus-counter-dove-c)); }
.aboutus-project-counter-card-glow--gold     { background: radial-gradient(circle, var(--aboutus-counter-gold-a), var(--aboutus-counter-gold-b)); }

/* --------------------------------------------------------------------------
   Card icon
   -------------------------------------------------------------------------- */
.aboutus-project-counter-card-icon {
  width: 52px; height: 52px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .35s var(--aboutus-counter-ease), background .35s ease;
}
.aboutus-project-counter-card-icon svg {
  width: 30px; height: 30px;
  display: block;
}
.aboutus-project-counter-card:hover .aboutus-project-counter-card-icon {
  transform: rotate(-6deg) scale(1.12);
  background: rgba(255,255,255,.1);
}

/* --------------------------------------------------------------------------
   Card value (number + suffix)
   -------------------------------------------------------------------------- */
.aboutus-project-counter-card-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 10px;
}
.aboutus-project-counter-number {
  font-family: var(--aboutus-counter-font-head);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--aboutus-counter-text-primary);
  transition: color .2s ease;
}
.aboutus-project-counter-suffix {
  font-family: var(--aboutus-counter-font-head);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--aboutus-counter-text-muted);
}

/* Per-card gradient text on the number */
#aboutus-project-counter-card-websites .aboutus-project-counter-number {
  background: linear-gradient(135deg, var(--aboutus-counter-fire-a), var(--aboutus-counter-fire-c));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#aboutus-project-counter-card-seo .aboutus-project-counter-number {
  background: linear-gradient(135deg, var(--aboutus-counter-elephant-a), var(--aboutus-counter-elephant-c));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#aboutus-project-counter-card-leads .aboutus-project-counter-number {
  background: linear-gradient(135deg, var(--aboutus-counter-dove-a), var(--aboutus-counter-dove-c));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#aboutus-project-counter-card-years .aboutus-project-counter-number {
  background: linear-gradient(135deg, var(--aboutus-counter-gold-a), var(--aboutus-counter-gold-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Card label
   -------------------------------------------------------------------------- */
.aboutus-project-counter-label {
  font-family: var(--aboutus-counter-font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aboutus-counter-text-muted);
  margin: 0;
  transition: color .3s ease;
}
.aboutus-project-counter-card:hover .aboutus-project-counter-label {
  color: rgba(240,244,255,.8);
}

/* --------------------------------------------------------------------------
   Card progress bar (animated on hover)
   -------------------------------------------------------------------------- */
.aboutus-project-counter-card-bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.aboutus-project-counter-card-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .7s var(--aboutus-counter-ease);
}
.aboutus-project-counter-card-bar--fire::after     { background: linear-gradient(90deg, var(--aboutus-counter-fire-a), var(--aboutus-counter-fire-c)); }
.aboutus-project-counter-card-bar--elephant::after { background: linear-gradient(90deg, var(--aboutus-counter-elephant-a), var(--aboutus-counter-elephant-c)); }
.aboutus-project-counter-card-bar--dove::after     { background: linear-gradient(90deg, var(--aboutus-counter-dove-a), var(--aboutus-counter-dove-c)); }
.aboutus-project-counter-card-bar--gold::after     { background: linear-gradient(90deg, var(--aboutus-counter-gold-a), var(--aboutus-counter-gold-b)); }

/* --------------------------------------------------------------------------
   Reveal animation stagger utility
   -------------------------------------------------------------------------- */
[data-aboutus-reveal-delay="0"]   { transition-delay: 0ms; }
[data-aboutus-reveal-delay="120"] { transition-delay: 120ms; }
[data-aboutus-reveal-delay="240"] { transition-delay: 240ms; }
[data-aboutus-reveal-delay="360"] { transition-delay: 360ms; }
/* <!-- About us page project counter end--> */


/* <!-- seo page why need of seo from webplur start --> */
  :root {
      --seo-why-bg:              #080c18;
      --seo-why-card-bg:         #0d1224;
      --seo-why-card-border:     rgba(255,255,255,0.07);
      --seo-why-accent-blue:     #4f6ef7;
      --seo-why-accent-purple:   #8b5cf6;
      --seo-why-accent-cyan:     #06b6d4;
      --seo-why-text-primary:    #ffffff;
      --seo-why-text-secondary:  rgba(255,255,255,0.65);
      --seo-why-text-muted:      rgba(255,255,255,0.38);
      --seo-why-label:           #4f6ef7;
      --seo-why-radius-sm:       8px;
      --seo-why-radius-md:       14px;
      --seo-why-radius-lg:       22px;
      --seo-why-transition:      0.35s cubic-bezier(0.4, 0, 0.2, 1);

      /* Tab gradient themes */
      --seo-why-grad-fire:       linear-gradient(135deg, #ff6b35 0%, #f7302e 45%, #e91e8c 100%);
      --seo-why-grad-ocean:      linear-gradient(135deg, #3b82f6 0%, #6d28d9 55%, #a855f7 100%);
      --seo-why-grad-nature:     linear-gradient(135deg, #06b6d4 0%, #10b981 45%, #84cc16 80%, #a3e635 100%);

      --font-head: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }

    /* ======================================================
       SECTION WRAPPER  (no body / section tag styles)
    ====================================================== */
    #seo-page-why-section {
      position: relative;
      /* clip horizontal (particles/glows) but NOT vertical — prevents h2 crop */
      overflow-x: clip;
      overflow-y: visible;
      padding: 72px 0 80px;
      font-family: var(--font-body);
      color: var(--seo-why-text-primary);
      background: var(--seo-why-bg);
    }

    /* Particle canvas sits behind everything */
    #seo-page-why-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── wavy SVG divider top ── */
    .seo-page-why-wave-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      line-height: 0;
      z-index: 1;
      pointer-events: none;
    }
    .seo-page-why-wave-top svg { width: 100%; height: 60px; display: block; }

    /* ── wavy SVG divider bottom ── */
    .seo-page-why-wave-bottom {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      line-height: 0;
      z-index: 1;
      pointer-events: none;
    }
    .seo-page-why-wave-bottom svg { width: 100%; height: 60px; display: block; }

    /* Ambient glows */
    .seo-page-why-glow-left {
      position: absolute;
      top: 10%; left: -10%;
      width: 420px; height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(79,110,247,0.18) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      animation: seo-why-float-glow 8s ease-in-out infinite alternate;
    }
    .seo-page-why-glow-right {
      position: absolute;
      bottom: 5%; right: -8%;
      width: 360px; height: 360px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(139,92,246,0.16) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      animation: seo-why-float-glow 10s ease-in-out infinite alternate-reverse;
    }

    @keyframes seo-why-float-glow {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(24px, 24px) scale(1.08); }
    }

    /* ── inner container ── */
    .seo-page-why-container {
      position: relative;
      /* z-index:2 keeps content above particles/glows (z-index:0) */
      z-index: 2;
      /* isolation:isolate creates a new stacking context,
         preventing parent page z-index from interfering with children */
      isolation: isolate;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ======================================================
       HEADER ROW
    ====================================================== */
    .seo-page-why-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      margin-bottom: 44px;
      position: relative;
      z-index: 3;
    }

    .seo-page-why-header-left {
      width: 100%;
    }

    .seo-page-why-label {
      font-family: var(--font-head);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--seo-why-label);
      margin-bottom: 10px;
      display: block;
    }

    .seo-page-why-title {
      font-family: var(--font-head);
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 800;
      line-height: 1.08;
      color: var(--seo-why-text-primary);
      margin: 0;
      text-transform: uppercase;
      letter-spacing: -0.5px;
      /* no transform — parallax removed to prevent overlap */
      max-width: 100%;
    }

    /* ── keyword tag cloud ── */
    .seo-page-why-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      width: 100%;
      margin-top: 22px;
    }

    .seo-page-why-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border: 1.5px solid var(--seo-why-card-border);
      border-radius: 100px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      color: var(--seo-why-text-secondary);
      background: rgba(255,255,255,0.04);
      cursor: default;
      transition: border-color var(--seo-why-transition),
                  color var(--seo-why-transition),
                  background var(--seo-why-transition),
                  transform var(--seo-why-transition);
      text-decoration: none;
    }
    .seo-page-why-tag:hover {
      border-color: var(--seo-why-accent-blue);
      color: #fff;
      background: rgba(79,110,247,0.12);
      transform: translateY(-2px);
    }

    /* floating badge pulse on tags */
    .seo-page-why-tag-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--seo-why-accent-blue);
      flex-shrink: 0;
      animation: seo-why-pulse-dot 2s ease-in-out infinite;
    }
    @keyframes seo-why-pulse-dot {
      0%,100% { box-shadow: 0 0 0 0 rgba(79,110,247,0.6); }
      50%      { box-shadow: 0 0 0 5px rgba(79,110,247,0); }
    }

    /* ======================================================
       MAIN GRID
    ====================================================== */
    .seo-page-why-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 28px;
      align-items: start;
    }

    /* ======================================================
       LEFT: ACCORDION / TAB LIST
    ====================================================== */
    .seo-page-why-tabs {
      border: 1.5px solid var(--seo-why-card-border);
      border-radius: var(--seo-why-radius-lg);
      overflow: hidden;
      background: var(--seo-why-card-bg);
    }

    .seo-page-why-tab-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--seo-why-card-border);
      cursor: pointer;
      transition: background var(--seo-why-transition);
      overflow: hidden;
    }
    .seo-page-why-tab-item:last-child { border-bottom: none; }

    /* gradient bar on left side */
    .seo-page-why-tab-item::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      border-radius: 0 2px 2px 0;
      opacity: 0;
      transition: opacity var(--seo-why-transition);
    }

    .seo-page-why-tab-item[data-seo-why-tab="0"]::before { background: var(--seo-why-grad-fire); }
    .seo-page-why-tab-item[data-seo-why-tab="1"]::before { background: var(--seo-why-grad-ocean); }
    .seo-page-why-tab-item[data-seo-why-tab="2"]::before { background: var(--seo-why-grad-nature); }
    .seo-page-why-tab-item[data-seo-why-tab="3"]::before { background: var(--seo-why-grad-fire); }
    .seo-page-why-tab-item[data-seo-why-tab="4"]::before { background: var(--seo-why-grad-ocean); }

    .seo-page-why-tab-item:hover { background: rgba(255,255,255,0.03); }
    .seo-page-why-tab-item:hover::before { opacity: 0.5; }

    /* active tab */
    .seo-page-why-tab-item.seo-why-is-active {
      background: linear-gradient(135deg, rgba(79,110,247,0.18) 0%, rgba(139,92,246,0.12) 100%);
    }
    .seo-page-why-tab-item.seo-why-is-active::before { opacity: 1; }

    /* icon wrapper */
    .seo-page-why-tab-icon {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: var(--seo-why-radius-sm);
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.06);
      transition: background var(--seo-why-transition), transform var(--seo-why-transition);
    }
    .seo-page-why-tab-item.seo-why-is-active .seo-page-why-tab-icon,
    .seo-page-why-tab-item:hover .seo-page-why-tab-icon {
      transform: scale(1.08);
    }

    /* gradient icon bg per tab */
    .seo-page-why-tab-item[data-seo-why-tab="0"].seo-why-is-active .seo-page-why-tab-icon { background: var(--seo-why-grad-fire); }
    .seo-page-why-tab-item[data-seo-why-tab="1"].seo-why-is-active .seo-page-why-tab-icon { background: var(--seo-why-grad-ocean); }
    .seo-page-why-tab-item[data-seo-why-tab="2"].seo-why-is-active .seo-page-why-tab-icon { background: var(--seo-why-grad-nature); }
    .seo-page-why-tab-item[data-seo-why-tab="3"].seo-why-is-active .seo-page-why-tab-icon { background: var(--seo-why-grad-fire); }
    .seo-page-why-tab-item[data-seo-why-tab="4"].seo-why-is-active .seo-page-why-tab-icon { background: var(--seo-why-grad-ocean); }

    .seo-page-why-tab-icon svg { width: 22px; height: 22px; fill: #fff; }

    .seo-page-why-tab-text {
      font-family: var(--font-head);
      font-size: 14.5px;
      font-weight: 600;
      color: var(--seo-why-text-secondary);
      line-height: 1.35;
      transition: color var(--seo-why-transition);
    }
    .seo-page-why-tab-item.seo-why-is-active .seo-page-why-tab-text {
      color: var(--seo-why-text-primary);
    }

    /* ======================================================
       RIGHT: CONTENT PANEL
    ====================================================== */
    .seo-page-why-panel-wrap {
      position: relative;
      border: 1.5px solid var(--seo-why-card-border);
      border-radius: var(--seo-why-radius-lg);
      background: var(--seo-why-card-bg);
      overflow: hidden;
      min-height: 460px;
    }

    /* coloured gradient top strip per panel */
    .seo-page-why-panel-strip {
      height: 4px;
      width: 100%;
      transition: background 0.4s ease;
    }

    .seo-page-why-panel {
      display: none;
      padding: 36px 38px 40px;
      animation: seo-why-fade-in 0.4s ease forwards;
    }
    .seo-page-why-panel.seo-why-is-visible { display: block; }

    @keyframes seo-why-fade-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* numbered items inside panel */
    .seo-page-why-entry { margin-bottom: 30px; }
    .seo-page-why-entry:last-of-type { margin-bottom: 0; }

    .seo-page-why-entry-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--seo-why-text-primary);
      margin: 0 0 8px;
    }
    .seo-page-why-entry-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px; height: 24px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      margin-right: 8px;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }

    .seo-page-why-entry-body {
      font-family: var(--font-body);
      font-size: 14.5px;
      line-height: 1.72;
      color: var(--seo-why-text-secondary);
      margin: 0;
    }

    /* ── progress bar ── */
    .seo-page-why-progress-wrap {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--seo-why-card-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .seo-page-why-progress-label {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
      color: var(--seo-why-text-primary);
    }
    .seo-page-why-progress-track {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 100px;
      overflow: hidden;
    }
    .seo-page-why-progress-fill {
      height: 100%;
      border-radius: 100px;
      width: 0%;
      transition: width 1s cubic-bezier(0.4,0,0.2,1);
    }
    .seo-page-why-progress-badge {
      flex-shrink: 0;
      padding: 5px 10px;
      border-radius: 8px;
      font-family: var(--font-head);
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }

    /* per-panel colour theming */
    [data-seo-why-panel="0"] .seo-page-why-entry-num { background: var(--seo-why-grad-fire); color:#fff; }
    [data-seo-why-panel="0"] .seo-page-why-progress-fill { background: var(--seo-why-grad-fire); }
    [data-seo-why-panel="0"] .seo-page-why-progress-badge { background: var(--seo-why-grad-fire); }

    [data-seo-why-panel="1"] .seo-page-why-entry-num { background: var(--seo-why-grad-ocean); color:#fff; }
    [data-seo-why-panel="1"] .seo-page-why-progress-fill { background: var(--seo-why-grad-ocean); }
    [data-seo-why-panel="1"] .seo-page-why-progress-badge { background: var(--seo-why-grad-ocean); }

    [data-seo-why-panel="2"] .seo-page-why-entry-num { background: var(--seo-why-grad-nature); color:#fff; }
    [data-seo-why-panel="2"] .seo-page-why-progress-fill { background: var(--seo-why-grad-nature); }
    [data-seo-why-panel="2"] .seo-page-why-progress-badge { background: var(--seo-why-grad-nature); }

    [data-seo-why-panel="3"] .seo-page-why-entry-num { background: var(--seo-why-grad-fire); color:#fff; }
    [data-seo-why-panel="3"] .seo-page-why-progress-fill { background: var(--seo-why-grad-fire); }
    [data-seo-why-panel="3"] .seo-page-why-progress-badge { background: var(--seo-why-grad-fire); }

    [data-seo-why-panel="4"] .seo-page-why-entry-num { background: var(--seo-why-grad-ocean); color:#fff; }
    [data-seo-why-panel="4"] .seo-page-why-progress-fill { background: var(--seo-why-grad-ocean); }
    [data-seo-why-panel="4"] .seo-page-why-progress-badge { background: var(--seo-why-grad-ocean); }

    /* ── floating SVG icon badges ── */
    .seo-page-why-float-badges {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .seo-page-why-badge-svg {
      position: absolute;
      opacity: 0.07;
      animation: seo-why-float-badge 12s ease-in-out infinite alternate;
    }
    .seo-page-why-badge-svg:nth-child(1) { top:8%;  right:5%;  width:120px; animation-duration:9s; }
    .seo-page-why-badge-svg:nth-child(2) { bottom:10%; left:3%; width:90px;  animation-duration:13s; animation-direction:alternate-reverse; }
    .seo-page-why-badge-svg:nth-child(3) { top:40%; right:2%; width:70px;  animation-duration:7s; }

    @keyframes seo-why-float-badge {
      from { transform: translateY(0) rotate(0deg); }
      to   { transform: translateY(-18px) rotate(8deg); }
    }

    /* ── mobile swiper (hidden on desktop) ── */
    .seo-page-why-swiper-wrap { display: none; }

    /* ======================================================
       PARALLAX DISABLED — no transform on h2
       (caused overlap in PHP page integration)
    ====================================================== */

    /* ======================================================
       RESPONSIVE
    ====================================================== */
    @media (max-width: 960px) {
      .seo-page-why-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      #seo-page-why-section { padding: 48px 0 56px; }

      .seo-page-why-header { flex-direction: column; gap: 20px; }

      .seo-page-why-tabs { display: none; }
      .seo-page-why-panel-wrap { display: none; }

      .seo-page-why-swiper-wrap {
        display: block;
        margin-top: 8px;
      }

      .seo-page-why-swiper { overflow: hidden; border-radius: var(--seo-why-radius-lg); }

      .seo-page-why-swiper-slide {
        border: 1.5px solid var(--seo-why-card-border);
        border-radius: var(--seo-why-radius-lg);
        background: var(--seo-why-card-bg);
        padding: 28px 24px 32px;
      }
      .seo-page-why-swiper-slide-strip {
        height: 4px;
        border-radius: 100px;
        margin-bottom: 20px;
      }
    }

    /* lazy-load fade in */
    .seo-page-why-lazy {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .seo-page-why-lazy.seo-why-loaded {
      opacity: 1;
      transform: translateY(0);
    }
/* <!-- seo page why need of seo from webplur End --> */




/* // Seo page client video review section start  */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --seo-bg:        #080c18;
      --seo-card:      #0d1228;
      --seo-border:    rgba(255,255,255,0.07);

      --seo-grad-fire: linear-gradient(135deg,#ff4e00,#e8234a,#ff0080);
      --seo-grad-wave: linear-gradient(135deg,#5200ff,#0062ff,#a855f7);
      --seo-grad-dove: linear-gradient(135deg,#00d4aa,#10b981,#06b6d4);

      --seo-fire-rgb:  255,78,0;
      --seo-wave-rgb:  82,0,255;
      --seo-dove-rgb:  0,212,170;

      --seo-text:      #eef0ff;
      --seo-muted:     rgba(238,240,255,0.52);
      --seo-gold:      #ffb800;

      --seo-font-head: 'Syne', sans-serif;
      --seo-font-body: 'DM Sans', sans-serif;
      --seo-r-xl:      24px;
      --seo-r-md:      10px;
      --seo-ease:      cubic-bezier(0.4,0,0.2,1);
      --seo-tr:        0.38s var(--seo-ease);
    }

    /* ── SECTION ── */
    #seo-page-video-reviews {
      position: relative;
      background: var(--seo-bg);
      overflow: hidden;
      padding: 88px 0 96px;
      font-family: var(--seo-font-body);
      color: var(--seo-text);
    }
    #seo-vr-particles { position:absolute;inset:0;z-index:0;pointer-events:none; }

    /* ── GLOWS ── */
    .seo-vr-glow {
      position:absolute;border-radius:50%;filter:blur(110px);
      pointer-events:none;z-index:1;
    }
    .seo-vr-glow--fire {
      width:520px;height:520px;background:var(--seo-grad-fire);opacity:.15;
      top:-140px;left:-120px;
      animation:seoVrPulse 7s ease-in-out infinite alternate;
    }
    .seo-vr-glow--wave {
      width:440px;height:440px;background:var(--seo-grad-wave);opacity:.14;
      bottom:-100px;right:-100px;
      animation:seoVrPulse 7s ease-in-out infinite alternate 2.5s;
    }
    .seo-vr-glow--dove {
      width:360px;height:360px;background:var(--seo-grad-dove);opacity:.13;
      top:45%;left:50%;
      animation:seoVrPulseMid 7s ease-in-out infinite alternate 5s;
    }
    @keyframes seoVrPulse {
      from{opacity:.10;transform:scale(1)}
      to{opacity:.26;transform:scale(1.14)}
    }
    @keyframes seoVrPulseMid {
      from{opacity:.10;transform:translate(-50%,-50%) scale(1)}
      to{opacity:.26;transform:translate(-50%,-50%) scale(1.14)}
    }

    /* ── WAVES ── */
    .seo-vr-wave-top,.seo-vr-wave-bottom {
      position:absolute;left:0;width:100%;z-index:1;pointer-events:none;line-height:0;
    }
    .seo-vr-wave-top{top:-1px}.seo-vr-wave-bottom{bottom:-1px}

    /* ── FLOAT BADGES ── */
    .seo-vr-float-badges{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
    .seo-vr-fb {
      position:absolute;
      background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
      backdrop-filter:blur(8px);border-radius:999px;padding:7px 16px;
      font-family:var(--seo-font-head);font-size:.65rem;font-weight:700;letter-spacing:.08em;
      color:rgba(255,255,255,.65);display:flex;align-items:center;gap:7px;
    }
    .seo-vr-fb--a{top:10%;right:4%;animation:seoVrFloatA 4s ease-in-out infinite}
    .seo-vr-fb--b{bottom:16%;left:3%;animation:seoVrFloatB 5s ease-in-out infinite}
    .seo-vr-fb--c{top:52%;right:2%;animation:seoVrFloatA 3.5s ease-in-out infinite 1s}
    @keyframes seoVrFloatA{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
    @keyframes seoVrFloatB{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-8px) rotate(-1deg)}}

    /* ── CONTAINER ── */
    .seo-vr-container {
      position:relative;z-index:2;
      max-width:1260px;margin:0 auto;padding:0 24px;
    }

    /* ── HEADER ── */
    .seo-vr-header{text-align:center;margin-bottom:44px}

    .seo-vr-eyebrow {
      display:inline-flex;align-items:center;gap:9px;
      background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.11);
      backdrop-filter:blur(10px);border-radius:999px;padding:7px 20px;
      font-family:var(--seo-font-head);font-size:.7rem;font-weight:700;
      letter-spacing:.15em;text-transform:uppercase;color:var(--seo-muted);
      margin-bottom:24px;animation:seoVrFloatA 3.5s ease-in-out infinite;
    }
    .seo-vr-eyebrow-dot {
      width:8px;height:8px;border-radius:50%;
      background:var(--seo-grad-fire);
      animation:seoVrDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes seoVrDotPulse{
      0%,100%{box-shadow:0 0 6px rgba(var(--seo-fire-rgb),.6)}
      50%{box-shadow:0 0 16px rgba(var(--seo-fire-rgb),1)}
    }
    .seo-vr-heading {
      font-family:var(--seo-font-head);
      font-size:clamp(2rem,4.8vw,3.5rem);font-weight:800;
      line-height:1.1;letter-spacing:-.025em;color:var(--seo-text);margin-bottom:18px;
    }
    .seo-vr-grad-fire{background:var(--seo-grad-fire);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .seo-vr-grad-wave{background:var(--seo-grad-wave);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .seo-vr-grad-dove{background:var(--seo-grad-dove);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

    .seo-vr-sub{font-size:1.02rem;color:var(--seo-muted);max-width:560px;margin:0 auto;line-height:1.68}
    .seo-vr-sub strong{color:var(--seo-gold);font-weight:600}

    /* ── STAT PILLS ── */
    .seo-vr-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:30px 0 50px}
    .seo-vr-stat-pill {
      display:flex;align-items:center;gap:11px;
      background:rgba(255,255,255,0.04);border:1px solid var(--seo-border);
      border-radius:999px;padding:10px 22px;
      font-family:var(--seo-font-head);font-size:.84rem;font-weight:700;
      transition:all var(--seo-tr);cursor:default;
    }
    .seo-vr-stat-pill:hover{background:rgba(255,255,255,0.08);transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.45)}
    .seo-vr-pill-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
    .seo-vr-stat-pill:nth-child(1) .seo-vr-pill-icon{background:var(--seo-grad-fire)}
    .seo-vr-stat-pill:nth-child(2) .seo-vr-pill-icon{background:var(--seo-grad-wave)}
    .seo-vr-stat-pill:nth-child(3) .seo-vr-pill-icon{background:var(--seo-grad-dove)}
    .seo-vr-stat-pill:nth-child(4) .seo-vr-pill-icon{background:linear-gradient(135deg,#ff4e00,#a855f7,#00d4aa)}

    /* ── SWIPER ── */
    .seo-vr-swiper{overflow:visible !important;padding-bottom:58px !important}
    .seo-vr-swiper .swiper-slide{height:auto;opacity:.42;transform:scale(.91);transition:opacity .5s var(--seo-ease),transform .5s var(--seo-ease)}
    .seo-vr-swiper .swiper-slide-active,
    .seo-vr-swiper .swiper-slide-prev,
    .seo-vr-swiper .swiper-slide-next{opacity:1;transform:scale(1)}
    .seo-vr-swiper .swiper-pagination-bullet{background:var(--seo-muted);opacity:1;transition:all .3s;width:8px;height:8px}
    .seo-vr-swiper .swiper-pagination-bullet-active{background:var(--seo-grad-fire);width:26px;border-radius:4px}

    /* nav */
    .seo-vr-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}
    .seo-vr-btn-prev,.seo-vr-btn-next {
      width:50px;height:50px;border-radius:50%;
      background:rgba(255,255,255,0.05);border:1px solid var(--seo-border);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:all var(--seo-tr);color:var(--seo-text);
    }
    .seo-vr-btn-prev:hover{background:var(--seo-grad-fire);border-color:transparent;transform:scale(1.1) translateX(-2px);box-shadow:0 8px 28px rgba(var(--seo-fire-rgb),.4)}
    .seo-vr-btn-next:hover{background:var(--seo-grad-wave);border-color:transparent;transform:scale(1.1) translateX(2px);box-shadow:0 8px 28px rgba(var(--seo-wave-rgb),.4)}

    /* ── CARD ── */
    .seo-vr-card {
      background:var(--seo-card);border-radius:var(--seo-r-xl);
      overflow:hidden;border:1px solid var(--seo-border);
      transition:transform var(--seo-tr),box-shadow var(--seo-tr);position:relative;
    }
    .seo-vr-card::before {
      content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
      background:var(--seo-card-accent,var(--seo-grad-fire));
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
      opacity:0;transition:opacity var(--seo-tr);pointer-events:none;
    }
    .seo-vr-card:hover::before{opacity:1}
    .seo-vr-card:hover{transform:translateY(-8px);box-shadow:0 28px 64px rgba(0,0,0,.65)}
    .seo-vr-card--fire{--seo-card-accent:var(--seo-grad-fire)}
    .seo-vr-card--wave{--seo-card-accent:var(--seo-grad-wave)}
    .seo-vr-card--dove{--seo-card-accent:var(--seo-grad-dove)}

    /* ── THUMBNAIL ── */
    .seo-vr-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;display:block}
    .seo-vr-thumb-bg{width:100%;height:100%;transition:transform .65s ease}
    .seo-vr-card:hover .seo-vr-thumb-bg{transform:scale(1.06)}
    .seo-vr-thumb-bg--fire{background:linear-gradient(145deg,#12050a,#2c0800,#5a1200,#b03200,#e84800,#ff6520)}
    .seo-vr-thumb-bg--wave{background:linear-gradient(145deg,#08001a,#160045,#002880,#0050d0,#4010e0,#7030f8)}
    .seo-vr-thumb-bg--dove{background:linear-gradient(145deg,#001510,#003828,#007060,#00a080,#00c8a0,#10e0b8)}

    .seo-vr-thumb-blob{position:absolute;border-radius:50%;filter:blur(34px);pointer-events:none}
    .seo-vr-thumb-blob:nth-child(1){width:65%;height:65%;top:-12%;left:-10%;animation:seoVrBlobA 6s ease-in-out infinite alternate}
    .seo-vr-thumb-blob:nth-child(2){width:45%;height:45%;bottom:-8%;right:-8%;animation:seoVrBlobA 6s ease-in-out infinite alternate 2s}
    @keyframes seoVrBlobA{from{transform:scale(1) translate(0,0)}to{transform:scale(1.25) translate(10px,-10px)}}

    .seo-vr-thumb-overlay {
      position:absolute;inset:0;
      background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 55%);
      display:flex;flex-direction:column;justify-content:flex-end;
      padding:16px 18px;z-index:2;
    }
    .seo-vr-thumb-company{font-family:var(--seo-font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:2px}
    .seo-vr-thumb-person{font-family:var(--seo-font-head);font-size:.94rem;font-weight:700;color:#fff}

    .seo-vr-edu-badge {
      position:absolute;top:13px;left:13px;
      background:rgba(255,255,255,0.14);backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.22);border-radius:var(--seo-r-md);
      padding:5px 12px;display:flex;align-items:center;gap:7px;
      font-family:var(--seo-font-head);font-size:.68rem;font-weight:700;
      letter-spacing:.05em;color:#fff;z-index:3;
    }

    .seo-vr-play {
      position:absolute;top:50%;left:50%;
      transform:translate(-50%,-50%) scale(1);
      width:64px;height:64px;background:rgba(255,255,255,.92);
      border-radius:50%;display:flex;align-items:center;justify-content:center;
      z-index:4;transition:transform .3s var(--seo-ease),box-shadow .3s;
      box-shadow:0 4px 24px rgba(0,0,0,.4);
    }
    .seo-vr-play svg{margin-left:5px}
    .seo-vr-thumb:hover .seo-vr-play{transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 0 14px rgba(255,255,255,.14),0 8px 30px rgba(0,0,0,.5)}
    .seo-vr-play::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.38);animation:seoVrRipple 2.2s ease-out infinite}
    @keyframes seoVrRipple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}

    /* ── CARD BODY ── */
    .seo-vr-card-body{padding:22px 22px 26px}
    .seo-vr-author-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
    .seo-vr-author-name{font-family:var(--seo-font-head);font-size:1.05rem;font-weight:700;color:var(--seo-text)}
    .seo-vr-author-role{font-size:.75rem;color:var(--seo-muted);font-weight:400;margin-bottom:11px}

    .seo-vr-country-tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 12px;font-size:.66rem;font-weight:700;font-family:var(--seo-font-head);letter-spacing:.1em;text-transform:uppercase}
    .seo-vr-country-tag--fire{background:var(--seo-grad-fire);color:#fff}
    .seo-vr-country-tag--wave{background:var(--seo-grad-wave);color:#fff}
    .seo-vr-country-tag--dove{background:var(--seo-grad-dove);color:#fff}

    .seo-vr-result-chip {
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
      border-radius:var(--seo-r-md);padding:5px 12px;margin-bottom:12px;
      font-size:.72rem;font-weight:600;color:var(--seo-gold);font-family:var(--seo-font-head);
    }
    .seo-vr-quote{font-size:.88rem;line-height:1.72;color:var(--seo-muted);font-style:italic;margin-bottom:16px;position:relative;padding-left:18px}
    .seo-vr-quote::before{content:'"';position:absolute;left:0;top:-6px;font-size:2.2rem;font-style:normal;line-height:1;opacity:.28}

    .seo-vr-stars{display:flex;gap:4px}
    .seo-vr-star{font-size:1.05rem;transition:transform .2s;cursor:default}
    .seo-vr-star:hover{transform:scale(1.3) rotate(-5deg)}
    .seo-vr-star--full{color:var(--seo-gold)}
    .seo-vr-star--half{color:var(--seo-gold);opacity:.5}
    .seo-vr-star--empty{color:rgba(255,255,255,.18)}

    /* ══════════════════════════════════
       VIDEO MODAL
    ══════════════════════════════════ */
    #seo-vr-modal {
      position:fixed;inset:0;z-index:9999;
      display:flex;align-items:center;justify-content:center;padding:20px;
      opacity:0;pointer-events:none;
      transition:opacity .38s var(--seo-ease);
    }
    #seo-vr-modal.seo-vr-modal--open{opacity:1;pointer-events:all}

    .seo-vr-modal-backdrop {
      position:absolute;inset:0;
      background:rgba(5,7,18,.93);backdrop-filter:blur(16px);cursor:pointer;
    }
    .seo-vr-modal-inner {
      position:relative;z-index:1;width:100%;max-width:880px;
      background:var(--seo-card);border:1px solid rgba(255,255,255,.1);
      border-radius:var(--seo-r-xl);overflow:hidden;
      transform:scale(.88) translateY(32px);
      transition:transform .44s var(--seo-ease);
      box-shadow:0 40px 100px rgba(0,0,0,.82);
    }
    #seo-vr-modal.seo-vr-modal--open .seo-vr-modal-inner{transform:scale(1) translateY(0)}

    .seo-vr-modal-bar{height:4px;background:var(--seo-modal-grad,var(--seo-grad-fire))}

    .seo-vr-modal-close {
      position:absolute;top:14px;right:14px;
      width:40px;height:40px;border-radius:50%;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;color:var(--seo-text);transition:all .25s;z-index:5;
    }
    .seo-vr-modal-close:hover{background:rgba(255,78,0,.85);border-color:transparent;transform:rotate(90deg) scale(1.1)}

    .seo-vr-modal-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
    .seo-vr-modal-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

    .seo-vr-modal-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
    .seo-vr-modal-ph-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18)}
    .seo-vr-modal-ph-label{font-family:var(--seo-font-head);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);text-align:center;padding:0 20px}

    .seo-vr-modal-footer{padding:20px 24px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
    .seo-vr-modal-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--seo-font-head);font-size:1.3rem;font-weight:800;color:#fff}
    .seo-vr-modal-meta{flex:1;min-width:0}
    .seo-vr-modal-name{font-family:var(--seo-font-head);font-size:1.05rem;font-weight:700;color:var(--seo-text);margin-bottom:3px}
    .seo-vr-modal-info{font-size:.82rem;color:var(--seo-muted);line-height:1.5}
    .seo-vr-modal-stars{display:flex;gap:3px;margin-top:8px}
    .seo-vr-modal-star{font-size:1rem;color:var(--seo-gold)}
    .seo-vr-modal-result{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 18px;font-family:var(--seo-font-head);font-size:.74rem;font-weight:700;color:#fff;align-self:center;white-space:nowrap}

    /* ── CTA ── */
    .seo-vr-cta-row{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:54px;flex-wrap:wrap}
    .seo-vr-cta-primary,.seo-vr-cta-ghost{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;font-family:var(--seo-font-head);font-size:.92rem;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all var(--seo-tr);cursor:pointer}
    .seo-vr-cta-primary{background:var(--seo-grad-fire);color:#fff;box-shadow:0 8px 32px rgba(var(--seo-fire-rgb),.38)}
    .seo-vr-cta-primary:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 18px 44px rgba(var(--seo-fire-rgb),.58)}
    .seo-vr-cta-ghost{background:transparent;color:var(--seo-text);border:1px solid var(--seo-border)}
    .seo-vr-cta-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);transform:translateY(-4px)}

    /* ── REVEAL ── */
    .seo-vr-reveal{opacity:0;transform:translateY(34px);transition:opacity .72s var(--seo-ease),transform .72s var(--seo-ease)}
    .seo-vr-reveal.seo-vr-visible{opacity:1;transform:translateY(0)}
    .seo-vr-reveal--d1{transition-delay:.10s}.seo-vr-reveal--d2{transition-delay:.22s}
    .seo-vr-reveal--d3{transition-delay:.34s}.seo-vr-reveal--d4{transition-delay:.46s}

    /* ── RESPONSIVE ── */
    @media(max-width:900px){#seo-page-video-reviews{padding:64px 0 72px}}
    @media(max-width:600px){
      .seo-vr-container{padding:0 16px}
      .seo-vr-stats{gap:10px}
      .seo-vr-stat-pill{font-size:.78rem;padding:8px 14px}
      .seo-vr-modal-footer{flex-direction:column}
      .seo-vr-modal-result{align-self:flex-start}
      .seo-vr-fb--b,.seo-vr-fb--c{display:none}
    }
/* // Seo page client video review section End  */

/* //  Seo page faq section start */
    :root {
      --faq-bg-deep:        #080c18;
      --faq-bg-card:        rgba(255,255,255,0.04);
      --faq-bg-card-hover:  rgba(255,255,255,0.08);
      --faq-border:         rgba(255,255,255,0.09);
      --faq-border-active:  rgba(255,180,80,0.55);

      --faq-grad-firebird:  linear-gradient(135deg,#ff6a00,#ee0979,#ff4d00);
      --faq-grad-elephant:  linear-gradient(135deg,#4f46e5,#7c3aed,#0ea5e9);
      --faq-grad-dove:      linear-gradient(135deg,#0d9488,#22d3ee,#34d399);
      --faq-grad-gold:      linear-gradient(135deg,#f59e0b,#fbbf24,#fb923c);
      --faq-grad-rose:      linear-gradient(135deg,#e11d48,#db2777,#9333ea);
      --faq-grad-cyan:      linear-gradient(135deg,#06b6d4,#0ea5e9,#6366f1);
      --faq-grad-lime:      linear-gradient(135deg,#16a34a,#84cc16,#22d3ee);
      --faq-grad-amber:     linear-gradient(135deg,#d97706,#f59e0b,#ef4444);
      --faq-grad-slate:     linear-gradient(135deg,#475569,#94a3b8,#6366f1);

      --faq-text-primary:   #f0f4ff;
      --faq-text-muted:     #8a95b0;
      --faq-text-accent:    #ffb347;

      --faq-radius-lg:      20px;
      --faq-radius-md:      14px;
      --faq-radius-sm:      8px;

      --faq-shadow-glow-fire:     0 0 40px rgba(238,9,121,0.25);
      --faq-shadow-glow-elephant: 0 0 40px rgba(79,70,229,0.30);
      --faq-shadow-glow-dove:     0 0 40px rgba(13,148,136,0.30);

      --faq-transition: 0.38s cubic-bezier(0.4,0,0.2,1);

      --faq-font-head: 'Syne', sans-serif;
      --faq-font-body: 'DM Sans', sans-serif;
    }

    /* =============================================
       SECTION WRAPPER
    ============================================= */
    #home-faq-section-wrap {
      position: relative;
      background: var(--faq-bg-deep);
      overflow-x: hidden;
      overflow-y: visible;
      font-family: var(--faq-font-body);
      color: var(--faq-text-primary);
      padding: 72px 0 80px;
      width: 100%;
      box-sizing: border-box;
    }

    /* tsParticles canvas */
    #home-faq-particles-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Wavy SVG top */
    .home-faq-wave-top {
      position: absolute;
      top: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
      line-height: 0;
    }
    .home-faq-wave-top svg {
      display: block;
      width: 100%;
    }

    /* Wavy SVG bottom */
    .home-faq-wave-bottom {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      z-index: 1;
      line-height: 0;
    }
    .home-faq-wave-bottom svg {
      display: block;
      width: 100%;
    }

    /* Ambient orbs (parallax targets) */
    .home-faq-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
      transition: transform 0.1s linear;
    }
    .home-faq-orb--fire   { width: 500px; height: 500px; background: var(--faq-grad-firebird); top: -80px; left: -120px; }
    .home-faq-orb--wave   { width: 420px; height: 420px; background: var(--faq-grad-elephant); bottom: -60px; right: -100px; }
    .home-faq-orb--dove   { width: 360px; height: 360px; background: var(--faq-grad-dove); top: 40%; left: 40%; transform: translate(-50%,-50%); }

    /* =============================================
       CONTAINER
    ============================================= */
    .home-faq-container {
      position: relative;
      z-index: 2;
      max-width: 1340px;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
    }

    /* =============================================
       SECTION HEADER
    ============================================= */
    .home-faq-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .home-faq-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,180,80,0.12);
      border: 1px solid rgba(255,180,80,0.3);
      border-radius: 100px;
      padding: 6px 18px;
      font-family: var(--faq-font-head);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--faq-text-accent);
      margin-bottom: 18px;
    }
    .home-faq-badge svg {
      width: 14px; height: 14px; fill: var(--faq-text-accent);
      animation: home-faq-spin 4s linear infinite;
    }
    @keyframes home-faq-spin { to { transform: rotate(360deg); } }

    .home-faq-title {
      font-family: var(--faq-font-head);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.15;
      margin: 0 0 14px;
      background: linear-gradient(135deg, #fff 30%, #ffb347 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .home-faq-subtitle {
      font-size: 1rem;
      color: var(--faq-text-muted);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* Gradient underline */
    .home-faq-divider {
      display: flex;
      justify-content: center;
      margin: 20px 0 0;
    }
    .home-faq-divider span {
      display: block;
      width: 80px; height: 4px;
      border-radius: 4px;
      background: var(--faq-grad-firebird);
      position: relative;
    }
    .home-faq-divider span::after {
      content: '';
      position: absolute;
      right: -22px; top: 0;
      width: 16px; height: 4px;
      border-radius: 4px;
      background: var(--faq-grad-elephant);
    }

    /* =============================================
       TABS (topic switcher)
    ============================================= */
    .home-faq-tabs-nav {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 42px;
    }
    .home-faq-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--faq-bg-card);
      border: 1px solid var(--faq-border);
      border-radius: 100px;
      padding: 9px 22px;
      font-family: var(--faq-font-head);
      font-size: 13px;
      font-weight: 600;
      color: var(--faq-text-muted);
      cursor: pointer;
      transition: var(--faq-transition);
      position: relative;
      overflow: hidden;
      text-decoration: none;
    }
    .home-faq-tab-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      border-radius: 100px;
      transition: opacity var(--faq-transition);
    }
    .home-faq-tab-btn[data-faq-theme="firebird"]::before { background: var(--faq-grad-firebird); }
    .home-faq-tab-btn[data-faq-theme="elephant"]::before { background: var(--faq-grad-elephant); }
    .home-faq-tab-btn[data-faq-theme="dove"]::before     { background: var(--faq-grad-dove); }
    .home-faq-tab-btn[data-faq-theme="gold"]::before     { background: var(--faq-grad-gold); }
    .home-faq-tab-btn[data-faq-theme="rose"]::before     { background: var(--faq-grad-rose); }
    .home-faq-tab-btn[data-faq-theme="cyan"]::before     { background: var(--faq-grad-cyan); }
    .home-faq-tab-btn[data-faq-theme="lime"]::before     { background: var(--faq-grad-lime); }
    .home-faq-tab-btn[data-faq-theme="amber"]::before    { background: var(--faq-grad-amber); }
    .home-faq-tab-btn[data-faq-theme="slate"]::before    { background: var(--faq-grad-slate); }

    .home-faq-tab-btn .home-faq-tab-icon {
      position: relative; z-index: 1; font-size: 15px;
    }
    .home-faq-tab-btn span:not(.home-faq-tab-icon) {
      position: relative; z-index: 1;
    }

    .home-faq-tab-btn:hover,
    .home-faq-tab-btn[aria-selected="true"] {
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    }
    .home-faq-tab-btn:hover::before,
    .home-faq-tab-btn[aria-selected="true"]::before { opacity: 1; }

    /* =============================================
       THREE-COLUMN GRID — mobile-first
    ============================================= */
    .home-faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
      width: 100%;
      box-sizing: border-box;
    }

    /* =============================================
       LEFT — FAQ ACCORDION
    ============================================= */
    .home-faq-accordion-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .home-faq-accordion-item {
      background: var(--faq-bg-card);
      border: 1px solid var(--faq-border);
      border-radius: var(--faq-radius-md);
      overflow: hidden;
      transition: border-color var(--faq-transition), box-shadow var(--faq-transition);
    }
    .home-faq-accordion-item[aria-expanded="true"] {
      border-color: var(--faq-border-active);
    }
    .home-faq-accordion-item[aria-expanded="true"][data-faq-theme="firebird"] { box-shadow: var(--faq-shadow-glow-fire); }
    .home-faq-accordion-item[aria-expanded="true"][data-faq-theme="elephant"] { box-shadow: var(--faq-shadow-glow-elephant); }
    .home-faq-accordion-item[aria-expanded="true"][data-faq-theme="dove"]     { box-shadow: var(--faq-shadow-glow-dove); }

    .home-faq-acc-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: var(--faq-font-head);
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--faq-text-primary);
      transition: color var(--faq-transition);
    }
    .home-faq-acc-trigger:hover { color: var(--faq-text-accent); }

    .home-faq-acc-num {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
      color: #fff;
      font-family: var(--faq-font-head);
    }
    [data-faq-theme="firebird"] .home-faq-acc-num { background: var(--faq-grad-firebird); }
    [data-faq-theme="elephant"] .home-faq-acc-num { background: var(--faq-grad-elephant); }
    [data-faq-theme="dove"]     .home-faq-acc-num { background: var(--faq-grad-dove); }
    [data-faq-theme="gold"]     .home-faq-acc-num { background: var(--faq-grad-gold); }
    [data-faq-theme="rose"]     .home-faq-acc-num { background: var(--faq-grad-rose); }
    [data-faq-theme="cyan"]     .home-faq-acc-num { background: var(--faq-grad-cyan); }
    [data-faq-theme="lime"]     .home-faq-acc-num { background: var(--faq-grad-lime); }
    [data-faq-theme="amber"]    .home-faq-acc-num { background: var(--faq-grad-amber); }
    [data-faq-theme="slate"]    .home-faq-acc-num { background: var(--faq-grad-slate); }

    .home-faq-acc-text { flex: 1; }

    .home-faq-acc-arrow {
      flex-shrink: 0;
      width: 20px; height: 20px;
      transition: transform var(--faq-transition);
    }
    [aria-expanded="true"] .home-faq-acc-arrow { transform: rotate(180deg); }

    .home-faq-acc-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1);
    }
    [aria-expanded="true"] .home-faq-acc-body { max-height: 400px; }

    .home-faq-acc-inner {
      padding: 0 18px 18px 58px;
      font-size: 0.88rem;
      color: var(--faq-text-muted);
      line-height: 1.75;
    }

    /* =============================================
       MIDDLE — CONTACT FORM
    ============================================= */
    .home-faq-form-col {
      background: var(--faq-bg-card);
      border: 1px solid var(--faq-border);
      border-radius: var(--faq-radius-lg);
      padding: 30px 26px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      position: relative;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
    }

    .home-faq-form-col::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--faq-grad-firebird);
      border-radius: var(--faq-radius-lg) var(--faq-radius-lg) 0 0;
    }

    .home-faq-form-heading {
      font-family: var(--faq-font-head);
      font-size: 1.25rem;
      font-weight: 800;
      margin: 0 0 6px;
      color: #fff;
    }
    .home-faq-form-sub {
      font-size: 0.82rem;
      color: var(--faq-text-muted);
      margin: 0 0 22px;
    }

    .home-faq-field {
      margin-bottom: 16px;
    }
    .home-faq-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--faq-text-muted);
      margin-bottom: 7px;
      font-family: var(--faq-font-head);
    }

    .home-faq-input,
    .home-faq-select,
    .home-faq-textarea {
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--faq-border);
      border-radius: var(--faq-radius-sm);
      color: var(--faq-text-primary);
      font-family: var(--faq-font-body);
      font-size: 0.88rem;
      padding: 11px 14px;
      outline: none;
      transition: border-color var(--faq-transition), box-shadow var(--faq-transition);
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
    }
    .home-faq-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a95b0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 38px;
    }
    .home-faq-select option {
      background: #0f1424;
      color: #f0f4ff;
    }
    .home-faq-textarea { resize: vertical; min-height: 90px; }

    .home-faq-input:focus,
    .home-faq-select:focus,
    .home-faq-textarea:focus {
      border-color: rgba(255,180,80,0.6);
      box-shadow: 0 0 0 3px rgba(255,180,80,0.10);
    }
    .home-faq-input::placeholder,
    .home-faq-textarea::placeholder { color: rgba(138,149,176,0.55); }

    /* Checkbox row */
    .home-faq-check-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 20px;
    }
    .home-faq-check-input {
      width: 16px; height: 16px;
      flex-shrink: 0;
      accent-color: #ff6a00;
      margin-top: 3px;
      cursor: pointer;
    }
    .home-faq-check-label {
      font-size: 0.78rem;
      color: var(--faq-text-muted);
      line-height: 1.6;
    }
    .home-faq-check-label a {
      color: var(--faq-text-accent);
      text-decoration: none;
    }
    .home-faq-check-label a:hover { text-decoration: underline; }

    /* Submit button */
    .home-faq-submit-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 24px;
      background: var(--faq-grad-firebird);
      border: none;
      border-radius: var(--faq-radius-sm);
      color: #fff;
      font-family: var(--faq-font-head);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: box-shadow var(--faq-transition), transform var(--faq-transition);
    }
    .home-faq-submit-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background var(--faq-transition);
    }
    .home-faq-submit-btn:hover {
      box-shadow: 0 6px 28px rgba(238,9,121,0.45);
      transform: translateY(-2px);
    }
    .home-faq-submit-btn:hover::after { background: rgba(255,255,255,0.08); }
    .home-faq-submit-btn svg { position: relative; z-index: 1; width: 16px; height: 16px; fill: #fff; }
    .home-faq-submit-btn span { position: relative; z-index: 1; }

    /* Floating badges */
    .home-faq-float-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .home-faq-float-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 600;
      font-family: var(--faq-font-head);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid var(--faq-border);
      color: var(--faq-text-muted);
      animation: home-faq-float 3.5s ease-in-out infinite;
    }
    .home-faq-float-badge:nth-child(2) { animation-delay: 0.6s; }
    .home-faq-float-badge:nth-child(3) { animation-delay: 1.2s; }
    .home-faq-float-badge svg { width: 11px; height: 11px; }
    @keyframes home-faq-float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    /* =============================================
       RIGHT — DYNAMIC MEDIA PANEL
    ============================================= */
    .home-faq-media-col {
      position: sticky;
      top: 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .home-faq-media-card {
      position: relative;
      border-radius: var(--faq-radius-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
      border: 1px solid var(--faq-border);
    }

    /* Media panels hidden by default */
    .home-faq-media-panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.55s ease;
      pointer-events: none;
    }
    .home-faq-media-panel.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Each panel has its gradient bg + SVG illustration */
    .home-faq-media-panel[data-faq-panel="seo"]       { background: linear-gradient(145deg,#0d0620,#1e0b38,#3b0764); }
    .home-faq-media-panel[data-faq-panel="web-design"]{ background: linear-gradient(145deg,#07101e,#0f2040,#001f4d); }
    .home-faq-media-panel[data-faq-panel="dev"]       { background: linear-gradient(145deg,#001810,#003020,#00432e); }
    .home-faq-media-panel[data-faq-panel="social"]    { background: linear-gradient(145deg,#1f0a00,#3d1200,#5c2400); }
    .home-faq-media-panel[data-faq-panel="branding"]  { background: linear-gradient(145deg,#1a0020,#350040,#520060); }
    .home-faq-media-panel[data-faq-panel="ecommerce"] { background: linear-gradient(145deg,#001a2e,#003355,#005580); }
    .home-faq-media-panel[data-faq-panel="content"]   { background: linear-gradient(145deg,#0a1a00,#143300,#1e4d00); }
    .home-faq-media-panel[data-faq-panel="ppc"]       { background: linear-gradient(145deg,#1a0e00,#332200,#4d3300); }
    .home-faq-media-panel[data-faq-panel="support"]   { background: linear-gradient(145deg,#0a0a1a,#141430,#1e1e4d); }

    .home-faq-media-svg-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-faq-media-svg-wrap svg { width: 75%; height: 75%; }

    /* Scanline effect */
    .home-faq-media-scanlines {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);
      pointer-events: none;
    }

    /* Media info overlay */
    .home-faq-media-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 16px 18px;
      background: linear-gradient(to top,rgba(0,0,0,0.85),transparent);
    }
    .home-faq-media-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      margin-bottom: 7px;
    }
    [data-faq-panel="seo"]        .home-faq-media-tag { background: rgba(168,85,247,0.3); color: #c084fc; }
    [data-faq-panel="web-design"] .home-faq-media-tag { background: rgba(14,165,233,0.3); color: #38bdf8; }
    [data-faq-panel="dev"]        .home-faq-media-tag { background: rgba(16,185,129,0.3); color: #34d399; }
    [data-faq-panel="social"]     .home-faq-media-tag { background: rgba(251,146,60,0.3); color: #fb923c; }
    [data-faq-panel="branding"]   .home-faq-media-tag { background: rgba(236,72,153,0.3); color: #f472b6; }
    [data-faq-panel="ecommerce"]  .home-faq-media-tag { background: rgba(6,182,212,0.3);  color: #22d3ee; }
    [data-faq-panel="content"]    .home-faq-media-tag { background: rgba(132,204,22,0.3); color: #a3e635; }
    [data-faq-panel="ppc"]        .home-faq-media-tag { background: rgba(245,158,11,0.3); color: #fbbf24; }
    [data-faq-panel="support"]    .home-faq-media-tag { background: rgba(99,102,241,0.3); color: #a5b4fc; }

    .home-faq-media-name {
      font-family: var(--faq-font-head);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }

    /* Swiper stats mini */
    .home-faq-stats-swiper {
      border: 1px solid var(--faq-border);
      border-radius: var(--faq-radius-md);
      background: var(--faq-bg-card);
      overflow: hidden;
      height: 90px;          /* fixed height — prevents stacking */
      min-height: 90px;
      position: relative;
    }
    /* Before Swiper JS kicks in, only show first slide */
    .home-faq-stats-swiper:not(.swiper-initialized) .home-faq-stat-slide ~ .home-faq-stat-slide {
      display: none;
    }
    /* Swiper wrapper must fill the fixed height */
    .home-faq-stats-swiper .swiper-wrapper {
      height: 90px;
    }
    .home-faq-stat-slide {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      height: 90px;
      box-sizing: border-box;
    }
    .home-faq-stat-num {
      font-family: var(--faq-font-head);
      font-size: 2rem;
      font-weight: 800;
      background: var(--faq-grad-firebird);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .home-faq-stat-label {
      font-size: 0.8rem;
      color: var(--faq-text-muted);
    }

    /* =============================================
       RESPONSIVE — fluid, iframe-safe
    ============================================= */

    /* Default: 3 columns only when truly wide */
    .home-faq-grid {
      grid-template-columns: 1fr;
    }

    @media (min-width: 700px) {
      .home-faq-grid {
        grid-template-columns: 1fr 1fr;
      }
      .home-faq-media-col {
        grid-column: 1 / -1;
        flex-direction: row;
        position: static;
      }
      .home-faq-media-card { flex: 1; min-width: 0; }
      .home-faq-stats-swiper { flex: 0 0 200px; }
    }

    @media (min-width: 1080px) {
      .home-faq-grid {
        grid-template-columns: 1fr 1fr 1fr;
      }
      .home-faq-media-col {
        grid-column: auto;
        flex-direction: column;
        position: sticky;
        top: 24px;
      }
      .home-faq-stats-swiper { flex: none; }
    }

    /* Tabs wrap nicely on small screens */
    @media (max-width: 600px) {
      .home-faq-tabs-nav { gap: 6px; }
      .home-faq-tab-btn  { padding: 6px 12px; font-size: 11px; }
      #home-faq-section-wrap { padding: 40px 0 52px; }
      .home-faq-title { font-size: 1.75rem; }
    }

    /* Prevent any column from overflowing its container */
    .home-faq-accordion-col,
    .home-faq-form-col,
    .home-faq-media-col {
      min-width: 0;
      box-sizing: border-box;
    }

    /* =============================================
       ANIMATED PULSE RING (on active accordion)
    ============================================= */
    @keyframes home-faq-pulse-ring {
      0%   { transform: scale(1);   opacity: 0.5; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    /* =============================================
       FORM SUCCESS STATE
    ============================================= */
    .home-faq-form-success {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px 20px;
      gap: 14px;
    }
    .home-faq-form-success.is-visible { display: flex; }
    .home-faq-form-success svg { width: 56px; height: 56px; }
    .home-faq-form-success h3 {
      font-family: var(--faq-font-head);
      font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0;
    }
    .home-faq-form-success p { font-size: 0.85rem; color: var(--faq-text-muted); margin: 0; }

    /* Lazy-load fade */
    .home-faq-lazy { opacity: 0; transition: opacity 0.5s ease; }
    .home-faq-lazy.loaded { opacity: 1; }
/* //  Seo page faq section End */


/* <!-- blog section start --> */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* ===== CSS VARIABLES ===== */
    :root {
      --bg-deep:        #080c18;
      --bg-card:        #0d1225;
      --bg-card-hover:  #111830;
      --border-subtle:  rgba(255,255,255,0.07);
      --border-glow:    rgba(255,255,255,0.15);

      /* Firebird: orange-red-pink */
      --grad-fire:      linear-gradient(135deg, #ff6a00 0%, #ee0979 50%, #ff416c 100%);
      --grad-fire-soft: linear-gradient(135deg, rgba(255,106,0,.18) 0%, rgba(238,9,121,.18) 100%);
      --c-fire-1: #ff6a00;
      --c-fire-2: #ee0979;

      /* Elephant/Wave: blue-purple */
      --grad-wave:      linear-gradient(135deg, #2979ff 0%, #7c4dff 50%, #e040fb 100%);
      --grad-wave-soft: linear-gradient(135deg, rgba(41,121,255,.18) 0%, rgba(224,64,251,.18) 100%);
      --c-wave-1: #2979ff;
      --c-wave-2: #7c4dff;

      /* Dove: teal-green-rainbow */
      --grad-dove:      linear-gradient(135deg, #00e5ff 0%, #00e676 50%, #76ff03 100%);
      --grad-dove-soft: linear-gradient(135deg, rgba(0,229,255,.18) 0%, rgba(118,255,3,.18) 100%);
      --c-dove-1: #00e5ff;
      --c-dove-2: #00e676;

      /* Typography */
      --font-head: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;

      --text-primary:   #f0f4ff;
      --text-secondary: #8892b0;
      --text-muted:     #4a5580;

      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --radius-pill: 999px;

      --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ===== BLOG WRAPPER ===== */
    #blog-section-wrap {
      font-family: var(--font-body);
      color: var(--text-primary);
      background: var(--bg-deep);
      overflow-x: hidden;
      position: relative;
    }

    /* ===== PARTICLES CANVAS ===== */
    #blog-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ===== HERO ===== */
    #blog-hero {
      position: relative;
      min-height: 72vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6rem 1.5rem 7rem;
      z-index: 1;
      overflow: hidden;
    }

    /* Parallax orbs */
    .blog-hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.35;
      pointer-events: none;
      will-change: transform;
    }
    .blog-hero-orb--fire {
      width: 480px; height: 480px;
      background: var(--grad-fire);
      top: -120px; left: -100px;
    }
    .blog-hero-orb--wave {
      width: 420px; height: 420px;
      background: var(--grad-wave);
      top: -80px; right: -120px;
    }
    .blog-hero-orb--dove {
      width: 320px; height: 320px;
      background: var(--grad-dove);
      bottom: 40px; left: 50%;
      transform: translateX(-50%);
    }

    /* Animated floating SVG icons */
    .blog-float-icon {
      position: absolute;
      pointer-events: none;
      animation: blog-float 6s ease-in-out infinite;
      opacity: 0.55;
    }
    .blog-float-icon:nth-child(2) { animation-delay: -2s; }
    .blog-float-icon:nth-child(3) { animation-delay: -4s; }
    .blog-float-icon:nth-child(4) { animation-delay: -1s; }
    .blog-float-icon:nth-child(5) { animation-delay: -3s; }

    @keyframes blog-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%       { transform: translateY(-18px) rotate(6deg); }
    }

    /* Breadcrumb */
    #blog-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-family: var(--font-body);
      font-weight: 500;
      letter-spacing: 0.04em;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border-glow);
      border-radius: var(--radius-pill);
      padding: 6px 18px;
      margin-bottom: 1.8rem;
      backdrop-filter: blur(12px);
    }
    #blog-breadcrumb a {
      color: var(--text-secondary);
      transition: color var(--transition);
    }
    #blog-breadcrumb a:hover { color: #fff; }
    .blog-breadcrumb-sep {
      color: var(--text-muted);
      font-size: 0.7rem;
    }
    .blog-breadcrumb-current {
      background: var(--grad-fire);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 600;
    }

    /* Hero heading */
    #blog-hero-heading {
      font-family: var(--font-head);
      font-size: clamp(3rem, 8vw, 6.5rem);
      font-weight: 800;
      line-height: 1.0;
      letter-spacing: -0.03em;
      margin-bottom: 1.4rem;
      position: relative;
    }
    .blog-heading-plain { color: var(--text-primary); display: block; }
    .blog-heading-grad {
      background: var(--grad-wave);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
    }

    #blog-hero-sub {
      font-size: clamp(0.95rem, 2vw, 1.15rem);
      color: var(--text-secondary);
      max-width: 560px;
      line-height: 1.75;
      margin-bottom: 2.2rem;
    }

    /* Topic pills */
    #blog-topic-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 0.5rem;
    }
    .blog-pill {
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 500;
      padding: 7px 18px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-glow);
      background: rgba(255,255,255,0.05);
      color: var(--text-secondary);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      backdrop-filter: blur(8px);
    }
    .blog-pill:hover,
    .blog-pill.blog-pill--active {
      color: #fff;
      border-color: transparent;
    }
    .blog-pill[data-topic="all"]:hover,
    .blog-pill[data-topic="all"].blog-pill--active { background: var(--grad-fire); }
    .blog-pill[data-topic="ai"]:hover,
    .blog-pill[data-topic="ai"].blog-pill--active { background: var(--grad-wave); }
    .blog-pill[data-topic="design"]:hover,
    .blog-pill[data-topic="design"].blog-pill--active { background: var(--grad-dove); }
    .blog-pill[data-topic="tech"]:hover,
    .blog-pill[data-topic="tech"].blog-pill--active { background: var(--grad-fire); }
    .blog-pill[data-topic="business"]:hover,
    .blog-pill[data-topic="business"].blog-pill--active { background: var(--grad-wave); }
    .blog-pill[data-topic="cloud"]:hover,
    .blog-pill[data-topic="cloud"].blog-pill--active { background: var(--grad-dove); }

    /* ===== WAVY SVG DIVIDER ===== */
    .blog-wave-divider {
      width: 100%;
      line-height: 0;
      position: relative;
      z-index: 2;
    }
    .blog-wave-divider svg { display: block; width: 100%; }

    /* ===== FEATURED CARDS SECTION ===== */
    #blog-featured {
      position: relative;
      z-index: 2;
      padding: 4rem 1.5rem 3rem;
    }
    #blog-featured-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .blog-section-label {
      font-family: var(--font-head);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
      background: var(--grad-fire);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .blog-section-title {
      font-family: var(--font-head);
      font-size: clamp(1.6rem, 3.5vw, 2.6rem);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 2.5rem;
      line-height: 1.15;
    }

    /* Featured grid */
    #blog-featured-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    /* Card base */
    .blog-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
      cursor: pointer;
    }
    .blog-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0;
      transition: opacity var(--transition);
      pointer-events: none;
    }
    .blog-card:hover {
      transform: translateY(-6px);
      border-color: var(--border-glow);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    }
    .blog-card:hover::before { opacity: 1; }

    .blog-card--fire::before  { background: var(--grad-fire-soft); }
    .blog-card--wave::before  { background: var(--grad-wave-soft); }
    .blog-card--dove::before  { background: var(--grad-dove-soft); }

    /* Main big card */
    .blog-card--main {
      grid-column: span 7;
    }
    /* Side cards */
    .blog-card--side {
      grid-column: span 5;
    }
    .blog-card--small {
      grid-column: span 4;
    }

    .blog-card-thumb {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      background: #1a2040;
      position: relative;
      overflow: hidden;
    }
    .blog-card-thumb-placeholder {
      width: 100%;
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .blog-card--main .blog-card-thumb-placeholder { aspect-ratio: 16/8; }

    .blog-card-body {
      padding: 1.5rem;
    }

    /* Category badge */
    .blog-cat-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: var(--radius-pill);
      margin-bottom: 0.9rem;
      position: relative;
      z-index: 1;
    }
    .blog-cat-badge--fire { background: var(--grad-fire-soft); color: #ff8a65; border: 1px solid rgba(255,106,0,.25); }
    .blog-cat-badge--wave { background: var(--grad-wave-soft); color: #82b1ff; border: 1px solid rgba(41,121,255,.25); }
    .blog-cat-badge--dove { background: var(--grad-dove-soft); color: #80deea; border: 1px solid rgba(0,229,255,.25); }

    .blog-cat-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

    .blog-card-title {
      font-family: var(--font-head);
      font-size: clamp(1rem, 1.8vw, 1.25rem);
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.35;
      margin-bottom: 0.6rem;
      transition: color var(--transition);
    }
    .blog-card--main .blog-card-title {
      font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    }
    .blog-card:hover .blog-card-title { color: #fff; }

    .blog-card-excerpt {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 1.1rem;
    }

    .blog-card-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .blog-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

    .blog-card-readmore {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-top: 1.1rem;
      transition: gap var(--transition), opacity var(--transition);
      opacity: 0.7;
    }
    .blog-card--fire .blog-card-readmore { color: #ff8a65; }
    .blog-card--wave .blog-card-readmore { color: #82b1ff; }
    .blog-card--dove .blog-card-readmore { color: #80deea; }
    .blog-card:hover .blog-card-readmore { gap: 10px; opacity: 1; }

    .blog-card-readmore svg { width: 14px; height: 14px; transition: transform var(--transition); }
    .blog-card:hover .blog-card-readmore svg { transform: translateX(3px); }

    /* ===== WAVY DIVIDER 2 ===== */
    #blog-subtopics-wave { background: var(--bg-deep); }

    /* ===== SUBTOPICS ===== */
    #blog-subtopics {
      padding: 3.5rem 1.5rem;
      position: relative;
      z-index: 2;
    }
    #blog-subtopics-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    #blog-subtopics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 14px;
    }

    .blog-subtopic-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 1.25rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      transition: transform var(--transition), border-color var(--transition), background var(--transition);
      position: relative;
      overflow: hidden;
    }
    .blog-subtopic-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      opacity: 0;
      transition: opacity var(--transition);
    }
    .blog-subtopic-card--fire::after  { background: var(--grad-fire); }
    .blog-subtopic-card--wave::after  { background: var(--grad-wave); }
    .blog-subtopic-card--dove::after  { background: var(--grad-dove); }

    .blog-subtopic-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-glow);
      background: var(--bg-card-hover);
    }
    .blog-subtopic-card:hover::after { opacity: 1; }

    .blog-subtopic-icon {
      width: 40px; height: 40px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .blog-subtopic-icon svg { width: 18px; height: 18px; }
    .blog-subtopic-icon--fire { background: var(--grad-fire-soft); }
    .blog-subtopic-icon--wave { background: var(--grad-wave-soft); }
    .blog-subtopic-icon--dove { background: var(--grad-dove-soft); }

    .blog-subtopic-name {
      font-family: var(--font-head);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .blog-subtopic-count {
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    /* ===== SWIPER / TRENDING ===== */
    #blog-trending {
      padding: 3.5rem 1.5rem;
      position: relative;
      z-index: 2;
      overflow: hidden;
    }
    #blog-trending-inner { max-width: 1200px; margin: 0 auto; }

    #blog-trending-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2rem;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .blog-swiper-nav {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }
    .blog-swiper-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border-glow);
      background: var(--bg-card);
      color: var(--text-secondary);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
    }
    .blog-swiper-btn:hover { background: var(--grad-wave); border-color: transparent; color: #fff; }
    .blog-swiper-btn svg { width: 16px; height: 16px; }

    #blog-trending-swiper { overflow: hidden; }
    #blog-trending-swiper .swiper-slide { height: auto; }

    .blog-trend-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: transform var(--transition), border-color var(--transition);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .blog-trend-card:hover {
      transform: translateY(-5px);
      border-color: var(--border-glow);
    }
    .blog-trend-card-thumb {
      width: 100%;
      aspect-ratio: 16/9;
    }
    .blog-trend-card-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
    .blog-trend-card-title {
      font-family: var(--font-head);
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.4;
      margin-bottom: 0.5rem;
    }
    .blog-trend-card-meta {
      margin-top: auto;
      font-size: 0.72rem;
      color: var(--text-muted);
      display: flex; gap: 10px;
    }

    /* ===== NEWSLETTER BANNER ===== */
    #blog-newsletter {
      padding: 3rem 1.5rem;
      position: relative;
      z-index: 2;
    }
    #blog-newsletter-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    #blog-newsletter-box {
      border-radius: var(--radius-lg);
      padding: 3rem 2.5rem;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      border: 1px solid var(--border-glow);
      background: var(--bg-card);
    }
    #blog-newsletter-box::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,106,0,.08) 0%, rgba(41,121,255,.08) 50%, rgba(0,229,255,.08) 100%);
      pointer-events: none;
    }
    #blog-newsletter-orb {
      position: absolute;
      width: 300px; height: 300px;
      background: var(--grad-wave);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.12;
      right: -60px; top: -60px;
      pointer-events: none;
    }
    #blog-newsletter-text { position: relative; }
    #blog-newsletter-title {
      font-family: var(--font-head);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }
    #blog-newsletter-sub { font-size: 0.9rem; color: var(--text-secondary); }
    #blog-newsletter-form {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
    }
    #blog-newsletter-input {
      font-family: var(--font-body);
      font-size: 0.88rem;
      padding: 12px 18px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-glow);
      background: rgba(255,255,255,0.05);
      color: var(--text-primary);
      outline: none;
      width: 260px;
      transition: border-color var(--transition), background var(--transition);
    }
    #blog-newsletter-input:focus {
      border-color: #7c4dff;
      background: rgba(124,77,255,0.08);
    }
    #blog-newsletter-input::placeholder { color: var(--text-muted); }
    #blog-newsletter-btn {
      font-family: var(--font-head);
      font-size: 0.85rem;
      font-weight: 700;
      padding: 12px 26px;
      border-radius: var(--radius-pill);
      border: none;
      background: var(--grad-wave);
      color: #fff;
      cursor: pointer;
      transition: opacity var(--transition), transform var(--transition);
      letter-spacing: 0.04em;
    }
    #blog-newsletter-btn:hover { opacity: 0.88; transform: scale(1.04); }

    /* ===== FLOATING BADGE ===== */
    .blog-float-badge {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 6px 13px;
      border-radius: var(--radius-pill);
      backdrop-filter: blur(12px);
      animation: blog-float 5s ease-in-out infinite;
      pointer-events: none;
      z-index: 3;
      white-space: nowrap;
    }
    .blog-float-badge--fire {
      background: rgba(238,9,121,0.18);
      border: 1px solid rgba(238,9,121,0.3);
      color: #ff8a9b;
      top: 18%; right: 8%;
      animation-delay: -1s;
    }
    .blog-float-badge--wave {
      background: rgba(41,121,255,0.18);
      border: 1px solid rgba(41,121,255,0.3);
      color: #82b1ff;
      top: 38%; left: 5%;
      animation-delay: -3s;
    }
    .blog-float-badge--dove {
      background: rgba(0,229,255,0.18);
      border: 1px solid rgba(0,229,255,0.3);
      color: #80deea;
      bottom: 18%; right: 10%;
      animation-delay: -2s;
    }
    .blog-float-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      animation: blog-pulse 2s ease-in-out infinite;
    }
    .blog-float-badge--fire  .blog-float-badge-dot { background: #ff416c; }
    .blog-float-badge--wave  .blog-float-badge-dot { background: #7c4dff; }
    .blog-float-badge--dove  .blog-float-badge-dot { background: #00e5ff; }

    @keyframes blog-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%       { transform: scale(1.5); opacity: 0.6; }
    }

    /* ===== THUMB PLACEHOLDERS (colorful SVG) ===== */
    .blog-thumb-svg {
      width: 100%; height: 100%;
      position: absolute; inset: 0;
      object-fit: cover;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {
      .blog-card--main  { grid-column: span 12; }
      .blog-card--side  { grid-column: span 12; }
      .blog-card--small { grid-column: span 6; }
      .blog-float-badge--wave { display: none; }
    }
    @media (max-width: 640px) {
      #blog-hero { padding: 4.5rem 1rem 5.5rem; }
      .blog-card--small { grid-column: span 12; }
      #blog-featured-grid { gap: 14px; }
      #blog-newsletter-box { padding: 2rem 1.25rem; }
      #blog-newsletter-input { width: 100%; }
      #blog-newsletter-btn { width: 100%; }
      .blog-float-badge { display: none; }
      #blog-trending-head { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 400px) {
      #blog-hero-heading { font-size: 2.6rem; }
    }

    /* Lazy-load fade-in */
    .blog-lazy { opacity: 0; transition: opacity 0.6s; }
    .blog-lazy.blog-lazy--loaded { opacity: 1; }

    /* Animate on scroll */
    .blog-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
    }
    .blog-reveal.blog-reveal--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .blog-reveal-delay-1 { transition-delay: 0.1s; }
    .blog-reveal-delay-2 { transition-delay: 0.2s; }
    .blog-reveal-delay-3 { transition-delay: 0.3s; }
    .blog-reveal-delay-4 { transition-delay: 0.4s; }

/* <!-- blog section End --> */


/* <!-- Seo package page start --> */

    :root {
      --seo-pkg-bg:            #080c18;
      --seo-pkg-surface:       rgba(255,255,255,0.035);
      --seo-pkg-border:        rgba(255,255,255,0.08);
      --seo-pkg-text:          #e8eaf6;
      --seo-pkg-muted:         rgba(232,234,246,0.55);
      --seo-pkg-section-label: rgba(255,255,255,0.12);

      /* Fire-bird: orange → red → pink */
      --seo-pkg-grad-basic:   linear-gradient(135deg,#ff6b35 0%,#e63950 50%,#c2185b 100%);
      --seo-pkg-grad-basic-g: linear-gradient(180deg,rgba(255,107,53,.18) 0%,transparent 60%);

      /* Elephant/Wave: blue → purple */
      --seo-pkg-grad-excl:    linear-gradient(135deg,#1e88e5 0%,#6c3de8 50%,#9c27b0 100%);
      --seo-pkg-grad-excl-g:  linear-gradient(180deg,rgba(30,136,229,.18) 0%,transparent 60%);

      /* Dove: teal → green → rainbow */
      --seo-pkg-grad-pro:     linear-gradient(135deg,#00bfa5 0%,#00e676 40%,#64ffda 100%);
      --seo-pkg-grad-pro-g:   linear-gradient(180deg,rgba(0,191,165,.18) 0%,transparent 60%);

      --seo-pkg-radius:        20px;
      --seo-pkg-radius-sm:     10px;
      --seo-pkg-transition:    0.35s cubic-bezier(.4,0,.2,1);
    }

    /* ===== RESET / UTILITIES ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ===== PAGE WRAPPER ===== */
    #seo-package-page-wrapper {
      background: var(--seo-pkg-bg);
      color: var(--seo-pkg-text);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
      position: relative;
    }

    /* ===== PARTICLES CANVAS ===== */
    #seo-package-page-particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ===== PARALLAX BG BLOBS ===== */
    #seo-package-page-blobs {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .seo-package-page-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.22;
      will-change: transform;
      transition: transform 0.1s linear;
    }
    .seo-package-page-blob--a {
      width: 600px; height: 600px;
      background: radial-gradient(circle, #e63950, #ff6b35);
      top: -120px; left: -120px;
    }
    .seo-package-page-blob--b {
      width: 500px; height: 500px;
      background: radial-gradient(circle, #1e88e5, #9c27b0);
      top: 40%; right: -80px;
    }
    .seo-package-page-blob--c {
      width: 400px; height: 400px;
      background: radial-gradient(circle, #00bfa5, #00e676);
      bottom: 5%; left: 30%;
    }

    /* ===== CONTENT LAYER ===== */
    #seo-package-page-content {
      position: relative;
      z-index: 2;
    }

    /* ===== HERO HEADER ===== */
    #seo-package-page-hero {
      padding: 56px 20px 36px;
      text-align: center;
    }
    #seo-package-page-hero h1 {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      background: linear-gradient(120deg,#ff6b35,#e63950,#9c27b0,#1e88e5,#00bfa5);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: seo-pkg-title-flow 6s ease-in-out infinite;
    }
    @keyframes seo-pkg-title-flow {
      0%,100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    /* ===== BREADCRUMB ===== */
    #seo-package-page-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.04em;
    }
    .seo-package-page-breadcrumb__home {
      color: #64b5f6;
      text-decoration: none;
      padding: 4px 12px;
      border: 1px solid rgba(100,181,246,0.35);
      border-radius: 20px;
      background: rgba(100,181,246,0.08);
      transition: var(--seo-pkg-transition);
    }
    .seo-package-page-breadcrumb__home:hover {
      background: rgba(100,181,246,0.2);
      border-color: rgba(100,181,246,0.6);
      color: #fff;
    }
    .seo-package-page-breadcrumb__sep {
      color: var(--seo-pkg-muted);
      font-size: 0.75rem;
    }
    .seo-package-page-breadcrumb__current {
      color: var(--seo-pkg-text);
      padding: 4px 12px;
      border: 1px solid var(--seo-pkg-border);
      border-radius: 20px;
      background: var(--seo-pkg-surface);
    }

    /* ===== WAVY SVG DIVIDER ===== */
    .seo-package-page-wave {
      display: block;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      margin-top: 8px;
    }
    .seo-package-page-wave svg {
      display: block;
      width: 100%;
    }

    /* ===== PRICING GRID ===== */
    #seo-package-page-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px 40px 60px;
    }
    @media(max-width:900px) {
      #seo-package-page-grid { grid-template-columns: 1fr; max-width: 620px; }
    }
    @media(min-width:901px) and (max-width:1100px) {
      #seo-package-page-grid { max-width: 1400px; gap: 24px; padding: 20px 24px 50px; }
    }

    /* ===== CARD ===== */
    .seo-package-page-card {
      position: relative;
      border-radius: var(--seo-pkg-radius);
      background: rgba(8,12,24,0.72);
      backdrop-filter: blur(18px);
      border: 1px solid var(--seo-pkg-border);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform var(--seo-pkg-transition), box-shadow var(--seo-pkg-transition), border-color var(--seo-pkg-transition);
      opacity: 0;
      transform: translateY(40px);
    }
    .seo-package-page-card.seo-pkg-visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.6s ease, transform 0.6s ease,
                  box-shadow var(--seo-pkg-transition), border-color var(--seo-pkg-transition);
    }

    .seo-package-page-card:hover {
      transform: translateY(-8px) scale(1.012);
    }

    /* Per-card glow */
    .seo-package-page-card--basic  { --card-grad: var(--seo-pkg-grad-basic);  --card-glow: rgba(230,57,80,.45); }
    .seo-package-page-card--excl   { --card-grad: var(--seo-pkg-grad-excl);   --card-glow: rgba(108,61,232,.45); }
    .seo-package-page-card--pro    { --card-grad: var(--seo-pkg-grad-pro);    --card-glow: rgba(0,191,165,.45); }

    .seo-package-page-card:hover { box-shadow: 0 20px 60px var(--card-glow), 0 0 0 1px rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }

    /* Card glowing top border */
    .seo-package-page-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: var(--card-grad);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity var(--seo-pkg-transition);
      pointer-events: none;
    }
    .seo-package-page-card:hover::before { opacity: 1; }

    /* ===== CARD HEADER ===== */
    .seo-package-page-card__head {
      padding: 28px 24px 22px;
      text-align: center;
      position: relative;
      background: var(--card-grad);
    }
    .seo-package-page-card__head::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(8,12,24,0.38);
    }
    .seo-package-page-card__badge {
      position: relative;
      z-index: 1;
      display: inline-block;
      font-family: 'Syne', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 20px;
      padding: 3px 14px;
      color: #fff;
      margin-bottom: 10px;
      backdrop-filter: blur(6px);
    }
    .seo-package-page-card__name {
      position: relative;
      z-index: 1;
      font-family: 'Syne', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #fff;
      display: block;
      margin-bottom: 6px;
    }
    .seo-package-page-card__price {
      position: relative;
      z-index: 1;
      font-family: 'Syne', sans-serif;
      font-size: 2.6rem;
      font-weight: 800;
      color: #fff;
      line-height: 1;
    }
    .seo-package-page-card__price sup {
      font-size: 1.2rem;
      vertical-align: super;
      opacity: 0.85;
    }
    .seo-package-page-card__price sub {
      font-size: 0.85rem;
      vertical-align: baseline;
      opacity: 0.7;
    }
    .seo-package-page-card__kw {
      position: relative;
      z-index: 1;
      display: inline-block;
      margin-top: 8px;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.78);
      background: rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 3px 12px;
    }

    /* Floating SVG icon in header */
    .seo-package-page-card__icon {
      position: absolute;
      z-index: 1;
      top: 14px; right: 18px;
      width: 40px; height: 40px;
      opacity: 0.35;
      animation: seo-pkg-float 4s ease-in-out infinite;
    }
    @keyframes seo-pkg-float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }

    /* ===== CARD BODY ===== */
    .seo-package-page-card__body {
      padding: 18px 22px 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* ===== SECTION LABEL ===== */
    .seo-package-page-section-label {
      font-family: 'Syne', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--seo-pkg-muted);
      background: var(--seo-pkg-section-label);
      border-radius: var(--seo-pkg-radius-sm);
      padding: 5px 10px;
      margin: 14px 0 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .seo-package-page-section-label svg {
      flex-shrink: 0;
    }

    /* ===== FEATURE ROW ===== */
    .seo-package-page-feature {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      font-size: 1.1rem;
      color: var(--seo-pkg-muted);
      transition: color var(--seo-pkg-transition);
    }
    .seo-package-page-feature:last-of-type { border-bottom: none; }
    .seo-package-page-feature:hover { color: var(--seo-pkg-text); }
    .seo-package-page-feature__label { flex: 1; }
    .seo-package-page-feature__val {
      font-weight: 600;
      color: var(--seo-pkg-text);
      font-size: 0.8rem;
      margin-left: 6px;
      white-space: nowrap;
    }

    /* Check / Cross icons */
    .seo-pkg-icon-yes { color: #00e676; flex-shrink: 0; }
    .seo-pkg-icon-no  { color: rgba(255,255,255,0.22); flex-shrink: 0; }

    /* ===== CTA BUTTON ===== */
    .seo-package-page-card__cta {
      display: block;
      margin-top: 22px;
      padding: 14px 0;
      border-radius: var(--seo-pkg-radius-sm);
      background: var(--card-grad);
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-align: center;
      text-decoration: none;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: filter var(--seo-pkg-transition), transform var(--seo-pkg-transition), box-shadow var(--seo-pkg-transition);
    }
    .seo-package-page-card__cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.12);
      opacity: 0;
      transition: opacity var(--seo-pkg-transition);
    }
    .seo-package-page-card__cta:hover {
      filter: brightness(1.1);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px var(--card-glow);
    }
    .seo-package-page-card__cta:hover::before { opacity: 1; }
    /* PayPal badge on button */
    .seo-package-page-card__cta-sub {
      font-size: 0.68rem;
      opacity: 0.7;
      display: block;
      font-weight: 400;
      margin-top: 2px;
    }

    /* ===== POPULAR BADGE ===== */
    .seo-package-page-popular-badge {
      position: absolute;
      top: 12px; left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      background: linear-gradient(90deg,#ffd740,#ff6d00);
      color: #080c18;
      font-family: 'Syne', sans-serif;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(255,109,0,.5);
      animation: seo-pkg-badge-pulse 2s ease-in-out infinite;
    }
    @keyframes seo-pkg-badge-pulse {
      0%,100% { box-shadow: 0 4px 16px rgba(255,109,0,.5); }
      50%      { box-shadow: 0 4px 28px rgba(255,109,0,.9); }
    }

    /* ===== BOTTOM WAVE ===== */
    #seo-package-page-bottom-wave {
      pointer-events: none;
      margin-top: -2px;
    }

    /* ===== LAZY IMG ===== */
    img.lazy { opacity: 0; transition: opacity .4s; }
    img.lazy.loaded { opacity: 1; }
/* <!-- Seo package page End --> */


/* <!-- about us page skills section start --> */
    :root {
      --aboutus-skills--bg-dark:        #080c18;
      --aboutus-skills--bg-card:        rgba(255,255,255,0.03);
      --aboutus-skills--accent-orange:  #ff6a00;
      --aboutus-skills--accent-red:     #ee0979;
      --aboutus-skills--accent-pink:    #ff6fd8;
      --aboutus-skills--accent-blue:    #2979ff;
      --aboutus-skills--accent-purple:  #7c3aed;
      --aboutus-skills--accent-teal:    #00e5cc;
      --aboutus-skills--accent-green:   #00c853;
      --aboutus-skills--text-primary:   #f0f4ff;
      --aboutus-skills--text-muted:     #8b95b0;
      --aboutus-skills--border:         rgba(255,255,255,0.08);
      --aboutus-skills--radius:         20px;
      --aboutus-skills--font-head:      'Syne', sans-serif;
      --aboutus-skills--font-body:      'DM Sans', sans-serif;

      /* Gradient Presets */
      --aboutus-skills--grad-firebird:  linear-gradient(90deg, #ff6a00, #ee0979, #ff6fd8);
      --aboutus-skills--grad-elephant:  linear-gradient(90deg, #2979ff, #7c3aed, #b721ff);
      --aboutus-skills--grad-dove:      linear-gradient(90deg, #00e5cc, #00c853, #43e97b);
      --aboutus-skills--grad-ocean:     linear-gradient(90deg, #0093e9, #80d0c7);
      --aboutus-skills--grad-sunset:    linear-gradient(90deg, #f7971e, #ffd200);
      --aboutus-skills--grad-aurora:    linear-gradient(90deg, #7c3aed, #06b6d4, #10b981);
    }

    /* ── SECTION WRAPPER ────────────────────────────────────── */
    #aboutus-skills--section {
      position: relative;
      overflow: hidden;
      background: var(--aboutus-skills--bg-dark);
      font-family: var(--aboutus-skills--font-body);
      color: var(--aboutus-skills--text-primary);
      padding: 80px 0 60px;
    }

    /* Particles canvas */
    #aboutus-skills--particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── AMBIENT GLOWS ──────────────────────────────────────── */
    .aboutus-skills--glow-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(110px);
      pointer-events: none;
      z-index: 0;
      animation: aboutus-skills--orb-float 8s ease-in-out infinite alternate;
    }
    .aboutus-skills--glow-orb--1 {
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(238,9,121,0.22), transparent 70%);
      top: -80px; left: -80px;
      animation-delay: 0s;
    }
    .aboutus-skills--glow-orb--2 {
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(41,121,255,0.18), transparent 70%);
      bottom: -60px; right: -60px;
      animation-delay: -3s;
    }
    .aboutus-skills--glow-orb--3 {
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(0,229,204,0.14), transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      animation-delay: -5s;
    }
    @keyframes aboutus-skills--orb-float {
      from { transform: translateY(0px) scale(1); }
      to   { transform: translateY(-30px) scale(1.08); }
    }

    /* ── CONTAINER ─────────────────────────────────────────── */
    .aboutus-skills--container {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── GRID LAYOUT ────────────────────────────────────────── */
    .aboutus-skills--grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    @media (max-width: 900px) {
      .aboutus-skills--grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ── LEFT: ILLUSTRATION SIDE ────────────────────────────── */
    .aboutus-skills--illustration-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 400px;
    }

    /* Layered card behind illustration */
    .aboutus-skills--illus-card {
      position: relative;
      width: 100%;
      border-radius: var(--aboutus-skills--radius);
      background: var(--aboutus-skills--bg-card);
      border: 1px solid var(--aboutus-skills--border);
      backdrop-filter: blur(16px);
      padding: 40px 32px;
      overflow: hidden;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .aboutus-skills--illus-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 80px rgba(238,9,121,0.18);
    }
    .aboutus-skills--illus-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--aboutus-skills--radius);
      padding: 1px;
      background: var(--aboutus-skills--grad-firebird);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.5;
    }

    /* SVG Illustration inline */
    .aboutus-skills--svg-illus {
      width: 100%;
      max-width: 440px;
      display: block;
      margin: 0 auto;
      animation: aboutus-skills--float 6s ease-in-out infinite;
    }
    @keyframes aboutus-skills--float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-14px); }
    }

    /* Floating badges */
    .aboutus-skills--badge {
      position: absolute;
      border-radius: 50px;
      padding: 8px 16px;
      font-family: var(--aboutus-skills--font-body);
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 7px;
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12);
      animation: aboutus-skills--badge-bob 4s ease-in-out infinite alternate;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      z-index: 10;
    }
    .aboutus-skills--badge svg { width: 14px; height: 14px; flex-shrink: 0; }
    .aboutus-skills--badge--firebird {
      background: linear-gradient(135deg, rgba(255,106,0,0.25), rgba(238,9,121,0.25));
      color: #ff9a5c;
      top: 14px; right: -14px;
      animation-delay: 0s;
    }
    .aboutus-skills--badge--elephant {
      background: linear-gradient(135deg, rgba(41,121,255,0.25), rgba(124,58,237,0.25));
      color: #a0baff;
      bottom: 50px; left: -18px;
      animation-delay: -1.5s;
    }
    .aboutus-skills--badge--dove {
      background: linear-gradient(135deg, rgba(0,229,204,0.25), rgba(0,200,83,0.25));
      color: #5ffff0;
      bottom: -10px; right: 20px;
      animation-delay: -3s;
    }
    @keyframes aboutus-skills--badge-bob {
      from { transform: translateY(0px) rotate(-1deg); }
      to   { transform: translateY(-8px) rotate(1deg); }
    }

    /* ── RIGHT: CONTENT SIDE ────────────────────────────────── */
    .aboutus-skills--content { }

    .aboutus-skills--eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }
    .aboutus-skills--eyebrow-line {
      display: inline-block;
      width: 36px; height: 3px;
      border-radius: 2px;
      background: var(--aboutus-skills--grad-firebird);
    }
    .aboutus-skills--eyebrow-line--2 {
      width: 14px;
      background: var(--aboutus-skills--grad-elephant);
      margin-left: -4px;
    }

    .aboutus-skills--heading {
      font-family: var(--aboutus-skills--font-head);
      font-size: clamp(2rem, 4vw, 2.85rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--aboutus-skills--text-primary);
      margin-bottom: 18px;
    }
    .aboutus-skills--heading span {
      background: var(--aboutus-skills--grad-firebird);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .aboutus-skills--desc {
      font-size: 1rem;
      line-height: 1.75;
      color: var(--aboutus-skills--text-muted);
      max-width: 480px;
      margin-bottom: 36px;
    }

    /* ── SKILLS LIST ────────────────────────────────────────── */
    .aboutus-skills--list { display: flex; flex-direction: column; gap: 20px; }

    .aboutus-skills--item { }

    .aboutus-skills--item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .aboutus-skills--item-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--aboutus-skills--font-head);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--aboutus-skills--text-primary);
    }
    .aboutus-skills--item-icon {
      width: 28px; height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .aboutus-skills--item-icon svg { width: 15px; height: 15px; }

    .aboutus-skills--item-pct {
      font-family: var(--aboutus-skills--font-head);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .aboutus-skills--track {
      width: 100%;
      height: 7px;
      background: rgba(255,255,255,0.07);
      border-radius: 50px;
      overflow: hidden;
      position: relative;
    }

    .aboutus-skills--bar {
      height: 100%;
      border-radius: 50px;
      width: 0%;
      transition: width 1.6s cubic-bezier(.22,.68,0,1.2);
      position: relative;
    }
    .aboutus-skills--bar::after {
      content: '';
      position: absolute;
      right: 0; top: 50%;
      transform: translateY(-50%);
      width: 12px; height: 12px;
      border-radius: 50%;
      background: inherit;
      box-shadow: 0 0 10px 3px currentColor;
      filter: brightness(1.5);
    }

    /* Per-skill colours */
    .aboutus-skills--bar--seo      { background: var(--aboutus-skills--grad-firebird); }
    .aboutus-skills--bar--smm      { background: var(--aboutus-skills--grad-elephant); }
    .aboutus-skills--bar--ppc      { background: var(--aboutus-skills--grad-dove); }
    .aboutus-skills--bar--webdesign{ background: var(--aboutus-skills--grad-ocean); }
    .aboutus-skills--bar--webdev   { background: var(--aboutus-skills--grad-sunset); }
    .aboutus-skills--bar--ecommerce{ background: var(--aboutus-skills--grad-aurora); }
    .aboutus-skills--bar--content  { background: linear-gradient(90deg,#f953c6,#b91d73); }
    .aboutus-skills--bar--analytics{ background: linear-gradient(90deg,#11998e,#38ef7d); }

    .aboutus-skills--item-icon--seo      { background: rgba(255,106,0,0.18); color: #ff9a5c; }
    .aboutus-skills--item-icon--smm      { background: rgba(41,121,255,0.18); color: #82aaff; }
    .aboutus-skills--item-icon--ppc      { background: rgba(0,229,204,0.18); color: #5ffff0; }
    .aboutus-skills--item-icon--webdesign{ background: rgba(0,147,233,0.18); color: #80d0c7; }
    .aboutus-skills--item-icon--webdev   { background: rgba(247,151,30,0.18); color: #ffd200; }
    .aboutus-skills--item-icon--ecommerce{ background: rgba(124,58,237,0.18); color: #c084fc; }
    .aboutus-skills--item-icon--content  { background: rgba(249,83,198,0.18); color: #f9b3e8; }
    .aboutus-skills--item-icon--analytics{ background: rgba(17,153,142,0.18); color: #38ef7d; }

    .aboutus-skills--item-pct--seo      { color: #ff9a5c; }
    .aboutus-skills--item-pct--smm      { color: #82aaff; }
    .aboutus-skills--item-pct--ppc      { color: #5ffff0; }
    .aboutus-skills--item-pct--webdesign{ color: #80d0c7; }
    .aboutus-skills--item-pct--webdev   { color: #ffd200; }
    .aboutus-skills--item-pct--ecommerce{ color: #c084fc; }
    .aboutus-skills--item-pct--content  { color: #f9b3e8; }
    .aboutus-skills--item-pct--analytics{ color: #38ef7d; }

    /* ── WAVY SVG DIVIDER TOP ───────────────────────────────── */
    .aboutus-skills--wave-top,
    .aboutus-skills--wave-bottom {
      position: absolute;
      width: 100%;
      left: 0;
      z-index: 1;
      pointer-events: none;
      line-height: 0;
    }
    .aboutus-skills--wave-top    { top: -1px; }
    .aboutus-skills--wave-bottom { bottom: -1px; }

    /* ── STATS ROW ──────────────────────────────────────────── */
    .aboutus-skills--stats {
      display: flex;
      gap: 28px;
      margin-top: 36px;
      flex-wrap: wrap;
    }
    .aboutus-skills--stat {
      flex: 1;
      min-width: 90px;
      padding: 18px 20px;
      border-radius: 14px;
      background: var(--aboutus-skills--bg-card);
      border: 1px solid var(--aboutus-skills--border);
      text-align: center;
      backdrop-filter: blur(12px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .aboutus-skills--stat::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      padding: 1px;
      background: var(--aboutus-skills--grad-firebird);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .aboutus-skills--stat:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(238,9,121,0.15); }
    .aboutus-skills--stat:hover::before { opacity: 1; }
    .aboutus-skills--stat-num {
      font-family: var(--aboutus-skills--font-head);
      font-size: 1.7rem;
      font-weight: 800;
      background: var(--aboutus-skills--grad-firebird);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
    }
    .aboutus-skills--stat-label {
      font-size: 0.72rem;
      color: var(--aboutus-skills--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 4px;
      display: block;
    }

    /* ── CTA BUTTON ─────────────────────────────────────────── */
    .aboutus-skills--cta-wrap { margin-top: 32px; }
    .aboutus-skills--cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-family: var(--aboutus-skills--font-head);
      font-weight: 700;
      font-size: 0.88rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #fff;
      padding: 14px 30px;
      border-radius: 50px;
      background: var(--aboutus-skills--grad-firebird);
      background-size: 200%;
      background-position: left;
      transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.2s ease;
      box-shadow: 0 8px 32px rgba(238,9,121,0.3);
      position: relative;
      overflow: hidden;
    }
    .aboutus-skills--cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,rgba(255,255,255,0.12),rgba(255,255,255,0));
      opacity: 0;
      transition: opacity 0.3s;
    }
    .aboutus-skills--cta:hover {
      background-position: right;
      box-shadow: 0 14px 48px rgba(238,9,121,0.5);
      transform: translateY(-2px);
    }
    .aboutus-skills--cta:hover::before { opacity: 1; }
    .aboutus-skills--cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
    .aboutus-skills--cta:hover svg { transform: translateX(4px); }

    /* ── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 600px) {
      .aboutus-skills--stats { gap: 14px; }
      .aboutus-skills--badge--elephant { display: none; }
    }
/* <!-- about us page skills section End --> */

/* <!-- Seo page Ai powered pricing section start --> */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS Variables ───────────────────────────────────── */
:root {
  --seo-bg-deep:      #080c18;
  --seo-bg-card:      #0e1428;
  --seo-bg-card-h:    #121935;
  --seo-border:       rgba(0,210,255,.18);
  --seo-border-h:     rgba(0,210,255,.55);
  --seo-cyan:         #00d2ff;
  --seo-cyan-glow:    rgba(0,210,255,.35);
  --seo-white:        #eaf0ff;
  --seo-muted:        rgba(180,200,240,.55);
  --seo-popular-bg:   linear-gradient(135deg,#ff6b35,#f72585,#7209b7);
  --seo-cta-1:        linear-gradient(135deg,#ff6b35,#f72585 60%,#e91e8c);
  --seo-cta-2:        linear-gradient(135deg,#0077ff,#7c3aed 60%,#a855f7);
  --seo-cta-3:        linear-gradient(135deg,#00c9a7,#00d2ff 50%,#38ef7d);
  --seo-radius:       20px;
  --seo-transition:   .35s cubic-bezier(.4,0,.2,1);
  --seo-font-head:    'Syne', sans-serif;
  --seo-font-body:    'DM Sans', sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────── */
#seo-ai-pricing-wrapper {
  position: relative;
  background: var(--seo-bg-deep);
  overflow: hidden;
  font-family: var(--seo-font-body);
  color: var(--seo-white);
  padding: 80px 20px 72px;
}

/* ── Particles canvas ────────────────────────────────── */
#seo-ai-pricing-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Wavy SVG dividers ───────────────────────────────── */
.seo-ai-pricing-wave-top,
.seo-ai-pricing-wave-bottom {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.seo-ai-pricing-wave-top    { top: -2px; }
.seo-ai-pricing-wave-bottom { bottom: -2px; transform: rotate(180deg); }

/* ── Inner container ─────────────────────────────────── */
.seo-ai-pricing-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Heading block ───────────────────────────────────── */
.seo-ai-pricing-heading-block {
  text-align: center;
  margin-bottom: 52px;
}
.seo-ai-pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--seo-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seo-cyan);
  background: rgba(0,210,255,.08);
  border: 1px solid rgba(0,210,255,.25);
  padding: 5px 16px 5px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.seo-ai-pricing-eyebrow svg { flex-shrink: 0; }

.seo-ai-pricing-title {
  font-family: var(--seo-font-head);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 18px;
}
.seo-ai-pricing-title span {
  background: linear-gradient(90deg, #00d2ff, #a855f7 55%, #f72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-ai-pricing-subtitle {
  font-size: 1.05rem;
  color: var(--seo-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Cards Grid ──────────────────────────────────────── */
.seo-ai-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .seo-ai-pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .seo-ai-pricing-grid { grid-template-columns: 1fr; }
}

/* ── Single Card ─────────────────────────────────────── */
.seo-ai-pricing-card {
  position: relative;
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform var(--seo-transition),
              box-shadow var(--seo-transition),
              border-color var(--seo-transition),
              background var(--seo-transition);
  will-change: transform;
  overflow: hidden;
}
.seo-ai-pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--seo-radius);
  background: radial-gradient(ellipse at 50% -10%, rgba(0,210,255,.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--seo-transition);
  pointer-events: none;
}
.seo-ai-pricing-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--seo-border-h);
  background: var(--seo-bg-card-h);
  box-shadow: 0 20px 60px rgba(0,210,255,.18), 0 0 0 1px rgba(0,210,255,.22);
}
.seo-ai-pricing-card:hover::before { opacity: 1; }

/* Popular card extra glow */
.seo-ai-pricing-card[data-popular="true"] {
  border-color: rgba(247,37,133,.45);
  box-shadow: 0 0 0 1px rgba(247,37,133,.2), 0 12px 40px rgba(247,37,133,.15);
}
.seo-ai-pricing-card[data-popular="true"]:hover {
  border-color: rgba(247,37,133,.8);
  box-shadow: 0 20px 60px rgba(247,37,133,.28), 0 0 0 1px rgba(247,37,133,.45);
}
.seo-ai-pricing-card[data-popular="true"]::before {
  background: radial-gradient(ellipse at 50% -10%, rgba(247,37,133,.1) 0%, transparent 70%);
  opacity: 1;
}

/* ── Popular Badge ───────────────────────────────────── */
.seo-ai-pricing-badge-popular {
  position: absolute;
  top: -1px;
  right: 24px;
  background: var(--seo-popular-bg);
  color: #fff;
  font-family: var(--seo-font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 20px rgba(247,37,133,.4);
  animation: seo-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes seo-badge-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(247,37,133,.4); }
  50%       { box-shadow: 0 4px 32px rgba(247,37,133,.75); }
}

/* ── Card icon ───────────────────────────────────────── */
.seo-ai-pricing-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.seo-ai-pricing-card-icon svg { display: block; }

.seo-ai-pricing-card--starter  .seo-ai-pricing-card-icon { background: rgba(0,210,255,.12); border: 1px solid rgba(0,210,255,.25); }
.seo-ai-pricing-card--pro      .seo-ai-pricing-card-icon { background: rgba(247,37,133,.12); border: 1px solid rgba(247,37,133,.3); }
.seo-ai-pricing-card--ent      .seo-ai-pricing-card-icon { background: rgba(56,239,125,.1); border: 1px solid rgba(56,239,125,.25); }

/* ── Plan name ───────────────────────────────────────── */
.seo-ai-pricing-plan-name {
  font-family: var(--seo-font-head);
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.seo-ai-pricing-plan-tagline {
  font-size: .82rem;
  color: var(--seo-muted);
  margin-bottom: 22px;
}

/* ── Price ───────────────────────────────────────────── */
.seo-ai-pricing-price {
  font-family: var(--seo-font-head);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--seo-cyan);
  margin-bottom: 4px;
  line-height: 1;
  letter-spacing: -.02em;
}
.seo-ai-pricing-card--pro .seo-ai-pricing-price   { color: #f72585; }
.seo-ai-pricing-card--ent .seo-ai-pricing-price   { color: #38ef7d; }

.seo-ai-pricing-price-note {
  font-size: .78rem;
  color: var(--seo-muted);
  margin-bottom: 26px;
}

/* ── Divider ─────────────────────────────────────────── */
.seo-ai-pricing-divider {
  height: 1px;
  background: var(--seo-border);
  margin-bottom: 22px;
  border-radius: 2px;
}

/* ── Feature list ────────────────────────────────────── */
.seo-ai-pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  flex: 1;
}
.seo-ai-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  color: rgba(200,220,255,.82);
  line-height: 1.5;
}
.seo-ai-pricing-feat-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.seo-ai-pricing-card--starter .seo-ai-pricing-feat-icon { background: rgba(0,210,255,.15); }
.seo-ai-pricing-card--pro     .seo-ai-pricing-feat-icon { background: rgba(247,37,133,.15); }
.seo-ai-pricing-card--ent     .seo-ai-pricing-feat-icon { background: rgba(56,239,125,.12); }

/* ── CTA Button ──────────────────────────────────────── */
.seo-ai-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: var(--seo-font-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.seo-ai-pricing-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .2s ease;
}
.seo-ai-pricing-cta:hover { transform: translateY(-2px); }
.seo-ai-pricing-cta:hover::after { background: rgba(255,255,255,.08); }
.seo-ai-pricing-cta:active { transform: translateY(0); }

.seo-ai-pricing-cta--starter {
  background: var(--seo-cta-1);
  box-shadow: 0 6px 28px rgba(255,107,53,.35);
}
.seo-ai-pricing-cta--starter:hover { box-shadow: 0 10px 36px rgba(255,107,53,.5); }

.seo-ai-pricing-cta--pro {
  background: var(--seo-cta-2);
  box-shadow: 0 6px 28px rgba(124,58,237,.38);
}
.seo-ai-pricing-cta--pro:hover { box-shadow: 0 10px 36px rgba(124,58,237,.55); }

.seo-ai-pricing-cta--ent {
  background: var(--seo-cta-3);
  box-shadow: 0 6px 28px rgba(0,201,167,.3);
}
.seo-ai-pricing-cta--ent:hover { box-shadow: 0 10px 36px rgba(0,201,167,.5); }

/* ── Trust strip ─────────────────────────────────────── */
.seo-ai-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 48px;
}
.seo-ai-pricing-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: var(--seo-muted);
}
.seo-ai-pricing-trust-item svg { flex-shrink: 0; }

/* ── FAQ ─────────────────────────────────────────────── */
.seo-ai-pricing-faq-block {
  margin-top: 72px;
}
.seo-ai-pricing-faq-title {
  font-family: var(--seo-font-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 36px;
}
.seo-ai-pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.seo-ai-pricing-faq-item {
  background: var(--seo-bg-card);
  border: 1px solid var(--seo-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--seo-transition);
}
.seo-ai-pricing-faq-item.seo-open { border-color: var(--seo-border-h); }

.seo-ai-pricing-faq-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-family: var(--seo-font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--seo-white);
  text-align: left;
  gap: 12px;
}
.seo-ai-pricing-faq-q:focus-visible { outline: 2px solid var(--seo-cyan); }

.seo-ai-pricing-faq-chevron {
  flex-shrink: 0;
  transition: transform var(--seo-transition);
  color: var(--seo-cyan);
}
.seo-open .seo-ai-pricing-faq-chevron { transform: rotate(180deg); }

.seo-ai-pricing-faq-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s ease;
  font-size: .875rem;
  color: var(--seo-muted);
  line-height: 1.7;
}
.seo-open .seo-ai-pricing-faq-ans {
  max-height: 300px;
  padding: 0 22px 18px;
}

/* ── Float icons ─────────────────────────────────────── */
.seo-ai-pricing-float-icon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: .06;
  animation: seo-float linear infinite;
}
@keyframes seo-float {
  0%   { transform: translateY(0)   rotate(0deg); }
  50%  { transform: translateY(-22px) rotate(180deg); }
  100% { transform: translateY(0)   rotate(360deg); }
}

/* ── Fade-in reveal ──────────────────────────────────── */
.seo-ai-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease;
}
.seo-ai-reveal.seo-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Parallax layer ──────────────────────────────────── */
.seo-ai-pricing-parallax-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.seo-ai-pricing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .18;
  will-change: transform;
}
.seo-ai-pricing-orb--1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #00d2ff, transparent 70%);
  top: -120px; left: -80px;
}
.seo-ai-pricing-orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #f72585, transparent 70%);
  top: 40px; right: -60px;
}
.seo-ai-pricing-orb--3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #38ef7d, transparent 70%);
  bottom: -100px; left: 38%;
}
/* <!-- Seo page Ai powered pricing section End --> */

/* <!-- SEO Page Landing Section Start --> */
.seo-page-landing-section {
    position: relative;
    overflow: hidden;
    background: #080c18;
    color: #ffffff;
    isolation: isolate;
    padding: 42px 0 58px;
}

.seo-page-landing-section *,
.seo-page-landing-section *::before,
.seo-page-landing-section *::after {
    box-sizing: border-box;
}

.seo-page-landing-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.seo-page-landing-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.45;
}

.seo-page-landing-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 72%);
    pointer-events: none;
}

.seo-page-landing-bg-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.38;
    z-index: 0;
    pointer-events: none;
}

.seo-page-landing-bg-glow-one {
    top: -160px;
    left: -100px;
    background: radial-gradient(circle, #ff4f7b 0%, #ff7a00 42%, transparent 70%);
}

.seo-page-landing-bg-glow-two {
    right: -140px;
    bottom: 40px;
    background: radial-gradient(circle, #00f5a0 0%, #5865ff 42%, transparent 70%);
}

.seo-page-landing-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

.seo-page-landing-breadcrumb-link {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.seo-page-landing-breadcrumb-link:hover {
    color: #00f5a0;
    transform: translateY(-1px);
}

.seo-page-landing-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.38);
}

.seo-page-landing-breadcrumb-current {
    color: #ffffff;
    font-weight: 700;
}

.seo-page-landing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 44px;
    align-items: center;
}

.seo-page-landing-content {
    position: relative;
    z-index: 4;
}

.seo-page-landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
    color: rgba(255, 255, 255, 0.86);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.seo-page-landing-eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a00, #ff2f75, #00f5a0);
    box-shadow: 0 0 24px rgba(255, 79, 123, 0.9);
}

.seo-page-landing-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 0.96;
    letter-spacing: -0.055em;
    font-weight: 800;
    color: #ffffff;
    max-width: 820px;
}

.seo-page-landing-gradient-text {
    display: inline-block;
    background: linear-gradient(100deg, #ff8a00 0%, #ff2f75 28%, #7c3aed 58%, #00d4ff 78%, #00f5a0 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: seo-page-landing-gradient-flow 6s ease infinite;
}

.seo-page-landing-description {
    max-width: 640px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.72;
}

.seo-page-landing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.seo-page-landing-primary-link,
.seo-page-landing-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, color 0.28s ease;
}

.seo-page-landing-primary-link {
    color: #080c18;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, #ff8a00 0%, #ff2f75 42%, #00f5a0 100%);
    box-shadow: 0 18px 45px rgba(255, 47, 117, 0.25);
}

.seo-page-landing-primary-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 58px rgba(255, 47, 117, 0.36);
}

.seo-page-landing-secondary-link {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.seo-page-landing-secondary-link:hover {
    color: #00f5a0;
    border-color: rgba(0, 245, 160, 0.55);
    background: rgba(0, 245, 160, 0.08);
    transform: translateY(-3px);
}

.seo-page-landing-link-icon {
    transition: transform 0.28s ease;
}

.seo-page-landing-primary-link:hover .seo-page-landing-link-icon {
    transform: translateX(4px);
}

.seo-page-landing-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 680px;
    margin-top: 32px;
}

.seo-page-landing-stat-card {
    min-height: 108px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.seo-page-landing-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.28);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
}

.seo-page-landing-stat-card strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff, #00f5a0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.seo-page-landing-stat-card span {
    color: rgba(255, 255, 255, 0.66);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.seo-page-landing-visual-wrap {
    position: relative;
    min-height: 560px;
}

.seo-page-landing-visual {
    position: relative;
    width: min(100%, 560px);
    min-height: 560px;
    margin-left: auto;
    border-radius: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 122, 0, 0.24), transparent 28%),
        radial-gradient(circle at 72% 28%, rgba(88, 101, 255, 0.28), transparent 32%),
        radial-gradient(circle at 50% 80%, rgba(0, 245, 160, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transform-style: preserve-3d;
}

.seo-page-landing-visual::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 138, 0, 0.7), rgba(255, 47, 117, 0.2), rgba(0, 245, 160, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.seo-page-landing-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    pointer-events: none;
}

.seo-page-landing-orbit-one {
    width: 390px;
    height: 390px;
    top: 84px;
    left: 86px;
    animation: seo-page-landing-spin 22s linear infinite;
}

.seo-page-landing-orbit-two {
    width: 500px;
    height: 260px;
    top: 156px;
    left: 28px;
    transform: rotate(-22deg);
    animation: seo-page-landing-spin-reverse 28s linear infinite;
}

.seo-page-landing-center-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230px;
    min-height: 282px;
    padding: 22px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    background: rgba(8, 12, 24, 0.72);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 4;
}

.seo-page-landing-score-ring {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.seo-page-landing-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.seo-page-landing-ring-bg,
.seo-page-landing-ring-progress {
    fill: none;
    stroke-width: 12;
}

.seo-page-landing-ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.seo-page-landing-ring-progress {
    stroke: url(#seo-page-landing-ring-gradient);
    stroke-linecap: round;
    stroke-dasharray: 301;
    stroke-dashoffset: 24;
    filter: drop-shadow(0 0 12px rgba(0, 245, 160, 0.5));
}

.seo-page-landing-score-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.seo-page-landing-score-content span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.seo-page-landing-score-content strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 48px;
    line-height: 0.9;
}

.seo-page-landing-center-card-title {
    margin: 16px 0 16px;
    color: rgba(255, 255, 255, 0.78);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    text-align: center;
}

.seo-page-landing-mini-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
    height: 58px;
}

.seo-page-landing-mini-bars span {
    width: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #00f5a0, #5865ff, #ff2f75);
    box-shadow: 0 10px 20px rgba(0, 245, 160, 0.18);
    animation: seo-page-landing-bar-pulse 1.8s ease-in-out infinite;
}

.seo-page-landing-mini-bars span:nth-child(2) {
    animation-delay: 0.12s;
}

.seo-page-landing-mini-bars span:nth-child(3) {
    animation-delay: 0.24s;
}

.seo-page-landing-mini-bars span:nth-child(4) {
    animation-delay: 0.36s;
}

.seo-page-landing-mini-bars span:nth-child(5) {
    animation-delay: 0.48s;
}

.seo-page-landing-creature-card,
.seo-page-landing-floating-badge {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 12, 24, 0.68);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    will-change: transform;
}

.seo-page-landing-creature-card {
    width: 172px;
    padding: 12px;
    border-radius: 24px;
    text-align: center;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.seo-page-landing-creature-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 28px 68px rgba(0, 0, 0, 0.42);
}

.seo-page-landing-creature-card span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.seo-page-landing-creature-svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.22));
}

.seo-page-landing-firebird-card {
    top: 38px;
    left: 42px;
    animation: seo-page-landing-float-one 5.8s ease-in-out infinite;
}

.seo-page-landing-elephant-card {
    top: 78px;
    right: 38px;
    animation: seo-page-landing-float-two 6.4s ease-in-out infinite;
}

.seo-page-landing-dove-card {
    left: 48px;
    bottom: 50px;
    animation: seo-page-landing-float-three 6.8s ease-in-out infinite;
}

.seo-page-landing-floating-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.seo-page-landing-badge-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #080c18;
    background: linear-gradient(135deg, #ff8a00, #00f5a0);
}

.seo-page-landing-badge-one {
    right: 58px;
    bottom: 116px;
    animation: seo-page-landing-float-one 5.6s ease-in-out infinite;
}

.seo-page-landing-badge-two {
    left: 178px;
    top: 392px;
    animation: seo-page-landing-float-two 6.2s ease-in-out infinite;
}

.seo-page-landing-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 100px;
    z-index: 2;
    pointer-events: none;
}

.seo-page-landing-wave path {
    fill: rgba(255, 255, 255, 0.04);
}

/* Optional Swiper styling if you later add Swiper inside this section */
.seo-page-landing-swiper {
    width: 100%;
    overflow: hidden;
}

.seo-page-landing-swiper .swiper-slide {
    height: auto;
}

@keyframes seo-page-landing-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes seo-page-landing-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes seo-page-landing-spin-reverse {
    from {
        transform: rotate(-22deg);
    }
    to {
        transform: rotate(-382deg);
    }
}

@keyframes seo-page-landing-float-one {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -14px;
    }
}

@keyframes seo-page-landing-float-two {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 10px 12px;
    }
}

@keyframes seo-page-landing-float-three {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: -8px -12px;
    }
}

@keyframes seo-page-landing-bar-pulse {
    0%, 100% {
        opacity: 0.68;
        transform: scaleY(0.88);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (max-width: 1100px) {
    .seo-page-landing-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .seo-page-landing-visual-wrap {
        min-height: auto;
    }

    .seo-page-landing-visual {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .seo-page-landing-section {
        padding: 30px 0 48px;
    }

    .seo-page-landing-container {
        width: min(100% - 24px, 1180px);
    }

    .seo-page-landing-breadcrumb {
        width: 100%;
        justify-content: center;
        border-radius: 18px;
        font-size: 13px;
    }

    .seo-page-landing-title,
    .seo-page-landing-description {
        text-align: center;
    }

    .seo-page-landing-eyebrow {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .seo-page-landing-actions {
        justify-content: center;
    }

    .seo-page-landing-primary-link,
    .seo-page-landing-secondary-link {
        width: 100%;
    }

    .seo-page-landing-stats {
        grid-template-columns: 1fr;
    }

    .seo-page-landing-stat-card {
        min-height: auto;
        text-align: center;
    }

    .seo-page-landing-visual {
        width: 100%;
        min-height: 520px;
        border-radius: 30px;
    }

    .seo-page-landing-creature-card {
        width: 142px;
    }

    .seo-page-landing-firebird-card {
        top: 30px;
        left: 16px;
    }

    .seo-page-landing-elephant-card {
        top: 56px;
        right: 16px;
    }

    .seo-page-landing-dove-card {
        left: 18px;
        bottom: 36px;
    }

    .seo-page-landing-badge-one {
        right: 18px;
        bottom: 94px;
    }

    .seo-page-landing-badge-two {
        left: 50%;
        top: auto;
        bottom: 22px;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .seo-page-landing-title {
        font-size: 38px;
    }

    .seo-page-landing-description {
        font-size: 15px;
    }

    .seo-page-landing-visual {
        min-height: 490px;
    }

    .seo-page-landing-center-card {
        width: 196px;
        min-height: 250px;
        padding: 18px;
    }

    .seo-page-landing-score-ring {
        width: 126px;
        height: 126px;
    }

    .seo-page-landing-score-content strong {
        font-size: 40px;
    }

    .seo-page-landing-creature-card {
        width: 118px;
        border-radius: 18px;
    }

    .seo-page-landing-creature-card span {
        font-size: 10px;
    }

    .seo-page-landing-floating-badge {
        font-size: 11px;
        padding: 8px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-page-landing-gradient-text,
    .seo-page-landing-orbit-one,
    .seo-page-landing-orbit-two,
    .seo-page-landing-firebird-card,
    .seo-page-landing-elephant-card,
    .seo-page-landing-dove-card,
    .seo-page-landing-badge-one,
    .seo-page-landing-badge-two,
    .seo-page-landing-mini-bars span {
        animation: none;
    }

    .seo-page-landing-primary-link,
    .seo-page-landing-secondary-link,
    .seo-page-landing-stat-card,
    .seo-page-landing-creature-card,
    .seo-page-landing-breadcrumb-link {
        transition: none;
    }
}
/* <!-- SEO Page Landing Section End --> */

/* <!-- Our Journey year by year section start --> */
:root {
  --about-journey-bg-deep:       #080c18;
  --about-journey-bg-card:       #0e1526;
  --about-journey-bg-card-hover: #131d35;
  --about-journey-border-dim:    rgba(255,255,255,0.06);
  --about-journey-border-glow:   rgba(255,120,50,0.35);

  /* Fire-Bird gradient: orange → red → pink */
  --about-journey-grad-fire:     linear-gradient(135deg, #ff6b00 0%, #e8003d 50%, #ff2d78 100%);
  --about-journey-grad-fire-alt: linear-gradient(135deg, #ff9500 0%, #ff2d78 100%);

  /* Elephant / Wave gradient: blue → purple */
  --about-journey-grad-wave:     linear-gradient(135deg, #1a6bff 0%, #7c3aed 60%, #a855f7 100%);

  /* Dove gradient: teal → green → rainbow */
  --about-journey-grad-dove:     linear-gradient(135deg, #00d4aa 0%, #22c55e 40%, #84cc16 70%, #f0c419 100%);

  /* Year accent colours per tab */
  --about-journey-c-2021: #ff6b00;
  --about-journey-c-2022: #e8003d;
  --about-journey-c-2023: #ff2d78;
  --about-journey-c-2024: #1a6bff;
  --about-journey-c-2025: #7c3aed;
  --about-journey-c-2026: #00d4aa;

  --about-journey-font-head: 'Syne', sans-serif;
  --about-journey-font-body: 'DM Sans', sans-serif;

  --about-journey-transition: 0.4s cubic-bezier(.25,.8,.25,1);
  --about-journey-transition-fast: 0.22s ease;
}

/* ============================================
   SECTION WRAPPER  (no css on body/section)
   ============================================ */
#about-journey-story-wrapper {
  position: relative;
  background: var(--about-journey-bg-deep);
  padding: 60px 0 70px;
  overflow: hidden;
  font-family: var(--about-journey-font-body);
  color: #e8eaf6;
  isolation: isolate;
}

/* ---- Particles canvas sits behind everything ---- */
#about-journey-particles-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---- Wavy SVG dividers ---- */
.about-journey-wave-top,
.about-journey-wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
.about-journey-wave-top  { top: 0; }
.about-journey-wave-bottom { bottom: 0; transform: rotate(180deg); }
.about-journey-wave-top svg,
.about-journey-wave-bottom svg { display: block; width: 100%; height: 56px; }

/* ---- Inner container ---- */
.about-journey-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   SECTION LABEL
   ============================================ */
.about-journey-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--about-journey-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff6b00;
  border: 1px solid rgba(255,107,0,0.35);
  background: rgba(255,107,0,0.07);
  padding: 6px 16px;
  border-radius: 4px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.about-journey-section-label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--about-journey-grad-fire);
  opacity: 0;
  transition: opacity var(--about-journey-transition-fast);
}
.about-journey-section-label:hover::before { opacity: 0.12; }
.about-journey-section-label-icon {
  width: 14px; height: 14px;
  animation: about-journey-pulse-icon 2s ease-in-out infinite;
}
@keyframes about-journey-pulse-icon {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* ============================================
   LAYOUT GRID
   ============================================ */
.about-journey-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px 56px;
  align-items: stretch;  /* both cols share the same height */
}
@media (max-width: 1024px) {
  .about-journey-grid { grid-template-columns: 280px 1fr; gap: 36px 40px; }
}
@media (max-width: 900px) {
  .about-journey-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   LEFT COLUMN  – image + tabs
   ============================================ */
.about-journey-left-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;  /* fill full grid row height */
}

/* Orb image */
.about-journey-orb-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  flex-shrink: 0;
}
.about-journey-orb-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(#ff6b00, #e8003d, #ff2d78, #1a6bff, #7c3aed, #00d4aa, #ff6b00);
  opacity: 0.45;
  filter: blur(16px);
  animation: about-journey-spin-ring 8s linear infinite;
}
@keyframes about-journey-spin-ring {
  to { transform: rotate(360deg); }
}
.about-journey-orb-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,107,0,0.3);
  position: relative;
  z-index: 1;
  /* placeholder gradient when no real image */
  background: radial-gradient(circle at 40% 40%, #ff6b00 0%, #3d0000 55%, #080c18 100%);
}
/* Floating badges around orb */
.about-journey-orb-badge {
  position: absolute;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--about-journey-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: about-journey-float-badge 3s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.about-journey-orb-badge[data-badge="clients"] {
  background: var(--about-journey-grad-fire);
  color: #fff;
  top: 12px; right: -18px;
  animation-delay: 0s;
}
.about-journey-orb-badge[data-badge="employees"] {
  background: var(--about-journey-grad-wave);
  color: #fff;
  bottom: 28px; left: -24px;
  animation-delay: 1s;
}
.about-journey-orb-badge[data-badge="branches"] {
  background: var(--about-journey-grad-dove);
  color: #080c18;
  bottom: -8px; right: 10px;
  animation-delay: 0.5s;
}
@keyframes about-journey-float-badge {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

/* ---- Year tabs — VERTICAL full-height ---- */
.about-journey-tabs-label {
  font-family: var(--about-journey-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 12px;
}
.about-journey-year-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;  /* stretch to fill left column */
}
.about-journey-year-tab {
  position: relative;
  cursor: pointer;
  flex: 1 1 0;    /* each tab shares remaining height equally */
  min-height: 52px;
}
.about-journey-year-tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 58px;
  padding: 0 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--about-journey-border-dim);
  border-radius: 12px;
  font-family: var(--about-journey-font-head);
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all var(--about-journey-transition-fast);
  overflow: hidden;
  outline: none;
  letter-spacing: 0.5px;
  text-align: left;
}
/* gradient fill layer */
.about-journey-year-tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--about-journey-tab-grad, var(--about-journey-grad-fire));
  opacity: 0;
  transition: opacity 0.28s ease;
  border-radius: inherit;
}
/* right-side glow bar */
.about-journey-year-tab-btn::after {
  content: '';
  position: absolute;
  right: 0; top: 15%; bottom: 15%;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--about-journey-tab-grad, var(--about-journey-grad-fire));
  opacity: 0;
  transition: opacity 0.28s ease;
}
.about-journey-year-tab-btn .about-journey-tab-year-text {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
}
.about-journey-year-tab-btn .about-journey-tab-year-arrow {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  flex-shrink: 0;
}
.about-journey-year-tab-btn .about-journey-tab-year-dot {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--about-journey-tab-grad, var(--about-journey-grad-fire));
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* hover */
.about-journey-year-tab-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.055);
  transform: translateX(4px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.about-journey-year-tab-btn:hover .about-journey-tab-year-dot { opacity: 1; }
.about-journey-year-tab-btn:hover .about-journey-tab-year-arrow { opacity: 0.6; transform: translateX(0); }
.about-journey-year-tab-btn:hover .about-journey-tab-year-text { color: #fff; }

/* Active tab */
.about-journey-year-tab[aria-selected="true"] .about-journey-year-tab-btn {
  color: #fff;
  border-color: transparent;
  transform: translateX(6px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.about-journey-year-tab[aria-selected="true"] .about-journey-year-tab-btn::before { opacity: 1; }
.about-journey-year-tab[aria-selected="true"] .about-journey-year-tab-btn::after  { opacity: 1; }
.about-journey-year-tab[aria-selected="true"] .about-journey-tab-year-dot  { opacity: 0; }
.about-journey-year-tab[aria-selected="true"] .about-journey-tab-year-arrow { opacity: 1; transform: translateX(0); }

/* Per-year gradients */
.about-journey-year-tab[data-year="2021"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#ff9500,#ff6b00); }
.about-journey-year-tab[data-year="2022"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#ff6b00,#e8003d); }
.about-journey-year-tab[data-year="2023"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#e8003d,#ff2d78); }
.about-journey-year-tab[data-year="2024"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#1a6bff,#7c3aed); }
.about-journey-year-tab[data-year="2025"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#7c3aed,#a855f7); }
.about-journey-year-tab[data-year="2026"] .about-journey-year-tab-btn { --about-journey-tab-grad: linear-gradient(135deg,#00d4aa,#22c55e); }

/* ============================================
   RIGHT COLUMN  – milestone cards + content
   ============================================ */
.about-journey-right-col { display: flex; flex-direction: column; gap: 20px; }

/* ---- Heading block ---- */
.about-journey-heading-block { margin-bottom: 4px; }
.about-journey-heading-main {
  font-family: var(--about-journey-font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 0 0 2px;
}
.about-journey-heading-accent {
  display: inline-block;
  background: var(--about-journey-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--about-journey-font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* ---- Year milestone card (right side) ---- */
.about-journey-milestone-panels { position: relative; }

.about-journey-milestone-panel {
  display: none;
  animation: about-journey-panel-in 0.45s cubic-bezier(.22,1,.36,1) both;
}
.about-journey-milestone-panel.about-journey-active { display: block; }

@keyframes about-journey-panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Year badge on panel */
.about-journey-panel-year-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--about-journey-font-head);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
}
.about-journey-panel-year-prefix {
  color: #fff;
}
.about-journey-panel-year-suffix {
  background: var(--about-journey-panel-color, var(--about-journey-grad-fire));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stat cards row */
.about-journey-stats-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.about-journey-stat-card {
  flex: 1 1 120px;
  background: var(--about-journey-bg-card);
  border: 1px solid var(--about-journey-border-dim);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: all var(--about-journey-transition-fast);
}
.about-journey-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--about-journey-stat-grad, var(--about-journey-grad-fire));
}
.about-journey-stat-card:hover {
  background: var(--about-journey-bg-card-hover);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.about-journey-stat-value {
  font-family: var(--about-journey-font-head);
  font-size: 26px;
  font-weight: 800;
  background: var(--about-journey-stat-grad, var(--about-journey-grad-fire));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.about-journey-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.about-journey-stat-icon {
  position: absolute;
  bottom: 10px; right: 12px;
  opacity: 0.1;
  width: 30px; height: 30px;
}

/* Milestone description */
.about-journey-milestone-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin-bottom: 20px;
}

/* Progress bar */
.about-journey-progress-bar-wrap {
  margin-bottom: 22px;
}
.about-journey-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.about-journey-progress-label-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.about-journey-progress-label-pct {
  font-family: var(--about-journey-font-head);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.about-journey-progress-track {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.about-journey-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--about-journey-prog-grad, var(--about-journey-grad-fire));
  width: 0%;
  transition: width 1.2s cubic-bezier(.25,.8,.25,1) 0.3s;
}

/* Highlights list */
.about-journey-highlights-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-journey-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.about-journey-highlight-dot {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--about-journey-hi-grad, var(--about-journey-grad-fire));
  margin-top: 2px;
}
.about-journey-highlight-dot svg { width: 10px; height: 10px; }

/* CTA button */
.about-journey-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.about-journey-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--about-journey-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #fff;
  background: var(--about-journey-grad-fire);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--about-journey-transition-fast), box-shadow var(--about-journey-transition-fast);
}
.about-journey-cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity var(--about-journey-transition-fast);
}
.about-journey-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(232,0,61,0.45);
}
.about-journey-cta-btn:hover::after { opacity: 1; }
.about-journey-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.about-journey-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: var(--about-journey-font-head);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  cursor: pointer;
  transition: all var(--about-journey-transition-fast);
}
.about-journey-cta-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}

/* ============================================
   MILESTONE CARDS (bottom row – full width)
   ============================================ */
.about-journey-milestones-strip {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--about-journey-border-dim);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 900px) {
  .about-journey-milestones-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .about-journey-milestones-strip { grid-template-columns: repeat(2, 1fr); }
}

.about-journey-strip-card {
  padding: 20px 18px;
  border-right: 1px solid var(--about-journey-border-dim);
  background: rgba(255,255,255,0.015);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--about-journey-transition-fast);
  text-align: center;
}
.about-journey-strip-card:last-child { border-right: none; }
.about-journey-strip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--about-journey-strip-grad);
  transform: scaleX(0);
  transition: transform var(--about-journey-transition);
  transform-origin: left;
}
.about-journey-strip-card:hover::before,
.about-journey-strip-card.about-journey-strip-active::before { transform: scaleX(1); }

.about-journey-strip-card:hover,
.about-journey-strip-card.about-journey-strip-active {
  background: rgba(255,255,255,0.04);
}
.about-journey-strip-card[data-strip-year="2021"] { --about-journey-strip-grad: linear-gradient(90deg,#ff9500,#ff6b00); }
.about-journey-strip-card[data-strip-year="2022"] { --about-journey-strip-grad: linear-gradient(90deg,#ff6b00,#e8003d); }
.about-journey-strip-card[data-strip-year="2023"] { --about-journey-strip-grad: linear-gradient(90deg,#e8003d,#ff2d78); }
.about-journey-strip-card[data-strip-year="2024"] { --about-journey-strip-grad: linear-gradient(90deg,#1a6bff,#7c3aed); }
.about-journey-strip-card[data-strip-year="2025"] { --about-journey-strip-grad: linear-gradient(90deg,#7c3aed,#a855f7); }
.about-journey-strip-card[data-strip-year="2026"] { --about-journey-strip-grad: linear-gradient(90deg,#00d4aa,#22c55e); }

.about-journey-strip-year {
  font-family: var(--about-journey-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
  transition: color var(--about-journey-transition-fast);
}
.about-journey-strip-card:hover .about-journey-strip-year,
.about-journey-strip-card.about-journey-strip-active .about-journey-strip-year {
  background: var(--about-journey-strip-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-journey-strip-number {
  font-family: var(--about-journey-font-head);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
  transition: transform var(--about-journey-transition-fast);
}
.about-journey-strip-card:hover .about-journey-strip-number { transform: scale(1.08); }
.about-journey-strip-sublabel {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  line-height: 1.3;
}

/* ============================================
   FLOATING SVG ICONS (decorative)
   ============================================ */
.about-journey-float-icons { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.about-journey-float-icon {
  position: absolute;
  opacity: 0.06;
  animation: about-journey-float-drift 10s ease-in-out infinite;
}
.about-journey-float-icon:nth-child(1) { top: 8%; left: 6%; animation-delay: 0s; animation-duration: 12s; }
.about-journey-float-icon:nth-child(2) { top: 60%; right: 5%; animation-delay: 2s; animation-duration: 9s; }
.about-journey-float-icon:nth-child(3) { bottom: 12%; left: 45%; animation-delay: 4s; animation-duration: 14s; }
@keyframes about-journey-float-drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-20px) rotate(8deg); }
  66%      { transform: translateY(10px) rotate(-5deg); }
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 640px) {
  #about-journey-story-wrapper { padding: 44px 0 52px; }
  .about-journey-orb-wrapper { width: 200px; height: 200px; }
  .about-journey-stats-row { gap: 10px; }
  .about-journey-stat-card { padding: 12px 14px; }
  .about-journey-stat-value { font-size: 20px; }
  .about-journey-cta-row { flex-direction: column; align-items: stretch; }
  .about-journey-cta-btn, .about-journey-cta-ghost { justify-content: center; }
}

/* <!-- Our Journey year by year section start --> */

/* <!-- Home page Service section start --> */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:#080c18;}

:root {
  --hss-bg-deep:          #080c18;
  --hss-bg-card:          rgba(255,255,255,0.03);
  --hss-bg-card-hover:    rgba(255,255,255,0.07);
  --hss-grad-fire-1:      #ff6b00;
  --hss-grad-fire-2:      #e8003d;
  --hss-grad-fire-3:      #ff2d78;
  --hss-grad-fire:        linear-gradient(135deg,#ff6b00,#e8003d,#ff2d78);
  --hss-grad-wave-1:      #0047ff;
  --hss-grad-wave-2:      #7b2fff;
  --hss-grad-wave-3:      #c026d3;
  --hss-grad-wave:        linear-gradient(135deg,#0047ff,#7b2fff,#c026d3);
  --hss-grad-dove-1:      #00d4b4;
  --hss-grad-dove-2:      #22c55e;
  --hss-grad-dove-3:      #84cc16;
  --hss-grad-dove:        linear-gradient(135deg,#00d4b4,#22c55e,#84cc16);
  --hss-grad-amber:       linear-gradient(135deg,#f59e0b,#f97316,#ef4444);
  --hss-grad-digi-1:      #e040fb;
  --hss-grad-digi-2:      #7c3aed;
  --hss-grad-digi-3:      #06b6d4;
  --hss-grad-digi:        linear-gradient(135deg,#e040fb,#7c3aed,#06b6d4);
  --hss-shadow-glow-digi: 0 0 40px rgba(224,64,251,0.35);
  --hss-font-head:        'Syne', sans-serif;
  --hss-font-body:        'DM Sans', sans-serif;
  --hss-text-bright:      #ffffff;
  --hss-text-muted:       rgba(255,255,255,0.55);
  --hss-border-glass:     rgba(255,255,255,0.1);
  --hss-radius-card:      20px;
  --hss-radius-tab:       14px;
  --hss-transition-fast:  0.28s cubic-bezier(0.4,0,0.2,1);
  --hss-transition-med:   0.45s cubic-bezier(0.4,0,0.2,1);
  --hss-shadow-glow-fire: 0 0 40px rgba(255,45,120,0.3);
  --hss-shadow-glow-wave: 0 0 40px rgba(123,47,255,0.3);
  --hss-shadow-glow-dove: 0 0 40px rgba(0,212,180,0.3);
}

/* ─── WRAPPER ─────────────────────────────────────────── */
#home-services-section-wrapper {
  position: relative;
  background: var(--hss-bg-deep);
  font-family: var(--hss-font-body);
  overflow: hidden;
  isolation: isolate;
}
#home-services-section-wrapper::before,
#home-services-section-wrapper::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
#home-services-section-wrapper::before {
  width: 600px; height: 600px;
  background: var(--hss-grad-wave);
  top: -150px; left: -150px;
  animation: hss-blob-drift 12s ease-in-out infinite alternate;
}
#home-services-section-wrapper::after {
  width: 500px; height: 500px;
  background: var(--hss-grad-fire);
  bottom: -120px; right: -100px;
  animation: hss-blob-drift 15s ease-in-out infinite alternate-reverse;
}
@keyframes hss-blob-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,30px) scale(1.1); }
}

/* ─── CONTAINER ───────────────────────────────────────── */
.home-services-section-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 24px 80px;
}

/* ─── HEADING BLOCK ───────────────────────────────────── */
.home-services-section-heading-block {
  text-align: center;
  margin-bottom: 44px;
  position: relative;
}
.home-services-section-heading-pretag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hss-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}
.home-services-section-heading-pretag-line {
  display: inline-block;
  width: 28px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#00d4b4,#7b2fff);
}
.home-services-section-main-heading {
  font-family: var(--hss-font-head);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.home-services-section-main-heading .hss-heading-plain { color: #fff; }
.home-services-section-main-heading .hss-heading-grad {
  background: linear-gradient(135deg,#00d4b4 0%,#3b82f6 40%,#e040fb 80%,#ff6b00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: hss-heading-shimmer 4s linear infinite;
}
@keyframes hss-heading-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.home-services-section-main-subheading {
  font-family: var(--hss-font-body);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.6;
}
.home-services-section-heading-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.home-services-section-heading-underline span {
  height: 3px;
  border-radius: 3px;
  animation: hss-underline-grow 0.7s ease forwards;
}
.home-services-section-heading-underline .hss-ul-1 { width:12px; background:#00d4b4; animation-delay:0.1s; }
.home-services-section-heading-underline .hss-ul-2 { width:40px; background:linear-gradient(90deg,#3b82f6,#e040fb); animation-delay:0.2s; }
.home-services-section-heading-underline .hss-ul-3 { width:12px; background:#ff6b00; animation-delay:0.3s; }
@keyframes hss-underline-grow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ─── WAVY DIVIDER ────────────────────────────────────── */
.home-services-section-wavy-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -4px;
  margin-bottom: 8px;
}
.home-services-section-wavy-divider svg { display: block; width: 100%; }

/* ─── TABS NAV ────────────────────────────────────────── */
.home-services-section-tabs-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  position: relative;
}

.home-services-section-tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--hss-border-glass);
  border-radius: var(--hss-radius-tab);
  background: rgba(255,255,255,0.05);
  color: var(--hss-text-muted);
  font-family: var(--hss-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--hss-transition-fast),
              background var(--hss-transition-fast),
              transform var(--hss-transition-fast),
              box-shadow var(--hss-transition-fast),
              border-color var(--hss-transition-fast);
  flex: 1;
  min-width: 200px;
}
.home-services-section-tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hss-transition-fast);
  border-radius: inherit;
}
.home-services-section-tab-btn[data-hss-tab="web-design"]::before      { background: var(--hss-grad-dove); }
.home-services-section-tab-btn[data-hss-tab="web-dev"]::before         { background: var(--hss-grad-fire); }
.home-services-section-tab-btn[data-hss-tab="mobile-app"]::before      { background: var(--hss-grad-wave); }
.home-services-section-tab-btn[data-hss-tab="seo"]::before             { background: var(--hss-grad-amber); }
.home-services-section-tab-btn[data-hss-tab="digital-marketing"]::before { background: var(--hss-grad-digi); }
.home-services-section-tab-btn[data-hss-tab="custom-requirement"]::before { background: linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6); }
.home-services-section-tab-btn:hover::before,
.home-services-section-tab-btn.hss-tab-active::before { opacity: 1; }
.home-services-section-tab-btn:hover,
.home-services-section-tab-btn.hss-tab-active {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  border-color: transparent;
}

.home-services-section-tab-btn .hss-tab-icon-wrap {
  position: relative; z-index: 1;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--hss-transition-fast), transform var(--hss-transition-fast);
}
.home-services-section-tab-btn:hover .hss-tab-icon-wrap,
.home-services-section-tab-btn.hss-tab-active .hss-tab-icon-wrap {
  background: rgba(255,255,255,0.22);
  transform: rotate(-6deg) scale(1.1);
}
.home-services-section-tab-btn .hss-tab-icon-wrap svg { width: 18px; height: 18px; fill: currentColor; }

.home-services-section-tab-btn .hss-tab-label {
  position: relative; z-index: 1;
  text-align: left;
  line-height: 1.25;
}
.home-services-section-tab-btn.hss-tab-active .hss-tab-label::after {
  content: '';
  display: block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  margin-top: 4px;
  animation: hss-indicator-in 0.3s ease forwards;
}
@keyframes hss-indicator-in {
  from { width: 0; opacity: 0; }
  to   { width: 18px; opacity: 1; }
}

.home-services-section-tab-btn .hss-tab-badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #fff;
  color: var(--hss-bg-deep);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: scale(0.6) translateY(4px);
  transition: opacity var(--hss-transition-fast), transform var(--hss-transition-fast);
  z-index: 2;
  pointer-events: none;
}
.home-services-section-tab-btn.hss-tab-active .hss-tab-badge {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─── PANELS ──────────────────────────────────────────── */
.home-services-section-panel {
  display: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--hss-transition-med), transform var(--hss-transition-med);
}
.home-services-section-panel.hss-panel-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.home-services-section-panel.hss-panel-visible { opacity: 1; transform: translateY(0); }

.home-services-section-panel-content { position: relative; }

.home-services-section-panel-heading {
  font-family: var(--hss-font-head);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--hss-text-bright);
  line-height: 1.25;
  margin: 0 0 6px;
}
.home-services-section-panel-accent-line {
  height: 3px; width: 60px; border-radius: 3px;
  margin-bottom: 20px;
  animation: hss-line-grow 0.5s ease forwards;
}
@keyframes hss-line-grow { from { width: 0; } to { width: 60px; } }

.home-services-section-panel-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--hss-text-muted);
  margin: 0 0 22px;
}

.home-services-section-expertise-label {
  font-family: var(--hss-font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 16px;
}
.home-services-section-expertise-list {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.home-services-section-expertise-list-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,0.8);
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hss-border-glass);
  border-radius: 10px;
  transition: background var(--hss-transition-fast),
              transform var(--hss-transition-fast),
              border-color var(--hss-transition-fast);
  cursor: default;
}
.home-services-section-expertise-list-item:hover {
  background: rgba(255,255,255,0.09);
  transform: translateX(6px);
}
.home-services-section-expertise-list-item .hss-list-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

.home-services-section-stats-row { display: flex; gap: 20px; flex-wrap: wrap; }
.home-services-section-stat-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hss-border-glass);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform var(--hss-transition-fast), box-shadow var(--hss-transition-fast);
}
.home-services-section-stat-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.home-services-section-stat-chip .hss-stat-number {
  font-family: var(--hss-font-head); font-size: 22px; font-weight: 800;
  color: var(--hss-text-bright);
}
.home-services-section-stat-chip .hss-stat-label {
  font-size: 11px; color: var(--hss-text-muted); letter-spacing: 0.04em;
}

.home-services-section-cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--hss-font-head);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: #fff;
  position: relative; overflow: hidden;
  transition: transform var(--hss-transition-fast), box-shadow var(--hss-transition-fast);
}
.home-services-section-cta-link::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  transition: opacity var(--hss-transition-fast);
}
.home-services-section-cta-link:hover { transform: translateY(-2px); }
.home-services-section-cta-link span { position: relative; z-index: 1; }
.home-services-section-cta-link .hss-cta-arrow {
  position: relative; z-index: 1;
  transition: transform var(--hss-transition-fast);
}
.home-services-section-cta-link:hover .hss-cta-arrow { transform: translateX(4px); }

/* ─── VISUAL CARD ─────────────────────────────────────── */
.home-services-section-panel-visual {
  position: relative;
  border-radius: var(--hss-radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 0.85;
  display: flex; align-items: center; justify-content: center;
}
.home-services-section-visual-glass {
  position: absolute; inset: 0;
  border-radius: var(--hss-radius-card);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.home-services-section-visual-glass::before {
  content: ''; position: absolute; inset: 0; opacity: 0.08;
}
.home-services-section-visual-illustration {
  position: relative; z-index: 1; width: 85%;
  animation: hss-float 4s ease-in-out infinite;
}
@keyframes hss-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}
.home-services-section-float-badge {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px; padding: 8px 14px;
  font-family: var(--hss-font-head);
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 6px;
  z-index: 2; white-space: nowrap;
  animation: hss-badge-float 3s ease-in-out infinite;
}
.home-services-section-float-badge:nth-child(2) { animation-delay: 0.8s; }
.home-services-section-float-badge:nth-child(3) { animation-delay: 1.6s; }
.home-services-section-float-badge:nth-child(4) { animation-delay: 2.4s; }
@keyframes hss-badge-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ─── PANEL THEME COLORS ──────────────────────────────── */
[data-hss-panel="web-design"] .home-services-section-panel-accent-line { background: var(--hss-grad-dove); }
[data-hss-panel="web-design"] .home-services-section-expertise-label   { color: var(--hss-grad-dove-1); }
[data-hss-panel="web-design"] .home-services-section-cta-link::before  { background: var(--hss-grad-dove); }
[data-hss-panel="web-design"] .home-services-section-cta-link:hover    { box-shadow: var(--hss-shadow-glow-dove); }
[data-hss-panel="web-design"] .home-services-section-visual-glass::before { background: var(--hss-grad-dove); }
[data-hss-panel="web-design"] .hss-list-dot                            { background: var(--hss-grad-dove-1); }
[data-hss-panel="web-design"] .home-services-section-expertise-list-item:hover { border-color: var(--hss-grad-dove-1); }

[data-hss-panel="web-dev"] .home-services-section-panel-accent-line    { background: var(--hss-grad-fire); }
[data-hss-panel="web-dev"] .home-services-section-expertise-label      { color: var(--hss-grad-fire-1); }
[data-hss-panel="web-dev"] .home-services-section-cta-link::before     { background: var(--hss-grad-fire); }
[data-hss-panel="web-dev"] .home-services-section-cta-link:hover       { box-shadow: var(--hss-shadow-glow-fire); }
[data-hss-panel="web-dev"] .home-services-section-visual-glass::before { background: var(--hss-grad-fire); }
[data-hss-panel="web-dev"] .hss-list-dot                               { background: var(--hss-grad-fire-2); }
[data-hss-panel="web-dev"] .home-services-section-expertise-list-item:hover { border-color: var(--hss-grad-fire-2); }

[data-hss-panel="mobile-app"] .home-services-section-panel-accent-line { background: var(--hss-grad-wave); }
[data-hss-panel="mobile-app"] .home-services-section-expertise-label   { color: var(--hss-grad-wave-1); }
[data-hss-panel="mobile-app"] .home-services-section-cta-link::before  { background: var(--hss-grad-wave); }
[data-hss-panel="mobile-app"] .home-services-section-cta-link:hover    { box-shadow: var(--hss-shadow-glow-wave); }
[data-hss-panel="mobile-app"] .home-services-section-visual-glass::before { background: var(--hss-grad-wave); }
[data-hss-panel="mobile-app"] .hss-list-dot                            { background: var(--hss-grad-wave-2); }
[data-hss-panel="mobile-app"] .home-services-section-expertise-list-item:hover { border-color: var(--hss-grad-wave-2); }

[data-hss-panel="seo"] .home-services-section-panel-accent-line        { background: var(--hss-grad-amber); }
[data-hss-panel="seo"] .home-services-section-expertise-label          { color: #f59e0b; }
[data-hss-panel="seo"] .home-services-section-cta-link::before         { background: var(--hss-grad-amber); }
[data-hss-panel="seo"] .home-services-section-cta-link:hover           { box-shadow: 0 0 40px rgba(245,158,11,0.4); }
[data-hss-panel="seo"] .home-services-section-visual-glass::before     { background: var(--hss-grad-amber); }
[data-hss-panel="seo"] .hss-list-dot                                   { background: #f59e0b; }
[data-hss-panel="seo"] .home-services-section-expertise-list-item:hover { border-color: #f59e0b; }

[data-hss-panel="digital-marketing"] .home-services-section-panel-accent-line { background: var(--hss-grad-digi); }
[data-hss-panel="digital-marketing"] .home-services-section-expertise-label   { color: var(--hss-grad-digi-1); }
[data-hss-panel="digital-marketing"] .home-services-section-cta-link::before  { background: var(--hss-grad-digi); }
[data-hss-panel="digital-marketing"] .home-services-section-cta-link:hover    { box-shadow: var(--hss-shadow-glow-digi); }
[data-hss-panel="digital-marketing"] .home-services-section-visual-glass::before { background: var(--hss-grad-digi); }
[data-hss-panel="digital-marketing"] .hss-list-dot                            { background: var(--hss-grad-digi-1); }
[data-hss-panel="digital-marketing"] .home-services-section-expertise-list-item:hover { border-color: var(--hss-grad-digi-1); }

[data-hss-panel="custom-requirement"] .home-services-section-panel-accent-line { background: linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6); }
[data-hss-panel="custom-requirement"] .home-services-section-expertise-label   { color: #06b6d4; }
[data-hss-panel="custom-requirement"] .home-services-section-cta-link::before  { background: linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6); }
[data-hss-panel="custom-requirement"] .home-services-section-cta-link:hover    { box-shadow: 0 0 40px rgba(6,182,212,0.4); }
[data-hss-panel="custom-requirement"] .home-services-section-visual-glass::before { background: linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6); }
[data-hss-panel="custom-requirement"] .hss-list-dot                            { background: #06b6d4; }
[data-hss-panel="custom-requirement"] .home-services-section-expertise-list-item:hover { border-color: #06b6d4; }

#home-services-section-panel-custom-requirement.hss-panel-active {
  grid-template-columns: 1fr;
}

/* ─── FORM WRAPPER ────────────────────────────────────── */
#home-services-section-form-wrapper {
  position: relative; z-index: 1;
  margin-top: 0; padding: 0 24px 72px;display: none;
}
#home-services-section-form-wrapper.hss-form-visible {
  display: block; /* sirf custom tab pe show */
}
.home-services-section-form-inner { max-width: 1240px; margin: 0 auto; }

.home-services-section-form-heading-row {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 32px;
}
.home-services-section-form-heading {
  font-family: var(--hss-font-head);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 800; color: #fff; margin: 0; line-height: 1.2;
}
.home-services-section-form-heading span {
  background: var(--hss-grad-digi);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-services-section-form-subtext {
  font-size: 14px; color: rgba(255,255,255,0.45);
  margin: 6px 0 0; font-family: var(--hss-font-body);
}

.home-services-section-form-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px; padding: 40px 40px 36px;
  backdrop-filter: blur(20px);
  position: relative; overflow: hidden;
}
.home-services-section-form-card::before {
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: var(--hss-grad-digi);
  border-radius: 50%; filter: blur(80px); opacity: 0.12;
  pointer-events: none;
}
.home-services-section-form-card::after {
  content: ''; position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  background: var(--hss-grad-wave);
  border-radius: 50%; filter: blur(70px); opacity: 0.1;
  pointer-events: none;
}

.home-services-section-form-service-label {
  font-family: var(--hss-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 14px; display: block;
}
.home-services-section-form-chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px;
}
.home-services-section-form-chip-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  font-family: var(--hss-font-body); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  user-select: none; position: relative; overflow: hidden;
}
.home-services-section-form-chip-label:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff; transform: translateY(-2px);
}
.home-services-section-form-chip-label.hss-chip-checked[data-chip="web-design"]       { background: rgba(0,212,180,0.15);   border-color: #00d4b4; color: #fff; }
.home-services-section-form-chip-label.hss-chip-checked[data-chip="web-dev"]          { background: rgba(255,107,0,0.15);   border-color: #ff6b00; color: #fff; }
.home-services-section-form-chip-label.hss-chip-checked[data-chip="mobile-app"]       { background: rgba(123,47,255,0.15);  border-color: #7b2fff; color: #fff; }
.home-services-section-form-chip-label.hss-chip-checked[data-chip="seo"]              { background: rgba(245,158,11,0.15);  border-color: #f59e0b; color: #fff; }
.home-services-section-form-chip-label.hss-chip-checked[data-chip="digital-marketing"]{ background: rgba(224,64,251,0.15);  border-color: #e040fb; color: #fff; }
.home-services-section-form-chip-label.hss-chip-checked[data-chip="custom"]           { background: rgba(6,182,212,0.15);   border-color: #06b6d4; color: #fff; }

.hss-chip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.home-services-section-form-chip-label:hover .hss-chip-dot,
.home-services-section-form-chip-label.hss-chip-checked .hss-chip-dot { transform: scale(1.4); }

.home-services-section-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.home-services-section-form-grid-full { grid-column: 1 / -1; }

.home-services-section-form-field {
  display: flex; flex-direction: column; gap: 7px; position: relative;
}
.home-services-section-form-field-label {
  font-family: var(--hss-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); transition: color 0.2s ease;
}
.home-services-section-form-field:focus-within .home-services-section-form-field-label {
  color: rgba(255,255,255,0.85);
}

.home-services-section-form-input,
.home-services-section-form-textarea,
.home-services-section-form-select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 13px 16px;
  font-family: var(--hss-font-body); font-size: 14px; color: #fff;
  outline: none;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
.home-services-section-form-input::placeholder,
.home-services-section-form-textarea::placeholder { color: rgba(255,255,255,0.25); }
.home-services-section-form-input:focus,
.home-services-section-form-textarea:focus,
.home-services-section-form-select:focus {
  border-color: rgba(224,64,251,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(224,64,251,0.12);
}
.home-services-section-form-textarea { min-height: 108px; resize: vertical; }

.home-services-section-form-select-wrap { position: relative; }
.home-services-section-form-select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,0.4);
  pointer-events: none;
}
.home-services-section-form-select option { background: #1a1a2e; color: #fff; }

.home-services-section-form-budget-display {
  display: flex; justify-content: space-between;
  font-family: var(--hss-font-head); font-size: 13px;
  color: rgba(255,255,255,0.5); margin-bottom: 6px;
}
.home-services-section-form-budget-val { color: #e040fb; font-weight: 700; }

.home-services-section-form-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.1); outline: none; cursor: pointer;
}
.home-services-section-form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg,#e040fb,#7c3aed);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(224,64,251,0.5);
  transition: transform 0.2s ease;
}
.home-services-section-form-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.home-services-section-form-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: linear-gradient(135deg,#e040fb,#7c3aed);
  cursor: pointer; box-shadow: 0 0 10px rgba(224,64,251,0.5);
}

.home-services-section-form-timeline-row { display: flex; gap: 8px; flex-wrap: wrap; }
.home-services-section-form-timeline-btn {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-family: var(--hss-font-body); font-size: 12px;
  cursor: pointer; transition: all 0.2s ease;
}
.home-services-section-form-timeline-btn:hover,
.home-services-section-form-timeline-btn.hss-timeline-active {
  background: rgba(224,64,251,0.18);
  border-color: #e040fb; color: #fff;
}

.home-services-section-form-submit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.home-services-section-form-submit-note {
  font-size: 12px; color: rgba(255,255,255,0.35);
  font-family: var(--hss-font-body);
  display: flex; align-items: center; gap: 6px;
}
.home-services-section-form-submit-note svg { flex-shrink: 0; }

.home-services-section-form-submit-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 36px; border-radius: 999px;
  font-family: var(--hss-font-head); font-size: 14px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none; color: #fff;
  background: var(--hss-grad-digi);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: none;
}
.home-services-section-form-submit-link::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background 0.2s ease;
}
.home-services-section-form-submit-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--hss-shadow-glow-digi), 0 12px 36px rgba(0,0,0,0.3);
}
.home-services-section-form-submit-link:hover::after { background: rgba(255,255,255,0.07); }
.home-services-section-form-submit-link .hss-submit-icon { transition: transform 0.2s ease; }
.home-services-section-form-submit-link:hover .hss-submit-icon { transform: translateX(4px) rotate(-20deg); }

/* ─── SUCCESS STATE ───────────────────────────────────── */
.home-services-section-form-success {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 48px 24px; text-align: center;
}
.home-services-section-form-success.hss-form-success-visible {
  display: flex;
  animation: hss-success-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes hss-success-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.hss-success-icon-ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#e040fb22,#06b6d422);
  border: 2px solid #e040fb;
  display: flex; align-items: center; justify-content: center;
  animation: hss-ring-pulse 2s ease infinite;
}
@keyframes hss-ring-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,64,251,0.3); }
  50%      { box-shadow: 0 0 0 14px rgba(224,64,251,0); }
}
.hss-success-title { font-family: var(--hss-font-head); font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.hss-success-desc  { font-size: 14px; color: rgba(255,255,255,0.5); margin: 0; max-width: 340px; }

/* ─── WAVE FOOTER ─────────────────────────────────────── */
.home-services-section-wave-footer { width: 100%; overflow: hidden; line-height: 0; position: relative; z-index: 1; }
.home-services-section-wave-footer svg { display: block; width: 100%; }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .home-services-section-panel.hss-panel-active { grid-template-columns: 1fr; }
  .home-services-section-panel-visual { display: none; }
  .home-services-section-tab-btn { min-width: 140px; padding: 12px 16px; font-size: 11px; }
}
@media (max-width: 720px) {
  .home-services-section-form-grid { grid-template-columns: 1fr; }
  .home-services-section-form-grid-full { grid-column: 1; }
  .home-services-section-form-card { padding: 24px 20px; }
  .home-services-section-form-submit-row { flex-direction: column; align-items: stretch; }
  .home-services-section-form-submit-link { justify-content: center; }
}
@media (max-width: 600px) {
  .home-services-section-tabs-nav { gap: 8px; }
  .home-services-section-tab-btn { min-width: calc(50% - 4px); }
  .home-services-section-stats-row { gap: 12px; }
}
/* <!-- Home page Service section End --> */

/* <!-- Contact us Serving The Global map Community! Start--> */
:root {
  --seopage-map-bg-deep:      #080c18;
  --seopage-map-bg-card:      #0d1225;
  --seopage-map-bg-glass:     rgba(13,18,37,0.72);
  --seopage-map-border:       rgba(255,255,255,0.07);
  --seopage-map-border-glow:  rgba(255,120,40,0.35);

  /* Fire-bird gradient */
  --seopage-map-fire-start:   #ff4500;
  --seopage-map-fire-mid:     #ff7c20;
  --seopage-map-fire-end:     #ffb347;
  --seopage-map-fire-pink:    #ff2d78;

  /* Elephant/wave gradient */
  --seopage-map-blue-start:   #1a1aff;
  --seopage-map-blue-mid:     #6c3bff;
  --seopage-map-blue-end:     #a855f7;

  /* Dove/rainbow gradient */
  --seopage-map-teal-start:   #00d4aa;
  --seopage-map-teal-mid:     #00b4d8;
  --seopage-map-teal-end:     #7df9ff;

  --seopage-map-text-primary:   #f0f4ff;
  --seopage-map-text-secondary: #8899bb;
  --seopage-map-text-accent:    #ff8c42;

  --seopage-map-transition-fast:   0.2s ease;
  --seopage-map-transition-base:   0.4s cubic-bezier(0.25,0.8,0.25,1);
  --seopage-map-transition-spring: 0.5s cubic-bezier(0.34,1.56,0.64,1);

  --seopage-map-font-head: 'Syne', sans-serif;
  --seopage-map-font-body: 'DM Sans', sans-serif;
}

/* ============================================================
   WRAPPER
   ============================================================ */
#seopage-map-section {
  position: relative;
  background: var(--seopage-map-bg-deep);
  overflow: hidden;
  font-family: var(--seopage-map-font-body);
  color: var(--seopage-map-text-primary);
  padding: 60px 0 0;
  isolation: isolate;
}

/* ============================================================
   PARTICLES CANVAS
   ============================================================ */
#seopage-map-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   PARALLAX MESH BLOBS
   ============================================================ */
.seopage-map-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: seopage-map-blobFloat 12s ease-in-out infinite alternate;
}
.seopage-map-blob--fire {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--seopage-map-fire-start), var(--seopage-map-fire-pink));
  top: -120px; left: -80px;
  animation-duration: 14s;
}
.seopage-map-blob--wave {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--seopage-map-blue-start), var(--seopage-map-blue-end));
  bottom: 80px; right: -60px;
  animation-duration: 18s;
  animation-delay: -4s;
}
.seopage-map-blob--dove {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--seopage-map-teal-start), var(--seopage-map-teal-end));
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 20s;
  animation-delay: -8s;
  opacity: 0.10;
}
@keyframes seopage-map-blobFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(30px) scale(1.04); }
  100% { transform: translateY(-20px) scale(0.97); }
}

/* ============================================================
   WAVY TOP SVG
   ============================================================ */
.seopage-map-wave-top {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 90px;
  z-index: 1;
  pointer-events: none;
}
.seopage-map-wave-top svg {
  width: 100%; height: 100%;
  display: block;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.seopage-map-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   HEADER BLOCK
   ============================================================ */
.seopage-map-header {
  text-align: center;
  margin-bottom: 44px;
}
.seopage-map-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--seopage-map-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seopage-map-text-accent);
  background: rgba(255,140,66,0.1);
  border: 1px solid rgba(255,140,66,0.25);
  border-radius: 40px;
  padding: 6px 18px;
  margin-bottom: 16px;
}
.seopage-map-eyebrow svg {
  flex-shrink: 0;
}
.seopage-map-title {
  font-family: var(--seopage-map-font-head);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg,
    var(--seopage-map-fire-end) 0%,
    var(--seopage-map-text-primary) 45%,
    var(--seopage-map-teal-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 12px;
}
.seopage-map-subtitle {
  font-size: clamp(14px, 1.8vw, 17px);
  color: var(--seopage-map-text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
  font-weight: 300;
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.seopage-map-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.seopage-map-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.seopage-map-stat-item::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--seopage-map-border);
}
.seopage-map-stat-item:last-child::after { display: none; }
.seopage-map-stat-num {
  font-family: var(--seopage-map-font-head);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, var(--seopage-map-fire-end), var(--seopage-map-fire-start));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seopage-map-stat-label {
  font-size: 12px;
  color: var(--seopage-map-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   MAIN GRID (map + card)
   ============================================================ */
.seopage-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .seopage-map-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SVG MAP PANE
   ============================================================ */
.seopage-map-pane {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #0a0f22 0%, #0e1630 100%);
  border: 1px solid var(--seopage-map-border);
  box-shadow:
    0 0 0 1px rgba(255,140,66,0.08),
    0 24px 80px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 24px;
  aspect-ratio: 1.7/1;
  min-height: 320px;
}
.seopage-map-pane-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,69,0,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(0,212,170,0.06) 0%, transparent 70%);
}
.seopage-map-svg-world {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Inline SVG map styling */
.seopage-map-world-svg {
  width: 100%;
  height: 100%;
}
.seopage-map-country-default {
  fill: #1a2540;
  transition: fill var(--seopage-map-transition-base), filter var(--seopage-map-transition-base);
  cursor: default;
}
.seopage-map-country-active {
  fill: url(#seopage-map-fire-gradient);
  filter: drop-shadow(0 0 8px rgba(255,120,40,0.6));
  cursor: pointer;
  animation: seopage-map-countryPulse 3s ease-in-out infinite;
}
@keyframes seopage-map-countryPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,120,40,0.5)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,120,40,0.9)); }
}
.seopage-map-country-active:hover {
  fill: url(#seopage-map-fire-gradient-hover);
  filter: drop-shadow(0 0 22px rgba(255,120,40,1));
}
/* Map pins */
.seopage-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: seopage-map-pinFloat 2.5s ease-in-out infinite alternate;
}
.seopage-map-pin svg { display: block; }
@keyframes seopage-map-pinFloat {
  0%   { transform: translate(-50%, -100%) translateY(0); }
  100% { transform: translate(-50%, -100%) translateY(-6px); }
}
.seopage-map-pin-ring {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 8px;
  border-radius: 50%;
  background: rgba(255,140,66,0.25);
  filter: blur(4px);
  animation: seopage-map-pinRing 2.5s ease-in-out infinite alternate;
}
@keyframes seopage-map-pinRing {
  0%   { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0.2; transform: translateX(-50%) scaleX(0.6); }
}

/* ============================================================
   INFO CARD PANE
   ============================================================ */
.seopage-map-card {
  background: var(--seopage-map-bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  border: 1px solid var(--seopage-map-border);
  box-shadow:
    0 0 0 1px rgba(255,140,66,0.1),
    0 24px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.seopage-map-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--seopage-map-fire-start),
    var(--seopage-map-fire-end),
    var(--seopage-map-fire-pink),
    transparent);
  opacity: 0.8;
}
.seopage-map-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.seopage-map-card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--seopage-map-fire-start);
  box-shadow: 0 0 8px var(--seopage-map-fire-start);
  animation: seopage-map-dotPulse 1.5s ease-in-out infinite;
}
@keyframes seopage-map-dotPulse {
  0%,100% { box-shadow: 0 0 4px var(--seopage-map-fire-start); }
  50%      { box-shadow: 0 0 16px var(--seopage-map-fire-start), 0 0 32px rgba(255,69,0,0.4); }
}
.seopage-map-card-eyebrow-txt {
  font-family: var(--seopage-map-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seopage-map-text-accent);
}
.seopage-map-card-title {
  font-family: var(--seopage-map-font-head);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 10px;
  background: linear-gradient(90deg, #fff 60%, var(--seopage-map-fire-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seopage-map-card-desc {
  font-size: 14px;
  color: var(--seopage-map-text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  font-weight: 300;
}

/* ============================================================
   COUNTRY GRID
   ============================================================ */
.seopage-map-countries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .seopage-map-countries { grid-template-columns: repeat(2, 1fr); }
}

.seopage-map-country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--seopage-map-border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--seopage-map-transition-fast),
    border-color var(--seopage-map-transition-fast),
    transform var(--seopage-map-transition-spring),
    box-shadow var(--seopage-map-transition-fast);
  position: relative;
  overflow: hidden;
}
.seopage-map-country-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(255,140,66,0.08) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity var(--seopage-map-transition-fast);
}
.seopage-map-country-item:hover {
  background: rgba(255,140,66,0.08);
  border-color: rgba(255,140,66,0.35);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255,80,0,0.18);
}
.seopage-map-country-item:hover::before { opacity: 1; }

.seopage-map-flag {
  width: 26px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  loading: lazy;
}
.seopage-map-country-name {
  font-family: var(--seopage-map-font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seopage-map-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   FLOATING BADGES
   ============================================================ */
.seopage-map-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--seopage-map-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--seopage-map-border);
  border-radius: 40px;
  padding: 7px 14px;
  font-family: var(--seopage-map-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--seopage-map-text-primary);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 5;
  pointer-events: none;
  animation: seopage-map-badgeFloat 4s ease-in-out infinite alternate;
  white-space: nowrap;
}
.seopage-map-float-badge--a {
  top: 12%; right: -8%;
  animation-delay: 0s;
  animation-duration: 5s;
}
.seopage-map-float-badge--b {
  bottom: 18%; left: -6%;
  animation-delay: -2s;
  animation-duration: 6s;
}
.seopage-map-float-badge--c {
  top: 55%; right: -4%;
  animation-delay: -1s;
  animation-duration: 4.5s;
}
.seopage-map-badge-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seopage-map-badge-icon--fire  { background: linear-gradient(135deg, #ff4500, #ff8c42); }
.seopage-map-badge-icon--wave  { background: linear-gradient(135deg, #1a1aff, #a855f7); }
.seopage-map-badge-icon--dove  { background: linear-gradient(135deg, #00d4aa, #7df9ff); }
@keyframes seopage-map-badgeFloat {
  0%   { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-12px) rotate(1deg); }
}

/* ============================================================
   SWIPER — MARQUEE LOGOS ROW
   ============================================================ */
.seopage-map-marquee-wrap {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}
.seopage-map-marquee-wrap::before,
.seopage-map-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.seopage-map-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--seopage-map-bg-deep), transparent);
}
.seopage-map-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--seopage-map-bg-deep), transparent);
}
.seopage-map-marquee-swiper {
  width: 100%;
}
.seopage-map-marquee-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.seopage-map-marquee-slide {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--seopage-map-border);
  border-radius: 40px;
  padding: 8px 16px;
  white-space: nowrap;
  font-family: var(--seopage-map-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seopage-map-text-secondary);
  width: auto !important;
  flex-shrink: 0;
  transition: border-color var(--seopage-map-transition-fast), color var(--seopage-map-transition-fast);
}
.seopage-map-marquee-slide:hover {
  border-color: rgba(255,140,66,0.3);
  color: var(--seopage-map-text-primary);
}

/* ============================================================
   WAVY BOTTOM SVG
   ============================================================ */
.seopage-map-wave-bottom {
  display: block;
  width: 100%;
  margin-top: 48px;
  line-height: 0;
}
.seopage-map-wave-bottom svg { display: block; }

/* ============================================================
   SCROLL REVEAL UTILITY
   ============================================================ */
.seopage-map-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.25,0.8,0.25,1),
    transform 0.7s cubic-bezier(0.25,0.8,0.25,1);
}
.seopage-map-reveal.seopage-map-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .seopage-map-float-badge--a,
  .seopage-map-float-badge--b,
  .seopage-map-float-badge--c { display: none; }
  .seopage-map-stats { gap: 24px; }
  .seopage-map-card { padding: 24px 16px; }
}
@media (max-width: 520px) {
  .seopage-map-countries { grid-template-columns: repeat(2, 1fr); }
}
/* <!-- Contact us Serving The Global map Community!  End--> */

/* global Our Certification section start --> */
#our-certificate--section {
  --oc-font-head  : 'Syne', sans-serif;
  --oc-font-body  : 'DM Sans', sans-serif;
  --oc-bg         : #080c18;
  --oc-surface    : rgba(255,255,255,.04);
  --oc-border     : rgba(255,255,255,.10);
  --oc-accent     : #00d2b4;
  --oc-grad-fire  : linear-gradient(135deg,#ff7c2a 0%,#e8293e 50%,#ff4e8e 100%);
  --oc-grad-wave  : linear-gradient(135deg,#4361ee 0%,#7b2ff7 100%);
  --oc-grad-dove  : linear-gradient(135deg,#00d2b4 0%,#00c853 40%,#a0ff6b 100%);
  --oc-grad-ember : linear-gradient(135deg,#ff9800,#e53935);
  --oc-grad-rose  : linear-gradient(135deg,#ec407a,#ab47bc);
  --oc-radius     : 20px;
  --oc-ease       : cubic-bezier(.25,.8,.25,1);
}

/* ── Section wrapper ── */
#our-certificate--section {
  position: relative;
  overflow: hidden;
  background: var(--oc-bg);
  padding: 80px 0 90px;
  font-family: var(--oc-font-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Particles canvas ── */
#our-certificate--particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Parallax orbs ── */
.our-certificate--orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: transform .1s linear;
}
.our-certificate--orb-1 { width:500px;height:500px;background:rgba(255,124,42,.10);top:-100px;left:-150px; }
.our-certificate--orb-2 { width:380px;height:380px;background:rgba(123,47,247,.13);bottom:0;right:-100px; }
.our-certificate--orb-3 { width:300px;height:300px;background:rgba(0,210,180,.09);top:45%;left:40%; }

/* ── Wavy top divider ── */
.our-certificate--wave-top {
  position: absolute;
  top: -2px; left: 0;
  width: 100%; line-height: 0;
  z-index: 1; pointer-events: none;
}
.our-certificate--wave-top svg { display:block;width:100%; }

/* ── Wavy bottom divider ── */
.our-certificate--wave-bottom {
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; line-height: 0;
  transform: rotate(180deg);
  z-index: 1; pointer-events: none;
}
.our-certificate--wave-bottom svg { display:block;width:100%; }

/* ── Deco SVGs ── */
.our-certificate--deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .12;
}
.our-certificate--deco-grid    { top:20px;right:32px; }
.our-certificate--deco-circles { bottom:90px;left:20px; }
.our-certificate--deco-hex     { top:50%;right:12%;opacity:.07; animation: our-certificate--spin 40s linear infinite; }

@keyframes our-certificate--spin {
  to { transform: rotate(360deg); }
}

/* ── Inner container ── */
.our-certificate--container {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Heading block ── */
.our-certificate--head {
  text-align: center;
  margin-bottom: 44px;
}

.our-certificate--eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oc-font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oc-accent);
  margin-bottom: 16px;
}
.our-certificate--eyebrow::before,
.our-certificate--eyebrow::after {
  content: '';
  display: block;
  width: 36px; height: 1px;
  background: var(--oc-accent);
  opacity: .55;
}

.our-certificate--title {
  font-family: var(--oc-font-head);
  font-size: clamp(2.2rem,5vw,3.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.our-certificate--title-fire {
  background: var(--oc-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.our-certificate--subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,.45);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Badge strip ── */
.our-certificate--badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}
.our-certificate--badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: default;
  transition: border-color .3s, background .3s, transform .3s;
}
.our-certificate--badge:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
  transform: translateY(-3px);
}
.our-certificate--badge-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.our-certificate--badge:nth-child(1) { animation: our-certificate--floatB 3.4s ease-in-out infinite; }
.our-certificate--badge:nth-child(2) { animation: our-certificate--floatB 3.4s ease-in-out infinite .5s; }
.our-certificate--badge:nth-child(3) { animation: our-certificate--floatB 3.4s ease-in-out infinite 1s; }
.our-certificate--badge:nth-child(4) { animation: our-certificate--floatB 3.4s ease-in-out infinite 1.5s; }
.our-certificate--badge:nth-child(5) { animation: our-certificate--floatB 3.4s ease-in-out infinite 2s; }
@keyframes our-certificate--floatB {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ── Swiper outer ── */
.our-certificate--swiper-wrap {
  position: relative;
  padding-bottom: 56px;
}

.our-certificate--swiper {
  overflow: visible !important;
  padding: 20px 4px 4px !important;
}

/* ── Card ── */
.our-certificate--card {
  background: rgba(255,255,255,.038);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform .45s var(--oc-ease),
    box-shadow .45s var(--oc-ease),
    border-color .4s var(--oc-ease);
  will-change: transform;
}

/* top stripe */
.our-certificate--card-stripe {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}
.our-certificate--card[data-v="fire"]  .our-certificate--card-stripe { background: var(--oc-grad-fire); }
.our-certificate--card[data-v="wave"]  .our-certificate--card-stripe { background: var(--oc-grad-wave); }
.our-certificate--card[data-v="dove"]  .our-certificate--card-stripe { background: var(--oc-grad-dove); }
.our-certificate--card[data-v="ember"] .our-certificate--card-stripe { background: var(--oc-grad-ember); }
.our-certificate--card[data-v="rose"]  .our-certificate--card-stripe { background: var(--oc-grad-rose); }

/* inner glow */
.our-certificate--card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--oc-ease);
}
.our-certificate--card[data-v="fire"]::before  { background: radial-gradient(ellipse at 50% 0%,rgba(255,124,42,.20),transparent 70%); }
.our-certificate--card[data-v="wave"]::before  { background: radial-gradient(ellipse at 50% 0%,rgba(123,47,247,.24),transparent 70%); }
.our-certificate--card[data-v="dove"]::before  { background: radial-gradient(ellipse at 50% 0%,rgba(0,210,180,.22),transparent 70%); }
.our-certificate--card[data-v="ember"]::before { background: radial-gradient(ellipse at 50% 0%,rgba(229,57,53,.22),transparent 70%); }
.our-certificate--card[data-v="rose"]::before  { background: radial-gradient(ellipse at 50% 0%,rgba(236,64,122,.22),transparent 70%); }

.our-certificate--card:hover {
  transform: translateY(-12px) scale(1.025);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 36px 72px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10);
}
.our-certificate--card:hover::before { opacity: 1; }

/* ribbon */
.our-certificate--ribbon {
  position: absolute;
  top: 14px; right: 18px;
  animation: our-certificate--floatRibbon 4s ease-in-out infinite;
  z-index: 2;
}
@keyframes our-certificate--floatRibbon {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(5deg); }
}

/* cert visual placeholder */
.our-certificate--cert-visual {
  margin: 28px 28px 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 18px 22px;
  gap: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 200px;
}
.our-certificate--cert-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--oc-cert-shimmer, rgba(255,255,255,.02));
  border-radius: inherit;
}

/* google logo-style dots */
.our-certificate--google-dots {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.our-certificate--google-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
}

.our-certificate--cert-congrats {
  font-family: var(--oc-font-head);
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .06em;
  margin: 0;
}
.our-certificate--cert-company {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  margin: 2px 0 0;
}
.our-certificate--cert-icon-wrap {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}
.our-certificate--cert-name {
  font-family: var(--oc-font-head);
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.our-certificate--cert-desc {
  font-size: .65rem;
  color: rgba(255,255,255,.30);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* card body */
.our-certificate--card-body {
  padding: 18px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.our-certificate--card-title {
  font-family: var(--oc-font-head);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}
.our-certificate--card-date {
  font-size: .74rem;
  color: rgba(255,255,255,.35);
  margin: 0;
}
.our-certificate--card-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: #080c18;
  margin-top: 4px;
  align-self: flex-start;
}

/* ── Swiper nav buttons ── */
.our-certificate--btn-prev,
.our-certificate--btn-next {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s, transform .3s !important;
  top: 42% !important;
}
.our-certificate--btn-prev::after,
.our-certificate--btn-next::after {
  font-size: 13px !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.our-certificate--btn-prev:hover,
.our-certificate--btn-next:hover {
  background: rgba(255,255,255,.16) !important;
  transform: scale(1.12) !important;
}

/* pagination */
.our-certificate--swiper-wrap .swiper-pagination-bullet {
  background: rgba(255,255,255,.25);
  opacity: 1;
  transition: background .3s, transform .3s;
  width: 8px; height: 8px;
}
.our-certificate--swiper-wrap .swiper-pagination-bullet-active {
  background: var(--oc-accent);
  transform: scale(1.4);
}

/* ── Stats ── */
.our-certificate--stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 60px;
  padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.our-certificate--stat {
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--oc-ease), transform .65s var(--oc-ease);
}
.our-certificate--stat.our-certificate--in {
  opacity: 1;
  transform: none;
}
.our-certificate--stat-num {
  font-family: var(--oc-font-head);
  font-size: clamp(2rem,3.5vw,2.8rem);
  font-weight: 800;
  background: var(--oc-grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.our-certificate--stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #our-certificate--section { padding: 60px 0 70px; }
  .our-certificate--stats { gap: 28px; }
}
@media (max-width: 480px) {
  .our-certificate--badges { gap: 8px; }
  .our-certificate--badge  { font-size: .68rem; padding: 5px 12px; }
}

/*  global Our Certification section End --> */

/* // <!-- Seo problem get from other agency section start  */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── DESIGN TOKENS ─── */
    :root {
      --sdp-bg:           #080c18;
      --sdp-surface:      rgba(255,255,255,0.03);
      --sdp-border:       rgba(255,255,255,0.08);
      --sdp-text-primary: #f0f2ff;
      --sdp-text-muted:   rgba(240,242,255,0.55);

      /* Fire-bird gradient (orange → red → pink) */
      --sdp-grad-fire:    linear-gradient(135deg, #ff6b2b 0%, #e8274b 50%, #c026d3 100%);
      /* Ocean / Elephant gradient (blue → purple) */
      --sdp-grad-ocean:   linear-gradient(135deg, #3b82f6 0%, #6d28d9 55%, #a21caf 100%);
      /* Dove / Rainbow gradient (teal → green → aqua) */
      --sdp-grad-dove:    linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #84cc16 100%);
      /* 4th card  */
      --sdp-grad-aurora:  linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);

      --sdp-font-head:    'Syne', sans-serif;
      --sdp-font-body:    'DM Sans', sans-serif;
      --sdp-radius-card:  20px;
      --sdp-radius-icon:  14px;
      --sdp-transition:   0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ─── SECTION WRAPPER ─── */
    #seopage-deliver-section {
      position: relative;
      overflow: hidden;
      padding: 80px 24px 90px;
      background: var(--sdp-bg);
      font-family: var(--sdp-font-body);
    }

    /* ─── PARTICLES CANVAS ─── */
    #seopage-deliver-particles {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ─── WAVY SVG DIVIDERS ─── */
    .seopage-deliver-wave-top,
    .seopage-deliver-wave-bottom {
      position: absolute;
      left: 0;
      width: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .seopage-deliver-wave-top  { top: -2px; }
    .seopage-deliver-wave-bottom { bottom: -2px; }

    /* ─── FLOATING BADGES ─── */
    .seopage-deliver-float-badge {
      position: absolute;
      z-index: 2;
      border-radius: 40px;
      padding: 6px 14px;
      font-family: var(--sdp-font-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.12);
      animation: sdpFloat 4s ease-in-out infinite;
      color: #fff;
      pointer-events: none;
    }
    .seopage-deliver-float-badge--fire  { background: rgba(232,39,75,0.25);  top: 12%;  left: 6%;  animation-delay: 0s;   }
    .seopage-deliver-float-badge--ocean { background: rgba(109,40,217,0.25); top: 20%;  right: 7%; animation-delay: 1.2s; }
    .seopage-deliver-float-badge--dove  { background: rgba(6,182,212,0.2);   bottom:18%;left: 8%;  animation-delay: 2.4s; }

    @keyframes sdpFloat {
      0%,100% { transform: translateY(0px) rotate(-1deg); }
      50%      { transform: translateY(-12px) rotate(1deg); }
    }

    /* ─── PARALLAX CONTAINER ─── */
    #seopage-deliver-parallax {
      position: relative;
      z-index: 3;
      will-change: transform;
    }

    /* ─── HEADING BLOCK ─── */
    .seopage-deliver-heading-wrap {
      text-align: center;
      margin-bottom: 60px;
    }
    .seopage-deliver-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--sdp-font-body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(240,242,255,0.5);
      margin-bottom: 18px;
    }
    .seopage-deliver-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--sdp-grad-fire);
      box-shadow: 0 0 8px #e8274b88;
    }

    .seopage-deliver-h2 {
      font-family: var(--sdp-font-head);
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 800;
      line-height: 1.1;
      color: var(--sdp-text-primary);
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }
    .seopage-deliver-h2 .seopage-deliver-h2-accent {
      background: var(--sdp-grad-ocean);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .seopage-deliver-subtitle {
      font-size: clamp(0.95rem, 2vw, 1.1rem);
      font-weight: 400;
      color: var(--sdp-text-muted);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.65;
    }
    .seopage-deliver-subtitle strong {
      color: var(--sdp-text-primary);
      font-weight: 600;
    }

    /* ─── CHECKBOX ROW ─── */
    .seopage-deliver-checkbox-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
    }
    .seopage-deliver-checkbox-item {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--sdp-surface);
      border: 1px solid var(--sdp-border);
      border-radius: 100px;
      padding: 7px 14px;
      cursor: pointer;
      transition: border-color 0.25s, background 0.25s;
    }
    .seopage-deliver-checkbox-item input[type="checkbox"] {
      accent-color: #6d28d9;
      width: 15px; height: 15px;
      cursor: pointer;
    }
    .seopage-deliver-checkbox-item span {
      font-size: 0.8rem;
      color: var(--sdp-text-muted);
      font-weight: 500;
      white-space: nowrap;
    }
    .seopage-deliver-checkbox-item:hover {
      border-color: rgba(109,40,217,0.5);
      background: rgba(109,40,217,0.06);
    }
    .seopage-deliver-checkbox-item:hover span { color: var(--sdp-text-primary); }

    /* ─── CARDS GRID ─── */
    .seopage-deliver-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    @media (max-width: 1024px) { .seopage-deliver-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 580px)  { .seopage-deliver-grid { grid-template-columns: 1fr; } }

    /* ─── CARD ─── */
    .seopage-deliver-card {
      position: relative;
      background: rgba(255,255,255,0.035);
      border: 1px solid var(--sdp-border);
      border-radius: var(--sdp-radius-card);
      padding: 30px 24px 28px;
      overflow: hidden;
      transition: transform var(--sdp-transition), box-shadow var(--sdp-transition), border-color 0.3s;
      cursor: default;
      will-change: transform;
    }

    /* Glow border on hover via pseudo element */
    .seopage-deliver-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--sdp-radius-card);
      padding: 1px;
      background: var(--card-grad);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s;
    }

    /* Spotlight glow blob */
    .seopage-deliver-card::after {
      content: '';
      position: absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: var(--card-grad);
      filter: blur(60px);
      opacity: 0;
      top: -30px; left: -30px;
      transition: opacity 0.5s;
      pointer-events: none;
    }

    .seopage-deliver-card:hover { transform: translateY(-8px) scale(1.02); }
    .seopage-deliver-card:hover::before { opacity: 1; }
    .seopage-deliver-card:hover::after  { opacity: 0.18; }
    .seopage-deliver-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.5); }

    /* Per-card gradient vars */
    .seopage-deliver-card[data-sdp-card="1"] { --card-grad: var(--sdp-grad-fire);  }
    .seopage-deliver-card[data-sdp-card="2"] { --card-grad: var(--sdp-grad-ocean); }
    .seopage-deliver-card[data-sdp-card="3"] { --card-grad: var(--sdp-grad-dove);  }
    .seopage-deliver-card[data-sdp-card="4"] { --card-grad: var(--sdp-grad-aurora);}

    /* ─── ICON WRAP ─── */
    .seopage-deliver-icon-wrap {
      width: 56px; height: 56px;
      border-radius: var(--sdp-radius-icon);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
      transition: transform var(--sdp-transition);
      flex-shrink: 0;
    }
    .seopage-deliver-icon-wrap svg {
      width: 28px; height: 28px;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
    }
    .seopage-deliver-card[data-sdp-card="1"] .seopage-deliver-icon-wrap { background: rgba(255,107,43,0.18); }
    .seopage-deliver-card[data-sdp-card="2"] .seopage-deliver-icon-wrap { background: rgba(109,40,217,0.2);  }
    .seopage-deliver-card[data-sdp-card="3"] .seopage-deliver-icon-wrap { background: rgba(6,182,212,0.18);  }
    .seopage-deliver-card[data-sdp-card="4"] .seopage-deliver-icon-wrap { background: rgba(129,140,248,0.2); }
    .seopage-deliver-card:hover .seopage-deliver-icon-wrap { transform: scale(1.12) rotate(-4deg); }

    /* ─── CARD QUOTE ─── */
    .seopage-deliver-card-quote {
      font-family: var(--sdp-font-head);
      font-size: clamp(1rem, 1.6vw, 1.15rem);
      font-weight: 700;
      color: var(--sdp-text-primary);
      line-height: 1.3;
      margin-bottom: 12px;
      position: relative; z-index: 1;
    }

    /* ─── CARD BODY ─── */
    .seopage-deliver-card-body {
      font-size: 0.875rem;
      line-height: 1.7;
      color: var(--sdp-text-muted);
      position: relative; z-index: 1;
      transition: color 0.3s;
    }
    .seopage-deliver-card:hover .seopage-deliver-card-body { color: rgba(240,242,255,0.72); }

    /* ─── GRADIENT TAG ON CARD ─── */
    .seopage-deliver-card-tag {
      display: inline-block;
      margin-top: 18px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 100px;
      padding: 4px 10px;
      position: relative; z-index: 1;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s, transform 0.3s;
    }
    .seopage-deliver-card[data-sdp-card="1"] .seopage-deliver-card-tag { background: var(--sdp-grad-fire);  color:#fff; }
    .seopage-deliver-card[data-sdp-card="2"] .seopage-deliver-card-tag { background: var(--sdp-grad-ocean); color:#fff; }
    .seopage-deliver-card[data-sdp-card="3"] .seopage-deliver-card-tag { background: var(--sdp-grad-dove);  color:#fff; }
    .seopage-deliver-card[data-sdp-card="4"] .seopage-deliver-card-tag { background: var(--sdp-grad-aurora);color:#fff; }
    .seopage-deliver-card:hover .seopage-deliver-card-tag { opacity: 1; transform: translateY(0); }

    /* ─── CTA ROW ─── */
    .seopage-deliver-cta-row {
      text-align: center;
      margin-top: 56px;
    }
    .seopage-deliver-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sdp-font-head);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      background: var(--sdp-grad-fire);
      padding: 14px 34px;
      border-radius: 100px;
      transition: transform var(--sdp-transition), box-shadow 0.3s;
      box-shadow: 0 0 0 rgba(232,39,75,0);
      letter-spacing: 0.01em;
    }
    .seopage-deliver-cta-link:hover {
      transform: scale(1.04) translateY(-2px);
      box-shadow: 0 10px 40px rgba(232,39,75,0.45);
    }
    .seopage-deliver-cta-link svg { width: 18px; height: 18px; transition: transform 0.3s; }
    .seopage-deliver-cta-link:hover svg { transform: translateX(4px); }

    /* ─── ENTRY ANIMATIONS ─── */
    .seopage-deliver-anim-in {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .seopage-deliver-anim-in.seopage-deliver-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── RESPONSIVE FLOAT BADGE ─── */
    @media (max-width: 640px) {
      .seopage-deliver-float-badge { display: none; }
    }
/* // <!-- Seo problem get from other agency section End  */

/* Seo Roi driven for small business section start */
:root {
  --seopg-bg:            #080c18;
  --seopg-bg-card:       #0d1226;
  --seopg-bg-card-hover: #111832;
  --seopg-border:        rgba(255,255,255,0.07);
  --seopg-border-hover:  rgba(255,255,255,0.16);
  --seopg-text-primary:  #f0f4ff;
  --seopg-text-muted:    #8b9bb4;
  --seopg-text-dim:      #4a5878;

  /* fire: orange → red → pink */
  --seopg-fire-a: #ff6b35;
  --seopg-fire-b: #e63946;
  --seopg-fire-c: #f72585;
  --seopg-fire-grad: linear-gradient(135deg,#ff6b35 0%,#e63946 50%,#f72585 100%);

  /* ocean: blue → purple */
  --seopg-ocean-a: #4361ee;
  --seopg-ocean-b: #7b2d8b;
  --seopg-ocean-c: #a855f7;
  --seopg-ocean-grad: linear-gradient(135deg,#4361ee 0%,#7b2d8b 50%,#a855f7 100%);

  /* dove: teal → green → rainbow */
  --seopg-dove-a: #06d6a0;
  --seopg-dove-b: #17c3b2;
  --seopg-dove-c: #4ade80;
  --seopg-dove-grad: linear-gradient(135deg,#06d6a0 0%,#17c3b2 50%,#4ade80 100%);

  --seopg-font-head: 'Syne', sans-serif;
  --seopg-font-body: 'DM Sans', sans-serif;
  --seopg-radius-card: 20px;
  --seopg-radius-sm:   10px;
  --seopg-transition:  0.38s cubic-bezier(0.22,0.68,0,1.2);
  --seopg-shadow-card: 0 8px 40px rgba(0,0,0,0.45);
}

/* ── WRAP ────────────────────────────────────────────────────── */
.seopg-ROI-wrap {
  position: relative;
  overflow: hidden;
  background: var(--seopg-bg);
  font-family: var(--seopg-font-body);
  color: var(--seopg-text-primary);
  padding: 6rem 0 5rem;
}

/* ── PARTICLES ───────────────────────────────────────────────── */
.seopg-ROI-particles-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── WAVY DIVIDERS ───────────────────────────────────────────── */
.seopg-ROI-wave-top,
.seopg-ROI-wave-bottom {
  position: absolute;
  left: 0; right: 0;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.seopg-ROI-wave-top  { top: -2px; }
.seopg-ROI-wave-bottom { bottom: -2px; }
.seopg-ROI-wave-top svg,
.seopg-ROI-wave-bottom svg { width:100%; height:80px; display:block; }

/* ── PARALLAX ORBS ───────────────────────────────────────────── */
.seopg-ROI-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; }
.seopg-ROI-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  will-change: transform;
  animation: seopg-orb-pulse 8s ease-in-out infinite;
}
.seopg-ROI-orb--fire  { width:520px; height:520px; top:-120px; left:-100px;  background: var(--seopg-fire-grad);  animation-delay:0s; }
.seopg-ROI-orb--ocean { width:440px; height:440px; bottom:-100px; right:-60px; background: var(--seopg-ocean-grad); animation-delay:-3s; }
.seopg-ROI-orb--dove  { width:300px; height:300px; top:40%; left:55%;      background: var(--seopg-dove-grad);  animation-delay:-6s; }

@keyframes seopg-orb-pulse {
  0%,100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.12) translate(8px,-12px); }
}

/* ── CONTAINER ───────────────────────────────────────────────── */
.seopg-ROI-container {
  position: relative;
  z-index: 3;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.seopg-ROI-header {
  text-align: center;
  margin-bottom: 2.8rem;
}
.seopg-ROI-eyebrow {
  font-family: var(--seopg-font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seopg-fire-a);
  margin: 0 0 1rem;
  display: inline-block;
  padding: 0.3em 1em;
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: 100px;
  background: rgba(255,107,53,0.06);
}
.seopg-ROI-heading {
  font-family: var(--seopg-font-head);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.13;
  margin: 0 0 1.1rem;
  letter-spacing: -0.02em;
}
.seopg-ROI-heading-line { display: block; }
.seopg-ROI-gradient-fire  { background: var(--seopg-fire-grad);  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.seopg-ROI-gradient-ocean { background: var(--seopg-ocean-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.seopg-ROI-gradient-dove  { background: var(--seopg-dove-grad);  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.seopg-ROI-subtext {
  font-size: 1.08rem;
  color: var(--seopg-text-muted);
  max-width: 560px;
  margin: 0 auto 1.6rem;
  line-height: 1.7;
  font-weight: 300;
}

/* ── BADGES ──────────────────────────────────────────────────── */
.seopg-ROI-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.seopg-ROI-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35em 0.9em;
  border-radius: 100px;
  border: 1px solid;
  transition: transform var(--seopg-transition), box-shadow var(--seopg-transition);
  animation: seopg-float-badge 4s ease-in-out infinite;
}
.seopg-ROI-badge:hover { transform: translateY(-3px); }
.seopg-ROI-badge--fire  { color:var(--seopg-fire-a);  border-color:rgba(255,107,53,0.35); background:rgba(255,107,53,0.08);  animation-delay:0s; }
.seopg-ROI-badge--ocean { color:var(--seopg-ocean-c); border-color:rgba(168,85,247,0.35);  background:rgba(168,85,247,0.08); animation-delay:-1.4s; }
.seopg-ROI-badge--dove  { color:var(--seopg-dove-a);  border-color:rgba(6,214,160,0.35);   background:rgba(6,214,160,0.08);  animation-delay:-2.8s; }

@keyframes seopg-float-badge {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ── TABS ────────────────────────────────────────────────────── */
.seopg-ROI-tabs-wrap {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.seopg-ROI-tab {
  font-family: var(--seopg-font-head);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5em 1.4em;
  border-radius: 100px;
  border: 1.5px solid var(--seopg-border);
  background: rgba(255,255,255,0.03);
  color: var(--seopg-text-muted);
  cursor: pointer;
  transition: all var(--seopg-transition);
  letter-spacing: 0.03em;
}
.seopg-ROI-tab:hover {
  border-color: var(--seopg-border-hover);
  color: var(--seopg-text-primary);
  background: rgba(255,255,255,0.06);
}
.seopg-ROI-tab--active {
  background: var(--seopg-fire-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px rgba(247,37,133,0.35);
}

/* ── GRID ────────────────────────────────────────────────────── */
.seopg-ROI-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.8rem;
}

/* ── CARDS ───────────────────────────────────────────────────── */
.seopg-ROI-card {
  position: relative;
  background: var(--seopg-bg-card);
  border: 1.5px solid var(--seopg-border);
  border-radius: var(--seopg-radius-card);
  padding: 2rem 1.8rem 1.6rem;
  transition: transform var(--seopg-transition), border-color var(--seopg-transition), box-shadow var(--seopg-transition), background var(--seopg-transition);
  cursor: default;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.seopg-ROI-card:hover,
.seopg-ROI-card:focus-within {
  transform: translateY(-8px) scale(1.012);
  border-color: var(--seopg-border-hover);
  background: var(--seopg-bg-card-hover);
  box-shadow: var(--seopg-shadow-card);
}
.seopg-ROI-card--featured {
  border-color: rgba(67,97,238,0.45);
  background: linear-gradient(160deg,#0d1226 60%,rgba(67,97,238,0.08) 100%);
}

/* glow overlay */
.seopg-ROI-card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.seopg-ROI-card:hover .seopg-ROI-card-glow { opacity: 1; }
.seopg-ROI-card-glow--fire  { background: radial-gradient(ellipse at 30% 20%, rgba(247,37,133,0.1) 0%, transparent 70%); }
.seopg-ROI-card-glow--ocean { background: radial-gradient(ellipse at 70% 20%, rgba(67,97,238,0.12) 0%, transparent 70%); }
.seopg-ROI-card-glow--dove  { background: radial-gradient(ellipse at 50% 10%, rgba(6,214,160,0.1) 0%, transparent 70%); }

/* icon */
.seopg-ROI-card-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--seopg-transition);
}
.seopg-ROI-card:hover .seopg-ROI-card-icon-wrap { transform: rotate(-4deg) scale(1.1); }
.seopg-ROI-icon-bg--fire  { background: rgba(247,37,133,0.1);  border: 1px solid rgba(247,37,133,0.2); }
.seopg-ROI-icon-bg--ocean { background: rgba(67,97,238,0.1);   border: 1px solid rgba(67,97,238,0.2); }
.seopg-ROI-icon-bg--dove  { background: rgba(6,214,160,0.1);   border: 1px solid rgba(6,214,160,0.2); }
.seopg-ROI-card-svg { width:34px; height:34px; display:block; }

/* content */
.seopg-ROI-card-content { flex: 1; }
.seopg-ROI-card-title {
  font-family: var(--seopg-font-head);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--seopg-text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.seopg-ROI-card-desc {
  font-size: 0.9rem;
  color: var(--seopg-text-muted);
  line-height: 1.72;
  margin: 0;
  font-weight: 300;
}

/* footer */
.seopg-ROI-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--seopg-border);
  margin-top: auto;
}
.seopg-ROI-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap var(--seopg-transition), opacity var(--seopg-transition);
}
.seopg-ROI-card-link:hover { gap: 0.7em; opacity: 0.85; }
.seopg-ROI-card-link--fire  { color: var(--seopg-fire-c);  }
.seopg-ROI-card-link--ocean { color: var(--seopg-ocean-c); }
.seopg-ROI-card-link--dove  { color: var(--seopg-dove-a);  }
.seopg-ROI-card-tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.22em 0.7em;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  color: var(--seopg-text-dim);
  border: 1px solid var(--seopg-border);
  letter-spacing: 0.04em;
}

/* featured badge */
.seopg-ROI-card-featured-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.24em 0.75em;
  border-radius: 100px;
  background: var(--seopg-ocean-grad);
  color: #fff;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 14px rgba(67,97,238,0.4);
}

/* float decorations */
.seopg-ROI-card-float-icon {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 90px;
  height: 90px;
  pointer-events: none;
  transition: transform var(--seopg-transition);
}
.seopg-ROI-card:hover .seopg-ROI-card-float-icon { transform: scale(1.25) rotate(10deg); }
.seopg-ROI-float-1 { animation: seopg-float-icon 6s ease-in-out infinite; }
.seopg-ROI-float-2 { animation: seopg-float-icon 7s ease-in-out infinite -2s; }
.seopg-ROI-float-3 { animation: seopg-float-icon 5s ease-in-out infinite -4s; }

@keyframes seopg-float-icon {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(6deg); }
}

/* hidden card (filter) */
.seopg-ROI-card--hidden {
  display: none;
}

/* ── STATS ROW ────────────────────────────────────────────────── */
.seopg-ROI-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--seopg-border);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.8rem;
  backdrop-filter: blur(10px);
}
.seopg-ROI-stat-item {
  flex: 1;
  min-width: 130px;
  text-align: center;
  padding: 0.8rem 1rem;
}
.seopg-ROI-stat-num {
  font-family: var(--seopg-font-head);
  font-size: 2.6rem;
  font-weight: 800;
  background: var(--seopg-fire-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.seopg-ROI-stat-unit {
  font-family: var(--seopg-font-head);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--seopg-fire-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.seopg-ROI-stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--seopg-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  font-weight: 500;
}
.seopg-ROI-stat-divider {
  width: 1px;
  height: 50px;
  background: var(--seopg-border);
  flex-shrink: 0;
}

/* ── CTA BLOCK ───────────────────────────────────────────────── */
.seopg-ROI-cta-block {
  position: relative;
  border-radius: 24px;
  border: 1.5px solid rgba(247,37,133,0.22);
  background: linear-gradient(135deg,rgba(13,18,38,0.95) 0%,rgba(20,10,40,0.95) 100%);
  padding: 3rem 3.5rem;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.seopg-ROI-cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.seopg-ROI-cta-text-col { flex: 1; min-width: 240px; }
.seopg-ROI-cta-pretitle {
  font-family: var(--seopg-font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seopg-fire-a);
  margin: 0 0 0.5rem;
}
.seopg-ROI-cta-heading {
  font-family: var(--seopg-font-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  color: var(--seopg-text-primary);
}
.seopg-ROI-cta-sub {
  color: var(--seopg-text-muted);
  font-size: 0.9rem;
  margin: 0;
  font-weight: 300;
}
.seopg-ROI-cta-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.seopg-ROI-cta-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.seopg-ROI-cta-deco svg { width:100%; height:100%; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.seopg-ROI-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--seopg-font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 100px;
  overflow: hidden;
  transition: transform var(--seopg-transition), box-shadow var(--seopg-transition);
  white-space: nowrap;
}
.seopg-ROI-btn:hover { transform: translateY(-3px); }
.seopg-ROI-btn--primary {
  padding: 0.75em 2em;
  background: var(--seopg-fire-grad);
  color: #fff;
  box-shadow: 0 4px 24px rgba(247,37,133,0.4);
}
.seopg-ROI-btn--primary:hover { box-shadow: 0 8px 36px rgba(247,37,133,0.55); }
.seopg-ROI-btn-inner { display:inline-flex; align-items:center; gap:0.5em; position:relative; z-index:2; }
.seopg-ROI-btn-shimmer {
  position: absolute;
  top: 0; left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: seopg-shimmer 3s infinite 1.5s;
}
@keyframes seopg-shimmer {
  0%   { left: -120%; }
  60%,100% { left: 160%; }
}
.seopg-ROI-btn--outline {
  padding: 0.73em 1.8em;
  background: transparent;
  color: var(--seopg-text-primary);
  border: 1.5px solid rgba(255,255,255,0.18);
}
.seopg-ROI-btn--outline:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 4px 16px rgba(255,255,255,0.06);
}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.seopg-ROI-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.seopg-ROI-reveal.seopg-ROI-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .seopg-ROI-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .seopg-ROI-wrap { padding: 4rem 0 3rem; }
  .seopg-ROI-grid { grid-template-columns: 1fr; }
  .seopg-ROI-stats-row { padding: 1.5rem 1rem; }
  .seopg-ROI-stat-divider { display:none; }
  .seopg-ROI-stat-item { min-width: 100px; }
  .seopg-ROI-cta-block { padding: 2rem 1.5rem; }
  .seopg-ROI-cta-inner { flex-direction:column; text-align:center; }
  .seopg-ROI-cta-actions { justify-content:center; }
}
@media (max-width: 480px) {
  .seopg-ROI-heading { font-size: 1.8rem; }
  .seopg-ROI-container { padding: 0 16px; }
  .seopg-ROI-btn { font-size:0.82rem; padding:0.7em 1.4em; }
}

/* Lazy load fade */
.seopg-ROI-card-svg[data-src] { opacity: 0; transition: opacity 0.5s; }
.seopg-ROI-card-svg.seopg-loaded { opacity: 1; }
/* Seo Roi driven for small business section End */


/* // <!-- Seo why pay more secton start */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:       #080c18;
  --surface:  #0d1225;
  --border:   rgba(255,255,255,.07);
  --borderg:  rgba(255,255,255,.14);
  --muted:    rgba(200,210,240,.60);
  --dim:      rgba(160,175,210,.45);
  --primary:  #f0f4ff;
  --head:     'Syne',sans-serif;
  --body:     'DM Sans',sans-serif;
  --r-card:   20px;
  --r-pill:   100px;
  --r-btn:    14px;
  --ease:     .35s cubic-bezier(.4,0,.2,1);
  --fire:     linear-gradient(135deg,#ff6a00,#ee0979,#ff6fcf);
  --fire-txt: linear-gradient(90deg,#ff8c42,#f72585,#ff9de2);
  --wave:     linear-gradient(135deg,#1a1aff,#7928ca,#ff0080);
  --wave-txt: linear-gradient(90deg,#4facfe,#a78bfa);
  --dove:     linear-gradient(135deg,#00b09b,#96c93d,#00f2fe);
  --dove-txt: linear-gradient(90deg,#43e97b,#38f9d7);
}

#seopg-section{
  position:relative;background:var(--bg);
  font-family:var(--body);color:var(--primary);
  overflow:hidden;padding:72px 0 80px;
}

#seopg-ptcl{position:absolute;inset:0;z-index:0;pointer-events:none}

.orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.17;pointer-events:none;z-index:0;
  animation:orb-drift 13s ease-in-out infinite alternate;
}
.orb-1{background:radial-gradient(circle,#ff6a00,#ee0979);width:520px;height:520px;top:-120px;left:-140px;animation-delay:0s}
.orb-2{background:radial-gradient(circle,#1a1aff,#7928ca);width:460px;height:460px;top:40%;right:-160px;animation-delay:-5s}
.orb-3{background:radial-gradient(circle,#00b09b,#96c93d);width:380px;height:380px;bottom:-80px;left:30%;animation-delay:-9s}
@keyframes orb-drift{to{transform:translate(30px,40px) scale(1.08)}}

.wave-top,.wave-bot{position:absolute;left:0;right:0;z-index:1;line-height:0}
.wave-top{top:0}
.wave-bot{bottom:0;transform:rotate(180deg)}

.float-icons{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ficon{position:absolute;opacity:.11;animation:ficon-anim var(--d,8s) ease-in-out infinite var(--dl,0s)}
@keyframes ficon-anim{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-16px) rotate(5deg)}66%{transform:translateY(9px) rotate(-4deg)}}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:7px 18px;border-radius:var(--r-pill);
  background:rgba(238,9,121,.12);border:1px solid rgba(238,9,121,.3);
  color:#ff6fcf;margin-bottom:22px;
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--fire);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

.g-fire{background:var(--fire-txt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.g-wave{background:var(--wave-txt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.g-dove{background:var(--dove-txt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-h{
  font-family:var(--head);font-size:clamp(34px,5vw,62px);
  font-weight:800;line-height:1.08;letter-spacing:-.02em;
  margin:0 0 18px;max-width:750px;
}
.hero-p{font-size:clamp(15px,2vw,17px);color:var(--muted);max-width:640px;line-height:1.72;margin:0 0 46px}

.stats{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.stat{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  font-size:13px;color:var(--muted);cursor:default;
  transition:background var(--ease),transform var(--ease),border-color var(--ease);
}
.stat:hover{background:rgba(255,255,255,.08);border-color:var(--borderg);transform:translateY(-2px)}
.stat strong{font-family:var(--head);font-size:15px;font-weight:700}
.stat.s1 strong{color:#ff8c42}
.stat.s2 strong{color:#a78bfa}
.stat.s3 strong{color:#43e97b}
.stat.s4 strong{color:#ff6fcf}

.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:26px;align-items:start;
}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:38px 34px;
  position:relative;overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  will-change:transform;
}
.card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 0%,rgba(255,255,255,.04) 0%,transparent 70%);
  pointer-events:none;border-radius:inherit;
}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 64px rgba(0,0,0,.5);border-color:var(--borderg)}

.card-featured{
  background:linear-gradient(160deg,#0f1a2e 0%,#10101e 100%);
  border-color:rgba(238,9,121,.5);
  box-shadow:0 0 0 1px rgba(238,9,121,.22),0 24px 60px rgba(238,9,121,.14);
}
.card-featured:hover{border-color:rgba(238,9,121,.75);box-shadow:0 0 0 1px rgba(238,9,121,.44),0 32px 72px rgba(238,9,121,.24)}
.card-featured::after{
  content:'';position:absolute;top:0;left:10%;right:10%;
  height:2px;background:var(--fire);border-radius:0 0 8px 8px;opacity:.85;
}

.cbadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-pill);
  font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px;
}
.cbadge-muted{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted)}
.cbadge-fire{background:rgba(238,9,121,.14);border:1px solid rgba(238,9,121,.34);color:#ff6fcf}
.cbadge-fire{animation:float-badge 3.5s ease-in-out infinite}
@keyframes float-badge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.badge-star{color:#ffbe57;font-size:13px}

.p-orig{font-size:15px;color:var(--dim);text-decoration:line-through;margin-bottom:4px}
.p-lbl{font-size:12px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.p-row{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.p-cur{font-family:var(--head);font-size:24px;font-weight:700;margin-top:10px}
.p-amt{font-family:var(--head);font-size:clamp(52px,7vw,70px);font-weight:800;line-height:1}
.p-amt-std{color:var(--primary)}
.p-amt-feat{background:var(--fire-txt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.p-per{font-size:16px;color:var(--muted);margin-left:2px}
.p-save{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:#43e97b;margin:10px 0 26px;
  background:rgba(67,233,123,.12);border:1px solid rgba(67,233,123,.24);
}

.cdiv{height:1px;background:var(--border);margin:26px 0;position:relative;overflow:visible}
.cdiv-glow::after{
  content:'';position:absolute;left:0;top:-1px;height:2px;width:55%;
  background:var(--fire);border-radius:2px;
  animation:glow-slide 3s ease-in-out infinite;
}
@keyframes glow-slide{0%{transform:translateX(-20%);opacity:.5}50%{transform:translateX(60%);opacity:1}100%{transform:translateX(140%);opacity:.5}}

.feat-hd{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.feat-item{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14px;color:var(--muted);line-height:1.5;cursor:default;
  transition:color .22s,transform .22s;
}
.feat-item:hover{color:var(--primary);transform:translateX(3px)}
.fcheck{
  flex-shrink:0;width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.fcheck svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fcheck-std{background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--muted)}
.fcheck-feat{background:rgba(238,9,121,.14);border:1px solid rgba(238,9,121,.34);color:#ff6fcf}
.ftag{
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r-pill);
  vertical-align:middle;margin-left:5px;white-space:nowrap;
}
.ftag-new{background:rgba(67,233,123,.14);color:#43e97b;border:1px solid rgba(67,233,123,.24)}
.ftag-hot{background:rgba(247,37,133,.14);color:#f72585;border:1px solid rgba(247,37,133,.24)}
.ftag-pro{background:rgba(167,139,250,.14);color:#a78bfa;border:1px solid rgba(167,139,250,.24)}
.ftag-plus{background:rgba(255,190,87,.14);color:#ffbe57;border:1px solid rgba(255,190,87,.24)}

.cbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 26px;border-radius:var(--r-btn);
  font-family:var(--head);font-size:15px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  position:relative;overflow:hidden;margin-top:26px;
  transition:transform var(--ease),box-shadow var(--ease),filter var(--ease);
}
.cbtn svg{width:17px;height:17px;transition:transform .28s}
.cbtn:hover svg{transform:translateX(4px)}
.cbtn-fire{background:var(--fire);color:#fff;box-shadow:0 8px 32px rgba(238,9,121,.40)}
.cbtn-fire:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 48px rgba(238,9,121,.55);filter:brightness(1.08)}
.cbtn-fire:active{transform:scale(.98)}
.cbtn-fire::after{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);
  animation:btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer{0%{left:-100%}50%,100%{left:160%}}
.cbtn-out{background:transparent;color:var(--muted);border:1px solid var(--borderg)}
.cbtn-out:hover{background:rgba(255,255,255,.05);color:var(--primary);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}

.cmeta{display:flex;justify-content:center;gap:16px;margin-top:13px;flex-wrap:wrap}
.cmeta-i{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
.cmeta-i svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.urgency-strip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:10px 16px;
  background:rgba(238,9,121,.08);border:1px solid rgba(238,9,121,.2);
  border-radius:var(--r-pill);font-size:13px;color:#ff6fcf;font-weight:500;
}
.udot{width:8px;height:8px;border-radius:50%;background:#ee0979;animation:pulse 1.4s ease-in-out infinite}

.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
  margin-top:54px;padding-top:38px;border-top:1px solid var(--border);
}
.ti{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:default;transition:color .22s,transform .22s}
.ti:hover{color:var(--primary);transform:translateY(-2px)}
.ti-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
}
.ti-ico svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ti-fire{color:#ff8c42}.ti-wave{color:#a78bfa}.ti-dove{color:#43e97b}.ti-pink{color:#ff6fcf}

@media(max-width:900px){
  #seopg-section{padding:56px 0 64px}
  .pgrid{grid-template-columns:1fr}
  .card{padding:30px 22px}
}
@media(max-width:540px){
  .hero-h{font-size:clamp(26px,8vw,40px)}
  .stats{gap:10px}
  .stat{padding:8px 13px;font-size:12px}
  .trust{gap:18px}
}

/* // <!-- Seo why pay more secton start */