/* =========================================================
   Dịch vụ (dich-vu.html) — follows the approved design block by block.
   Loaded after style.css + mockups.css.
   ========================================================= */

.page-services { --sv-ink: #0b1f4d; --sv-blue: #1467e6; --sv-muted: #4f627c; --sv-line: #e3edf8; --gutter: max(20px, calc((100% - 1240px) / 2)); }

/* Shared text styles */
.page-services h1, .page-services h2, .page-services h3 { color: var(--sv-ink); }
.sv-title h2, .sv-why h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.sv-title em, .sv-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #1463f0, #1c8dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-title p { color: var(--sv-muted); font-size: 14.5px; margin: 0; }
.sv-title.center { text-align: center; }
.sv-title.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.sv-badge {
  display: inline-block; padding: 5px 14px; border-radius: 99px;
  background: #dbeaff; color: #0a5ce6;
  font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.sv-badge.dark { background: rgba(255,255,255,.08); border: 1px solid rgba(140,180,255,.55); color: #c4d9ff; }
.sv-section { padding: 64px var(--gutter); }

/* Checklist (blue check circles) */
.svc-list, .sv-cta-checks { list-style: none; padding: 0; margin: 0; }
.svc-list li, .sv-cta-checks li { position: relative; padding: 4px 0 4px 27px; font-size: 13.5px; line-height: 1.5; color: #33475f; }
.svc-list li::before, .sv-cta-checks li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 17px; height: 17px; border-radius: 50%;
  background: #1467e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Buttons used by this design */
.pill.navy { background: linear-gradient(135deg, #0d3478, #061d4d); color: #fff; box-shadow: 0 10px 24px rgba(6,29,77,.28); }
.pill.navy:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6,29,77,.38); }
.sv-btn.primary { background: linear-gradient(90deg, #1a6dff, #0b5ce8); box-shadow: 0 10px 24px rgba(20,103,230,.3); }
.sv-btn-ghost { background: #fff; border: 1.5px solid #b9d2f3; color: #0b5ce8; }
.sv-btn-ghost:hover { border-color: #0b5ce8; transform: translateY(-2px); }
.chat-ic { font-size: 18px; color: #1467e6; }
.sv-outline { background: #fff; border: 1.5px solid #8fb6f0; color: #0b5ce8; min-height: 44px; font-size: 13.5px; }
.sv-outline:hover { background: #f1f7ff; transform: translateY(-2px); }
.sv-outline-light { border: 1.5px solid #3f7fe0; color: #fff; background: rgba(20,80,180,.25); min-height: 44px; font-size: 13.5px; }
.sv-outline-light:hover { background: rgba(40,110,230,.45); transform: translateY(-2px); }
.sv-white { background: #fff; color: #0b5ce8; min-height: 48px; box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.sv-white:hover { transform: translateY(-2px); }

/* ---------- Header (centred menu, navy CTA) ---------- */
.sv-header .nav a { font-size: 13.5px; }

/* ---------- Hero ---------- */
.sv-hero {
  position: relative; overflow-x: clip; text-align: center;
  padding: 104px var(--gutter) 34px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, #edf5ff 0%, #e2eeff 50%, #f5f9ff 100%);
}
.sv-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: url('https://images.unsplash.com/photo-1464938050520-ef2270bb8ce8?auto=format&fit=crop&w=2000&q=70') center 30% / cover;
  opacity: .22; filter: saturate(.7) blur(1.5px);
  mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
}
.cube {
  position: absolute; z-index: 1; width: 46px; height: 46px; border-radius: 13px; pointer-events: none;
  background: linear-gradient(145deg, #9cc6ff 0%, #3b86ff 45%, #1257e0 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.6), 0 16px 30px rgba(20,90,220,.3);
  animation: cube-float 7s ease-in-out infinite;
}
.cube.c1 { left: 21%; top: 96px; transform: rotate(-14deg); }
.cube.c2 { right: 7%; top: 104px; transform: rotate(12deg); animation-delay: -2s; }
.cube.c3 { right: 15%; top: 150px; width: 34px; height: 34px; border-radius: 10px; transform: rotate(-8deg); animation-delay: -4s; opacity: .85; }
.cube.c4 { left: 5%; top: 330px; width: 30px; height: 30px; border-radius: 9px; opacity: .55; animation-delay: -3s; filter: blur(1px); }
@keyframes cube-float { 50% { translate: 0 -12px; } }

.sv-hero-copy { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.sv-hero h1 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; margin: 14px 0 14px; }
.sv-hero-copy > p { color: #3b4d66; font-size: 15px; line-height: 1.7; margin: 0 auto; max-width: 720px; }
.sv-hero-actions { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.sv-hero-actions .pill { min-height: 46px; font-size: 13.5px; }

/* Glass panel holding the 4 service cards */
.sv-panel {
  position: relative; z-index: 2; max-width: 1180px; margin: 30px auto 0;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 16px; padding: 16px;
  border-radius: 28px; text-align: left;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(214,232,255,.35));
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 34px 80px rgba(30,90,170,.18);
}
.sv-col { display: grid; gap: 16px; align-content: start; }
.sv-col-right { margin-top: 28px; }
.sv-card {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 196px; border-radius: 20px; overflow: hidden; color: var(--sv-ink);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(226,239,255,.7));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 34px rgba(30,90,170,.12);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.sv-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(30,90,170,.2); }
.sv-card-copy { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 22px 0 20px 24px; }
.sv-ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(145deg, #3b86ff, #0b5ce8); box-shadow: 0 8px 18px rgba(20,103,230,.3);
}
.sv-ic.teal { background: linear-gradient(145deg, #2fd3c4, #0b9f98); box-shadow: 0 8px 18px rgba(11,159,152,.3); }
.sv-card h3 { font-size: 19px; line-height: 1.22; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 8px; }
.sv-card p { font-size: 13px; line-height: 1.55; color: #4a5d75; margin: 0 0 14px; }
.sv-go {
  margin-top: auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: #1467e6;
  background: #fff; box-shadow: 0 6px 16px rgba(20,70,140,.14);
  transition: transform .3s, background .3s, color .3s;
}
.sv-card:hover .sv-go { transform: rotate(45deg); background: #1467e6; color: #fff; }
.sv-card-art { position: relative; min-height: 180px; }
[data-devices="web"] .dv-laptop { right: -4%; width: 104%; bottom: 14px; }
[data-devices="upgrade"] .dv-laptop, [data-devices="crm"] .dv-laptop { right: -2%; width: 96%; bottom: 14px; }
.dv-host { position: absolute; inset: 0; }
.sv-card-art .dv-stage { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sv-card:hover .sv-card-art .dv-stage { transform: translateY(-4px) scale(1.03); }
.sv-fan-phone { position: absolute; right: 12%; bottom: -46px; width: 25%; aspect-ratio: 9 / 19; }
.sv-fan-phone .dv-phone { left: 0; right: 0; bottom: 0; }
.social-float { position: absolute; left: 4%; top: 16%; width: 52%; height: 72%; }
.so {
  position: absolute; display: grid; place-items: center; border-radius: 12px; color: #fff;
  box-shadow: 0 10px 22px rgba(20,60,140,.22);
}
.so-fb { width: 46px; height: 46px; font-size: 30px; background: #1877f2; left: 8%; top: 4%; }
.so-ig { width: 40px; height: 40px; font-size: 24px; left: 62%; top: 18%; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.so-zalo { width: 48px; height: 44px; left: 30%; top: 58%; background: #fff; color: #0068ff; font: 800 15px/1 var(--display); border: 2.5px solid #0068ff; border-radius: 13px 13px 13px 4px; box-shadow: 0 10px 22px rgba(0,104,255,.2); }
.glass-tile {
  position: absolute; z-index: 3; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 14px; font-size: 26px; color: #1467e6;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95);
  backdrop-filter: blur(8px); box-shadow: 0 12px 26px rgba(30,90,170,.18);
  animation: cube-float 6s ease-in-out infinite;
}
.glass-tile.chart { left: -6%; top: 12%; width: 62px; height: 62px; font-size: 32px; }
.glass-tile.t-a { left: -4%; top: 18%; width: 44px; height: 44px; font-size: 20px; animation-delay: -2s; }
.glass-tile.t-b { left: 2%; bottom: 14%; width: 46px; height: 46px; font-size: 22px; color: #fff; background: linear-gradient(145deg, #3b86ff, #0b5ce8); animation-delay: -4s; }
.glass-tile.t-c { right: -2%; top: 46%; width: 50px; height: 50px; font-size: 22px; animation-delay: -1s; }

/* Stats */
.sv-stats {
  position: relative; z-index: 2; max-width: 1180px; margin: 22px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); text-align: left;
  background: #fff; border-radius: 18px; border: 1px solid #e6eef8;
  box-shadow: 0 16px 40px rgba(20,60,110,.1);
}
.sv-stat { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 18px; }
.sv-stat + .sv-stat::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: #dfe8f3; }
.sv-stat-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #1467e6; background: #eef5ff; flex-shrink: 0; }
.sv-stat strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--sv-blue); }
.sv-stat small { display: block; font-size: 12.5px; color: #56687f; margin-top: 3px; }

/* ---------- Main services ---------- */
.sv-services { background: linear-gradient(180deg, #f5f9ff, #fff 40%); padding-top: 60px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.svc {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 24px 22px 22px; border-radius: 16px;
  background: linear-gradient(160deg, #fff 55%, #f0f6ff); border: 1px solid var(--sv-line);
  box-shadow: 0 12px 30px rgba(20,60,110,.06);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(20,90,170,.14); border-color: #c8dcf6; }
.svc-ic {
  position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 23px; color: #fff;
  background: linear-gradient(145deg, #3b86ff, #0b5ce8); box-shadow: 0 8px 18px rgba(20,103,230,.28);
}
.svc-ic.teal { background: linear-gradient(145deg, #2fd3c4, #0b9f98); box-shadow: 0 8px 18px rgba(11,159,152,.28); }
.svc h3 { position: relative; z-index: 2; font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 18px 0 8px; }
.svc > p { position: relative; z-index: 2; font-size: 13.5px; line-height: 1.6; color: #4a5d75; margin: 0 0 14px; }
.svc .svc-list { margin-bottom: 16px; }
.svc-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #0b5ce8; font-weight: 700; font-size: 13.5px; }
.svc-more svg { transition: transform .25s; }
.svc-more:hover svg { transform: translateX(4px); }

/* Card decorations (top-right corner, as in the design) */
.svc-deco { position: absolute; top: 12px; right: 12px; width: 46%; height: 76px; pointer-events: none; }
.mini-browser {
  position: absolute; right: 0; top: 12px; width: 78%; height: 56px; border-radius: 6px;
  background: linear-gradient(135deg, #eef5ff, #d6e7ff); border: 1px solid #c6dcf8;
  box-shadow: 0 10px 22px rgba(30,90,170,.15); transform: perspective(400px) rotateY(-16deg);
}
.mini-browser i { position: absolute; left: 6px; top: 6px; width: 30%; height: 5px; border-radius: 2px; background: #1467e6; }
.mini-browser span { position: absolute; left: 6px; height: 4px; border-radius: 2px; background: #9fbfe8; }
.mini-browser span:nth-of-type(1) { top: 18px; width: 70%; }
.mini-browser span:nth-of-type(2) { top: 27px; width: 50%; }
.mini-browser b { position: absolute; right: 8px; bottom: 8px; width: 34%; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #3b86ff, #1257e0); }
.deco-tower { position: absolute; right: 6%; top: 18px; width: 26%; height: 70px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #cfe0f7 0 6px, #e9f2ff 6px 12px); opacity: .9; }
.deco-arrow { position: absolute; left: 0; top: 2px; width: 88%; height: auto; filter: drop-shadow(0 8px 12px rgba(20,103,230,.25)); }
.deco-social .so { box-shadow: 0 8px 16px rgba(20,60,140,.2); }
.deco-social .so-fb { width: 34px; height: 34px; font-size: 22px; left: auto; right: 6%; top: 4px; border-radius: 9px; }
.deco-social .so-ig { width: 30px; height: 30px; font-size: 18px; left: auto; right: 34%; top: 22px; border-radius: 9px; }
.deco-social .so-zalo { width: 36px; height: 30px; font-size: 11px; left: auto; right: 14%; top: 44px; border-width: 2px; border-radius: 10px 10px 10px 3px; }
.mini-app {
  position: absolute; right: 4%; top: 6px; width: 60%; height: 74px; border-radius: 8px;
  background: #fff; border: 1px solid #d6e5f7; box-shadow: 0 12px 24px rgba(30,90,170,.16);
  transform: perspective(400px) rotateY(-18deg) rotateZ(-3deg);
}
.mini-app.back { right: 30%; top: 22px; width: 40%; height: 50px; opacity: .6; z-index: -1; transform: rotate(-6deg); }
.mini-app i { position: absolute; left: 6px; top: 6px; width: 40%; height: 5px; border-radius: 2px; background: #1467e6; }
.mini-app span { position: absolute; left: 6px; right: 6px; height: 9px; border-radius: 3px; background: #e6eef9; }
.mini-app span:nth-of-type(1) { top: 18px; }
.mini-app span:nth-of-type(2) { top: 32px; }
.mini-app span:nth-of-type(3) { top: 46px; right: 40%; }
.mini-app b { position: absolute; right: 6px; bottom: 6px; width: 24%; height: 10px; border-radius: 3px; background: #12c2a4; }

/* ---------- Why GrowUp ---------- */
.sv-why {
  position: relative; overflow: hidden; color: #fff;
  padding: 44px var(--gutter) 48px;
  background:
    radial-gradient(ellipse 40% 80% at 100% 0%, rgba(40,110,230,.35), transparent 70%),
    radial-gradient(ellipse 30% 60% at 0% 100%, rgba(20,80,200,.35), transparent 70%),
    linear-gradient(120deg, #0a2a5e, #06214d 50%, #041a3e);
}
.sv-why h2 { color: #fff; }
.sv-why-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.sv-why-head p { color: #c3d3ea; font-size: 14.5px; margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.why {
  padding: 20px 18px 22px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(46,110,215,.34), rgba(20,60,140,.22));
  border: 1px solid rgba(110,160,255,.2);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s, border-color .45s;
}
.why:hover { transform: translateY(-6px); border-color: rgba(120,175,255,.5); background: linear-gradient(160deg, rgba(56,125,235,.45), rgba(24,72,160,.3)); }
.why-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(145deg, #2d7dff, #1257e0); box-shadow: 0 8px 18px rgba(10,60,200,.4); }
.why h3 { color: #fff; font-size: 15px; line-height: 1.3; font-weight: 700; margin: 14px 0 6px; }
.why p { color: #b9cbe6; font-size: 13px; line-height: 1.55; margin: 0; }

/* ---------- Projects ---------- */
.sv-projects { padding-top: 44px; padding-bottom: 30px; }
.prj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.prj {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 20px 20px 22px; border-radius: 18px;
  background: linear-gradient(180deg, #f3f8ff, #fff 60%); border: 1px solid var(--sv-line);
  box-shadow: 0 12px 30px rgba(20,60,110,.07);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.prj:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(20,90,170,.15); }
.prj-tag { align-self: flex-start; padding: 5px 12px; border-radius: 99px; background: #dce9ff; color: #1560d8; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prj h3 { font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; position: relative; z-index: 2; }
.prj-art { position: relative; height: 196px; margin: 0 -20px; }
.prj-photo { position: absolute; right: 0; top: -70px; width: 46%; height: 250px; background: center / cover; mask-image: linear-gradient(90deg, transparent, #000 35%); border-radius: 0 0 0 20px; }
.prj-devices { position: absolute; inset: 0; }
.prj-art-1 [data-devices="prj1"] .dv-laptop { left: 6%; width: 74%; bottom: 0; }
.prj-art-3 [data-devices="prj3"] .dv-laptop { left: 6%; width: 64%; bottom: 8px; }
.prj-art-3 [data-devices="prj3"] .dv-tablet { right: 5%; width: 26%; top: 0; transform: rotate(0); }
.prj-art-3 [data-devices="prj3"] .dv-tablet .dv-screen { aspect-ratio: 4 / 3; }
.prj-team { position: absolute; right: 4%; bottom: 8px; width: 34%; height: 44%; border-radius: 10px; background: center / cover; box-shadow: 0 10px 22px rgba(20,60,110,.2); border: 3px solid #fff; }
.ba { position: absolute; inset: 0 6%; display: flex; align-items: center; justify-content: space-between; }
.ba-item { position: relative; width: 42%; display: flex; flex-direction: column; align-items: center; }
.ba-dev { position: relative; width: 100%; aspect-ratio: 16 / 10.8; }
.ba-dev .dv-laptop { left: 0; right: 0; bottom: 0; }
.ba-label { margin-top: 8px; position: relative; z-index: 2; padding: 3px 12px; border-radius: 99px; background: #6d7f97; color: #fff; font-size: 11px; font-weight: 700; }
.ba-label.after { background: #1467e6; }
.ba-arrow { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff; background: linear-gradient(145deg, #3b86ff, #0b5ce8); box-shadow: 0 8px 18px rgba(20,103,230,.35); flex-shrink: 0; }
.prj-body { position: relative; z-index: 2; display: flex; flex-direction: column; margin-top: 14px; }
.prj:first-child .prj-body { margin: -64px 0 0 34%; padding: 14px 16px 16px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 14px 30px rgba(20,60,110,.14); }
.prj-btn { align-self: center; min-height: 40px; padding: 0 22px; font-size: 13px; margin-top: 14px; background: linear-gradient(90deg, #1a6dff, #0b5ce8); }

/* ---------- Benefits ---------- */
.sv-benefits { padding-top: 30px; padding-bottom: 36px; }
.bn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.bn {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 14px;
  background: #fff; border: 1px solid #e6eef8; box-shadow: 0 10px 26px rgba(20,60,110,.05);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.bn:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(20,90,170,.12); }
.bn-ic { width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-size: 28px; color: #1467e6; background: #eaf3ff; transition: transform .4s; }
.bn:hover .bn-ic { transform: rotate(-8deg) scale(1.06); }
.bn h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 4px; }
.bn p { font-size: 13px; line-height: 1.55; color: #56687f; margin: 0; }

/* ---------- CTA ---------- */
.sv-cta-wrap { padding: 16px var(--gutter) 70px; }
.sv-cta {
  position: relative; display: grid; grid-template-columns: .95fr 1.5fr .75fr; align-items: center; gap: 30px;
  min-height: 200px; padding: 0 40px 0 30px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(ellipse 40% 90% at 70% 50%, rgba(80,150,255,.25), transparent 70%),
    linear-gradient(110deg, #0b3a8f, #0a2d73 45%, #062056);
  box-shadow: 0 26px 60px rgba(6,32,86,.3);
}
.sv-cta::after { /* light streak */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 48%, transparent 56%);
}
.sv-cta-art { position: relative; height: 210px; align-self: end; }
[data-devices="cta"] .dv-laptop { left: 0; width: 72%; bottom: 0; }
[data-devices="cta"] .dv-phone { left: 60%; width: 17%; bottom: 0; }
[data-devices="cta"] .dv-phone2 { left: 80%; width: 19%; bottom: 0; }
.sv-cta-copy { position: relative; z-index: 2; padding: 30px 0; }
.sv-cta h2 { color: #fff; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; }
.sv-cta-copy p { color: #c9d8f0; font-size: 13.5px; margin: 0; }
.sv-cta-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sv-cta-checks li { color: #d7e4f7; font-size: 13px; }
.sv-cta-checks li::before { background-color: #2b7bff; }

@media (min-width: 1181px) { .sv-cta h2 { white-space: nowrap; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sv-panel { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cta { grid-template-columns: 1fr 1.2fr; padding: 30px; }
  .sv-cta-art { display: none; }
}
@media (max-width: 860px) {
  .sv-panel { grid-template-columns: 1fr; }
  .sv-col-right { margin-top: 0; }
  .sv-stats { grid-template-columns: repeat(2, 1fr); }
  .sv-stat:nth-child(3)::before { display: none; }
  .sv-title.split, .sv-why-head { flex-direction: column; align-items: flex-start; }
  .prj-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .sv-cta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sv-hero { padding-top: 88px; }
  .sv-hero h1 { font-size: 27px; }
  .sv-hero h1 br { display: none; }
  .sv-hero-copy > p { font-size: 14px; }
  .sv-hero-actions { flex-direction: column; align-items: stretch; }
  .cube.c1, .cube.c4 { display: none; }
  .sv-card { grid-template-columns: 1fr; }
  .sv-card-art { min-height: 0; aspect-ratio: 1.6 / 1; margin-top: 6px; }
  [data-devices="web"] .dv-laptop, [data-devices="upgrade"] .dv-laptop, [data-devices="crm"] .dv-laptop { right: 7%; width: 86%; bottom: 10px; }
  .glass-tile.chart { left: 2%; top: 4%; width: 48px; height: 48px; font-size: 24px; }
  .glass-tile.t-a { left: 2%; top: 6%; }
  .glass-tile.t-c { right: 2%; }
  .sv-card-fan .sv-card-art { aspect-ratio: 1.5 / 1; }
  .sv-card-copy { padding: 20px 20px 0; }
  .sv-go { position: absolute; right: 20px; top: 20px; }
  .sv-stat { justify-content: flex-start; padding: 16px 14px; gap: 10px; }
  .sv-stat-ic { width: 40px; height: 40px; font-size: 18px; }
  .sv-stat strong { font-size: 20px; }
  .sv-stat small { font-size: 11.5px; }
  .sv-stat:nth-child(odd)::before { display: none; }
  .svc-grid, .bn-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .why { padding: 16px 14px; }
  .sv-section { padding-top: 48px; padding-bottom: 48px; }
  .sv-cta { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cube, .glass-tile { animation: none; }
}

/* =========================================================
   Premium 3D (html.fx3d is set by services.js; skipped for reduced motion)
   Start (hero) and end (CTA) get the big moments; the middle only reacts on hover.
   ========================================================= */

/* ---- Hero entrance ---- */
.fx3d .sv-hero .sv-badge { opacity: 0; transform: translateY(-18px) scale(.9); transition: opacity .7s, transform .9s cubic-bezier(.16,.84,.24,1); }
.fx3d .sv-hero h1 .ln { display: block; overflow: hidden; padding: 0 .06em .08em; perspective: 900px; }
.fx3d .sv-hero h1 .ln > span {
  display: inline-block; transform-origin: 50% 100%;
  transform: translateY(105%) rotateX(-70deg); opacity: 0;
  transition: transform 1.1s cubic-bezier(.16,.84,.24,1), opacity .8s;
  transition-delay: calc(.15s + var(--i) * .14s);
}
.fx3d .sv-hero-copy > p, .fx3d .sv-hero-actions { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform 1s cubic-bezier(.16,.84,.24,1); }
.fx3d .sv-hero-copy > p { transition-delay: .45s; }
.fx3d .sv-hero-actions { transition-delay: .6s; }
.fx3d .play .sv-badge, .fx3d .play h1 .ln > span, .fx3d .play .sv-hero-copy > p, .fx3d .play .sv-hero-actions { opacity: 1; transform: none; }

/* Glass panel rises from a tilted table into place; cards fly out of depth */
.fx3d .sv-panel {
  transform-style: preserve-3d;
  backdrop-filter: none; -webkit-backdrop-filter: none; /* backdrop-filter would flatten the 3D layers */
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(214,232,255,.55));
  opacity: 0; transform: perspective(1800px) rotateX(34deg) translateY(150px) scale(.9);
  transition: opacity .9s .25s, transform 1.5s .25s cubic-bezier(.16,.84,.24,1);
}
.fx3d .play .sv-panel { opacity: 1; transform: perspective(1800px); }
.fx3d .sv-col { transform-style: preserve-3d; }
.fx3d .sv-card {
  --ry0: 28deg;
  opacity: 0; transform: translateZ(-280px) rotateY(var(--ry0));
  transition: opacity .8s, transform 1.3s cubic-bezier(.16,.84,.24,1), box-shadow .45s;
}
.fx3d .sv-col-right .sv-card { --ry0: -28deg; }
.fx3d .sv-card-web { transition-delay: .5s; }
.fx3d .sv-card-up { transition-delay: .62s; }
.fx3d .sv-card-fan { transition-delay: .74s; }
.fx3d .sv-card-crm { transition-delay: .86s; }
.fx3d .play .sv-card { opacity: 1; transform: translateZ(0); } /* flat at rest keeps text crisp */
.fx3d .ready .sv-card { transition-delay: 0s; }
.fx3d .ready .sv-card:hover { transform: translateZ(64px); box-shadow: 0 30px 60px rgba(30,90,170,.24); }

/* Laptop lids open once the cards land */
.fx3d .sv-card .dv-laptop, .fx3d .sv-cta .dv-laptop { perspective: 1000px; }
.fx3d .sv-card .dv-laptop .dv-screen, .fx3d .sv-cta .dv-laptop .dv-screen {
  transform-origin: 50% 100%; transform: rotateX(-92deg);
  transition: transform 1.3s cubic-bezier(.2,.9,.25,1.12);
}
.fx3d .play .sv-card-web .dv-laptop .dv-screen { transform: none; transition-delay: 1.15s; }
.fx3d .play .sv-card-up .dv-laptop .dv-screen { transform: none; transition-delay: 1.3s; }
.fx3d .play .sv-card-crm .dv-laptop .dv-screen { transform: none; transition-delay: 1.45s; }
.fx3d .sv-card-fan .sv-fan-phone { opacity: 0; transform: translateY(60px) rotateY(-50deg); transition: opacity .8s 1.2s, transform 1.2s 1.2s cubic-bezier(.16,.84,.24,1); }
.fx3d .play .sv-card-fan .sv-fan-phone { opacity: 1; transform: none; }
.fx3d .sv-card .so, .fx3d .sv-card .glass-tile { opacity: 0; scale: .4; transition: opacity .5s, scale .7s cubic-bezier(.3,1.6,.5,1); }
.fx3d .play .sv-card .so, .fx3d .play .sv-card .glass-tile { opacity: 1; scale: 1; transition-delay: 1.5s; }

/* Stats flip up last */
.fx3d .sv-stats { opacity: 0; transform: perspective(1000px) rotateX(-45deg) translateY(40px); transform-origin: 50% 0; transition: opacity .8s 1.1s, transform 1.1s 1.1s cubic-bezier(.16,.84,.24,1); }
.fx3d .play .sv-stats { opacity: 1; transform: none; }

/* Real 3D cubes that spin and drift with the pointer at different depths */
.cube.cube3d {
  background: none; box-shadow: none; border-radius: 0;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  margin-left: calc(var(--px, 0) * var(--d) * -1);
  margin-top: calc(var(--py, 0) * var(--d) * -1);
  transition: margin .6s cubic-bezier(.2,.8,.2,1);
  animation: cube-float 7s ease-in-out infinite, cube-spin var(--t, 18s) linear infinite;
}
.cube.c1 { --s: 46px; --d: 46px; --t: 16s; }
.cube.c2 { --s: 48px; --d: 64px; --t: 20s; }
.cube.c3 { --s: 32px; --d: 30px; --t: 13s; }
.cube.c4 { --s: 28px; --d: 18px; --t: 22s; }
.cube3d i {
  position: absolute; inset: 0; border-radius: 24%;
  background: linear-gradient(145deg, #b3d3ff 0%, #4a8fff 45%, #1257e0 100%);
  box-shadow: inset 0 0 10px rgba(255,255,255,.45);
}
.cube3d .f1 { transform: translateZ(calc(var(--s) / 2)); }
.cube3d .f2 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube3d .f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(145deg, #7fb2ff, #1f63e8 60%, #0b45b8); }
.cube3d .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(145deg, #7fb2ff, #1f63e8 60%, #0b45b8); }
.cube3d .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(145deg, #d6e8ff, #7fb2ff); }
.cube3d .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #0b45b8; }
@keyframes cube-spin {
  from { transform: perspective(500px) rotateX(-22deg) rotateY(0deg) rotateZ(8deg); }
  to   { transform: perspective(500px) rotateX(-22deg) rotateY(360deg) rotateZ(8deg); }
}

/* ---- Middle of the page: hover-only 3D ---- */
.fx3d .svc-grid, .fx3d .prj-grid { perspective: 1300px; }
.fx3d .svc, .fx3d .prj { --cf: translateZ(0); }
.fx3d .svc.is-tilting, .fx3d .prj.is-tilting { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 30px 60px rgba(20,90,170,.18); }
.svc .glare, .prj .glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.7), transparent 45%);
  opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light;
}
.is-tilting .glare { opacity: 1; }
.fx3d .why-ic { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.fx3d .why:hover .why-ic { transform: perspective(300px) rotateY(360deg); }

/* ---- CTA (end): flips up, lid opens, phones swing in, light sweeps ---- */
.fx3d .sv-cta.reveal { transition: opacity .9s, transform 1.3s cubic-bezier(.16,.84,.24,1); transform-origin: 50% 100%; }
.fx3d .sv-cta.reveal:not(.in) { opacity: 0; transform: perspective(1400px) rotateX(-52deg) translateY(50px); }
.fx3d .sv-cta.in .dv-laptop .dv-screen { transform: none; transition-delay: .7s; }
.fx3d .sv-cta .dv-phone { opacity: 0; transform: translateY(70px) rotateY(-55deg); transition: opacity .8s, transform 1.2s cubic-bezier(.16,.84,.24,1); }
.fx3d .sv-cta.in .dv-phone { opacity: 1; transform: none; transition-delay: 1s; }
.fx3d .sv-cta.in .dv-phone2 { transition-delay: 1.15s; }
.fx3d .sv-cta-art .dv-stage { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fx3d .sv-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(120,180,255,.2), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.fx3d .sv-cta:hover::before { opacity: 1; }
.fx3d .sv-cta::after { background-size: 260% 100%; animation: cta-sweep 7s ease-in-out infinite; }
@keyframes cta-sweep { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

@media (max-width: 640px) {
  .fx3d .sv-hero h1 .ln { display: inline; overflow: visible; padding: 0; }
  .fx3d .sv-hero h1 .ln > span { display: inline; transform: none; opacity: 1; }
  .fx3d .sv-card { --ry0: 0deg; }
}