/* ═══════════════════════════════════════════
   REDESIGN — DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --sn-navy:        #000080;
  --sn-navy-mid:    #0a0aaa;
  --sn-navy-light:  #4466ff;
  --sn-red:         #FF4b33;
  --sn-red-dim:     #cc3a27;

  --sn-bg:          #07080f;
  --sn-surface:     #0e1018;
  --sn-surface-2:   #141720;
  --sn-glass:       rgba(255,255,255,0.04);
  --sn-glass-hover: rgba(255,255,255,0.07);

  --sn-border:      rgba(255,255,255,0.08);
  --sn-border-solid:#1c2030;

  --sn-text-hi:     #f0f2ff;
  --sn-text-mid:    #b0b8d4;
  --sn-text-dim:    #6d7599;

  --sn-grad-text:   linear-gradient(90deg, #6699ff 0%, var(--sn-red) 100%);
  --sn-grad-main:   linear-gradient(135deg, var(--sn-navy) 0%, #3a0060 50%, var(--sn-red) 100%);

  --sn-shadow-sm:   0 1px 4px rgba(0,0,0,.4);
  --sn-shadow-md:   0 6px 32px rgba(0,0,0,.55);

  --sn-radius:      16px;
  --sn-radius-sm:   10px;
}


/* ═══════════════════════════════════════════
   SHARED UTILITIES
═══════════════════════════════════════════ */
.sn-section-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

.sn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sn-red);
  background: rgba(255,75,51,.08);
  border: 1px solid rgba(255,75,51,.22);
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 24px;
}

.sn-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sn-red);
  box-shadow: 0 0 8px var(--sn-red);
  animation: snPulse 2s ease infinite;
}

@keyframes snPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.65); }
}

.sn-section-heading {
  text-align: center;
  margin-bottom: 72px;
}

.sn-section-heading h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 18px;
  color: var(--sn-text-hi);
}

.sn-section-heading p {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--sn-text-mid);
  max-width: 560px;
  margin: 0 auto;
  font-weight: 400;
}

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

@keyframes snFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sn-section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,75,51,.2) 30%, rgba(0,0,180,.3) 70%, transparent 100%);
  position: relative;
  z-index: 2;
}


/* ═══════════════════════════════════════════
   SECTION — PRODUCTS
═══════════════════════════════════════════ */
.sn-products-section {
  position: relative;
  width: 100%;
  padding: 110px 24px 120px;
  overflow: hidden;
  background: var(--sn-bg);
}

.sn-products-section .sn-blob-tl,
.sn-products-section .sn-blob-br,
.sn-products-section .sn-blob-mid {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.sn-products-section .sn-blob-tl {
  width: 700px; height: 500px;
  background: radial-gradient(circle, rgba(0,0,128,.65) 0%, transparent 70%);
  top: -140px; left: -220px;
  opacity: .55;
}

.sn-products-section .sn-blob-br {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,75,51,.45) 0%, transparent 70%);
  bottom: -100px; right: -160px;
  opacity: .5;
}

.sn-products-section .sn-blob-mid {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(90,0,180,.3) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: .35;
}

