/* =====================================================




   PumaPulse — Complete Design System (Fixed)




   ===================================================== */




@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');









:root {
  /* ── Light theme base ── */
  --bg:        #f5f6fa;
  --bg2:       #edeef5;
  --bg3:       #e0e4ef;
  --bg-light:  #f5f6fa;
  --bg-light2: #edeef5;
  --card:      #ffffff;
  --card-dark: #131a26;
  --card-dark2:#192031;
  --border:    #e0e4ef;
  --border-dark:#1e2a3c;
  --border2:   rgba(0,0,0,0.12);
  --text:      #1a1e2e;
  --ink:       #1a1e2e;
  --mid:       #4a5470;
  --dim:       #8a93b0;
  --muted:     rgba(26,30,46,0.55);
  --muted2:    rgba(26,30,46,0.75);
  /* ── Brand ── */
  --primary:   #c0202a;
  --accent:    #e0263a;
  --red:       #c0202a;
  --red2:      #e0263a;
  --red3:      #ff3b4e;
  --red-glow:  rgba(192,32,42,0.25);
  --green:     #0da678;
  --yellow:    #e8b800;
  --pd:        rgba(192,32,42,0.08);
  --ad:        rgba(224,38,58,0.08);
  --vd:        rgba(192,32,42,0.05);
  /* ── Gradients ── */
  --grad:      linear-gradient(135deg,#c0202a,#e0263a,#ff3b4e);
  --grad2:     linear-gradient(135deg,#ff3b4e,#c0202a);
  --grad3:     linear-gradient(135deg,#e0263a,#ff3b4e);
  /* ── Misc ── */
  --shadow:    0 8px 32px rgba(0,0,0,0.08);
  --nav-bg:    rgba(255,255,255,0.95);
  --input-bg:  #ffffff;
  --hero-ov:   linear-gradient(135deg,rgba(8,12,24,0.88) 0%,rgba(8,12,24,0.62) 60%,rgba(8,12,24,0.80) 100%);
  --page-ov:   linear-gradient(to right,rgba(8,12,24,0.90) 40%,rgba(8,12,24,0.48) 100%);
  --cta-ov:    linear-gradient(135deg,rgba(8,12,24,0.88) 0%,rgba(192,32,42,0.52) 100%);
  --process-line: linear-gradient(90deg,#c0202a,rgba(192,32,42,0.15));
  /* ── Fonts ── */
  --font:      'Inter', sans-serif;
  --display:   'Rajdhani', sans-serif;
  --body:      'Barlow', sans-serif;
  --cond:      'Barlow Condensed', sans-serif;
  --mono:      'Share Tech Mono', monospace;
  --rl:        6px;
}









/* ── Reset ── */




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




html{scroll-behavior:smooth}




body{background:var(--bg-light);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}




a{color:inherit;text-decoration:none}




img{max-width:100%;display:block;object-fit:cover}




ul{list-style:none}




video{display:block}









/* ── Layout ── */




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




.section{padding:110px 0}

/* ── Section dark (pumapulse-v2 dark sections) ── */

/* Tab styles for light sections */
.tab-row { display: flex; border: 1px solid var(--border); width: fit-content; margin-top: 40px; overflow: hidden; }
.tab { font-family: var(--cond,sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 10px 20px; border: none; background: none; cursor: pointer; color: var(--mid,#4a5470); border-right: 1px solid var(--border); transition: all .15s; }
.tab:last-child { border-right: none; }
.tab.on, .tab.active { background: var(--red,#c0202a); color: #fff; }
.tab:not(.on):not(.active):hover { background: var(--bg2); color: var(--ink,#1a1e2e); }


/* Sol-card light section styles */
.sol-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 28px 24px;
  transition: background .2s, box-shadow .2s;
  position: relative;
}
.sol-card:hover { background: var(--bg2); box-shadow: 0 8px 28px rgba(192,32,42,0.08); }
.sol-t { font-family: var(--display,sans-serif); font-size: 15px; font-weight: 700; color: var(--ink,#1a1e2e); margin-bottom: 8px; }
.sol-d { font-size: 12.5px; line-height: 1.65; color: var(--mid,#4a5470); }

.section-dark {
  background: #0a0c12 !important;
  color: #fff !important;
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4 { color: #fff; }
.section-dark p { color: rgba(26,30,46,0.6); }
.section-dark .eyebrow { color: rgba(192,32,42,0.9); }
.section-dark .card,.section-dark .svc,.section-dark .section-dark 
.section-dark .card p,.section-dark .svc-d,.section-dark .section-dark 
.section-dark .border,.section-dark hr { border-color: rgba(255,255,255,0.08); }
.section-dark .tag,.section-dark .w-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(200,215,235,0.5);
}
.section-dark .section-dark 
.section-dark .tab { color: rgba(200,215,235,0.4); }
.section-dark .tab.on,.section-dark .tab.active { background: #c0202a; color: #fff; }
.section-dark .section-dark 
.section-dark .work-rows { border-color: rgba(255,255,255,0.08); }
.section-dark .w-row { border-color: rgba(255,255,255,0.06); }
.section-dark .w-name { color: #fff; }
.section-dark .w-tag { color: #e0263a; }
.section-dark .w-quote { color: rgba(200,215,235,0.5); }
.section-dark .testi-n { color: #fff; }
.section-dark .testi-r { color: rgba(200,215,235,0.65); }
.section-dark .tech-chip span { color: rgba(200,215,235,0.65); }
.section-dark .tech-chip img { filter: grayscale(1) brightness(0.5); }
.section-dark .tech-chip:hover img { filter: grayscale(0) brightness(1); }
.section-dark .metrics-wrap,.section-dark .metric { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.section-dark .metric-val { color: #fff; }
.section-dark .metric-lbl,.section-dark .metric-sub { color: rgba(200,215,235,0.65); }
.section-dark .lp-cell { background: rgba(10,12,18,0.8); }
.section-dark .lp-cell-val { color: #fff; }
.section-dark .section-dark 
.section-dark .portfolio-filter .btn.active { background: #c0202a; color: #fff; border-color: #c0202a; }



.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p,
.section-dark .eyebrow{
  color:inherit;
}
.section-dark .eyebrow{
  color:rgba(192,32,42,0.9);
}
.section-dark p{
  color:rgba(26,30,46,0.6);
}
.section-dark .card,
.section-dark .svc,
.section-dark .sol-card{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.08);
  color:#fff;
}
.section-dark .card p,
.section-dark .svc-d,
.section-dark .sol-d{
  color:rgba(200,215,235,0.55);
}





.section-sm{padding:72px 0}









/* ── Typography ── */




h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;line-height:1.1;letter-spacing:-0.03em}




h2{font-size:clamp(1.9rem,3.5vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-0.025em}




h3{font-size:1.3rem;font-weight:700;line-height:1.3}




h4{font-size:1rem;font-weight:600}




p{color:var(--muted2);line-height:1.75}




.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}




.grad-text2{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}




.grad-text3{background:var(--grad3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}




.text-center{text-align:center}




.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}




.eyebrow::before{content:'';width:20px;height:2px;background:var(--accent);border-radius:2px;flex-shrink:0}




.section-desc{max-width:560px;margin:0 auto 52px;font-size:1.05rem;color:var(--muted2)}









/* ── Buttons ── */




.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:50px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.25s ease;border:none;font-family:var(--font);letter-spacing:0.01em;white-space:nowrap;text-decoration:none}




.btn-primary{background:var(--primary);color:#fff}




.btn-primary:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,130,246,0.4)}




.btn-accent{background:var(--accent);color:#fff}




.btn-accent:hover{background:#c0202a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(192,32,42,0.4)}




.btn-outline{background:transparent;border:1.5px solid var(--border2);color:var(--text)}




.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--ad);transform:translateY(-2px)}




.btn-ghost{background:rgba(255,255,255,0.08);color:#fff;border:1.5px solid rgba(255,255,255,0.28)}



.btn-ghost:hover{background:rgba(255,255,255,0.14);color:#fff;border-color:rgba(255,255,255,0.5)}




.btn-white{background:#fff;color:#080c18;font-weight:700}




.btn-white:hover{background:#e2e8f0;transform:translateY(-2px)}




.btn-sm{padding:9px 20px;font-size:0.83rem}




.btn-lg{padding:15px 34px;font-size:0.97rem}









/* ══════════════════════════════════════════




   NAVBAR — Fixed, full-width, proper layout




   Always dark — theme.css handles overrides




══════════════════════════════════════════ */




.navbar{




  position:fixed;top:0;left:0;right:0;z-index:9999;




  transition:background 0.35s ease,border-color 0.35s ease;




  border-bottom:1px solid transparent;




  background:transparent;




}




.navbar.scrolled{




  background:rgba(8,12,24,0.96);




  backdrop-filter:blur(20px);




  -webkit-backdrop-filter:blur(20px);




  border-bottom-color:rgba(255,255,255,0.07);




  box-shadow:0 2px 24px rgba(0,0,0,0.4);




}




.navbar-inner{




  display:flex;




  align-items:center;




  justify-content:space-between;




  height:68px;




  max-width:1200px;




  margin:0 auto;




  padding:0 28px;




  gap:24px;




}




/* Logo */




.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}




.nav-logo img{height:38px;width:auto;object-fit:contain;display:block}




/* Nav links — always dark (theme.css overrides with !important) */




.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}




.nav-links>li{position:relative}




.nav-links>li>a{




  display:flex;align-items:center;gap:5px;




  padding:8px 14px;border-radius:50px;




  font-size:0.87rem;font-weight:500;




  color:var(--ink,#1a1e2e);




  transition:all 0.2s;




  white-space:nowrap;




  text-decoration:none;




}




.nav-links>li>a:hover,.nav-links>li>a.active{color:#fff;background:rgba(255,255,255,0.08)}




/* Dropdown arrow */




.nav-links .dropdown>a::after{




  content:'';display:inline-block;




  width:8px;height:5px;




  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(240,244,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;




  transition:transform 0.2s;




  flex-shrink:0;




}




.nav-links .dropdown:hover>a::after{transform:rotate(180deg)}




/* Dropdown menu — always dark */




.dropdown-menu{




  position:absolute;top:calc(100% + 12px);left:50%;




  transform:translateX(-50%);




  background:#0a0f1e;




  border:1px solid rgba(255,255,255,0.08);




  border-radius:4px;padding:8px;




  min-width:230px;




  opacity:0;visibility:hidden;




  transition:all 0.22s ease;




  box-shadow:0 24px 64px rgba(0,0,0,0.55);




  z-index:10000;




}




.nav-links .dropdown:hover .dropdown-menu{opacity:1;visibility:visible;top:calc(100% + 6px)}




.dropdown-menu a{




  display:flex;align-items:center;gap:10px;




  padding:10px 14px;border-radius:3px;




  font-size:0.86rem;color:rgba(240,244,255,0.62);




  transition:all 0.18s;text-decoration:none;




}




.dropdown-menu a:hover{background:rgba(255,255,255,0.06);color:#fff}




.dm-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.15);flex-shrink:0;transition:background 0.2s}




.dropdown-menu a:hover .dm-dot{background:#10b981}




/* CTA */




.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}




/* Hamburger — always light colored */




.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border-radius:2px;flex-shrink:0}




.hamburger span{width:22px;height:2px;background:rgba(240,244,255,0.75);border-radius:2px;transition:all 0.3s;display:block}




.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}




.hamburger.open span:nth-child(2){opacity:0}




.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}









/* ══════════════════════════════════════════




   HERO — Full viewport, video background




══════════════════════════════════════════ */




/* ===================== HERO ===================== */
.hero{
  min-height:100svh;padding-top:62px;position:relative;overflow:hidden;
  background:url('../img/Background.png') center 20% / cover no-repeat,linear-gradient(155deg,#0a0c12 0%,#141028 45%,#1a0a10 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-orb1{
  position:absolute;top:-180px;left:-120px;width:900px;height:700px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(192,32,42,0.2) 0%,transparent 65%);
}
.hero-orb2{
  position:absolute;bottom:-200px;right:-80px;width:700px;height:600px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(100,60,200,0.1) 0%,transparent 65%);
}
.hero-content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;gap:60px;align-items:center;
  max-width:1200px;margin:0 auto;padding:80px 44px 0;
}
.hero-left{color:#fff}
.h-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono,'Share Tech Mono',monospace);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(192,32,42,0.9);margin-bottom:22px;
  opacity:0;animation:rise .6s ease .1s forwards;
}
.h-eyebrow::before{content:'//';margin-right:4px;color:rgba(255,255,255,0.2)}
h1{
  font-family:var(--display,'Rajdhani',sans-serif);font-weight:700;
  font-size:clamp(50px,5.8vw,84px);line-height:.93;letter-spacing:-.01em;
  opacity:0;animation:rise .65s ease .18s forwards;
}
h1 .accent{color:#e0263a}
.hero-left h1 .dim-text{color:rgba(255,255,255,0.28);display:block;font-weight:400}
.h-sub{
  margin-top:22px;max-width:490px;font-size:16px;line-height:1.8;font-weight:300;
  color:rgba(200,210,230,0.75);
  opacity:0;animation:rise .6s ease .28s forwards;
}
.h-btns{
  margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;
  opacity:0;animation:rise .6s ease .38s forwards;
}
.btn-primary{
  font-family:var(--cond,'Barlow Condensed',sans-serif);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#c0202a;color:#fff;border:none;padding:13px 30px;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:background .15s,box-shadow .2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{background:#e0263a;box-shadow:0 0 28px rgba(192,32,42,0.5)}
.btn-outline-light{
  font-family:var(--cond,'Barlow Condensed',sans-serif);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.2);
  padding:12px 28px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn-outline-light:hover{color:#fff;border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05)}
.h-stats{
  margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.1);
  display:flex;gap:0;
  opacity:0;animation:rise .6s ease .48s forwards;
}
.h-stat{padding-right:32px;border-right:1px solid rgba(255,255,255,0.1)}
.h-stat:last-child{border-right:none;padding-left:32px;padding-right:0}
.h-stat:not(:first-child){padding-left:32px}
.h-stat-val{font-family:var(--display,'Rajdhani',sans-serif);font-weight:700;font-size:38px;line-height:1;color:#fff}
.h-stat-val span{color:#e0263a}
.h-stat-lbl{font-family:var(--mono,'Share Tech Mono',monospace);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,210,230,0.45);margin-top:4px}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.ticker-wrap{overflow:hidden;padding:20px 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}




.ticker-track{display:flex;gap:64px;animation:ticker 32s linear infinite;width:max-content}




.ticker-track:hover{animation-play-state:paused}




@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}




.ticker-item{font-size:0.78rem;font-weight:600;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:10px;letter-spacing:0.08em;text-transform:uppercase}




.ticker-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.7;flex-shrink:0}









/* ── Stats row (standalone) ── */




.stats-row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}




.stat-cell{padding:44px 28px;text-align:center;border-right:1px solid var(--border)}




.stat-cell:last-child{border-right:none}




.stat-num{font-size:2.6rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}




.stat-cell p{font-size:0.85rem;color:rgba(26,30,46,0.6)}









/* ── Service Cards ── */




.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}




.svc-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all 0.35s ease}




.svc-card:hover{border-color:var(--border2);transform:translateY(-7px);box-shadow:var(--shadow)}




.svc-img{height:210px;overflow:hidden;position:relative}




.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.55s ease}




.svc-card:hover .svc-img img{transform:scale(1.07)}




.svc-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,var(--card) 100%)}




.svc-body{padding:26px 28px 30px}




.svc-body h3{font-size:1.08rem;margin-bottom:9px;color:var(--text)}




.svc-body p{font-size:0.87rem;margin-bottom:18px}




.svc-link{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:0.83rem;font-weight:600;transition:gap 0.2s;text-decoration:none}




.svc-card:hover .svc-link{gap:11px}




.svc-link svg{width:13px;height:13px;flex-shrink:0}









/* ── Solutions Tabs ── */




.sol-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}




.sol-tab{padding:9px 22px;border-radius:50px;border:1px solid var(--border);background:transparent;color:var(--muted2);font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.22s;font-family:var(--font)}




.sol-tab.active,.sol-tab:hover{background:var(--ad);border-color:rgba(192,32,42,0.3);color:var(--accent)}




.sol-panel{display:none}




.sol-panel.active{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}




.sol-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all 0.3s}




.sol-card:hover{border-color:var(--border2);transform:translateY(-5px);box-shadow:var(--shadow)}




.sol-card-img{height:155px;overflow:hidden}




.sol-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}




.sol-card:hover .sol-card-img img{transform:scale(1.07)}




.sol-card-body{padding:20px 22px 22px}




.sol-card-body h4{font-size:0.97rem;margin-bottom:7px;color:var(--text)}




.sol-card-body p{font-size:0.83rem;margin-bottom:12px}




.sol-card-body a{color:var(--accent);font-size:0.81rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;text-decoration:none}









/* ── Split / Why ── */




.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}




.split-img{position:relative;border-radius:4px;overflow:hidden}




.split-img img{width:100%;height:500px;object-fit:cover;border-radius:4px;display:block}




.split-badge{position:absolute;bottom:24px;left:24px;background:rgba(8,12,24,0.88);backdrop-filter:blur(14px);border:1px solid var(--border2);border-radius:4px;padding:16px 20px}




.split-badge .num{font-size:1.9rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}




.split-badge p{font-size:0.78rem;color:var(--muted2);margin:4px 0 0}




.why-list{display:flex;flex-direction:column;gap:14px}




.why-item{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:4px;transition:border-color 0.25s}




.why-item:hover{border-color:var(--border2)}




.why-item-img{width:50px;height:50px;min-width:50px;border-radius:3px;overflow:hidden}




.why-item-img img{width:100%;height:100%;object-fit:cover}




.why-item h4{margin-bottom:4px;font-size:0.97rem}




.why-item p{font-size:0.85rem}









/* ── Process ── */




.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}




.process-row::before{content:'';position:absolute;top:42px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:0.3;z-index:0}




.process-step{text-align:center;padding:0 18px;position:relative;z-index:1}




.step-circle{width:84px;height:84px;border-radius:50%;background:var(--card);border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--primary);margin:0 auto 22px;position:relative}




.step-circle::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(59,130,246,0.12)}




.process-step h4{margin-bottom:8px;font-size:0.97rem}




.process-step p{font-size:0.83rem}









/* ── Testimonials ── */




.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}




.testi-card{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:32px;transition:all 0.3s}




.testi-card:hover{border-color:var(--border2);transform:translateY(-4px)}




.stars{display:flex;gap:3px;margin-bottom:18px}




.stars span{width:14px;height:14px;background:#fbbf24;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);flex-shrink:0}




.testi-card blockquote{font-size:0.93rem;color:var(--muted2,rgba(26,30,46,0.75));line-height:1.75;margin-bottom:24px;font-style:italic}




.testi-author{display:flex;align-items:center;gap:12px}




.testi-photo{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--border2);flex-shrink:0}




.testi-photo img{width:100%;height:100%;object-fit:cover}




.testi-name{font-weight:700;font-size:0.9rem;color:var(--text)}




.testi-role{font-size:0.76rem;color:var(--muted);margin-top:2px}









/* ── CTA Banner ── */




.cta-banner{position:relative;border-radius:4px;overflow:hidden;padding:96px 56px;text-align:center}




.cta-bg{position:absolute;inset:0;z-index:0}




.cta-bg img{width:100%;height:100%;object-fit:cover}




.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,12,24,0.90) 0%,rgba(59,130,246,0.55) 100%)}




.cta-content{position:relative;z-index:1}




.cta-content h2{margin-bottom:16px;color:#fff}




.cta-content p{margin-bottom:36px;font-size:1.05rem;color:rgba(255,255,255,0.72)}




.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}









/* ── Footer — see WONDERFUL FOOTER section below ── */









/* ── Page Hero (inner pages) ── */




.page-hero{min-height:460px;display:flex;align-items:flex-end;position:relative;overflow:hidden}




.page-hero-bg{position:absolute;inset:0}




.page-hero-bg img{width:100%;height:100%;object-fit:cover}




.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,12,24,0.94) 40%,rgba(8,12,24,0.55) 100%)}




