/* ---------- Root colors & global ---------- */
:root{
  --bg:#030309;
  --card:#0c0e14;
  --muted:#9ba7c2;
  --white:#ffffff;
  --primary:#5d3df5;     /* brand purple */
  --primary-2:#8a63f0;   /* secondary purple */
  --accent:#2196f3;      /* action blue */
  --glass: rgba(255,255,255,0.04);
  --glass-gradient: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  --radius:16px;
  --shadow: 0 20px 50px rgba(0,0,0,0.8);
  --glow: 0 0 20px rgba(93,61,245,0.15);
  --maxw:1200px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* variables moved from inline styles to central stylesheet */
  --primary-glow: rgba(93, 61, 245, 0.15);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

a{color:var(--primary); text-decoration:none}
a:hover{opacity:.95; text-decoration:underline}

/* ---------- Containers ---------- */
.container{
  max-width:var(--maxw);
  margin:0 auto 36px; /* larger bottom spacing between containers */
  padding:36px 20px; /* increased internal padding for more breathing room */
  background:var(--glass);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.03);
}

/* Responsive: reduce spacing/padding on small screens */
@media (max-width: 680px){
  .container{ margin-bottom:40px; padding:28px 18px }
}

/* Alternate background container */
.container.alt{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* Card-style solid container */

/* ---------- Services Section ---------- */
.services-section {
  padding: 60px 0;
}

.section-title {
  margin-bottom: 40px;
  text-align: center;
}

.services-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.service-card {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 990px) {
  .services-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .services-row {
    grid-template-columns: 1fr;
  }
}

.service-card {
  flex: 1;
  padding: 30px;
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.3s var(--ease);
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.03);
}

.service-icon {
  margin-bottom: 20px;
}

.service-icon i {
  font-size: 48px;
  color: var(--primary);
  background: var(--glass-gradient);
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s var(--ease);
}

.service-card:hover .service-icon i {
  color: var(--white);
  background: var(--primary);
  transform: scale(1.1);
  box-shadow: var(--glow);
}

.service-card h3 {
  margin-bottom: 15px;
  color: var(--white);
}

.service-card p {
  margin-bottom: 25px;
  color: var(--muted);
}

.btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  color: var(--primary);
  font-weight: 500;
  transition: all 0.3s var(--ease);
}

.btn-learn-more i {
  transition: transform 0.3s var(--ease);
}

.btn-learn-more:hover {
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
}

.btn-learn-more:hover i {
  transform: translateX(4px);
}

/* Benefits List */
.benefits-list {
  margin: 30px 0;
  padding: 20px;
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.03);
}

.benefits-list h3 {
  color: var(--primary);
  margin-bottom: 15px;
}

.benefits-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--muted);
}

.benefits-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

/* Responsive adjustments */
@media (max-width: 990px) {
  .services-row {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .service-card {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  .service-card {
    flex: 0 0 100%;
  }
}

/* Implementation Section */
.implementation-section {
  padding: 60px 0;
}

.implementation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.implementation-card {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.03);
}

.implementation-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--primary);
}

.implementation-card h3 i {
  font-size: 24px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.feature-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--muted);
}

.feature-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
}

.service-list-items {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  font-size: 0.9em;
  color: var(--muted);
  text-align: left;
}

.service-list-items li {
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.4;
  margin-bottom: 4px;
}

.service-list-items li:before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 1.2em;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.service-list-items li:hover {
  color: var(--white);
  transition: color 0.3s var(--ease);
}

.service-list-items li:hover:before {
  color: var(--primary-2);
  transform: translateY(-50%) translateX(2px);
  transition: all 0.3s var(--ease);
}

.subtitle {
  font-size: 0.6em;
  opacity: 0.8;
  font-weight: normal;
}

@media (max-width: 768px) {
  .implementation-grid {
    grid-template-columns: 1fr;
  }
}
.container.card{
  background:var(--card);
  box-shadow:var(--shadow);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.container.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow), var(--glow);
}

/* Accent (CTA) container */
.container.accent{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:var(--white);
  box-shadow:var(--shadow);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(3,3,6,0.72), rgba(3,3,6,0.55));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand { display:flex; align-items:center; gap:12px; font-weight:700; color:var(--primary); font-size:1.05rem }
