FlexibleCurd

Если это svg - смело вставляй. Если нет - я не завидую) В принципе можно разделить на блоки Иконка-заголовок-текст с линией внутри svg-шкой. Только придется о-о-очень тщательно проверять под всеми браузерами и разрешениями.
Короче - требуй у дизайнера свг.
P.S.Ну или если заказчик туп как пробка, а готовую работу в портфолио вставлять не будешь - сделай, как в комменте выше - вставь картинку :)
P.P.S. А иконка в центре меняется при наведении на блоки? Если да, то забудь первый пост-скриптум. Юзай свг или псевдоэлементы для линий, текст - текстом. И надейся, что заказчик этот текст менять не будет никогда)

проще: всего запилить качественной картинкой jpg.
сложнее: сделать блоки с текстом и абсолютно их позиционаровать
сложно и нудно: текстовые блоки абсолютно позиционировать и линии эти цеплять к блокам псевдоэлементами

Я порекомендую изучить, как это реализовано в TARS, как раз решается именно ваша задача.
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS. Там все очень подробно описано + статьи на хабре.

То что вы хотите, это генераторы статических сайтов. Их вагон и еще тележка сбоку.
Вот несколько:
Для ruby: Middleman, jekyll, octopress
Для node.js: DocPad, codex, harpjs и тд и тп.

Я вам больше скажу. Оно и в фаерфоксе выглядит криво. И даже если убрать свойство line-height, или если установить в него 0, или 100.
При чем тут line-height вообще?

У фаерфокса это лишний паддинг. Убирается вот так:
jsfiddle.net/9p42p706/1

ИЕ какой у вас?

Клиентская оптимизация — прямая обязанность верстальщика. Не все рекомендации Page Speed верстальщик может выполнить самостоятельно, но он должен выступать с инициативой и обращаться за помощью к коллегам: включить gzip на сервере, поправить htaccess, чтобы оптимизировать кэширование и т.д.

При любой вёрстке (не только адаптивной) следует оптимизировать страницы. И кеш и картинки и минифицировать js, css и т.д. По поводу должен ли это делать другой специалист? Нет, нужно делать максимально на что способен. А если в компании, где вы работаете/будете работать не окажется SEO специалиста? Самый лучший учитель - собственный опыт. Вот когда его поднакопится, такие вопросы возникать перестанут

У меня примерно такая же проблема, мне постоянно хочется улучшать код, который я пишу, из соображений производительности и красоты, но этот перфекционизм излишен и сильно увеличивает сроки разработки.
Пока нет реально заметных тормозов - не надо ничего оптимизировать. Тенденция не самая хорошая (Witcher 3, Chrome, Assassins Creed - это только вершина айсберга), но пока вы будете делать свой идеальный быстрый плагин, конкуренты напишут кучу глючных кривых костылей, которые уже будут работать, и люди будут пользоваться ими, а когда наконец зарелизите версию 1.0, она уже настолько устареет, что вы и сами ей пользоваться не будете.

написать свой по быстрому так сказать и вот потратил уже часа 2-3 на это дело, почему так много?

Для хорошего плагина это не много.

Вобщем, пришел к выводу: подключаю scrollspy и не парюсь(если уж захочется как то его улучшить, через jquery можно немного повлиять на его действие, это быстрее чем писать самому с нуля).

Норм, так и делайте.

мне постоянно кажется что все будет дико тормозить!

Преждевременная оптимизация — зло!

Прекрасный способ писать асинхронный код синхронно - промисы. Пример.
Вместо jq, разумеется, можно использовать любую другую реализацию.

Самый простой костыль - делать вызов какого либо кода после clearTimeout. Более хитрый - создавать пользовательские события

У Вас диагональный градиент.
Вот ваш код:

background: linear-gradient(to top left, #3ECBDD 0%, #088BA7);