.page-hero-content{position:relative;z-index:1;padding:80px 0 68px}




.breadcrumb{display:flex;align-items:center;gap:7px;font-size:0.78rem;color:var(--muted);margin-bottom:14px}




.breadcrumb a{color:var(--accent);text-decoration:none}




.page-hero h1{margin-bottom:16px;color:#fff;max-width:680px}




.page-hero p{max-width:560px;font-size:1.05rem;margin-bottom:32px;color:rgba(255,255,255,0.65)}









/* ── Blog ── */




.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}




.blog-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all 0.35s}




.blog-card:hover{transform:translateY(-7px);border-color:var(--border2);box-shadow:var(--shadow)}




.blog-thumb{height:215px;overflow:hidden}




.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.55s}




.blog-card:hover .blog-thumb img{transform:scale(1.07)}




.blog-body{padding:24px}




.blog-tag{display:inline-block;background:var(--ad);color:var(--accent);font-size:0.7rem;font-weight:700;padding:4px 12px;border-radius:50px;margin-bottom:12px;letter-spacing:0.06em;text-transform:uppercase}




.blog-card h3{font-size:1.02rem;margin-bottom:9px;line-height:1.45;color:var(--text)}




.blog-card p{font-size:0.85rem;margin-bottom:16px}




.blog-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.76rem;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}









