/*
=========================================================
SYNC SOFT SOLUTION — REUSABLE PROFESSIONAL SERVICE PAGE
File: /assets/css/syncsoft-service-page.css

Use this stylesheet for Local SEO, SEO, Google Ads, web
design, WordPress, GEO/AEO, analytics and other service
pages. All selectors use the "sssp-" prefix to minimise
theme conflicts.
=========================================================
*/

:root{
  --sssp-blue:#2f5cff;
  --sssp-blue-dark:#1737bd;
  --sssp-violet:#6847ff;
  --sssp-coral:#ff5964;
  --sssp-success:#16a66a;
  --sssp-navy:#07132e;
  --sssp-navy-2:#0d2254;
  --sssp-ink:#10192f;
  --sssp-copy:#5f6b82;
  --sssp-soft:#f5f7fb;
  --sssp-soft-blue:#eef3ff;
  --sssp-white:#ffffff;
  --sssp-line:#e5e9f1;
  --sssp-line-dark:rgba(255,255,255,.11);
  --sssp-radius-sm:14px;
  --sssp-radius-md:22px;
  --sssp-radius-lg:32px;
  --sssp-shadow-sm:0 12px 32px rgba(15,23,42,.065);
  --sssp-shadow-md:0 24px 64px rgba(15,23,42,.11);
  --sssp-shadow-blue:0 23px 58px rgba(47,92,255,.20);
  --sssp-container:1240px;
  --sssp-sticky-top:74px;
  --sssp-font:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --sssp-display:"Instrument Sans","Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
}

.sssp-page,
.sssp-page *{
  box-sizing:border-box;
}

.sssp-page{
  position:relative;
  overflow:hidden;
  color:var(--sssp-ink);
  background:var(--sssp-white);
  font-family:var(--sssp-font);
}

.sssp-page img{
  max-width:100%;
}

.sssp-page a{
  text-decoration:none;
}

.sssp-container{
  width:min(var(--sssp-container),calc(100% - 40px));
  margin-inline:auto;
}

.sssp-section{
  position:relative;
  padding:92px 0;
  scroll-margin-top:calc(var(--sssp-sticky-top) + 64px);
}

.sssp-section--soft{
  background:var(--sssp-soft);
}

.sssp-section--dark{
  color:#fff;
  background:
    radial-gradient(circle at 8% 10%,rgba(47,92,255,.30),transparent 31%),
    radial-gradient(circle at 92% 85%,rgba(104,71,255,.25),transparent 34%),
    linear-gradient(145deg,var(--sssp-navy) 0%,#0a1b43 55%,var(--sssp-navy-2) 100%);
}

.sssp-section-head{
  max-width:770px;
  margin-bottom:40px;
}

.sssp-section-head--center{
  margin-inline:auto;
  text-align:center;
}

.sssp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  color:var(--sssp-blue);
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.sssp-eyebrow::before{
  content:"";
  width:25px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--sssp-blue),var(--sssp-coral));
}

.sssp-section--dark .sssp-eyebrow{
  color:#d3dbff;
}

.sssp-heading{
  margin:0;
  color:var(--sssp-ink);
  font-family:var(--sssp-display);
  font-size:clamp(31px,4vw,52px);
  line-height:1.08;
  letter-spacing:-1.5px;
  font-weight:800;
}

.sssp-heading--sm{
  font-size:clamp(28px,3.3vw,43px);
}

.sssp-section--dark .sssp-heading{
  color:#fff;
}

.sssp-lead{
  margin:15px 0 0;
  color:var(--sssp-copy);
  font-size:15.5px;
  line-height:1.78;
}

.sssp-section--dark .sssp-lead{
  color:rgba(255,255,255,.71);
}

.sssp-copy{
  color:var(--sssp-copy);
  font-size:14.5px;
  line-height:1.82;
}

.sssp-copy p{
  margin:0 0 17px;
}

.sssp-copy strong{
  color:var(--sssp-ink);
}

.sssp-section--dark .sssp-copy{
  color:rgba(255,255,255,.71);
}

.sssp-section--dark .sssp-copy strong{
  color:#fff;
}

/* ---------------- Buttons ---------------- */

.sssp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
}