/* Bento Grid */
.sn-products-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Card base */
.sn-prod-card {
  position: relative;
  background: var(--sn-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  padding: 34px 30px;
  overflow: hidden;
  cursor: pointer;
  transition: background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
  animation: snFadeUp .5s ease both;
}

.sn-prod-card:hover {
  background: var(--sn-glass-hover);
  transform: translateY(-4px);
}

/* Grid placements */
.sn-card-1 { grid-column: 1 / 8;  grid-row: 1; animation-delay: .08s; }
.sn-card-2 { grid-column: 8 / 13; grid-row: 1; animation-delay: .16s; }
.sn-card-3 { grid-column: 1 / 5;  grid-row: 2; animation-delay: .24s; }
.sn-card-4 { grid-column: 5 / 10; grid-row: 2; animation-delay: .32s; }
.sn-card-5 { grid-column: 10 / 13;grid-row: 2; animation-delay: .40s; }

/* Per-card glow */
.sn-card-1 { border-color: rgba(0,0,200,.35); }
.sn-card-1:hover { border-color: rgba(0,0,255,.6); box-shadow: 0 0 40px rgba(0,0,200,.2), var(--sn-shadow-md); }

.sn-card-2 { border-color: rgba(255,75,51,.28); }
.sn-card-2:hover { border-color: rgba(255,75,51,.65); box-shadow: 0 0 40px rgba(255,75,51,.18), var(--sn-shadow-md); }

.sn-card-3 { border-color: rgba(100,150,255,.28); }
.sn-card-3:hover { border-color: rgba(100,150,255,.55); box-shadow: 0 0 30px rgba(100,150,255,.15), var(--sn-shadow-md); }

.sn-card-4 { border-color: rgba(255,75,51,.18); }
.sn-card-4:hover { border-color: rgba(255,75,51,.5); box-shadow: 0 0 30px rgba(255,75,51,.12), var(--sn-shadow-md); }

.sn-card-5 { border-color: rgba(255,255,255,.07); }
.sn-card-5:hover { border-color: rgba(255,255,255,.18); box-shadow: var(--sn-shadow-md); }

/* Inner glow overlay */
.sn-prod-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.sn-card-1::before { background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,0,180,.1) 0%, transparent 70%); }
.sn-card-2::before { background: radial-gradient(ellipse 80% 60% at 80% 30%, rgba(255,75,51,.09) 0%, transparent 70%); }
.sn-card-3::before { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(100,150,255,.07) 0%, transparent 70%); }
.sn-card-4::before { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,75,51,.06) 0%, transparent 70%); }
.sn-prod-card:hover::before { opacity: 1; }

/* Icon badge */
.sn-prod-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.sn-icon-navy  { background: linear-gradient(135deg, rgba(0,0,128,.85), rgba(0,0,210,.6)); border: 1px solid rgba(100,100,255,.3); box-shadow: 0 4px 20px rgba(0,0,200,.3); }
.sn-icon-red   { background: linear-gradient(135deg, rgba(200,40,20,.85), rgba(255,75,51,.6)); border: 1px solid rgba(255,75,51,.3); box-shadow: 0 4px 20px rgba(255,75,51,.3); }
.sn-icon-blue  { background: linear-gradient(135deg, rgba(30,60,180,.85), rgba(100,150,255,.5)); border: 1px solid rgba(100,150,255,.3); box-shadow: 0 4px 20px rgba(100,150,255,.2); }
.sn-icon-mixed { background: linear-gradient(135deg, rgba(0,0,128,.75), rgba(255,75,51,.6)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 4px 20px rgba(128,0,80,.3); }
.sn-icon-dim   { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }

/* Tag pill */
.sn-prod-tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.sn-tag-ai   { background: rgba(0,0,180,.18); color: #8899ff; border: 1px solid rgba(0,0,200,.3); }
.sn-tag-chat { background: rgba(255,75,51,.14); color: #ff8070; border: 1px solid rgba(255,75,51,.28); }
.sn-tag-erp  { background: rgba(100,150,255,.1); color: #7aa8ff; border: 1px solid rgba(100,150,255,.22); }
.sn-tag-ecom { background: rgba(255,75,51,.1); color: #ff9080; border: 1px solid rgba(255,75,51,.2); }
.sn-tag-more { background: rgba(255,255,255,.05); color: var(--sn-text-mid); border: 1px solid rgba(255,255,255,.1); }

/* Card title */
.sn-prod-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--sn-text-hi);
}
.sn-card-1 .sn-prod-title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.sn-card-2 .sn-prod-title { font-size: 1.25rem; }
.sn-card-3 .sn-prod-title,
.sn-card-4 .sn-prod-title { font-size: 1.15rem; }
.sn-card-5 .sn-prod-title { font-size: 1.05rem; }

/* Card desc */
.sn-prod-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--sn-text-mid);
  margin-bottom: 22px;
  font-weight: 400;
}

/* Feature chips */
.sn-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.sn-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sn-text-mid);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  padding: 5px 14px;
  transition: border-color .2s, color .2s;
}
.sn-card-1:hover .sn-chip { border-color: rgba(100,100,255,.3); color: #a0aaff; }

/* CTA link — stretched to make whole card clickable */
.sn-prod-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: gap .22s ease;
  position: static;
}
/* Stretched-link: ::after covers the whole card */
.sn-prod-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sn-cta-navy { color: #6699ff; }
.sn-cta-red  { color: #ff7060; }
.sn-cta-blue { color: #88aaff; }
.sn-prod-cta .sn-arrow { font-size: 15px; transition: transform .22s ease; }
.sn-prod-cta:hover { gap: 12px; }
.sn-prod-cta:hover .sn-arrow { transform: translateX(4px); }

/* Hero card 1 layout */
.sn-card-1-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.sn-card-1-content { flex: 1; }
.sn-card-1-visual {
  flex-shrink: 0;
  width: 190px;
  display: flex; align-items: center; justify-content: center;
}

.sn-brain-visual {
  position: relative;
  width: 175px; height: 175px;
}
.sn-brain-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(100,100,255,.2);
  animation: snRingRotate 8s linear infinite;
}
.sn-brain-ring:nth-child(2) { inset: 12px; border-color: rgba(255,75,51,.2); animation-duration: 12s; animation-direction: reverse; }
.sn-brain-ring:nth-child(3) { inset: 24px; border-color: rgba(150,100,255,.2); animation-duration: 6s; }
@keyframes snRingRotate { to { transform: rotate(360deg); } }
.sn-brain-core {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,180,.5) 0%, rgba(60,0,120,.4) 50%, transparent 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  box-shadow: 0 0 40px rgba(0,0,200,.4), inset 0 0 20px rgba(255,75,51,.2);
}
.sn-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,255,.5) 30%, rgba(255,75,51,.5) 70%, transparent 100%);
  top: 30%;
  animation: snScan 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes snScan {
  0%   { top: 20%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 80%; opacity: 0; }
}