/* ── Contact ── */




.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:68px;align-items:start}




.contact-info{display:flex;flex-direction:column;gap:14px}




.contact-item{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:4px;transition:border-color 0.22s}




.contact-item:hover{border-color:var(--border2)}




.contact-item-img{width:48px;height:48px;min-width:48px;border-radius:3px;overflow:hidden}




.contact-item-img img{width:100%;height:100%;object-fit:cover}




.contact-item h4{margin-bottom:3px;font-size:0.93rem;color:var(--text)}




.contact-item p{font-size:0.85rem}




.contact-form{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:40px}




.form-group{margin-bottom:20px}




.form-group label{display:block;font-size:0.81rem;font-weight:600;margin-bottom:8px;color:var(--muted2);letter-spacing:0.03em}




.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:13px 16px;color:var(--text);font-size:0.88rem;font-family:var(--font);transition:border-color 0.2s;outline:none;-webkit-appearance:none}




.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(192,32,42,0.08)}




.form-group textarea{resize:vertical;min-height:130px}




.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}









/* ── Team ── */




.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}




.team-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all 0.35s}




.team-card:hover{border-color:var(--border2);transform:translateY(-6px);box-shadow:var(--shadow)}




.team-avatar{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}




.team-initials{font-size:3rem;font-weight:800;color:#fff;letter-spacing:-2px;position:relative;z-index:2}




.team-avatar-icon{position:absolute;bottom:-10px;right:-10px;width:80px;height:80px;opacity:0.25}




.team-avatar-icon svg{width:100%;height:100%}




.team-info{padding:20px 22px 24px}




.team-info h4{margin-bottom:3px;color:var(--text)}




.team-role{font-size:0.78rem;color:var(--accent);font-weight:600;margin-bottom:7px}




.team-info p{font-size:0.81rem}









/* ── Values ── */




.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}