.sssp-btn{
  min-height:51px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 19px;
  border:1px solid transparent;
  border-radius:14px;
  font-size:13px;
  line-height:1;
  font-weight:800;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease;
}

.sssp-btn svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
}

.sssp-btn:hover{
  transform:translateY(-2px);
}

.sssp-btn--primary{
  color:#fff !important;
  background:linear-gradient(135deg,var(--sssp-blue-dark),var(--sssp-blue) 55%,var(--sssp-violet));
  box-shadow:var(--sssp-shadow-blue);
}

.sssp-btn--primary:hover{
  color:#fff;
  box-shadow:0 28px 65px rgba(47,92,255,.28);
}

.sssp-btn--secondary{
  color:var(--sssp-ink);
  border-color:var(--sssp-line);
  background:#fff;
  box-shadow:0 9px 24px rgba(15,23,42,.055);
}

.sssp-btn--secondary:hover{
  color:var(--sssp-blue);
  border-color:rgba(47,92,255,.23);
  box-shadow:0 14px 31px rgba(47,92,255,.10);
}

.sssp-btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);
}

.sssp-btn--ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.14);
}

/* ---------------- Hero ---------------- */

.sssp-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:78px 0 66px;
  background:
    linear-gradient(rgba(47,92,255,.043) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,92,255,.043) 1px,transparent 1px),
    radial-gradient(circle at 87% 10%,rgba(104,71,255,.14),transparent 34%),
    radial-gradient(circle at 6% 80%,rgba(47,92,255,.10),transparent 31%),
    linear-gradient(180deg,#fff 0%,#f7f9ff 100%);
  background-size:38px 38px,38px 38px,auto,auto,auto;
}

.sssp-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:450px;
  height:450px;
  right:-235px;
  top:-235px;
  border:1px solid rgba(47,92,255,.11);
  border-radius:50%;
  box-shadow:
    0 0 0 59px rgba(47,92,255,.032),
    0 0 0 118px rgba(104,71,255,.022);
}

.sssp-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:29px;
  color:#7f8a9e;
  font-size:11.5px;
  line-height:1.4;
  font-weight:650;
}

.sssp-breadcrumb a{
  color:var(--sssp-blue);
}

.sssp-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);
  gap:68px;
  align-items:center;
}

.sssp-hero-copy{
  max-width:690px;
}

.sssp-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  padding:9px 13px;
  border:1px solid rgba(47,92,255,.14);
  border-radius:999px;
  color:#2d4179;
  background:rgba(255,255,255,.84);
  box-shadow:0 8px 23px rgba(15,23,42,.05);
  font-size:11.5px;
  line-height:1;
  font-weight:750;
}

.sssp-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sssp-success);
  box-shadow:0 0 0 5px rgba(22,166,106,.12);
}

.sssp-hero h1{
  margin:0;
  max-width:780px;
  color:var(--sssp-ink);
  font-family:var(--sssp-display);
  font-size:clamp(42px,5.3vw,70px);
  line-height:1.025;
  letter-spacing:-2.7px;
  font-weight:800;
}

.sssp-gradient-text{
  background:linear-gradient(100deg,var(--sssp-blue) 0%,var(--sssp-violet) 61%,var(--sssp-coral) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sssp-hero-intro{
  max-width:670px;
  margin:22px 0 0;
  color:var(--sssp-copy);
  font-size:16px;
  line-height:1.78;
}

.sssp-hero-intro strong{
  color:var(--sssp-ink);
}

.sssp-hero-actions{
  margin-top:27px;
}

.sssp-trust-list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:23px;
  color:#68748a;
  font-size:11.8px;
  line-height:1.4;
  font-weight:650;
}

.sssp-trust-list span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.sssp-trust-list svg{
  width:16px;
  height:16px;
  color:var(--sssp-success);
}

.sssp-hero-visual{
  position:relative;
}

.sssp-visual-shell{
  position:relative;
  overflow:hidden;
  padding:13px;
  border:1px solid rgba(47,92,255,.13);
  border-radius:31px;
  background:rgba(255,255,255,.93);
  box-shadow:0 30px 80px rgba(22,36,78,.17);
}

.sssp-visual-image{
  position:relative;
  overflow:hidden;
  min-height:455px;
  border-radius:23px;
  background:
    radial-gradient(circle at 82% 18%,rgba(104,71,255,.35),transparent 32%),
    linear-gradient(145deg,#06132f,#173a91 57%,#3158dd);
}

.sssp-visual-image img{
  width:100%;
  height:455px;
  display:block;
  object-fit:cover;
  object-position:center;
}

.sssp-visual-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(4,13,35,.69) 100%);
}

