/* ============================================================
   GAMLIOT TECHNOLOGIES — SHARED STYLESHEET
   style.css
   Brand: Green #2EE05A | Navy #0D1E35 | Dark #060D18
============================================================ */

/* ============================================================
   SERVICE PAGE SHARED STYLES
============================================================ */

/* Overview section */
.sp-overview { padding:100px 0; background:var(--white); }
.sp-ov-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.sp-ov-text .section-sub { margin-bottom:24px; }
.sp-ov-text .tag { margin-bottom:18px; }
.sp-check-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.sp-check-list li { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--g700); line-height:1.55; }
.sp-check-list li .ck { width:22px; height:22px; background:rgba(46,224,90,0.12); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--green-dk); font-size:11px; flex-shrink:0; margin-top:1px; }
.sp-ov-img { width:100%; height:440px; border-radius:var(--r-lg); position:relative; }
.sp-ov-img .img-ph { height:100%; }
.sp-ov-badge { position:absolute; bottom:-20px; right:-20px; background:var(--green); color:var(--navy); border-radius:var(--r-md); padding:18px 24px; text-align:center; box-shadow:0 10px 28px rgba(46,224,90,0.35); }
.sp-ov-badge .ob-num { font-size:36px; font-weight:900; line-height:1; letter-spacing:-0.03em; }
.sp-ov-badge .ob-txt { font-size:11px; font-weight:700; margin-top:3px; }

/* Stats bar */
.sp-stats-bar { background:var(--navy); padding:56px 0; position:relative; overflow:hidden; }
.sp-stats-bar::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(46,224,90,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(46,224,90,0.03) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.sp-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; z-index:2; }
.sp-stat { text-align:center; }
.sp-stat-num { font-size:44px; font-weight:900; color:var(--white); line-height:1; letter-spacing:-0.03em; }
.sp-stat-num em { color:var(--green); font-style:normal; }
.sp-stat-lbl { font-size:13px; color:rgba(255,255,255,0.45); font-weight:500; margin-top:8px; }

