I'm not wild about the hard to read webfont on your content areas. Like most webfonts it's very pretty, but pretty doesn't necessarily mean useful. Probably looks great on Mac though... just looks horrible on Win/Lin... lemme boot up the VM... oh yeah, OSX's renderer that usually butchers perfectly goof fonts by making them illegibly blurry and making everything look "bold", takes that uselessly thin illegible fonts and makes it legible. That's good for a laugh.
Something to keep in mind, font renderers across OS are different.
There is a MINOR color issue on your main menu -- that being the orange is too dark to be on a black background. I'd try to lighten that 20-30%. More of an issue is the effectively invisible dark-gray on black in the footer. Other than that your hue and saturation choices are sound, you just need to do something about luminance contrasts.
That sticky fixed position "Front End Performance" thing and header are annoying as hell when you scroll down as it consumes screen space that would be better used for viewing content. (in the same way auto-installing browser toolbars are annoying as they leave less space to view pages). That's one of those "gee ain't it neat" bits designers love that visitors actually hate. Though to be fair I'm one of those nutters still using Opera 12.17 as my primary browser because it lets me put tabs off to one side instead of across the top. Put all that extra unused wide-screen space to use for something!
The responsive layout does all sorts of broken goofy stuff, and most (but not all) the problem seems to be that fixed position header. If it's annoying due to a lack of content-space at desktop resolutions, it pisses all over mobile devices.
It could be a bit leaner -- most of the problem is the stupid "modernizr" polyfill nonsense and "prototype" -- but then prototype by itself is the same size I have as a upper limit for a content-less page template's HTML+CSS+SCRIPTS+IMAGES. It also seems a bit chunky on the images, though I'm going to assume those are placeholders and not deployment.
Your heading orders are gibberish, breaking heading navigation and possibly giving search engines and screen readers fits. You've got H3 without a H2 for them to be subsections of, H3 and H4 that don't seem to be subsections of the H2 before them... an H5 without any H4 or H3 for it to be subsections of... Almost looks like you were choosing numbered headings based on what they look like instead of what they mean...
... and all that I determined BEFORE I looked at the code.
Once I pop the hood, I see what I come to expect from the broken backwards practices common when a HTML 5 doctype is present. I would highly suggest dialing it back to HTML 4.01 STRICT or XHTML 1.0 STRICT as you aren't doing anything that warrants the presence of that fat bloated alleged specification that does nothing but encourage decade and a half out of date coding practices, and is generally used more as a sick buzzword to describe what people are doing than it is a specification for writing markup.
You've got static CSS in the markup, hoping that's not permanent -- (I'll never understand why people make working on designs HARDER by doing that) -- endless pointless DIV for nothing, endless pointless HTML 5 containers for nothing, endless pointless classes and ID's for nothing -- all lead one to conclude you haven't quite grasped how to use selectors yet; though an equal amount of the blame for that bloated markup can be aimed at HTML 5 and that "foundation" nonsense.
There's a reason I say frameworks like Foundation do nothing but lead people down the garden path to failure.
JUST to illustrate what I mean, where you have:
<!-- begin topbar -->
<div class="topbar hide-for-small">
<div class="large-12 columns">
<p class="topbartrigger topbardownarrow"><i class="topbararrow fi-arrow-up"></i></p>
<div class="topbarribbon topbartrigger hide-for-small"><i class="blink topbararrow fi-arrow-down"></i></div>
<!-- end topbar -->
<div class="large-8 medium-6 small-12 columns">
<li><a class="getareport scrolltoanchor" href="#getareport">Get Your Report</a></li>
<div class="large-4 medium-6 hide-for-small columns">
<p class="small slogan ">Faster Websites For Your Success</p>
<h1 class="text-center headline"><i class="fi-power"></i> Front End Performance</h1>
I would have:
<h1>Front End Performance</h1>
<li class="twitter"><a href="#STATIClinkToTwitter">Twitter</li>
<li class="facebook"><a href="#STATIClinkToFaceBook">Facebook</li>
<li class="google"><a href="#STATIClinkToGoogle">Google+</li>
<li><a class="local" href="#getareport">Get Your Report</a></li>
<p class="slogan">Faster Websites For Your Success</p>
"give or take" there's little reason for that entire section to be a heck of a lot more than that, other than as I've said in some four dozen threads the past three months trying to use JS to do CSS' job, using some bloated pointless framework, and a general lack of understanding how to use selectors and inheritance. Might gain a few empty span for image sandbags, but other than that?!?
So... needs some work. The concept is ok, but the execution could need some help.
P.S.... the arrow in the top-right corner, is that actually supposed to do something? ... 'cause, well... it doesn't.