.sssp-visual-caption{
  position:absolute;
  z-index:2;
  left:29px;
  right:29px;
  bottom:28px;
  color:#fff;
}

.sssp-visual-caption small{
  display:block;
  margin-bottom:7px;
  color:#d2daff;
  font-size:9.5px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.sssp-visual-caption strong{
  display:block;
  max-width:320px;
  font-size:20px;
  line-height:1.35;
}

.sssp-float-card{
  position:absolute;
  z-index:3;
  min-width:168px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 42px rgba(15,23,42,.14);
}

.sssp-float-card--one{
  top:27px;
  left:-38px;
}

.sssp-float-card--two{
  right:-28px;
  bottom:46px;
}

.sssp-float-card small{
  display:block;
  margin-bottom:4px;
  color:#7e899d;
  font-size:9.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.sssp-float-card strong{
  display:block;
  color:var(--sssp-ink);
  font-size:21px;
  line-height:1.15;
}

.sssp-float-card span{
  display:block;
  margin-top:4px;
  color:#5f6b81;
  font-size:10.5px;
  line-height:1.4;
}

.sssp-metrics{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:56px;
  border:1px solid var(--sssp-line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--sssp-shadow-sm);
}

.sssp-metric{
  position:relative;
  padding:22px 25px;
}

.sssp-metric:not(:last-child)::after{
  content:"";
  position:absolute;
  top:22px;
  right:0;
  bottom:22px;
  width:1px;
  background:var(--sssp-line);
}

.sssp-metric strong{
  display:block;
  color:var(--sssp-ink);
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.6px;
}

.sssp-metric span{
  display:block;
  margin-top:5px;
  color:#748096;
  font-size:10.8px;
  line-height:1.5;
  font-weight:650;
}

/* ---------------- Sticky section navigation ---------------- */

.sssp-nav-wrap{
  position:sticky;
  top:var(--sssp-sticky-top);
  z-index:80;
  padding:11px 0;
  border-top:1px solid rgba(15,23,42,.045);
  border-bottom:1px solid rgba(15,23,42,.07);
  background:rgba(255,255,255,.91);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.sssp-nav{
  display:flex;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
}

.sssp-nav::-webkit-scrollbar{
  display:none;
}

.sssp-nav a{
  flex:0 0 auto;
  padding:9px 13px;
  border-radius:10px;
  color:#59657b;
  font-size:11.5px;
  line-height:1;
  font-weight:750;
  transition:color .2s ease,background .2s ease;
}

.sssp-nav a:hover,
.sssp-nav a.is-active{
  color:var(--sssp-blue);
  background:#edf2ff;
}

/* ---------------- Reusable cards and grids ---------------- */

.sssp-grid{
  display:grid;
  gap:18px;
}

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

.sssp-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.sssp-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.sssp-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--sssp-line);
  border-radius:var(--sssp-radius-md);
  background:#fff;
  box-shadow:var(--sssp-shadow-sm);
}

.sssp-card--padded{
  padding:29px;
}

.sssp-feature-card{
  min-height:225px;
  padding:26px;
  border:1px solid var(--sssp-line);
  border-radius:19px;
  background:#fff;
  box-shadow:0 10px 29px rgba(15,23,42,.045);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.sssp-feature-card:hover{
  transform:translateY(-5px);
  border-color:rgba(47,92,255,.18);
  box-shadow:var(--sssp-shadow-md);
}

.sssp-feature-icon{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  margin-bottom:21px;
  border-radius:14px;
  color:var(--sssp-blue);
  background:linear-gradient(145deg,#edf2ff,#f7f4ff);
}

.sssp-feature-icon svg{
  width:21px;
  height:21px;
}

.sssp-feature-card h3{
  margin:0 0 8px;
  color:var(--sssp-ink);
  font-size:17px;
  line-height:1.35;
  font-weight:800;
}

.sssp-feature-card p{
  margin:0;
  color:var(--sssp-copy);
  font-size:13px;
  line-height:1.72;
}

.sssp-feature-card p strong{
  color:var(--sssp-ink);
}

/* ---------------- Split content / side card ---------------- */

.sssp-split{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
  gap:56px;
  align-items:start;
}

.sssp-side-card{
  position:sticky;
  top:calc(var(--sssp-sticky-top) + 76px);
  overflow:hidden;
  padding:28px;
  border:1px solid var(--sssp-line);
  border-radius:var(--sssp-radius-md);
  background:#fff;
  box-shadow:var(--sssp-shadow-md);
}

.sssp-side-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--sssp-blue),var(--sssp-violet),var(--sssp-coral));
}

