/* ==========================================================================
   LeaderSol — home sections (services, why-us, stats, testimonials).
   Strict brand palette: cyan #00ccf7, gold #FDD000, white, near-black + grays.
   Flaticon icons filled with a cyan→gold gradient = the two brand colors.
   Sits outside .lst-home; clean, no heavy section backgrounds.
   ========================================================================== */
.ls-sec { --cy:#00ccf7; --gold:#FDD000; --ink:#0f141a; --body:#5b636e; --line:#eceff3;
	padding: 72px 0; font-family: 'Quicksand', system-ui, -apple-system, sans-serif; background:#fff; }
.ls-sec *, .ls-sec *::before, .ls-sec *::after { box-sizing: border-box; }

/* shared centered section header */
.ls-sechead { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.ls-kicker { display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; }
.ls-kicker::before, .ls-kicker::after { content:""; width:26px; height:3px; border-radius:3px; background:var(--gold); }
.ls-kicker span { font-family:'Sora',sans-serif; font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cy); }
.ls-sechead__title { margin:0; font-family:'Sora',sans-serif; font-weight:800; font-size:38px; line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.ls-sechead__title .hl { background:linear-gradient(120deg,var(--cy),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ls-sechead__sub { margin:16px 0 0; font-size:16px; line-height:1.7; color:var(--body); font-weight:500; }

/* flaticon.min.css only sets the icon font on the base `.flaticon` class, while
   `.flaticon-*` set just the glyph content — so assign the font to every glyph. */
.ls-sec [class^="flaticon-"]::before,
.ls-sec [class*=" flaticon-"]::before {
	font-family: 'flaticon' !important; font-weight: normal; font-style: normal; font-variant: normal;
	-webkit-font-smoothing: antialiased;
}

/* two-brand-colour flaticon icon (gradient-filled glyph in a soft chip) */
.ls-ico { width:112px; height:112px; border-radius:26px; display:grid; place-items:center; flex-shrink:0;
	background:rgba(0,204,247,.08); transition:background .3s, transform .3s; }
.ls-ico i { font-size:64px; line-height:1; }
/* Flaticon renders its glyph in ::before, so the two-tone fill must go on the
   pseudo-element (background isn't inherited from the <i>). HARD stop at 60% =
   solid cyan (60%) + solid gold (40%), no blend → no greenish middle. */
.ls-ico i::before {
	font-size:64px!important;
	background:linear-gradient(135deg, #00ccf7 0 60%, #FDD000 60% 100%);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* ------------------------------------------------ SERVICES (grid) --------- */
.lssv__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lssv__card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
	padding:34px 30px; display:flex; flex-direction:column; gap:16px; overflow:hidden;
	transition:transform .3s, box-shadow .3s, border-color .3s; }
.lssv__card:hover { transform:translateY(-6px); border-color:rgba(0,204,247,.5); box-shadow:0 26px 50px -30px rgba(0,120,150,.5); }
.lssv__card:hover .ls-ico { background:rgba(0,204,247,.16); transform:translateY(-2px); }
.lssv__title { margin:0; font-family:'Sora',sans-serif; font-weight:700; font-size:20px; color:var(--ink); line-height:1.25; }
.lssv__body { margin:0; font-size:14.5px; line-height:1.62; color:var(--body); }
.lssv__more { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-family:'Sora',sans-serif; font-weight:600; font-size:13.5px; color:var(--cy); text-decoration:none; }
.lssv__more i { font-size:11px; transition:transform .2s; }
.lssv__more:hover { text-decoration:none; } .lssv__more:hover i { transform:translateX(4px); }
/* featured — white chip so icon stays crisp on cyan card */
.lssv__card.is-featured { background:linear-gradient(150deg,#00d0f5,#0092bd); border-color:transparent; box-shadow:0 30px 60px -30px rgba(0,150,190,.7); }
.lssv__card.is-featured .ls-ico {
	background:#fff;
	box-shadow:0 10px 24px -12px rgba(0,40,60,.35);
}
.lssv__card.is-featured .ls-ico i::before {
	background:linear-gradient(135deg, #00ccf7 0 55%, #FDD000 55% 100%);
	-webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent; color:transparent;
}
.lssv__card.is-featured .lssv__title { color:#fff; }
.lssv__card.is-featured .lssv__body { color:rgba(255,255,255,.94); }
.lssv__card.is-featured .lssv__more { color:var(--gold); }
.lssv__badge { position:absolute; top:20px; right:20px; font-family:'Sora',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.08em; color:var(--ink); background:var(--gold); padding:5px 11px; border-radius:100px; }

/* ------------------------------------------------ WHY US ------------------ */
.lswhy { background:#fafcfe; }
.lswhy__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px; }
.lswhy__item { display:flex; gap:18px; align-items:flex-start; }
.lswhy__item .ls-ico { width:96px; height:96px; border-radius:22px; }
.lswhy__item .ls-ico i { font-size:52px; }
.lswhy__item .ls-ico i::before { font-size:52px!important; }
.lswhy__it-title { margin:0 0 6px; font-family:'Sora',sans-serif; font-weight:700; font-size:17px; color:var(--ink); line-height:1.3; }
.lswhy__it-body { margin:0; font-size:14px; line-height:1.6; color:var(--body); }

/* ------------------------------------------------ STATS (cyan band) ------- */
.lsstat {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 50% 80% at 12% 50%, rgba(255,255,255,.16) 0%, transparent 60%),
		radial-gradient(ellipse 40% 70% at 88% 40%, rgba(253,208,0,.14) 0%, transparent 55%),
		linear-gradient(120deg, #00ccf7 0%, #05a9d6 55%, #0092bd 100%);
	padding: 48px 0;
}
.lsstat__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
	background-size: 18px 18px;
	opacity: .28;
	mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.lsstat__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	position: relative;
	z-index: 1;
	align-items: center;
}
.lsstat__cell {
	text-align: center;
	padding: 6px 12px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.lsstat__cell + .lsstat__cell::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	height: 76%;
	width: 1px;
	background: rgba(255,255,255,.28);
}
.lsstat__ic {
	width: 104px;
	height: 104px;
	border-radius: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
	background: #FDD000;
	border: none;
	box-shadow: 0 12px 26px -10px rgba(11, 22, 48, .35);
	color: #0b1630;
	font-size: 50px;
	line-height: 1;
	transition: transform .22s, box-shadow .22s;
}
.lsstat__ic i,
.lsstat__ic [class^="flaticon-"],
.lsstat__ic [class*=" flaticon-"] {
	font-family: flaticon !important;
	font-style: normal;
	font-weight: 400 !important;
	font-size: 50px !important;
	line-height: 1;
	color: #0b1630 !important;
	speak: never;
	display: block;
}
.lsstat__ic i::before,
.lsstat__ic [class^="flaticon-"]::before,
.lsstat__ic [class*=" flaticon-"]::before {
	font-family: flaticon !important;
	font-size: 50px !important;
	line-height: 1;
	color: #0b1630 !important;
}
.lsstat__cell:hover .lsstat__ic {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 16px 30px -10px rgba(11, 22, 48, .42);
}
.lsstat__num {
	font-family: 'Sora', sans-serif;
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	color: #fff;
	letter-spacing: -.02em;
	margin: 0;
}
.lsstat__num .u { color: #FDD000; }
.lsstat__label {
	margin: 8px 0 0;
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	line-height: 1.35;
	max-width: 14em;
}

/* ------------------------------------------------ TESTIMONIALS ------------ */
.lstest{
	position:relative;
	background:
		radial-gradient(ellipse 70% 55% at 12% 0%, rgba(0,204,247,.07), transparent 55%),
		radial-gradient(ellipse 55% 45% at 92% 100%, rgba(253,208,0,.08), transparent 50%),
		#f8fbfd;
}
.lstest__grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:24px;
	align-items:stretch;
}
.lstest__card{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:16px;
	height:100%;
	margin:0;
	padding:30px 28px 26px;
	background:#fff;
	border:1px solid rgba(0,204,247,.14);
	border-radius:20px;
	box-shadow:0 18px 40px -32px rgba(11,22,48,.35);
	overflow:hidden;
	transition:transform .28s, box-shadow .28s, border-color .28s;
}
.lstest__card::before{
	content:"";
	position:absolute; left:0; top:0; bottom:0; width:4px;
	background:linear-gradient(180deg, var(--cy) 0 58%, var(--gold) 58% 100%);
}
.lstest__card:hover{
	transform:translateY(-6px);
	border-color:rgba(0,204,247,.4);
	box-shadow:0 28px 54px -28px rgba(0,140,170,.42);
}
.lstest__top{
	display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.lstest__mark{
	font-family:'Sora',sans-serif; font-weight:800; font-size:56px; line-height:.75;
	color:rgba(0,204,247,.18); letter-spacing:-.04em; user-select:none;
}
.lstest__service{
	display:inline-flex; align-items:center;
	margin-top:4px; padding:5px 11px; border-radius:999px;
	font-family:'Sora',sans-serif; font-weight:700; font-size:10.5px;
	letter-spacing:.06em; text-transform:uppercase;
	color:var(--ink); background:rgba(253,208,0,.22); border:1px solid rgba(253,208,0,.45);
}
.lstest__text{
	margin:0; flex:1;
	font-size:15.5px; line-height:1.75; color:#3a4452; font-weight:500;
}
.lstest__stars{ display:inline-flex; gap:3px; }
.lstest__star{
	font-size:14px; line-height:1; color:#d5dde6;
}
.lstest__star.is-on{ color:var(--gold); }
.lstest__who{
	display:flex; align-items:center; gap:14px;
	margin-top:auto; padding-top:18px;
	border-top:1px solid #e8eef3;
}
.lstest__avatar{
	width:52px; height:52px; border-radius:50%; flex-shrink:0;
	display:grid; place-items:center;
	font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:#fff;
	background:linear-gradient(135deg, #00ccf7 0 58%, #FDD000 58% 100%);
	box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,204,247,.25);
}
.lstest__avatar--img{
	object-fit:cover; display:block;
	box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,204,247,.25);
}
.lstest__meta{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.lstest__name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--ink); line-height:1.25; }
.lstest__role{ font-size:13px; color:var(--body); line-height:1.35; }

/* "Our promise" commitments variant (shown until real testimonials exist). */
.lstest--promise .lstest__mark{
	font-size:26px; line-height:1;
	width:44px; height:44px; border-radius:12px;
	display:grid; place-items:center;
	color:#fff; background:linear-gradient(135deg, var(--cy), #00a9cf);
	box-shadow:0 10px 24px -12px rgba(0,140,170,.7);
}
.lstest--promise .lstest__text{ color:#3a4452; }
.lstest__cta{ margin-top:40px; text-align:center; }

/* ------------------------------------------------ PORTFOLIO --------------- */
.lspf__grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:28px;
	align-items:stretch;
}
.lspf__card {
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	border:1px solid var(--line);
	border-radius:18px;
	overflow:hidden;
	background:#fff;
	text-decoration:none;
	transition:transform .3s, box-shadow .3s, border-color .3s;
}
.lspf__card:hover {
	transform:translateY(-6px);
	border-color:rgba(0,204,247,.5);
	box-shadow:0 28px 54px -30px rgba(0,120,150,.5);
	text-decoration:none;
}
.lspf__media {
	position:relative;
	aspect-ratio:16/10;
	overflow:hidden;
	flex-shrink:0;
	background:linear-gradient(150deg,#00ccf7,#0092bd);
	display:grid;
	place-items:center;
}
.lspf__media img {
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:top center;
	image-rendering:auto;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transform:translateZ(0);
	transition:transform .5s ease;
}
.lspf__card:hover .lspf__media img { transform:translateZ(0) scale(1.03); }
.lspf__ph { font-family:'flaticon'; font-size:64px; color:rgba(255,255,255,.85); }
.lspf__ph::before { color:rgba(255,255,255,.85); }
.lspf__cat {
	position:absolute; top:14px; left:14px; z-index:2;
	font-family:'Sora',sans-serif; font-weight:700; font-size:10.5px;
	letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
	background:var(--gold); padding:5px 11px; border-radius:100px;
}
.lspf__overlay {
	position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; padding:18px;
	background:linear-gradient(to top, rgba(4,40,54,.72), transparent 60%);
	opacity:0; transition:opacity .3s;
}
.lspf__card:hover .lspf__overlay { opacity:1; }
.lspf__view { display:inline-flex; align-items:center; gap:8px; font-family:'Sora',sans-serif; font-weight:700; font-size:13px; color:#fff; }
.lspf__view i { color:var(--gold); font-size:11px; }
.lspf__body {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	gap:8px;
	padding:20px 22px 22px;
	min-height:96px;
	flex:1;
}
.lspf__pcat {
	display:block; margin:0;
	font-family:'Sora',sans-serif; font-weight:600; font-size:11.5px;
	letter-spacing:.1em; text-transform:uppercase; color:var(--cy); line-height:1.2;
}
.lspf__ptitle {
	margin:0;
	font-family:'Sora',sans-serif; font-weight:700; font-size:18px;
	color:var(--ink); line-height:1.35;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lspf__cta { text-align:center; margin-top:40px; }
.lspf__btn {
	display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 30px;
	background:#00ccf7; color:#fff;
	font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; border-radius:10px;
	text-decoration:none; transition:transform .2s, box-shadow .2s;
	box-shadow:0 12px 26px -10px rgba(0,204,247,.6);
}
.lspf__btn:hover { transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(0,204,247,.7); color:#fff; }

/* ------------------------------------------------ RESPONSIVE -------------- */
@media (max-width:991px){
	.ls-sec{ padding:70px 0; }
	.ls-sechead__title{ font-size:31px; }
	.lssv__grid, .lstest__grid, .lspf__grid{ grid-template-columns:repeat(2,1fr); }
	.lswhy__grid{ grid-template-columns:repeat(2,1fr); }
	.lsstat__grid{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
	.lsstat__cell:nth-child(3)::before{ display:none; }
	.lsstat__ic{ width:90px; height:90px; font-size:46px; margin-bottom:14px; }
	.lsstat__ic i,
	.lsstat__ic [class^="flaticon-"],
	.lsstat__ic [class*=" flaticon-"],
	.lsstat__ic i::before,
	.lsstat__ic [class^="flaticon-"]::before,
	.lsstat__ic [class*=" flaticon-"]::before{ font-size:46px !important; }
}
@media (max-width:600px){
	.ls-sec{ padding:56px 0; }
	.ls-sechead{ margin-bottom:36px; }
	.ls-sechead__title{ font-size:26px; }
	.lssv__grid, .lswhy__grid, .lstest__grid, .lspf__grid{ grid-template-columns:1fr; }
	.lsstat__grid{ grid-template-columns:1fr 1fr; }
	.lsstat__num{ font-size:38px; }
	.lswhy__item .ls-ico{ width:80px; height:80px; } .lswhy__item .ls-ico i{ font-size:42px; }
	.lswhy__item .ls-ico i::before{ font-size:42px!important; }
}