.value-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all 0.3s}




.value-card:hover{border-color:var(--border2);transform:translateY(-4px)}




.value-img{height:175px;overflow:hidden}




.value-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}




.value-card:hover .value-img img{transform:scale(1.06)}




.value-body{padding:24px}




.value-body h3{margin-bottom:9px;font-size:1.05rem}









/* ── Careers ── */




.jobs-list{display:flex;flex-direction:column;gap:12px}




.job-card{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:all 0.28s}




.job-card:hover{border-color:var(--border2);transform:translateX(5px);box-shadow:var(--shadow)}




.job-info h4{font-size:1rem;margin-bottom:8px;color:var(--text)}




.job-tags{display:flex;gap:7px;flex-wrap:wrap}




.jtag{font-size:0.72rem;font-weight:600;padding:4px 11px;border-radius:50px}




.jtag-dept{background:var(--ad);color:var(--accent)}




.jtag-type{background:var(--vd);color:var(--purple)}




.jtag-loc{background:rgba(255,255,255,0.05);color:var(--muted2)}




.dept-label{font-size:0.68rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim,#8a93b0);margin:36px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}




.dept-label:first-child{margin-top:0}




.perks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}




.perk-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all 0.3s}




.perk-card:hover{border-color:var(--border2);transform:translateY(-4px)}