.sssp-side-card h3{
  margin:0 0 8px;
  color:var(--sssp-ink);
  font-size:22px;
  line-height:1.3;
  font-weight:800;
}

.sssp-side-card > p{
  margin:0 0 18px;
  color:var(--sssp-copy);
  font-size:13px;
  line-height:1.7;
}

.sssp-check-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.sssp-check-list li{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid #edf0f5;
  border-radius:13px;
  color:#33415b;
  background:#fbfcfe;
  font-size:12.5px;
  line-height:1.5;
  font-weight:650;
}

.sssp-check-list span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--sssp-blue);
  background:#edf2ff;
}

.sssp-check-list svg{
  width:16px;
  height:16px;
}

.sssp-callout{
  margin-top:23px;
  padding:20px 22px;
  border:1px solid rgba(47,92,255,.14);
  border-left:4px solid var(--sssp-blue);
  border-radius:0 17px 17px 0;
  color:#34415b;
  background:linear-gradient(135deg,#f7f9ff,#eef3ff);
  font-size:13.5px;
  line-height:1.72;
  font-weight:600;
}

.sssp-callout strong{
  color:var(--sssp-ink);
}

/* ---------------- Process ---------------- */

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

.sssp-process::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:31px;
  height:1px;
  background:linear-gradient(90deg,rgba(47,92,255,.1),var(--sssp-blue),rgba(104,71,255,.1));
}

.sssp-step{
  position:relative;
  z-index:1;
  padding:24px 21px;
  border:1px solid var(--sssp-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 29px rgba(15,23,42,.045);
}

.sssp-step-number{
  width:57px;
  height:57px;
  display:grid;
  place-items:center;
  margin-bottom:19px;
  border:6px solid var(--sssp-soft);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,var(--sssp-blue),var(--sssp-violet));
  box-shadow:0 12px 26px rgba(47,92,255,.23);
  font-size:11px;
  font-weight:800;
}

.sssp-step small{
  display:block;
  margin-bottom:5px;
  color:var(--sssp-blue);
  font-size:9.5px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sssp-step h3{
  margin:0 0 7px;
  color:var(--sssp-ink);
  font-size:16px;
  line-height:1.38;
  font-weight:800;
}

.sssp-step p{
  margin:0;
  color:var(--sssp-copy);
  font-size:12.3px;
  line-height:1.7;
}

/* ---------------- Tables ---------------- */

.sssp-table-wrap{
  overflow-x:auto;
  border:1px solid var(--sssp-line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--sssp-shadow-sm);
  -webkit-overflow-scrolling:touch;
}

.sssp-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}

.sssp-table th,
.sssp-table td{
  padding:17px 18px;
  border-bottom:1px solid var(--sssp-line);
  color:var(--sssp-copy);
  font-size:12.5px;
  line-height:1.62;
  text-align:left;
  vertical-align:top;
}

.sssp-table th{
  color:#28344b;
  background:#f1f4fb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.sssp-table td strong{
  color:var(--sssp-ink);
}

.sssp-table tbody tr:last-child td{
  border-bottom:0;
}

.sssp-table tbody tr:hover td{
  background:#fbfcff;
}

/* ---------------- Tools ---------------- */

.sssp-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sssp-tool{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--sssp-line);
  border-radius:999px;
  color:var(--sssp-ink);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
  font-size:11.5px;
  line-height:1;
  font-weight:800;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.sssp-tool::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--sssp-blue),var(--sssp-violet));
}

.sssp-tool span{
  color:#7c879b;
  font-size:9.5px;
  font-weight:700;
}