.brand img{height:34px; width:auto; display:block}
nav.main-nav{display:flex; gap:12px; align-items:center}
.menu { display:flex; gap:6px; list-style:none; margin:0; padding:0; align-items:center }
.menu li{position:relative}
.menu a { color: #e6e9f2; padding:8px 12px; border-radius:8px; font-weight:500; display:inline-block; }
.menu a:hover, .menu a.active{ color:var(--primary); background: rgba(75,44,195,0.06) }
.dropdown{position:relative}
.submenu{position:absolute; right:0; top:100%; background:linear-gradient(180deg,#071228,#031223); border-radius:10px; min-width:220px; padding:8px; box-shadow:var(--shadow); display:none}
.submenu a{display:block; padding:8px 10px; color:#dbe6ff; border-radius:6px}
.submenu a:hover{background: rgba(255,255,255,0.03); color:var(--primary)}
.menu li:hover > .submenu{display:block}

/* mobile nav */
.mobile-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,0.03); color:var(--white); padding:8px 10px; border-radius:10px}
@media (max-width:990px){
  nav.main-nav{display:none}
  .mobile-toggle{display:inline-flex; align-items:center; gap:8px}
  .mobile-menu{display:none; position:absolute; left:0; right:0; top:64px; background:linear-gradient(180deg,#020214,#071025); padding:12px; box-shadow:var(--shadow)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block; padding:10px; color:#e6e9f2; border-radius:8px}
  .submenu{position:static; box-shadow:none; padding-left:8px}
}

/* ---------- HERO ---------- */
.hero {
  position:relative; min-height:76vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:48px 0;
  overflow:hidden;
}
.bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:brightness(.46) contrast(1.05); }
.hero-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,2,6,0.35), rgba(2,2,6,0.6)); z-index:-1}
.hero-inner{position:relative; z-index:2; max-width:980px; padding:20px}
.hero h1{font-size:clamp(2rem,4.5vw,3.8rem); margin:0 0 12px; line-height:1.02; font-weight:800;
  background: linear-gradient(90deg,var(--primary),var(--primary-2));
  background-clip: text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow: var(--glow);
}
.hero p{margin:0; color:var(--muted); font-size:clamp(.95rem,1.1vw,1.1rem)}
.cta-row{margin-top:20px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Global visual enhancements ---------- */
/* soft background glows to add depth without altering layout */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(circle at 8% 20%, rgba(93,61,245,0.06), transparent 8%),
              radial-gradient(circle at 90% 80%, rgba(33,150,243,0.03), transparent 12%);
}

/* Primary CTA used on index and hero */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px;
  background: linear-gradient(90deg,var(--primary),var(--primary-2)); color:var(--white);
  font-weight:700; border:none; box-shadow: 0 12px 30px rgba(33, 0, 112, 0.25);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), opacity 200ms var(--ease);
}
.btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 28px 60px rgba(33, 0, 112, 0.35); opacity:0.98 }

/* subtle floating animation for hero and cards */
@keyframes fadeUp { from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }
.hero-inner{ animation: fadeUp 700ms var(--ease) both }
.service-card{ animation: fadeUp 700ms var(--ease) both }

/* Tighter, modern contact card */
.contact-card{ padding:28px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); box-shadow: var(--card-shadow); }
.contact-card h3{ margin:0 0 8px; color:var(--primary) }
.contact-ill img{ max-width:340px; width:100%; height:auto; border-radius:12px; box-shadow: var(--card-shadow) }

/* Footer grid layout to match homepage */
.footer-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px }
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr; } .contact-ill img{ max-width:260px } }

/* Make service cards more presentable on service pages */
.service-card.glass{ padding:28px; margin: 28px; text-align:left }
.service-card h3{ color:var(--primary); margin-bottom:10px }
.service-card p.lead{ color:#dbe6ff; margin-bottom:14px }

/* small utility */
.muted{ color:var(--muted) }

/* skip link */
.skip-link{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }
.skip-link:focus{ left: 12px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: var(--primary); color: white; border-radius:8px; z-index:9999 }

/* Hero breadcrumb */
.hero-breadcrumb{ font-size:0.9rem; margin-bottom:10px; color:rgba(219,230,255,0.7); letter-spacing:0.4px }

/* decorative divider */
.divider-svg{ margin-top:-6px; }
.divider-svg svg{ display:block }

/* service icon */
.service-icon{ display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); margin-bottom:12px }
.service-icon i{ font-size:32px; color:var(--primary) }