/* Benefits grid */
.sp-benefits { padding:100px 0; background:var(--g50); }
.sp-ben-head { text-align:center; margin-bottom:64px; }
.sp-ben-head .section-sub { margin:0 auto; }
.ben-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ben-card { background:var(--white); border:1px solid var(--g200); border-radius:var(--r-md); padding:32px 26px; transition:var(--ease); }
.ben-card:hover { border-color:var(--green); box-shadow:0 10px 32px rgba(46,224,90,0.1); transform:translateY(-4px); }
.ben-icon { width:56px; height:56px; background:rgba(46,224,90,0.1); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--green-dk); margin-bottom:18px; transition:var(--ease); }
.ben-card:hover .ben-icon { background:var(--green); color:var(--navy); }
.ben-title { font-size:16px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.ben-desc { font-size:13.5px; color:var(--g500); line-height:1.65; }

/* Feature sections (alternating) */
.sp-feat { padding:96px 0; }
.sp-feat.bg-white { background:var(--white); }
.sp-feat.bg-light { background:var(--g50); }
.sp-feat.bg-dark { background:var(--navy); }
.sp-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.sp-feat-grid.rev { direction:rtl; }
.sp-feat-grid.rev > * { direction:ltr; }
.sp-feat-img { width:100%; height:380px; border-radius:var(--r-lg); }
.sp-feat-img.img-ph { height:380px; }
.sp-feat-text .section-title { margin-bottom:16px; }
.sp-feat-text .section-sub { margin-bottom:24px; }
.sp-feat-text.dark .section-title { color:var(--white); }
.sp-feat-text.dark .section-sub { color:rgba(255,255,255,0.5); }
.feat-bullets { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.feat-bullet { display:flex; align-items:flex-start; gap:14px; }
.fb-dot { width:36px; height:36px; background:rgba(46,224,90,0.1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--green); flex-shrink:0; }
.sp-feat.bg-dark .fb-dot { background:rgba(46,224,90,0.15); }
.fb-text h5 { font-size:14px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.sp-feat.bg-dark .fb-text h5 { color:var(--white); }
.fb-text p { font-size:13px; color:var(--g500); line-height:1.6; }
.sp-feat.bg-dark .fb-text p { color:rgba(255,255,255,0.48); }

/* Delivery process */
.sp-process { padding:100px 0; background:var(--g50); }
.sp-proc-head { text-align:center; margin-bottom:72px; }
.sp-proc-head .section-sub { margin:0 auto; }
.sp-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.sp-steps::after { content:''; position:absolute; top:38px; left:calc(12.5% + 4px); right:calc(12.5% + 4px); height:2px; background:linear-gradient(90deg,var(--green),rgba(46,224,90,0.1)); z-index:0; }
.sp-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px; position:relative; z-index:1; }
.sp-step-num { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; margin-bottom:24px; border:2px solid var(--green); background:var(--g50); color:var(--green); transition:var(--ease); }
.sp-step:first-child .sp-step-num { background:var(--green); color:var(--navy); box-shadow:0 0 0 8px rgba(46,224,90,0.12); }
.sp-step:hover .sp-step-num { background:var(--green); color:var(--navy); box-shadow:0 0 0 8px rgba(46,224,90,0.12); }
.sp-step-title { font-size:15px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.sp-step-desc { font-size:13px; color:var(--g500); line-height:1.65; }

/* Tech stack */
.sp-tech { padding:80px 0; background:var(--white); }
.sp-tech-inner { display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap; }
.sp-tech-left { flex:0 0 280px; }
.sp-tech-right { flex:1; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.sp-tech-tag { background:var(--g100); border:1px solid var(--g200); color:var(--g700); font-size:13px; font-weight:700; padding:8px 16px; border-radius:100px; transition:var(--ease); }
.sp-tech-tag:hover { background:rgba(46,224,90,0.1); border-color:var(--green); color:var(--green-dk); }

/* Related services */
.sp-related { padding:100px 0; background:var(--g50); }
.sp-rel-head { text-align:center; margin-bottom:56px; }
.sp-rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sp-rel-card { background:var(--white); border:1px solid var(--g200); border-radius:var(--r-md); padding:28px 24px; display:flex; flex-direction:column; gap:12px; transition:var(--ease); }
.sp-rel-card:hover { border-color:var(--green); box-shadow:0 8px 28px rgba(46,224,90,0.1); transform:translateY(-4px); }
.sp-rel-icon { width:50px; height:50px; background:rgba(46,224,90,0.1); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--green-dk); transition:var(--ease); }
.sp-rel-card:hover .sp-rel-icon { background:var(--green); color:var(--navy); }
.sp-rel-name { font-size:15px; font-weight:800; color:var(--navy); }
.sp-rel-desc { font-size:13px; color:var(--g500); line-height:1.6; flex:1; }
.sp-rel-link { display:flex; align-items:center; gap:6px; color:var(--green-dk); font-size:12px; font-weight:700; transition:var(--ease); }
.sp-rel-link:hover { gap:10px; color:var(--green); }

/* FAQ (service pages) */
.sp-faq { padding:100px 0; background:var(--white); }
.sp-faq-head { text-align:center; margin-bottom:60px; }
.sp-faq-head .section-sub { margin:0 auto; }
.sp-faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r-md); overflow:hidden; transition:var(--ease); }
.faq-item.open { border-color:var(--green); background:var(--white); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer; gap:16px; }
.faq-q span { font-size:15px; font-weight:700; color:var(--navy); line-height:1.4; }
.faq-arrow { width:30px; height:30px; background:var(--g200); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--g500); font-size:13px; flex-shrink:0; transition:var(--ease); }
.faq-item.open .faq-arrow { background:var(--green); color:var(--navy); transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-a-inner { padding:0 24px 20px; font-size:14px; color:var(--g500); line-height:1.75; }

/* Responsive service pages */
@media(max-width:900px){
    .sp-ov-grid { grid-template-columns:1fr; gap:48px; }
    .sp-ov-img { height:300px; }
    .sp-stats-row { grid-template-columns:repeat(2,1fr); }
    .ben-grid { grid-template-columns:repeat(2,1fr); }
    .sp-feat-grid { grid-template-columns:1fr; }
    .sp-feat-grid.rev { direction:ltr; }
    .sp-feat-img { height:280px; }
    .sp-steps { grid-template-columns:repeat(2,1fr); gap:40px; }
    .sp-steps::after { display:none; }
    .sp-tech-inner { flex-direction:column; }
    .sp-tech-left { flex:none; }
    .sp-rel-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
    .ben-grid { grid-template-columns:1fr; }
    .sp-steps { grid-template-columns:1fr; }
    .sp-rel-grid { grid-template-columns:1fr; }
    .sp-stat-num { font-size:32px; }
}

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

:root {
    --green:       #2EE05A;
    --green-dk:    #1CB548;
    --green-gl:    rgba(46,224,90,0.12);
    --navy:        #0D1E35;
    --navy-mid:    #152840;
    --navy-lt:     #1C3454;
    --dark:        #060D18;
    --white:       #FFFFFF;
    --g50:         #F8FAFC;
    --g100:        #F1F5F9;
    --g200:        #E2E8F0;
    --g300:        #CBD5E1;
    --g400:        #94A3B8;
    --g500:        #64748B;
    --g600:        #475569;
    --g700:        #334155;
    --g800:        #1E293B;
    --font:        'Inter', sans-serif;
    --r-sm:        8px;
    --r-md:        14px;
    --r-lg:        20px;
    --ease:        all 0.3s cubic-bezier(0.4,0,0.2,1);
}

html  { scroll-behavior: smooth; }
body  { font-family: var(--font); background: var(--white); color: var(--g800); line-height: 1.6; overflow-x: hidden; }
img   { display: block; max-width: 100%; }
a     { text-decoration: none; }
ul    { list-style: none; }

/* ============================================================
   TYPOGRAPHY UTILITIES
============================================================ */
.tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(46,224,90,0.1); color: var(--green-dk);
    font-size: 12px; font-weight: 700; padding: 7px 16px;
    border-radius: 100px; letter-spacing: 0.07em;
    text-transform: uppercase; margin-bottom: 18px;
}
.tag::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; }