.sssp-tool:hover{
  color:var(--sssp-blue);
  transform:translateY(-2px);
  border-color:rgba(47,92,255,.20);
  box-shadow:0 13px 27px rgba(47,92,255,.09);
}

/* ---------------- Pricing ---------------- */

.sssp-pricing{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.sssp-price-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid var(--sssp-line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--sssp-shadow-sm);
}

.sssp-price-card--featured{
  color:#fff;
  border-color:transparent;
  background:
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.16),transparent 28%),
    linear-gradient(145deg,var(--sssp-blue-dark),var(--sssp-blue) 58%,var(--sssp-violet));
  box-shadow:var(--sssp-shadow-blue);
  transform:translateY(-8px);
}

.sssp-price-badge{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  margin-bottom:17px;
  padding:0 10px;
  border:1px solid var(--sssp-line);
  border-radius:999px;
  color:var(--sssp-blue);
  background:#edf2ff;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.sssp-price-card--featured .sssp-price-badge{
  color:#fff;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
}

.sssp-price-card h3{
  margin:0;
  color:var(--sssp-ink);
  font-size:22px;
  line-height:1.25;
  font-weight:800;
}

.sssp-price-card--featured h3{
  color:#fff;
}

.sssp-price{
  display:flex;
  align-items:flex-end;
  gap:5px;
  margin:15px 0 7px;
}

.sssp-price strong{
  color:var(--sssp-ink);
  font-size:38px;
  line-height:1;
  letter-spacing:-1.5px;
}

.sssp-price span{
  padding-bottom:4px;
  color:#7b879b;
  font-size:10px;
  font-weight:700;
}

.sssp-price-card--featured .sssp-price strong{
  color:#fff;
}

.sssp-price-card--featured .sssp-price span{
  color:rgba(255,255,255,.66);
}

.sssp-price-description{
  min-height:43px;
  margin:0 0 20px;
  color:var(--sssp-copy);
  font-size:11.5px;
  line-height:1.6;
}

.sssp-price-card--featured .sssp-price-description{
  color:rgba(255,255,255,.70);
}

.sssp-price-features{
  display:grid;
  gap:10px;
  margin:0;
  padding:18px 0 22px;
  border-top:1px solid var(--sssp-line);
  list-style:none;
}

.sssp-price-card--featured .sssp-price-features{
  border-top-color:rgba(255,255,255,.14);
}

.sssp-price-features li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#455168;
  font-size:11.5px;
  line-height:1.5;
  font-weight:650;
}

.sssp-price-card--featured .sssp-price-features li{
  color:rgba(255,255,255,.78);
}

.sssp-price-features svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  margin-top:2px;
  color:var(--sssp-success);
}

.sssp-price-card--featured .sssp-price-features svg{
  color:#86efac;
}

.sssp-price-card .sssp-btn{
  width:100%;
}

.sssp-price-card--featured .sssp-btn--secondary{
  color:var(--sssp-blue);
  border-color:#fff;
}

/* Billing switch for reusable package sections */

.sssp-billing{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin:24px 0 34px;
  color:#637087;
  font-size:11px;
  font-weight:750;
}

.sssp-switch{
  position:relative;
  width:53px;
  height:29px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#dfe5f2;
  cursor:pointer;
  transition:background .2s ease;
}

.sssp-switch::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.16);
  transition:transform .22s ease;
}

.sssp-switch.is-yearly{
  background:linear-gradient(135deg,var(--sssp-blue),var(--sssp-violet));
}

.sssp-switch.is-yearly::after{
  transform:translateX(24px);
}

.sssp-save{
  padding:5px 8px;
  border-radius:999px;
  color:#087a48;
  background:#eafbf2;
  font-size:9px;
  font-weight:800;
}

/* ---------------- Dark outcome cards ---------------- */

.sssp-outcomes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.sssp-outcome{
  min-height:238px;
  padding:27px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.sssp-outcome-icon{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  margin-bottom:23px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.10);
}

.sssp-outcome-icon svg{
  width:21px;
  height:21px;
}

.sssp-outcome h3{
  margin:0 0 9px;
  color:#fff;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
}

.sssp-outcome p{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:12.8px;
  line-height:1.73;
}