/* service card hover highlight */
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(3,3,9,0.6) }
.service-card:hover .service-icon{ box-shadow: 0 10px 30px rgba(93,61,245,0.08); transform: translateY(-3px) }

.btn-primary{
  background:linear-gradient(45deg,var(--primary),var(--primary-2));
  color:#fff; 
  padding:12px 28px; 
  border-radius:999px; 
  border:none; 
  font-weight:700;
  font-size: 1.05rem;
  box-shadow: 0 8px 30px rgba(93,61,245,0.2);
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn-primary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,var(--primary-2),var(--primary));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow: 0 12px 40px rgba(93,61,245,0.4);
  text-decoration: none;
  color: white;
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:hover:before {
  opacity: 1;
}
.btn-primary span,
.btn-primary i {
  position: relative;
  z-index: 1;
}

/* ---------- STATS ---------- */
/* ---------- STATS ---------- */
.stats {
  width: 100%;
  padding: 26px 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.stats .stat {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
  background: var(--glass-gradient);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 32px 18px 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}
.stats .stat:hover {
  box-shadow: 0 8px 32px var(--primary-glow);
  border-color: var(--primary-2);
}
.stats .stat i {
  margin-bottom: 12px;
  font-size: 2.4rem;
  color: var(--primary);
}
.stats .stat .num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary-2);
  margin-bottom: 8px;
}
.stats .stat .label {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.08rem;
}

.stat {
  flex: 0 0 auto;
}

@media (max-width: 680px){
  .stats {
    padding:36px 8px;
    gap:18px;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .stat {
    min-width:140px;
    flex:0 0 auto;
  }
}
.stat{text-align:center}
.stat .num{font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:var(--primary-2)}
.stat .label{color:var(--muted); margin-top:6px; font-weight:600}

/* ---------- PARTNERS ---------- */
.partners{padding:8px 0; border-top:1px solid rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.02)}
.partners h3{text-align:center; padding-bottom: 80px; margin:0px; color:var(--white)}
.partner-row{display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap}
.partner-row img{height:56px; width:auto; filter:grayscale(100%) contrast(.95); opacity:.95; transition:transform .16s, filter .16s}
.partner-row img:hover{transform:translateY(-6px) scale(1.05); filter:grayscale(0) brightness(1.06)}
.partners .btn-outline{display:inline-block; margin-top:16px; padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.05); color:var(--white); background:transparent}

/* ---------- SOLUTIONS ---------- */
#solutions{padding:24px 0}
.section-head{ text-align:center; margin-bottom:26px }
.section-head h2{font-size:1.6rem; color:var(--primary); margin:0 0 8px}
.section-sub{color:var(--muted); margin:0 auto; max-width:760px}

.solution-grid{display:grid; gap:18px; grid-template-columns: repeat(3, 1fr)}
.card-s{
  background:var(--glass-gradient);
  border-radius:var(--radius); 
  padding:24px; 
  text-align:center; 
  border:1px solid rgba(255,255,255,0.05);
  transition:all 0.3s var(--ease);
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  min-height:180px; 
  justify-content:flex-start;
  backdrop-filter: blur(8px);
}
.card-s i{
  font-size:2rem; 
  color:var(--primary); 
  display:inline-block;
  transition: transform 0.3s var(--ease);
}
.card-s h4{
  margin:6px 0 4px; 
  font-size:1.1rem; 
  color:var(--white);
  transition: color 0.3s var(--ease);
}
.card-s p{
  margin:0; 
  color:var(--muted); 
  font-size:.95rem;
  line-height:1.6;
}
.card-s:hover{
  transform:translateY(-8px); 
  box-shadow:var(--shadow), var(--glow); 
  background:linear-gradient(180deg, rgba(93,61,245,0.08), rgba(6,8,14,0.7));
  border-color: rgba(93,61,245,0.2);
}
.card-s:hover i {
  transform: scale(1.1);
  color: var(--primary-2);
}
.card-s:hover h4 {
  color: var(--primary-2);
}

/* ISE page specific refinements */
.card-s img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 12px;
  display: block;
}

.card-s h4 {
  margin: 8px 0 6px;
  font-size: 1.05rem;
}

.implementation-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* subtle entrance animation for cards */
.card-s, .implementation-card, .case-study-card, .feature-card {
  transform: translateY(6px);
  opacity: 0;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
}
.in-view {
  transform: translateY(0);
  opacity: 1;
}