.perk-img{height:175px;overflow:hidden}




.perk-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}




.perk-card:hover .perk-img img{transform:scale(1.06)}




.perk-body{padding:22px}




.perk-body h4{margin-bottom:7px;color:var(--text)}




.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}




.life-img{border-radius:4px;overflow:hidden;aspect-ratio:4/3}




.life-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}




.life-img:hover img{transform:scale(1.05)}




.life-img.tall{grid-row:span 2;aspect-ratio:auto}




.life-img.tall img{height:100%}




.apply-form{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:40px}




.upload-area{border:2px dashed var(--border);border-radius:3px;padding:28px;text-align:center;cursor:pointer;transition:all 0.3s}




.upload-area:hover{border-color:var(--accent);background:var(--ad)}




.upload-area p{font-size:0.86rem;margin-top:6px;color:var(--muted2)}




.upload-area span{font-size:0.76rem;color:var(--muted)}




.step-badge{width:22px;height:22px;border-radius:50%;background:var(--ad);border:1px solid rgba(192,32,42,0.3);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--accent);flex-shrink:0}









/* ── Feature list ── */




.feature-list{display:flex;flex-direction:column;gap:14px}




.feature-item{display:flex;gap:15px;align-items:flex-start;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:13px;transition:border-color 0.25s}




.feature-item:hover{border-color:var(--border2)}




.feature-item-img{width:48px;height:48px;min-width:48px;border-radius:11px;overflow:hidden}




.feature-item-img img{width:100%;height:100%;object-fit:cover}




.feature-item h4{margin-bottom:3px;font-size:0.95rem}




.feature-item p{font-size:0.84rem}









/* ── Tech tags ── */




.tech-stack{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}




.tech-tag{background:var(--card);border:1px solid var(--border);color:var(--muted2);padding:8px 16px;border-radius:50px;font-size:0.81rem;font-weight:600;transition:all 0.2s}




.tech-tag:hover{border-color:var(--border2);color:var(--text)}









/* ── Reveal animations ── */




.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}




.reveal.revealed{opacity:1;transform:translateY(0)}




.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}




.reveal-left.revealed{opacity:1;transform:translateX(0)}




.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}




.reveal-right.revealed{opacity:1;transform:translateX(0)}




.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1)}




.reveal-stagger.revealed>*:nth-child(1){opacity:1;transform:none;transition-delay:0.05s}




.reveal-stagger.revealed>*:nth-child(2){opacity:1;transform:none;transition-delay:0.15s}




.reveal-stagger.revealed>*:nth-child(3){opacity:1;transform:none;transition-delay:0.25s}




.reveal-stagger.revealed>*:nth-child(4){opacity:1;transform:none;transition-delay:0.35s}




.reveal-stagger.revealed>*:nth-child(5){opacity:1;transform:none;transition-delay:0.45s}




.reveal-stagger.revealed>*:nth-child(6){opacity:1;transform:none;transition-delay:0.55s}









/* ══════════════════════════════════════════




   RESPONSIVE




══════════════════════════════════════════ */




@media(max-width:1024px){




  .svc-grid{grid-template-columns:repeat(2,1fr)}




  .split{grid-template-columns:1fr;gap:44px}




  .process-row{grid-template-columns:repeat(2,1fr)}




  .process-row::before{display:none}




  .team-grid{grid-template-columns:repeat(2,1fr)}




  .sol-panel.active{grid-template-columns:repeat(2,1fr)}




  .perks-grid{grid-template-columns:repeat(2,1fr)}




  .stats-row{grid-template-columns:repeat(2,1fr)}




  .stat-cell:nth-child(2){border-right:none}




  .stat-cell:nth-child(3){border-top:1px solid var(--border)}




  .stat-cell:nth-child(4){border-top:1px solid var(--border);border-right:none}




  .testi-grid{grid-template-columns:repeat(2,1fr)}




}