/* ---------------- FAQs ---------------- */

.sssp-faq-layout{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:61px;
  align-items:start;
}

.sssp-faq-intro{
  position:sticky;
  top:calc(var(--sssp-sticky-top) + 76px);
}

.sssp-faq-list{
  display:grid;
  gap:10px;
}

.sssp-faq-item{
  overflow:hidden;
  border:1px solid var(--sssp-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 23px rgba(15,23,42,.035);
}

.sssp-faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:17px;
  padding:17px 19px;
  border:0;
  color:var(--sssp-ink);
  background:transparent;
  text-align:left;
  cursor:pointer;
  font:750 13.3px/1.5 var(--sssp-font);
}

.sssp-faq-icon{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--sssp-blue);
  background:#f0f3fa;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}

.sssp-faq-icon svg{
  width:14px;
  height:14px;
}

.sssp-faq-item.is-open .sssp-faq-icon{
  color:#fff;
  background:var(--sssp-blue);
  transform:rotate(45deg);
}

.sssp-faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .27s ease;
}

.sssp-faq-answer > div{
  min-height:0;
  overflow:hidden;
}

.sssp-faq-answer p{
  margin:0;
  padding:0 19px 18px;
  color:var(--sssp-copy);
  font-size:12.8px;
  line-height:1.75;
}

.sssp-faq-answer a{
  color:var(--sssp-blue);
  font-weight:700;
}

.sssp-faq-item.is-open .sssp-faq-answer{
  grid-template-rows:1fr;
}

/* ---------------- Final CTA ---------------- */

.sssp-cta{
  position:relative;
  overflow:hidden;
  padding:45px;
  border-radius:29px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 14%,rgba(255,255,255,.17),transparent 25%),
    linear-gradient(135deg,var(--sssp-blue-dark) 0%,var(--sssp-blue) 55%,var(--sssp-violet) 100%);
  box-shadow:0 30px 70px rgba(47,92,255,.27);
}

.sssp-cta::before{
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  right:-150px;
  bottom:-180px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  box-shadow:
    0 0 0 44px rgba(255,255,255,.035),
    0 0 0 88px rgba(255,255,255,.022);
}

.sssp-cta-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) auto;
  gap:37px;
  align-items:center;
}

.sssp-cta h2{
  margin:0;
  max-width:730px;
  color:#fff;
  font-family:var(--sssp-display);
  font-size:clamp(29px,3.5vw,44px);
  line-height:1.12;
  letter-spacing:-1.25px;
  font-weight:800;
}

.sssp-cta p{
  margin:12px 0 0;
  max-width:690px;
  color:rgba(255,255,255,.73);
  font-size:13px;
  line-height:1.7;
}

.sssp-cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.sssp-cta .sssp-btn--secondary{
  color:var(--sssp-blue);
  border-color:#fff;
}

/* ---------------- Reviews wrapper ---------------- */

.sssp-reviews{
  padding-top:78px;
}

/* ---------------- Reveal utility ---------------- */

.sssp-reveal{
  opacity:0;
  transform:translateY(17px);
  transition:opacity .52s ease,transform .52s ease;
}

.sssp-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ---------------- Responsive ---------------- */

@media (max-width:1199.98px){
  .sssp-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(375px,.82fr);
    gap:44px;
  }

  .sssp-grid--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sssp-process{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sssp-process::before{
    display:none;
  }
}

@media (max-width:991.98px){
  :root{
    --sssp-sticky-top:72px;
  }

  .sssp-section{
    padding:74px 0;
  }

  .sssp-hero{
    padding:68px 0 57px;
  }

  .sssp-hero-grid,
  .sssp-split,
  .sssp-faq-layout{
    grid-template-columns:1fr;
  }

  .sssp-hero-grid{
    gap:43px;
  }

  .sssp-hero-copy{
    max-width:none;
  }

  .sssp-hero-visual{
    width:min(650px,100%);
    margin-inline:auto;
  }

  .sssp-side-card,
  .sssp-faq-intro{
    position:relative;
    top:auto;
  }

  .sssp-split,
  .sssp-faq-layout{
    gap:38px;
  }

  .sssp-grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sssp-pricing{
    grid-template-columns:1fr;
    max-width:680px;
    margin-inline:auto;
  }

  .sssp-price-card--featured{
    transform:none;
  }

  .sssp-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sssp-metric:nth-child(2)::after{
    display:none;
  }

  .sssp-metric:nth-child(-n+2){
    border-bottom:1px solid var(--sssp-line);
  }

  .sssp-outcomes{
    grid-template-columns:1fr 1fr;
  }

  .sssp-cta-grid{
    grid-template-columns:1fr;
  }

  .sssp-cta-actions{
    justify-content:flex-start;
  }
}