.section-title {
    font-size: clamp(28px,4vw,46px); font-weight: 900;
    color: var(--navy); line-height: 1.12;
    letter-spacing: -0.02em; margin-bottom: 16px;
}
.section-title span { color: var(--green); }

.section-sub {
    font-size: 17px; color: var(--g500); line-height: 1.75; max-width: 580px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font); font-weight: 700; font-size: 14px;
    padding: 14px 28px; border-radius: var(--r-sm);
    border: none; cursor: pointer; transition: var(--ease);
    white-space: nowrap;
}
.btn-green  { background: var(--green); color: var(--navy); }
.btn-green:hover { background: var(--green-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(46,224,90,0.35); }

.btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.28); }
.btn-outline-white:hover { border-color: var(--green); color: var(--green); }

.btn-navy  { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--dark); transform: translateY(-2px); }

.btn-outline-navy { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */
.img-ph {
    background: linear-gradient(135deg,#dde4ef,#c8d3e8);
    border: 2px dashed #94a3b8; border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; text-align: center;
    padding: 24px 16px; color: #64748b;
}
.img-ph .phi { width:52px; height:52px; background:rgba(100,116,139,.22); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.img-ph strong { font-size:13px; color:#475569; }
.img-ph span   { font-size:11px; color:#94a3b8; line-height:1.5; }

/* ============================================================
   HEADER / NAV
============================================================ */
#header {
    position: fixed; top:0; left:0; right:0; z-index:1000; transition: var(--ease);
}
#header.scrolled { background: var(--navy); box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px; max-width: 1200px; margin: 0 auto; gap: 24px;
}
.nav-logo img { height: 44px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
    color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 500;
    transition: var(--ease); position: relative;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-4px; left:0;
    width:0; height:2px; background:var(--green); transition: var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-phone {
    display: flex; align-items: center; gap: 7px;
    color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; transition: var(--ease);
}
.nav-phone:hover { color: var(--green); }

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

/* Mobile menu overlay */
#mobileMenu {
    display:none; position:fixed; inset:0; background:var(--navy);
    z-index:1100; flex-direction:column; align-items:center; justify-content:center; gap:34px;
}
#mobileMenu.open { display:flex; }
#mobileMenu a { color:var(--white); font-size:22px; font-weight:700; transition:var(--ease); }
#mobileMenu a:hover { color:var(--green); }
.mob-close { position:absolute; top:24px; right:28px; background:none; border:none; color:var(--white); font-size:26px; cursor:pointer; transition:var(--ease); }
.mob-close:hover { color:var(--green); }

/* ============================================================
   PAGE BANNER (inner pages)
============================================================ */
.page-banner {
    background: var(--dark); padding: 150px 0 80px; position: relative; overflow: hidden;
}
.page-banner::before {
    content:''; position:absolute; inset:0;
    background-image: linear-gradient(rgba(46,224,90,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(46,224,90,0.04) 1px,transparent 1px);
    background-size: 56px 56px; pointer-events:none;
}
.pb-glow {
    position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none;
    width:500px; height:500px; background:var(--green); opacity:0.1; top:-200px; right:-100px;
}
.page-banner .container { position:relative; z-index:2; }
.pb-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.pb-breadcrumb a { color:rgba(255,255,255,0.45); font-size:13px; font-weight:500; transition:var(--ease); }
.pb-breadcrumb a:hover { color:var(--green); }
.pb-breadcrumb span { color:rgba(255,255,255,0.25); font-size:13px; }
.pb-breadcrumb em { color:var(--green); font-size:13px; font-weight:600; font-style:normal; }
.page-banner h1 {
    font-size: clamp(36px,5vw,60px); font-weight:900; color:var(--white);
    line-height:1.1; letter-spacing:-0.03em; margin-bottom:16px;
}
.page-banner h1 span { color:var(--green); }
.page-banner p { font-size:18px; color:rgba(255,255,255,0.55); max-width:560px; line-height:1.7; }

/* ============================================================
   MARQUEE
============================================================ */
.marquee-wrap { background:var(--navy); padding:28px 0; overflow:hidden; }
.marquee-label { text-align:center; font-size:12px; font-weight:700; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px; }
.marquee-track { display:flex; gap:56px; width:max-content; animation:scroll-x 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes scroll-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-ph { width:130px; height:44px; background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.14); border-radius:6px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.3); font-size:10px; font-weight:600; flex-shrink:0; }

/* ============================================================
   SERVICES CARDS
============================================================ */
.svc-card {
    background:var(--white); border:1px solid var(--g200); border-radius:var(--r-md);
    padding:28px 22px; display:flex; flex-direction:column; gap:14px; transition:var(--ease);
}
.svc-card:hover { border-color:var(--green); box-shadow:0 10px 36px rgba(46,224,90,0.1); transform:translateY(-4px); }
.svc-icon { width:54px; height:54px; background:rgba(46,224,90,0.1); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--green-dk); transition:var(--ease); }
.svc-card:hover .svc-icon { background:var(--green); color:var(--navy); }
.svc-name { font-size:15px; font-weight:800; color:var(--navy); line-height:1.3; }
.svc-desc { font-size:13.5px; color:var(--g500); line-height:1.65; flex:1; }
.svc-link { display:flex; align-items:center; gap:6px; color:var(--green-dk); font-size:13px; font-weight:700; transition:var(--ease); }
.svc-link:hover { gap:10px; color:var(--green); }

/* ============================================================
   CTA BAND
============================================================ */
.cta-band { padding:90px 0; background:var(--green); position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(13,30,53,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,30,53,0.07) 1px,transparent 1px); background-size:40px 40px; }
.cta-inner { text-align:center; position:relative; z-index:2; }
.cta-title { font-size:clamp(28px,4vw,46px); font-weight:900; color:var(--navy); margin-bottom:14px; letter-spacing:-0.02em; }
.cta-sub { font-size:18px; color:rgba(13,30,53,0.65); margin-bottom:44px; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT FORM
============================================================ */
.contact-form { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r-lg); padding:48px 44px; }
.form-title { font-size:22px; font-weight:900; color:var(--navy); margin-bottom:6px; }
.form-sub { font-size:14px; color:var(--g500); margin-bottom:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { margin-bottom:18px; }
.flabel { display:block; font-size:12px; font-weight:700; color:var(--g600); margin-bottom:7px; text-transform:uppercase; letter-spacing:0.06em; }
.finput, .ftextarea, .fselect {
    width:100%; padding:12px 15px; border:2px solid var(--g200); border-radius:var(--r-sm);
    font-family:var(--font); font-size:14px; color:var(--g800); background:var(--white);
    outline:none; transition:var(--ease); appearance:none;
}
.finput:focus,.ftextarea:focus,.fselect:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(46,224,90,0.1); }
.ftextarea { min-height:120px; resize:vertical; }
.fsubmit { width:100%; padding:15px; background:var(--navy); color:var(--white); font-weight:800; font-size:14px; border:none; border-radius:var(--r-sm); cursor:pointer; font-family:var(--font); transition:var(--ease); display:flex; align-items:center; justify-content:center; gap:8px; }
.fsubmit:hover { background:var(--green); color:var(--navy); }

/* ============================================================
   FOOTER
============================================================ */
footer { background:var(--dark); padding:80px 0 0; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:60px; }
.foot-brand img { height:44px; margin-bottom:20px; }
.foot-brand p { font-size:13.5px; color:rgba(255,255,255,0.42); line-height:1.7; margin-bottom:26px; }
.socials { display:flex; gap:10px; }
.social { width:38px; height:38px; background:rgba(255,255,255,0.07); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); font-size:15px; transition:var(--ease); }
.social:hover { background:var(--green); color:var(--navy); }
.foot-col-title { font-size:12px; font-weight:800; color:var(--white); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px; }
.foot-links { display:flex; flex-direction:column; gap:13px; }
.foot-links a { color:rgba(255,255,255,0.45); font-size:13.5px; transition:var(--ease); }
.foot-links a:hover { color:var(--green); padding-left:4px; }
.foot-bottom { border-top:1px solid rgba(255,255,255,0.07); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-bottom p { font-size:12.5px; color:rgba(255,255,255,0.35); }
.foot-bot-links { display:flex; gap:24px; }
.foot-bot-links a { color:rgba(255,255,255,0.35); font-size:12.5px; transition:var(--ease); }
.foot-bot-links a:hover { color:var(--green); }

/* WhatsApp float */
.wa-float { position:fixed; bottom:32px; right:32px; width:58px; height:58px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:white; z-index:900; box-shadow:0 8px 28px rgba(37,211,102,0.45); transition:var(--ease); }
.wa-float:hover { transform:scale(1.1); }

/* Scroll to top */
.scroll-top { position:fixed; bottom:100px; right:34px; width:42px; height:42px; background:var(--navy); border:1px solid rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:16px; cursor:pointer; z-index:900; transition:var(--ease); opacity:0; pointer-events:none; }
.scroll-top.visible { opacity:1; pointer-events:auto; }
.scroll-top:hover { background:var(--green); color:var(--navy); }

/* Fade-up animation */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1024px) {
    .foot-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:800px) {
    .nav-links,.nav-phone { display:none; }
    .hamburger { display:flex; }
    .foot-grid { grid-template-columns:1fr; }
    .foot-bottom { flex-direction:column; text-align:center; }
    .contact-form { padding:32px 24px; }
    .form-row { grid-template-columns:1fr; }
}
@media(max-width:480px) {
    .page-banner { padding:120px 0 60px; }
}