/* NexAI chat bubbles */
.sn-chat-preview {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sn-bubble {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 14px;
  max-width: 90%;
  line-height: 1.45;
  color: var(--sn-text-mid);
}
.sn-bubble-user {
  background: linear-gradient(135deg, rgba(0,0,128,.4), rgba(0,0,210,.3));
  border: 1px solid rgba(100,100,255,.25);
  align-self: flex-end;
  color: #b0baff;
}
.sn-bubble-ai {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  align-self: flex-start;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.sn-ai-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sn-navy-light), var(--sn-red));
  flex-shrink: 0;
  margin-top: 2px;
}
.sn-typing { display: flex; gap: 4px; align-items: center; }
.sn-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sn-text-dim);
  animation: snBlink 1.2s ease infinite;
}
.sn-typing span:nth-child(2) { animation-delay: .2s; }
.sn-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes snBlink {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1; transform: scale(1); }
}

/* Mini stats */
.sn-mini-stats {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.sn-mini-stat {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--sn-radius-sm);
  padding: 12px 10px;
  text-align: center;
}
.sn-mini-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  background: var(--sn-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sn-mini-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--sn-text-dim);
  margin-top: 4px;
  letter-spacing: .04em;
}

/* Progress bars */
.sn-prog-bar-wrap { margin-top: 18px; }
.sn-prog-label {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--sn-text-mid);
  margin-bottom: 6px;
}
.sn-prog-track {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sn-prog-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--sn-grad-text);
  animation: snGrowBar 1.8s ease forwards;
}
@keyframes snGrowBar { from { width: 0; } }

.sn-ecom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.sn-ecom-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 8px;
  background: rgba(255,75,51,.08);
  border: 1px solid rgba(255,75,51,.18);
  color: #ff9080;
  font-weight: 500;
}

/* More card dots */
.sn-more-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
}
.sn-more-dot {
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: border-color .22s, background .22s;
}
.sn-card-5:hover .sn-more-dot { border-color: rgba(255,75,51,.22); background: rgba(255,75,51,.05); }
.sn-more-count {
  font-family: 'Syne', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  background: var(--sn-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}


/* ═══════════════════════════════════════════
   SECTION — SERVICES
═══════════════════════════════════════════ */
.sn-services-section {
  position: relative;
  width: 100%;
  padding: 110px 24px 120px;
  overflow: hidden;
  background: var(--sn-bg);
}

.sn-services-section .sn-blob-tl {
  width: 600px; height: 400px;
  background: radial-gradient(circle, rgba(0,0,128,.55) 0%, transparent 70%);
  top: -100px; right: -200px;
  opacity: .5;
}
.sn-services-section .sn-blob-br {
  width: 500px; height: 400px;
  background: radial-gradient(circle, rgba(255,75,51,.35) 0%, transparent 70%);
  bottom: -80px; left: -180px;
  opacity: .45;
}
.sn-services-section .sn-blob-tl,
.sn-services-section .sn-blob-br {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
}

.sn-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sn-service-card {
  position: relative;
  background: var(--sn-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  padding: 36px 32px;
  overflow: hidden;
  cursor: pointer;
  transition: background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
  animation: snFadeUp .5s ease both;
}
.sn-service-card:hover {
  background: var(--sn-glass-hover);
  transform: translateY(-4px);
}

/* Service card glow variants */
.sn-svc-1 { border-color: rgba(0,0,200,.35); animation-delay: .08s; }
.sn-svc-1:hover { border-color: rgba(0,0,255,.6); box-shadow: 0 0 40px rgba(0,0,200,.2), var(--sn-shadow-md); }
.sn-svc-1::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .28s ease; background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,0,180,.1) 0%, transparent 70%); }