@media (max-width:767.98px){
  .sssp-container{
    width:min(var(--sssp-container),calc(100% - 28px));
  }

  .sssp-section{
    padding:60px 0;
  }

  .sssp-hero{
    padding:55px 0 47px;
  }

  .sssp-breadcrumb{
    margin-bottom:22px;
  }

  .sssp-hero h1{
    font-size:clamp(37px,10.8vw,53px);
    letter-spacing:-1.75px;
  }

  .sssp-hero-intro{
    font-size:14.8px;
  }

  .sssp-nav-wrap{
    top:var(--sssp-sticky-top);
  }

  .sssp-grid--2,
  .sssp-grid--3,
  .sssp-grid--4,
  .sssp-outcomes{
    grid-template-columns:1fr;
  }

  .sssp-process{
    grid-template-columns:1fr;
  }

  .sssp-visual-image,
  .sssp-visual-image img{
    min-height:385px;
    height:385px;
  }

  .sssp-float-card--one{
    left:20px;
    top:20px;
  }

  .sssp-float-card--two{
    right:20px;
    bottom:31px;
  }

  .sssp-card--padded,
  .sssp-feature-card,
  .sssp-side-card,
  .sssp-price-card,
  .sssp-outcome{
    padding:23px;
  }

  .sssp-cta{
    padding:34px 25px;
    border-radius:23px;
  }

  .sssp-cta-actions{
    flex-direction:column;
  }

  .sssp-cta-actions .sssp-btn{
    width:100%;
  }
}