/* ============================================================
   MEGA MENU
============================================================ */
.nav-has-mega { position: relative; }
.nav-has-mega > a { display: inline-flex !important; align-items: center; gap: 5px; cursor: pointer; }
.mega-chevron { font-size: 9px; opacity: 0.7; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
.nav-has-mega:hover .mega-chevron,
.nav-has-mega:focus-within .mega-chevron { transform: rotate(180deg); opacity: 1; }
.nav-has-mega > a::after { display: none !important; }

.mega-menu {
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    transform: translateY(10px);
    width: 920px;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(46,224,90,0.07);
    padding: 28px 28px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    z-index: 1200;
    overflow: hidden;
}
/* subtle grid bg */
.mega-menu::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(46,224,90,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(46,224,90,0.03) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}
/* arrow tip */
.mega-menu::after {
    content: '';
    position: absolute;
    top: -7px; left: var(--arrow-left, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: 13px; height: 13px;
    background: var(--navy);
    border-left: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.mega-menu.mega-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* grid of 4 columns */
.mega-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    position: relative; z-index: 1;
}

.mega-col { padding-bottom: 20px; }

.mega-col-title {
    font-size: 10px; font-weight: 800;
    color: var(--green); text-transform: uppercase; letter-spacing: 0.1em;
    padding: 2px 10px 10px;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mega-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background 0.16s ease;
    position: relative; z-index: 1;
}
.mega-item:hover { background: rgba(255,255,255,0.06); }

.mega-icon {
    width: 36px; height: 36px;
    background: rgba(46,224,90,0.1);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--green);
    flex-shrink: 0; transition: var(--ease);
}
.mega-item:hover .mega-icon { background: var(--green); color: var(--navy); }

.mega-name  { display: block; font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.25; }
.mega-desc  { display: block; font-size: 11px; color: rgba(255,255,255,0.36); margin-top: 2px; line-height: 1.3; }

/* footer strip */
.mega-footer {
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 4px -28px 0;
    padding: 14px 28px;
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
    background: rgba(0,0,0,0.18);
}
.mega-footer-note { font-size: 12px; color: rgba(255,255,255,0.32); display: flex; align-items: center; gap: 7px; }
.mega-footer-note i { color: var(--green); font-size: 11px; }
.mega-all-link {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--green); color: var(--navy);
    font-size: 12px; font-weight: 800;
    padding: 9px 18px; border-radius: var(--r-sm);
    transition: var(--ease);
}
.mega-all-link:hover { background: var(--green-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(46,224,90,0.3); }

/* ── Mobile Services sub-menu ── */
.mob-sub-menu {
    display: none; flex-direction: column;
    width: 100%; margin-top: 6px;
    background: rgba(0,0,0,0.25); border-radius: 10px; overflow: hidden;
}
.mob-sub-menu.open { display: flex; }
.mob-svc-toggle { display: flex; align-items: center; gap: 8px; }
.mob-svc-chevron { font-size: 12px; transition: transform 0.28s ease; }
.mob-sub-menu a {
    font-size: 15px !important; font-weight: 600 !important;
    color: rgba(255,255,255,0.72) !important;
    padding: 12px 20px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: var(--ease) !important;
}
.mob-sub-menu a:last-child { border-bottom: none; }
.mob-sub-menu a i { color: var(--green); width: 16px; text-align: center; font-size: 13px; }
.mob-sub-menu a:hover { color: var(--green) !important; background: rgba(46,224,90,0.06) !important; padding-left: 24px !important; }

/* ============================================================
   PREMIUM ANIMATIONS — animations.js companion styles
============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatYSlow {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(37,211,102,0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0   rgba(37,211,102,0); }
}
@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes gradient-x {
  0%,100% { background-position: 0%   50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes blink {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes scale-in {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Scroll-reveal base states ────────────────────────────── */
.fade-left  { opacity:0; transform: translateX(-36px); transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1); }
.fade-right { opacity:0; transform: translateX( 36px); transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1); }
.zoom-in    { opacity:0; transform: scale(0.9);         transition: opacity 0.6s  cubic-bezier(0.4,0,0.2,1), transform 0.6s  cubic-bezier(0.4,0,0.2,1); }
.fade-up    { opacity:0; transform: translateY(32px);   transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1); }