@media(max-width:768px){




  .section{padding:72px 0}




  /* Hide nav links and CTA on mobile */




  .nav-links,.nav-cta{display:none}




  .hamburger{display:flex}




  /* Mobile menu open state — always dark */




  .nav-mobile-open .nav-links{




    display:flex;flex-direction:column;




    position:fixed;top:0;left:0;right:0;bottom:0;




    background:#080c18;




    padding:100px 24px 40px;




    gap:4px;z-index:9998;overflow-y:auto;




  }




  .nav-mobile-open .nav-links > li > a { color: rgba(240,244,255,0.65) !important; }




  .nav-mobile-open .nav-links > li > a:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; }




  .nav-mobile-open .nav-cta{




    display:flex;flex-direction:column;




    padding:0 24px;




    position:fixed;bottom:36px;left:0;right:0;




    z-index:9998;




  }




  .nav-mobile-open .dropdown-menu{




    position:static;opacity:1;visibility:visible;




    transform:none;box-shadow:none;




    background:#0d1428;margin-top:6px;




  }




  /* Layout fixes */




  .svc-grid{grid-template-columns:1fr}




  .testi-grid{grid-template-columns:1fr}




  .blog-grid{grid-template-columns:1fr}




  .contact-grid{grid-template-columns:1fr;gap:36px}




  .values-grid{grid-template-columns:1fr}




  .form-row{grid-template-columns:1fr}




  .process-row{grid-template-columns:1fr}




  .sol-panel.active{grid-template-columns:1fr}




  .perks-grid{grid-template-columns:1fr}




  .life-grid{grid-template-columns:1fr 1fr}




  .life-img.tall{grid-row:span 1;aspect-ratio:4/3}




  .job-card{flex-direction:column;align-items:flex-start}




  /* Hero stats wrap on mobile */




  .hero-stats{flex-wrap:wrap}




  .hero-stat{flex:0 0 50%;padding:18px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)}




  .hero-stat:nth-child(odd){padding-right:16px;border-right:1px solid rgba(255,255,255,0.08)}




  .hero-stat:last-child,.hero-stat:nth-last-child(2):nth-child(odd){border-bottom:none}




  /* CTA */




  .cta-banner{padding:56px 24px}




  /* Stats */




  .stats-row{grid-template-columns:1fr 1fr}




  /* Split image */




  .split-img img{height:280px}




  /* Page hero */




  .page-hero{min-height:360px}




  /* Navbar inner padding */




  .navbar-inner{padding:0 20px}




}









@media(max-width:480px){




  .hero-stats{flex-direction:column}




  .hero-stat{flex:none;width:100%;padding:14px 0;border-right:none}




  .hero-stat:nth-child(odd){border-right:none}




  .stats-row{grid-template-columns:1fr}




  .stat-cell{border-right:none;border-bottom:1px solid var(--border)}




  .stat-cell:last-child{border-bottom:none}




  .life-grid{grid-template-columns:1fr}




}









/* ══════════════════════════════════════════




   BIGGER LOGO




══════════════════════════════════════════ */




.nav-logo img { height: 48px !important; width: auto; }




footer .nav-logo img { height: 52px !important; }









/* ══════════════════════════════════════════




   MEGA MENU — Solutions dropdown




══════════════════════════════════════════ */




.mega-menu {




  position: absolute;




  top: calc(100% + 12px);




  left: 50%;




  transform: translateX(-50%);




  background: #0a0f1e;




  border: 1px solid rgba(255,255,255,0.08);




  border-radius: 20px;




  padding: 28px;




  width: 680px;




  opacity: 0;




  visibility: hidden;




  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);




  box-shadow: 0 32px 80px rgba(0,0,0,0.6);




  z-index: 10000;




}




.nav-links .dropdown:hover .mega-menu {




  opacity: 1;




  visibility: visible;




  top: calc(100% + 6px);




}




.mega-menu-grid {




  display: grid;




  grid-template-columns: repeat(2, 1fr);




  gap: 8px;




}




.mega-item {




  display: flex;




  align-items: flex-start;




  gap: 14px;




  padding: 14px 16px;




  border-radius: 12px;




  transition: all 0.2s;




  text-decoration: none;




  border: 1px solid transparent;




}




.mega-item:hover {




  background: rgba(255,255,255,0.05);




  border-color: rgba(255,255,255,0.08);




}




.mega-icon {




  width: 40px;




  height: 40px;




  border-radius: 10px;




  display: flex;




  align-items: center;




  justify-content: center;




  flex-shrink: 0;




}




.mega-icon img {




  width: 22px;




  height: 22px;




  object-fit: contain;




  filter: brightness(1.2);




}




.mega-icon svg { width: 20px; height: 20px; }




.mega-text-label {




  font-size: 0.88rem;




  font-weight: 600;




  color: rgba(240,244,255,0.9);




  margin-bottom: 3px;




  display: block;




}




.mega-text-desc {




  font-size: 0.76rem;




  color: rgba(240,244,255,0.42);




  line-height: 1.4;




}




.mega-menu-header {




  font-size: 0.68rem;




  font-weight: 800;




  letter-spacing: 0.18em;




  text-transform: uppercase;




  color: rgba(240,244,255,0.25);




  margin-bottom: 12px;




  padding-bottom: 10px;




  border-bottom: 1px solid rgba(255,255,255,0.06);




}




.mega-menu-footer {




  margin-top: 20px;




  padding-top: 16px;




  border-top: 1px solid rgba(255,255,255,0.06);




  display: flex;




  align-items: center;




  justify-content: space-between;




}




.mega-menu-footer a {




  font-size: 0.82rem;




  color: rgba(240,244,255,0.45);




  transition: color 0.2s;




  text-decoration: none;




}




.mega-menu-footer a:hover { color: #10b981; }




.mega-cta {




  display: inline-flex;




  align-items: center;




  gap: 6px;




  background: rgba(16,185,129,0.12);




  border: 1px solid rgba(16,185,129,0.25);




  color: #10b981 !important;




  padding: 7px 16px;




  border-radius: 50px;




  font-size: 0.8rem;




  font-weight: 600;




  transition: all 0.2s !important;




}




.mega-cta:hover { background: rgba(16,185,129,0.2) !important; }









/* ══════════════════════════════════════════




/* ══════════════════════════════════════════




   WONDERFUL FOOTER — Complete Redesign (Fixed)




══════════════════════════════════════════ */




footer {




  background: #000000;




  border-top: none;




  padding: 0;




  position: relative;




  overflow: hidden;




}




footer::before {




  content: '';




  position: absolute;




  top: 0; left: 0; right: 0;




  height: 1px;




  background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.5) 40%, rgba(59,130,246,0.5) 60%, transparent 100%);




  z-index: 1;




}




.footer-top {




  background: #000000;




  padding: 72px 0 60px;




  border-bottom: 1px solid rgba(255,255,255,0.05);




}




.footer-top-inner {




  display: grid;




  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;




  gap: 40px;




  align-items: start;




}




/* Brand column */