/* Improve demo form inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  color:var(--white);
  outline:none;
  transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus{ box-shadow: 0 6px 18px rgba(93,61,245,0.08); border-color: rgba(138,99,240,0.18); }
.contact-form .form-group label{ display:block; margin-bottom:6px; color:var(--muted); font-size:0.92rem }
.contact-form .full-width{ grid-column: 1 / -1 }

.input-error{ border-color: #ff6b6b !important; box-shadow: 0 6px 18px rgba(255,107,107,0.08) !important; }

/* Make hero title slightly more prominent on this page */
.hero-inner h1{ font-size: clamp(2rem,5vw,3.6rem); }

@media (max-width:640px){
  .solution-grid { grid-template-columns: 1fr; gap:18px }
  .implementation-grid { grid-template-columns: 1fr }
}

/* Medium screens: limit to 2 columns */
@media (max-width:992px){
  .solution-grid, .diff-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Global section spacing improvements */
section{ margin-top:28px; margin-bottom:28px }

/* Standardized padding for sections that use .section-padding */
.section-padding{ padding:10px 0; }

/* Slightly reduced spacing on small screens to keep content visible */
@media (max-width:768px){
  section{ margin-top:18px; margin-bottom:18px }
  .section-padding{ padding:48px 0 }
}

@media (max-width:420px){
  .section-padding{ padding:32px 0 }
}

/* Single-row horizontal scroller layout for sections that should appear in one row */
.single-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px; /* leaves room for scrollbar */
  scroll-snap-type:x mandatory;
}
.single-row > *{
  scroll-snap-align:start;
  flex:0 0 calc(33.333% - 16px); /* three items per row look on wide screens */
  min-width:300px; /* ensures readable cards on small screens */
}

/* Slightly increase card width on medium screens */
@media (min-width:1200px){
  .single-row > *{ flex:0 0 calc(33.333% - 24px); }
}

@media (max-width:900px){
  .single-row > *{ flex:0 0 72%; min-width:260px }
}

/* hide native scrollbar visually but keep functionality (optional) */
.single-row::-webkit-scrollbar{ height:10px }
.single-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.04); border-radius:10px }

/* ---------- DIFFERENTIATORS ---------- */
#differentiators{padding:24px 0; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.diff-grid{display:grid; gap:18px; grid-template-columns: repeat(3, 1fr)}
.diff-card{background:var(--card); border-radius:var(--radius); padding:20px; text-align:center; border:1px solid rgba(255,255,255,0.03); transition:transform .18s, box-shadow .18s}
.diff-card i{font-size:1.8rem; color:var(--primary)}
.diff-card h4{margin:8px 0 6px}
.diff-card p{color:var(--muted); margin:0}
.diff-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}

/* ---------- CONTACT ---------- */
.contact{padding:0 0; display:flex; align-items:center; justify-content:center}
.contact-inner{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center}
.contact-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); padding:22px; border-radius:14px; border:1px solid rgba(255,255,255,0.03)}
.contact-card h3{color:var(--primary); margin:0 0 6px}
.contact-card p{margin:6px 0; color:var(--muted)}
.contact-ill img{width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}

@media (max-width:990px){
  .contact-inner{grid-template-columns:1fr; text-align:center}
  .menu li:hover > .submenu{display:none}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(1.6rem,6.6vw,2.2rem)}
  .partner-row img{height:48px}
  .stat .num{font-size:1.4rem}
  .hero {
    position: relative;
    min-height: 0vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 0;
    overflow: hidden;
  }
}

/* ---------- Utilities & Footer ---------- */
.muted{color:var(--muted)}
.mb24{margin-bottom:24px}
.mt12{margin-top:12px}
footer.site-footer{padding:16px 0; border-top:1px solid rgba(255,255,255,0.02); color:var(--muted)}
footer .footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; align-items:start}
footer h5{color:var(--primary); margin:0 0 8px}
footer p, footer li{margin:0 0 8px; color:var(--muted); font-size:.95rem}
footer .copyright{margin-top:18px; color:#8f99b3; text-align:center}

/* Hide mobile menu by default (for desktop/laptop) */
.mobile-menu {
  display: none;
}

/* Hide elements on desktop */
.hide-on-desktop {
  display: none;
}

@media (max-width: 1200px) {
  .hide-on-desktop {
    display: flex;
  }
}

/* Feature Section Styles */
.feature-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.feature-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(93,61,245,0.03) 0%, rgba(6,8,14,0) 70%);
  animation: rotate 30s linear infinite;
  z-index: -1;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  background: var(--glass-gradient);
  border-radius: var(--radius);
  padding: 40px;
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}