.fade-up.visible,
.fade-left.visible,
.fade-right.visible,
.zoom-in.visible {
  opacity:1; transform: translate(0) scale(1);
}

/* Stagger delay helpers */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.42s !important; }
.delay-6 { transition-delay: 0.52s !important; }

/* ── Section heading reveal underline ─────────────────────── */
.heading-reveal { position: relative; display: inline-block; }
.heading-reveal::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--green), transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0s; /* updated by JS */
}
.heading-reveal.heading-revealed::after {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s;
}

/* ── Animated gradient hero headline ──────────────────────── */
.gradient-text {
  background: linear-gradient(270deg, var(--green), #00c853, #69f0ae, var(--green));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-x 4s ease infinite;
}

/* ── Button shimmer ───────────────────────────────────────── */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -200% center;
  transition: none;
}
.btn-shimmer:hover::after {
  animation: shimmer-sweep 0.55s ease forwards;
}

/* ── Floating animation for hero visual / images ──────────── */
.float-y     { animation: floatY     4.5s ease-in-out infinite; }
.float-y-slow{ animation: floatYSlow 6s   ease-in-out infinite; }

/* ── Hero orbs enhanced ───────────────────────────────────── */
.hero-orb { will-change: transform; }

/* ── Navbar shrink on scroll ──────────────────────────────── */
#header.nav-shrunk {
  padding-top: 8px;
  padding-bottom: 8px;
}
#header.nav-shrunk .logo { transform: scale(0.92); }