.footer-brand-new { max-width: 380px; }




.footer-brand-new .nav-logo { margin-bottom: 16px; display: flex; }




.footer-brand-new .nav-logo img { height: 44px !important; width: auto; }




.footer-brand-new .tagline {




  font-size: 0.87rem;




  color: rgba(240,244,255,0.42);




  line-height: 1.75;




  margin-bottom: 22px;




}




/* Social icons */




.footer-social-new { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }




.footer-soc {




  width: 36px; height: 36px;




  border-radius: 9px;




  background: rgba(255,255,255,0.05);




  border: 1px solid rgba(255,255,255,0.08);




  display: flex; align-items: center; justify-content: center;




  transition: all 0.25s;




  text-decoration: none;




  flex-shrink: 0;




}




.footer-soc:hover { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); transform: translateY(-2px); }




.footer-soc svg { width: 15px; height: 15px; fill: rgba(240,244,255,0.5); transition: fill 0.2s; flex-shrink: 0; }




.footer-soc:hover svg { fill: #10b981; }




/* Contact mini */




.footer-contact-mini { display: flex; flex-direction: column; gap: 9px; }




.footer-contact-mini a {




  display: flex; align-items: center; gap: 9px;




  font-size: 0.82rem; color: rgba(240,244,255,0.38);




  transition: color 0.2s; text-decoration: none;




}




.footer-contact-mini a:hover { color: #10b981; }




.footer-contact-mini svg { width: 13px; height: 13px; flex-shrink: 0; stroke: rgba(240,244,255,0.35); fill: none; transition: stroke 0.2s; }




.footer-contact-mini a:hover svg { stroke: #10b981; }




/* Newsletter */




.footer-newsletter {




  background: rgba(16,185,129,0.05);




  border: 1px solid rgba(16,185,129,0.14);




  border-radius: 14px;




  padding: 18px 20px;




  margin-top: 22px;




}




.footer-newsletter-label {




  font-size: 0.82rem;




  font-weight: 700;




  color: rgba(240,244,255,0.8);




  margin-bottom: 4px;




}




.footer-newsletter-sub {




  font-size: 0.76rem;




  color: rgba(240,244,255,0.38);




  margin-bottom: 12px;




}




.footer-nl-form { display: flex; gap: 8px; }




.footer-nl-form input {




  flex: 1;




  min-width: 0;




  background: rgba(255,255,255,0.06);




  border: 1px solid rgba(255,255,255,0.1);




  border-radius: 50px;




  padding: 9px 14px;




  color: #fff;




  font-size: 0.81rem;




  font-family: var(--font);




  outline: none;




  transition: border-color 0.2s;




}




.footer-nl-form input:focus { border-color: rgba(16,185,129,0.45); }




.footer-nl-form input::placeholder { color: rgba(240,244,255,0.28); }




/* Column headings */




.footer-col-new h5 {




  font-size: 0.68rem;




  font-weight: 800;




  letter-spacing: 0.2em;




  text-transform: uppercase;




  color: rgba(240,244,255,0.85);




  margin-bottom: 18px;




  padding-bottom: 10px;




  border-bottom: 1px solid rgba(255,255,255,0.06);




}




.footer-col-new ul { display: flex; flex-direction: column; gap: 9px; }




.footer-col-new ul li a {




  font-size: 0.85rem;




  color: rgba(240,244,255,0.4);




  transition: all 0.2s;




  text-decoration: none;




  display: flex;




  align-items: center;




  gap: 7px;




}




.footer-col-new ul li a::before {




  content: '';




  width: 3px; height: 3px;




  border-radius: 50%;




  background: rgba(255,255,255,0.18);




  flex-shrink: 0;




  transition: background 0.2s, transform 0.2s;




}




.footer-col-new ul li a:hover { color: rgba(240,244,255,0.88); padding-left: 3px; }




.footer-col-new ul li a:hover::before { background: #10b981; transform: scale(1.4); }




/* Bottom bar */




.footer-bottom-bar {




  background: #000000;




  padding: 18px 0;




  display: flex;




  align-items: center;




  justify-content: space-between;




  gap: 16px;




  flex-wrap: wrap;




}




.footer-bottom-bar p { font-size: 0.76rem; color: rgba(240,244,255,0.2); }




.footer-bottom-bar .footer-contact-mini { flex-direction: row; gap: 20px; flex-wrap: wrap; }




.footer-bottom-bar .footer-contact-mini a {




  font-size: 0.76rem;




  color: rgba(240,244,255,0.28);




}




.footer-bottom-bar .footer-contact-mini a:hover { color: #10b981; }




.footer-bottom-bar .footer-contact-mini svg { stroke: rgba(240,244,255,0.28); }




.footer-bottom-bar .footer-contact-mini a:hover svg { stroke: #10b981; }




.footer-bottom-links { display: flex; gap: 18px; }




.footer-bottom-links a { font-size: 0.76rem; color: rgba(240,244,255,0.26); text-decoration: none; transition: color 0.2s; }




.footer-bottom-links a:hover { color: rgba(240,244,255,0.65); }




.footer-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }




.footer-badge-pill {




  display: inline-flex; align-items: center; gap: 5px;




  background: rgba(255,255,255,0.03);




  border: 1px solid rgba(255,255,255,0.07);




  border-radius: 50px;




  padding: 4px 11px;




  font-size: 0.7rem;




  color: rgba(240,244,255,0.32);




}




.footer-badge-pill svg { width: 9px; height: 9px; stroke: #10b981; fill: none; }




/* Footer full-width override */




footer .container {




  max-width: 100%;




  padding: 0 48px;




}









/* Responsive */




@media(max-width:1200px) {




  .footer-top-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }




  .footer-brand-new { max-width: 100%; }




  footer .container { padding: 0 32px; }




}




@media(max-width:900px) {




  .footer-top-inner { grid-template-columns: 1fr 1fr 1fr; }




  .footer-brand-new { grid-column: span 3; max-width: 480px; }




}




@media(max-width:600px) {




  .footer-top-inner { grid-template-columns: 1fr 1fr; }




  .footer-brand-new { grid-column: span 2; max-width: 100%; }




  .footer-bottom-bar { flex-direction: column; text-align: center; }




  .footer-badges { justify-content: center; }




  .footer-bottom-links { justify-content: center; }




  footer .container { padding: 0 20px; }




}




.chain-card {




  background: var(--card);




  border: 1px solid var(--border);




  border-radius: 16px;




  padding: 24px 20px;




  text-align: center;




  transition: all 0.3s;




  cursor: default;




}




.chain-card:hover { border-color: var(--border2); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }




.chain-logo { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }




.chain-logo img { width: 36px; height: 36px; object-fit: contain; }




.chain-card h4 { font-size: 0.95rem; margin-bottom: 6px; }




.chain-card p { font-size: 0.8rem; }




.chains-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }




  .mega-menu-grid { grid-template-columns: 1fr; }




  .chains-grid { grid-template-columns: repeat(2, 1fr); }




}









/* ══════════════════════════════════════════




   TECH STACK — Stunning Visual Grid




══════════════════════════════════════════ */




.tech-showcase { position: relative; }




.tech-category-label {




  font-size: 0.68rem;




  font-weight: 800;




  letter-spacing: 0.18em;




  text-transform: uppercase;




  color: var(--muted);




  margin-bottom: 14px;




  display: flex;




  align-items: center;




  gap: 10px;




}




.tech-category-label::after {




  content: '';




  flex: 1;




  height: 1px;




  background: var(--border);




}




.tech-logo-grid {




  display: grid;




  grid-template-columns: repeat(6, 1fr);




  gap: 14px;




  margin-bottom: 32px;




}




.tech-logo-card {




  background: var(--card);




  border: 1px solid var(--border);




  border-radius: 16px;




  padding: 20px 14px;




  text-align: center;




  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);




  cursor: default;




  position: relative;




  overflow: hidden;




}




.tech-logo-card::before {




  content: '';




  position: absolute;




  inset: 0;




  background: var(--grad);




  opacity: 0;




  transition: opacity 0.3s;




  border-radius: inherit;




}




.tech-logo-card:hover {




  border-color: var(--border2);




  transform: translateY(-6px);




  box-shadow: 0 16px 40px rgba(0,0,0,0.3);




}




.tech-logo-card:hover::before { opacity: 0.04; }




.tech-logo-card img {




  width: 40px;




  height: 40px;




  margin: 0 auto 10px;




  object-fit: contain;




  transition: transform 0.3s;




  position: relative;




  z-index: 1;




}




.tech-logo-card:hover img { transform: scale(1.15); }




.tech-logo-card .tname {




  font-size: 0.78rem;




  font-weight: 600;




  color: var(--muted2);




  display: block;




  position: relative;




  z-index: 1;




  transition: color 0.2s;




}




.tech-logo-card:hover .tname { color: var(--text); }




.tech-logo-card .tdesc {




  font-size: 0.68rem;




  color: var(--muted);




  margin-top: 3px;




  display: block;




  position: relative;




  z-index: 1;




}




/* Featured tech card (larger) */




.tech-logo-card.featured {




  grid-column: span 2;




  display: flex;




  align-items: center;




  gap: 16px;




  text-align: left;




  padding: 20px 22px;




}




.tech-logo-card.featured img { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }




.tech-logo-card.featured .tname { font-size: 0.9rem; }




.tech-logo-card.featured .tdesc { font-size: 0.78rem; line-height: 1.5; }




/* Responsive */




@media(max-width:1024px) { .tech-logo-grid { grid-template-columns: repeat(4,1fr); } .tech-logo-card.featured { grid-column: span 2; } }




@media(max-width:768px)  { .tech-logo-grid { grid-template-columns: repeat(3,1fr); } .tech-logo-card.featured { grid-column: span 3; flex-direction: column; text-align: center; } .tech-logo-card.featured img { margin: 0 auto; } }




@media(max-width:480px)  { .tech-logo-grid { grid-template-columns: repeat(2,1fr); } .tech-logo-card.featured { grid-column: span 2; } }









/* ══════════════════════════════════════════




   MEGA MENU — Improved hover & positioning




══════════════════════════════════════════ */









/* Services mega menu — left-aligned from trigger */




.nav-links .dropdown:nth-child(1) .mega-menu {




  left: 0;




  transform: none;




}




.nav-links .dropdown:nth-child(1):hover .mega-menu {




  top: calc(100% + 6px);




}









/* Mega item hover glow per icon color */




.mega-item:hover .mega-icon { transform: scale(1.08); transition: transform 0.2s; }









/* Mega menu entrance animation */




.mega-menu {




  transform-origin: top center;




}




.nav-links .dropdown:hover .mega-menu {




  animation: megaIn 0.22s cubic-bezier(0.4,0,0.2,1) both;




}




@keyframes megaIn {




  from { opacity:0; transform:translateX(-50%) translateY(-8px) scale(0.97); }




  to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }




}




.nav-links .dropdown:nth-child(1):hover .mega-menu {




  animation: megaInLeft 0.22s cubic-bezier(0.4,0,0.2,1) both;




}




@keyframes megaInLeft {




  from { opacity:0; transform:translateY(-8px) scale(0.97); }




  to   { opacity:1; transform:translateY(0) scale(1); }




}









/* Mobile mega menu */




@media(max-width:768px) {




  .mega-menu { width: calc(100vw - 48px) !important; left: 0 !important; transform: none !important; }




  .mega-menu-grid { grid-template-columns: 1fr !important; }




  .nav-links .dropdown:hover .mega-menu,




  .nav-links .dropdown:nth-child(1):hover .mega-menu { animation: none; }




}










/* ── Force all footer parts black on all pages ── */
footer,
footer .footer-top,
footer .footer-bottom-bar,
footer .container,
.footer-top-inner {
  background: #000000 !important;
}

/* ── Allow mega menu to show full width ── */
body { overflow-x: clip; }