.feature-content {
  padding-right: 40px;
  position: relative;
}

.feature-content::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background: linear-gradient(to bottom, transparent, rgba(93,61,245,0.3), transparent);
}

.feature-content h2 {
  font-size: 2.8rem;
  margin: 0 0 25px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}

.feature-content h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: 2px;
}

.feature-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 35px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-image {
  position: relative;
  perspective: 1000px;
}

.feature-image::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: linear-gradient(135deg, rgba(93,61,245,0.1), rgba(138,99,240,0.05));
  border-radius: calc(var(--radius) + 10px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.feature-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s var(--ease);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
}

.feature-image:hover img {
  transform: translateY(-12px) rotateY(5deg);
  box-shadow: var(--shadow), 
              0 5px 30px rgba(93,61,245,0.2),
              0 0 0 1px rgba(93,61,245,0.1);
}

.feature-image:hover::before {
  opacity: 1;
}

@media (max-width: 990px) {
  .feature-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 30px;
  }
  
  .feature-content {
    padding-right: 0;
  }
  
  .feature-content::after {
    display: none;
  }
  
  .feature-content h2 {
    font-size: 2.2rem;
  }
  
  .feature-content h2::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* Accordion Styles */
.feature-section {
  padding: 60px 0;
}

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

.feature-content {
  padding-right: 40px;
}

.feature-content h2 {
  font-size: 2.4rem;
  margin: 0 0 20px;
  padding: 20px;
  background: linear-gradient(90deg,var(--primary),var(--primary-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-content p {
  font-size: 1.1rem;
  padding: 20px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 30px;
}

.feature-image {
  position: relative;
}

.feature-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.3s var(--ease);
  box-shadow: var(--shadow);
}

.feature-image:hover img {
  transform: translateY(-8px);
  box-shadow: var(--shadow), var(--glow);
}

@media (max-width: 990px) {
  .feature-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .feature-content {
    padding-right: 0;
  }
  
  .feature-content h2 {
    font-size: 2rem;
  }
}

/* Accordion Styles */
.accordion {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .accordion { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .accordion { grid-template-columns: 1fr; } }

.accordion-item {
  background: var(--glass-gradient);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.accordion-item h3 {
  font-size: 1.3rem;
  margin: 12px 0;
  color: var(--white);
  transition: color 0.3s var(--ease);
}

.accordion-item i {
  font-size: 2.2rem;
  color: var(--primary);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.accordion-item:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(93,61,245,0.08), rgba(6,8,14,0.7));
  border-color: rgba(93,61,245,0.2);
  box-shadow: var(--shadow), var(--glow);
}

.accordion-item:hover i {
  transform: scale(1.1) rotate(5deg);
  color: var(--primary-2);
}

.accordion-item:hover h3 {
  color: var(--primary-2);
}



.stat {
        text-align: center;
        transition: transform 0.3s;
      }

      .stat .num {
        font-size: 2em;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s forwards;
      }

      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .stat .label {
        color: var(--muted);
        margin-top: 6px;
        font-weight: 600;
      }

      .animate {
        animation-delay: 0.5s; /* Adjust delay for each stat if needed */
      }
      
  /* ---------------------------------------------------------------------- */
  /* AUTO-FIX: Force reveal for elements that rely on JS-driven entrance anims */
  /* This makes elements visible immediately while preserving animations where possible. */
  /* Remove or comment this block to restore original animated entrance behavior. */
  .card-s, .implementation-card, .case-study-card, .feature-card {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ensure in-view class fully visible if still used */
  .in-view { opacity: 1 !important; transform: none !important; }

  /* Also ensure feature sections are visible */
  .feature-section, .services-section, .stats, #contact, footer.site-footer {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* End auto-fix block */

  /*
    Override: set uniform section padding.
    This forces all top-level <section> elements to use 20px padding for
    consistent vertical spacing across the site. Use carefully as it
    overrides other section-specific paddings.
  */
  section {
    padding: 20px !important;
  }