.sn-svc-2 { border-color: rgba(255,75,51,.28); animation-delay: .16s; }
.sn-svc-2:hover { border-color: rgba(255,75,51,.65); box-shadow: 0 0 40px rgba(255,75,51,.18), var(--sn-shadow-md); }
.sn-svc-2::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .28s ease; background: radial-gradient(ellipse 80% 60% at 80% 30%, rgba(255,75,51,.09) 0%, transparent 70%); }

.sn-svc-3 { border-color: rgba(100,150,255,.28); animation-delay: .24s; }
.sn-svc-3:hover { border-color: rgba(100,150,255,.55); box-shadow: 0 0 30px rgba(100,150,255,.15), var(--sn-shadow-md); }
.sn-svc-3::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .28s ease; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(100,150,255,.07) 0%, transparent 70%); }

.sn-svc-4 { border-color: rgba(255,75,51,.18); animation-delay: .32s; }
.sn-svc-4:hover { border-color: rgba(255,75,51,.5); box-shadow: 0 0 30px rgba(255,75,51,.12), var(--sn-shadow-md); }
.sn-svc-4::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .28s ease; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,75,51,.06) 0%, transparent 70%); }

.sn-service-card:hover::before { opacity: 1; }

.sn-svc-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.sn-svc-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--sn-text-hi);
}

.sn-svc-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--sn-text-mid);
  margin-bottom: 24px;
  font-weight: 400;
}