@media (max-width:520px){
  .sssp-hero-actions{
    flex-direction:column;
  }

  .sssp-hero-actions .sssp-btn{
    width:100%;
  }

  .sssp-trust-list{
    display:grid;
    gap:9px;
  }

  .sssp-visual-shell{
    padding:8px;
    border-radius:23px;
  }

  .sssp-visual-image{
    border-radius:17px;
  }

  .sssp-visual-image,
  .sssp-visual-image img{
    min-height:340px;
    height:340px;
  }

  .sssp-float-card{
    min-width:139px;
    padding:10px 11px;
  }

  .sssp-float-card strong{
    font-size:18px;
  }

  .sssp-float-card--one{
    left:15px;
  }

  .sssp-float-card--two{
    right:15px;
  }

  .sssp-visual-caption{
    left:20px;
    right:20px;
    bottom:20px;
  }

  .sssp-visual-caption strong{
    font-size:17px;
  }

  .sssp-metric{
    padding:18px 15px;
  }

  .sssp-metric strong{
    font-size:20px;
  }

  .sssp-metric span{
    font-size:9.8px;
  }

  .sssp-billing{
    flex-wrap:wrap;
  }

  .sssp-tools{
    display:grid;
    grid-template-columns:1fr;
  }

  .sssp-tool{
    justify-content:flex-start;
    border-radius:13px;
  }

  .sssp-faq-question{
    padding:15px;
    font-size:12.5px;
  }

  .sssp-faq-answer p{
    padding:0 15px 16px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .sssp-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .sssp-btn,
  .sssp-feature-card,
  .sssp-tool,
  .sssp-faq-answer,
  .sssp-faq-icon,
  .sssp-switch{
    transition:none !important;
  }
}


/* =========================================================
   FULL BACKGROUND IMAGE HERO
   Reusable on all service pages:
   <section class="sssp-hero sssp-hero--background"
            style="--sssp-hero-bg:url('/assets/images/your-image.webp')">
   ========================================================= */

.sssp-hero--background{
  min-height:calc(100svh - 82px);
  display:flex;
  align-items:center;
  padding:92px 0 62px;
  color:#fff;
  background-color:var(--sssp-navy);
  background-image:
    linear-gradient(
      90deg,
      rgba(4,12,31,.97) 0%,
      rgba(7,24,63,.91) 43%,
      rgba(8,24,58,.65) 67%,
      rgba(4,12,31,.58) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4,12,31,.12) 0%,
      rgba(4,12,31,.50) 100%
    ),
    var(--sssp-hero-bg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

.sssp-hero--background::before{
  width:520px;
  height:520px;
  right:-275px;
  top:-285px;
  border-color:rgba(255,255,255,.09);
  box-shadow:
    0 0 0 68px rgba(255,255,255,.022),
    0 0 0 136px rgba(255,255,255,.014);
}

.sssp-hero--background .sssp-container{
  width:min(var(--sssp-container),calc(100% - 40px));
}

.sssp-hero--background .sssp-hero-grid{
  grid-template-columns:minmax(0,790px);
  min-height:520px;
  align-items:center;
}

.sssp-hero--background .sssp-hero-copy{
  max-width:790px;
}

.sssp-hero--background .sssp-breadcrumb{
  color:rgba(255,255,255,.64);
}

.sssp-hero--background .sssp-breadcrumb a{
  color:#d7e0ff;
}

.sssp-hero--background .sssp-status{
  color:#fff;
  border-color:rgba(255,255,255,.17);
  background:rgba(255,255,255,.09);
  box-shadow:0 10px 30px rgba(0,0,0,.17);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.sssp-hero--background h1{
  max-width:900px;
  color:#fff;
  text-shadow:0 8px 36px rgba(0,0,0,.24);
}

.sssp-hero--background .sssp-gradient-text{
  background:linear-gradient(100deg,#8eb5ff 0%,#b4a2ff 52%,#ff9097 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sssp-hero--background .sssp-hero-intro{
  max-width:760px;
  color:rgba(255,255,255,.76);
}

.sssp-hero--background .sssp-hero-intro strong{
  color:#fff;
}

.sssp-hero--background .sssp-btn--secondary{
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.09);
  box-shadow:none;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.sssp-hero--background .sssp-btn--secondary:hover{
  color:#fff;
  border-color:rgba(255,255,255,.40);
  background:rgba(255,255,255,.15);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}

.sssp-hero--background .sssp-trust-list{
  color:rgba(255,255,255,.72);
}

.sssp-hero--background .sssp-trust-list svg{
  color:#7df0ad;
}

.sssp-hero--background .sssp-metrics{
  margin-top:48px;
  border-color:rgba(255,255,255,.14);
  background:rgba(7,19,46,.54);
  box-shadow:0 22px 60px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

.sssp-hero--background .sssp-metric:not(:last-child)::after{
  background:rgba(255,255,255,.13);
}

.sssp-hero--background .sssp-metric strong{
  color:#fff;
}

.sssp-hero--background .sssp-metric span{
  color:rgba(255,255,255,.64);
}

@media (max-width:991.98px){
  .sssp-hero--background{
    min-height:auto;
    padding:78px 0 58px;
    background-position:64% center;
  }

  .sssp-hero--background .sssp-hero-grid{
    min-height:480px;
    grid-template-columns:minmax(0,760px);
  }
}

@media (max-width:767.98px){
  .sssp-hero--background{
    min-height:auto;
    padding:64px 0 48px;
    background-position:68% center;
    background-image:
      linear-gradient(
        90deg,
        rgba(4,12,31,.97) 0%,
        rgba(7,24,63,.92) 70%,
        rgba(4,12,31,.76) 100%
      ),
      linear-gradient(
        180deg,
        rgba(4,12,31,.20) 0%,
        rgba(4,12,31,.58) 100%
      ),
      var(--sssp-hero-bg);
  }

  .sssp-hero--background .sssp-container{
    width:min(var(--sssp-container),calc(100% - 28px));
  }

  .sssp-hero--background .sssp-hero-grid{
    min-height:auto;
  }

  .sssp-hero--background .sssp-metrics{
    margin-top:38px;
  }
}

@media (max-width:520px){
  .sssp-hero--background{
    padding:56px 0 42px;
    background-position:72% center;
  }

  .sssp-hero--background h1{
    font-size:clamp(36px,11.5vw,49px);
  }

  .sssp-hero--background .sssp-metric{
    padding:17px 14px;
  }
}