/* ── WhatsApp float pulse ring ────────────────────────────── */
.wa-pulse { animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ── Card 3-D tilt — GPU layer ────────────────────────────── */
.svc-card, .testi-card, .ind-card, .ben-card {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ── Stats counter pop ────────────────────────────────────── */
.sp-stat-num, .stat-num {
  display: inline-block;
  transition: transform 0.15s ease;
}

/* ── Page-load entrance for hero content ──────────────────── */
.hero-content > * {
  animation: scale-in 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.25s; }
.hero-content > *:nth-child(4) { animation-delay: 0.35s; }
.hero-content > *:nth-child(5) { animation-delay: 0.45s; }

/* ── Smooth image hover zoom ──────────────────────────────── */
.img-ph {
  overflow: hidden;
}
.img-ph img {
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.img-ph:hover img { transform: scale(1.04); }

/* ── Service/ind card icon spin on hover ──────────────────── */
.svc-card:hover .svc-icon i,
.ind-card:hover .ind-icon i,
.sp-rel-card:hover .sp-rel-icon i {
  animation: spin-slow 0.6s ease;
}

/* ── FAQ item smooth reveal ───────────────────────────────── */
.faq-item { transition: box-shadow 0.3s ease; }
.faq-item.open { box-shadow: 0 4px 24px rgba(46,224,90,0.12); }

/* ── Marquee pause-on-hover already exists — speed up ──────── */
.marquee-track { animation-duration: 22s; }

/* ── Responsive: disable tilt/parallax on touch ──────────── */
@media (hover: none) {
  .svc-card, .testi-card, .ind-card, .ben-card {
    transform: none !important;
  }
}