.sn-svc-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.sn-svc-feature {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sn-text-mid);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  padding: 5px 14px;
  transition: border-color .2s, color .2s;
}
.sn-svc-1:hover .sn-svc-feature { border-color: rgba(100,100,255,.3); color: #a0aaff; }
.sn-svc-2:hover .sn-svc-feature { border-color: rgba(255,75,51,.3); color: #ff9080; }
.sn-svc-3:hover .sn-svc-feature { border-color: rgba(100,150,255,.3); color: #7aa8ff; }
.sn-svc-4:hover .sn-svc-feature { border-color: rgba(255,75,51,.3); color: #ff9080; }

.sn-svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: gap .22s ease;
  position: static;
}
.sn-svc-cta .sn-arrow { font-size: 15px; transition: transform .22s ease; }
.sn-svc-cta:hover { gap: 12px; }
.sn-svc-cta:hover .sn-arrow { transform: translateX(4px); }
/* Stretched-link: ::after covers the whole service card */
.sn-svc-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ═══════════════════════════════════════════
   SECTION — CLIENTS
═══════════════════════════════════════════ */
.sn-clients-section {
  position: relative;
  width: 100%;
  padding: 110px 24px 120px;
  overflow: hidden;
  background: var(--sn-bg);
}

.sn-clients-section .sn-blob-tl,
.sn-clients-section .sn-blob-br {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
}
.sn-clients-section .sn-blob-tl {
  width: 600px; height: 400px;
  background: radial-gradient(circle, rgba(255,75,51,.35) 0%, transparent 70%);
  top: -80px; right: -180px;
  opacity: .45;
}
.sn-clients-section .sn-blob-br {
  width: 500px; height: 400px;
  background: radial-gradient(circle, rgba(0,0,128,.55) 0%, transparent 70%);
  bottom: -80px; left: -150px;
  opacity: .45;
}

.sn-clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.sn-client-card {
  background: var(--sn-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 16px;
  min-height: 100px;
  cursor: default;
  box-shadow: var(--sn-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
  animation: snFadeUp .4s ease both;
}

.sn-client-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6699ff 40%, var(--sn-red) 60%, transparent);
  opacity: 0;
  transition: opacity .24s ease;
  border-radius: 0 0 4px 4px;
}

.sn-client-card:hover {
  border-color: rgba(255,75,51,.3);
  box-shadow: 0 0 24px rgba(255,75,51,.12), var(--sn-shadow-md);
  transform: translateY(-3px);
  background: var(--sn-glass-hover);
}
.sn-client-card:hover::after { opacity: 1; }

.sn-client-card:nth-child(1)  { animation-delay: .14s; }
.sn-client-card:nth-child(2)  { animation-delay: .18s; }
.sn-client-card:nth-child(3)  { animation-delay: .22s; }
.sn-client-card:nth-child(4)  { animation-delay: .26s; }
.sn-client-card:nth-child(5)  { animation-delay: .30s; }
.sn-client-card:nth-child(6)  { animation-delay: .34s; }
.sn-client-card:nth-child(7)  { animation-delay: .38s; }
.sn-client-card:nth-child(8)  { animation-delay: .42s; }
.sn-client-card:nth-child(9)  { animation-delay: .46s; }
.sn-client-card:nth-child(10) { animation-delay: .50s; }
.sn-client-card:nth-child(11) { animation-delay: .54s; }
.sn-client-card:nth-child(12) { animation-delay: .58s; }
.sn-client-card:nth-child(13) { animation-delay: .62s; }
.sn-client-card:nth-child(14) { animation-delay: .66s; }
.sn-client-card:nth-child(15) { animation-delay: .70s; }
.sn-client-card:nth-child(16) { animation-delay: .74s; }

.sn-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
}
.sn-logo-wrap img {
  max-width: 110px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .24s ease, opacity .24s ease;
  opacity: .85;
}
.sn-client-card:hover .sn-logo-wrap img {
  transform: scale(1.06);
  opacity: 1;
}

/* Stats strip */
.sn-stats-strip {
  display: flex;
  align-items: stretch;
  margin-top: 52px;
  background: var(--sn-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  overflow: hidden;
  animation: snFadeUp .5s .78s ease both;
}
.sn-stat {
  flex: 1;
  text-align: center;
  padding: 30px 20px;
  position: relative;
  transition: background .24s ease;
}
.sn-stat:hover { background: rgba(255,255,255,.03); }
.sn-stat + .sn-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sn-border-solid), transparent);
}
.sn-stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--sn-text-hi);
}
.sn-stat-value em {
  font-style: normal;
  background: var(--sn-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sn-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--sn-text-mid);
  margin-top: 8px;
  font-weight: 400;
  letter-spacing: .01em;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .sn-products-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sn-card-1 { grid-column: 1 / 3; grid-row: 1; }
  .sn-card-2 { grid-column: 1 / 2; grid-row: 2; }
  .sn-card-3 { grid-column: 2 / 3; grid-row: 2; }
  .sn-card-4 { grid-column: 1 / 2; grid-row: 3; }
  .sn-card-5 { grid-column: 2 / 3; grid-row: 3; }
  .sn-card-1-visual { display: none; }
  .sn-clients-grid { grid-template-columns: repeat(4, 1fr); }
  .sn-services-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .sn-products-section,
  .sn-services-section,
  .sn-clients-section { padding: 72px 16px 88px; }

  .sn-products-grid { grid-template-columns: 1fr; gap: 12px; }
  .sn-card-1, .sn-card-2, .sn-card-3, .sn-card-4, .sn-card-5 { grid-column: 1; grid-row: auto; }
  .sn-prod-card { padding: 26px 20px; }

  .sn-services-grid { grid-template-columns: 1fr; gap: 12px; }
  .sn-service-card { padding: 26px 20px; }

  .sn-clients-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sn-client-card { padding: 20px 12px; min-height: 82px; }
  .sn-stats-strip { flex-wrap: wrap; }
  .sn-stat { flex: 1 1 45%; }
  .sn-stat + .sn-stat::before { display: none; }
  .sn-section-heading { margin-bottom: 48px; }
}

@media (max-width: 420px) {
  .sn-clients-grid { grid-template-columns: repeat(2, 1fr); }
}