@charset "utf-8";
/* Moongate.Studio 004.0 */

/* ===== HERO ===== */
.mg-hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	background:
		linear-gradient(
		-135deg,
		rgba(0, 55, 60, 0.9) 30%,
		rgba(0, 0, 0, 0.9) 50%
		),
		linear-gradient(135deg, rgba(0,0,0,.98), rgba(0,55,60,.88));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: visible;
}

/* Grid Overlay */
.mg-hero .mg-grid {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/64px 64px,
	linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/64px 64px;
	mask-image: radial-gradient(120% 120% at 50% 60%, #000 65%, transparent 100%);
}

/* Starfield */
.mg-hero canvas#starfield {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.mg-hero-layout {
	position: relative;
	z-index: 3;
	align-self: center;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
	align-items: center;
	gap: 56px;
	width: min(1420px, calc(100% - 120px));
	min-height: 100%;
	margin: 0 auto;
	padding: clamp(96px, 10vh, 128px) 0 20px;
	box-sizing: border-box;
}

.mg-hero-copy {
	max-width: 760px;
}

.mg-hero-copy > * {
	margin-right: auto;
}

.mg-hero-copy h1 {
	font-size: clamp(36px, 4vw, 54px);
	letter-spacing: 2px;
	margin-bottom: 25px;
}

.mg-hero-divider {
	position: relative;
	width: 500px;
	height: 1px;
	margin: 22px 0 18px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0,245,255,.7),
		transparent
	);
	opacity: .85;
}

.mg-hero-divider::after {
	content: "";
	position: absolute;
	inset: -6px 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0,245,255,.45),
		transparent
	);
	filter: blur(6px);
	opacity: 0;
	animation: heroDividerPulse 4.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes heroDividerPulse {
	0%, 100% {
		opacity: 0;
	}
	45% {
		opacity: .6;
	}
}

.mg-hero-copy .mg-hero-divider {
	max-width: 500px;
	width: 100%;
}

.mg-subheader {
	margin-bottom: 35px;
	max-width: 640px;
}

.mg-hero-bottom {
	width: calc(100% - 20px);
	margin: 0 10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
}

.mg-featured {
	flex: 0 0 auto;
	width: max-content;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 240px);
	gap: 24px;
}

.mg-featured-card {
	position: relative;
	padding: 22px 24px 26px;
	border-radius: var(--mg-radius-card);
	background:
		linear-gradient(
		  -135deg,
		  rgba(0,245,255,.06),
		  rgba(0,160,185,.12),
		  rgba(6,28,34,.45)
	);
	backdrop-filter: var(--mg-surface-backdrop);
	border: var(--mg-panel-border);
	box-shadow: var(--mg-panel-shadow);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.mg-featured-card p {
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	color: var(--mg-color-text-muted);
}

/* hover */
.mg-featured-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            -45deg,
            rgba(0,245,255,.18),
            rgba(0,160,185,.28),
            rgba(6,28,34,.85)
        );
    transform: translateY(100%);
    transition: transform .35s ease;
    z-index: 1;
}

.mg-featured-card::after {
    content: "learn more ↘";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mg-font-heading);
    font-size: 18px;
    letter-spacing: .1em;
    text-transform: lowercase;
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}

.mg-featured-card:hover h4,
.mg-featured-card:hover p {
    opacity: 0;
    transition: opacity .2s ease;
}

.mg-featured-card:hover::before {
	transform: translateY(0);
}

.mg-featured-card:hover::after {
    opacity: 1;
}

.mg-hero-actions {
	flex: 0 0 auto;
	margin: 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.mg-hero-actions .button,
.mg-hero-actions .btn {
	font-size: clamp(14px, 1.2vw, 18px);
	padding: 8px 26px 12px;
}

.mg-hero-visual {
	margin: 0;
	justify-self: end;
	width: min(100%, 620px);
	background: transparent;
	border: 0;
}

.mg-hero-visual img {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.mg-hero {
		height: auto;
		min-height: 0;
	}

	.mg-hero-layout {
		grid-template-columns: 1fr;
		gap: 36px;
		width: min(100%, calc(100% - 48px));
		padding: 96px 0 20px;
	}

	.mg-hero-copy {
		max-width: 100%;
	}

	.mg-hero-visual {
		justify-self: start;
		width: min(100%, 680px);
	}

	.mg-hero-bottom {
		width: calc(100% - 20px);
		margin: 0 10px 30px;
		flex-wrap: wrap;
		gap: 20px;
	}

	.mg-featured {
		grid-template-columns: repeat(2, 240px);
	}

	.mg-hero-actions {
		margin-left: auto;
	}
}

@media (max-width: 768px) {
	.mg-hero-layout {
		width: min(100%, calc(100% - 32px));
		padding: 88px 0 18px;
	}

	.mg-featured {
		grid-template-columns: 1fr;
		gap: 16px;
		width: 100%;
	}

	.mg-hero-bottom {
		width: calc(100% - 20px);
		margin: 0 10px 30px;
		gap: 16px;
	}

	.mg-hero-actions {
		margin-left: 0;
	}

	.mg-hero-copy .mg-hero-divider {
		max-width: 100%;
	}
}

/* === BLOCK CONTAINER === */
.mg-page {
	position: relative;
}

/* === MARQUEE === */
.mg-marquee {
	position: relative;
	width: auto;
	margin: 0 10px 0;
	padding: 24px 0 26px;
	overflow: hidden;
	background:
		linear-gradient(
		135deg,
		rgba(0, 0, 0, 1.6) 20%,
		rgba(0, 0, 0, 1.6) 20%,
		rgba(0, 0, 0, 0.9) 50%
		),
		url("../images/molecules-0.png") top/cover no-repeat;
	backdrop-filter: blur(85px) saturate(135%);
	border-top: 1px solid rgba(0,245,255,.3);
	border-bottom: 1px solid rgba(0,245,255,.3);
}

.mg-marquee::after {
	content: "";
	position: absolute;	
	inset: 0;
	pointer-events: none;
}

.marquee-track {
	display: flex;
	width: fit-content;
	gap: 40px;
	align-items: center;
	animation: scroll 45s linear infinite;
}

.marquee-track img {
	width: 75px;
	max-width: 40vw;
	height: auto;
	object-fit: contain;
	margin: 0 30px;
	vertical-align: middle;
	filter:
		drop-shadow(0 0 6px rgba(0,245,255,.35))
		drop-shadow(0 0 14px rgba(0,245,255,.15));
	opacity: .9;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== ALL THE GEEKY STUFF ===== */
.mg-services {
    position: relative;
    padding: 140px 60px;
    overflow: hidden;
    background:
        linear-gradient(
        -135deg,
        rgba(0,55,60,.92) 20%,
        rgba(0,0,0,.96) 60%
        ),
        url("../images/space-bg-5.png") center/cover no-repeat;
}

.mg-services-inner {
    position: relative;
    z-index: 5;
    max-width: 1150px;
    margin: 0 auto;
}

.mg-services-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.mg-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.mg-services-card {
    position: relative;
    min-height: 125px;
    padding: 36px 32px;
    border-radius: var(--mg-radius-card);
    background:
			linear-gradient(
			-135deg,
			rgba(0,245,255,.06),
			rgba(0,160,185,.12),
			rgba(6,28,34,.45)
        ),
        url("../images/card-bg.png") center/cover no-repeat;
    backdrop-filter: var(--mg-surface-backdrop);
	border: var(--mg-panel-border);
	box-shadow: var(--mg-panel-shadow);
    overflow: hidden;
    opacity: 0;
    filter: blur(10px);
    transform-style: preserve-3d;
	transition:
		opacity 2.5s ease,
		transform 2.5s cubic-bezier(.16,1,.3,1),
		filter 2.5s ease,
		border-color .35s ease,
		box-shadow .35s ease;
}

.services-icon {
    margin-bottom: 10px;
}

.services-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.mg-services-card p {
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	color: #bcd4d6;
}

/* Entry positions */
.mg-services-card:nth-child(1) {
    transform: translateX(-200px);
}

.mg-services-card:nth-child(2) {
    transform: translateY(-300px);
}

.mg-services-card:nth-child(3) {
    transform: translateY(-300px);
}

.mg-services-card:nth-child(4) {
    transform: translateX(300px);
}

.mg-services-card:nth-child(5) {
    transform: translateX(-200px);
}

.mg-services-card:nth-child(6) {
    transform: translateY(300px);
}

.mg-services-card:nth-child(7) {
    transform: translateY(300px);
}

.mg-services-card:nth-child(8) {
    transform: translateX(300px);
}

/* Active cards */
.mg-services.active .mg-services-card {
    opacity: 1;
    filter: blur(0);
    transform: translate(0,0);
}

/* Animation: Stagger */
.mg-services.active .mg-services-card:nth-child(1) {
    transition-delay: 0s;
}

.mg-services.active .mg-services-card:nth-child(2) {
    transition-delay: .25s;
}

.mg-services.active .mg-services-card:nth-child(3) {
    transition-delay: .50s;
}

.mg-services.active .mg-services-card:nth-child(4) {
    transition-delay: .75s;
}

.mg-services.active .mg-services-card:nth-child(5) {
    transition-delay: .75s;
}

.mg-services.active .mg-services-card:nth-child(6) {
    transition-delay: .50s;
}

.mg-services.active .mg-services-card:nth-child(7) {
    transition-delay: .25s;
}

.mg-services.active .mg-services-card:nth-child(8) {
    transition-delay: 0s;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .mg-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {
    .mg-services {
        padding: 100px 24px;
    }

    .mg-services-grid {
        grid-template-columns: 1fr;
    }

}

/* ===== WEB DESIGN ===== */
.mg-webdesign {
    position: relative;
    padding: 140px 60px;
    overflow: hidden;
    background:
        linear-gradient(
        -135deg,
        rgba(0,55,60,.92) 15%,
        rgba(0,0,0,.98) 55%
        ),
        url("../images/molecules-2.png") center/cover no-repeat;
	border-top: 1px solid rgba(0,245,255,.3);
}

/* grid */
.mg-webdesign::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/64px 64px,
        linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/64px 64px;
    opacity: .85;
    pointer-events: none;
}

.mg-webdesign-inner {
    position: relative;
    z-index: 5;
    max-width: 1500px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 50px;
}

/* Left */
.mg-webdesign-left {
    position: relative;
}

/* floating image/object */
.mg-webdesign-left::before {
    content: "";
    position: absolute;
    top: -125px;
    left: 214px;
    width: 420px;
    height: 900px;
    /* commenting out until I have a solid concept background: url("../images/ai-raddit-port.png") top center/contain no-repeat; */
    opacity: .25;
    pointer-events: none;
}

.mg-webdesign-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.mg-stat-card,
.mg-built-panel,
.mg-design-card,
.mg-design-process,
.mg-project-card {
    background: var(--mg-surface-background);
    backdrop-filter: var(--mg-surface-backdrop);
    border: var(--mg-surface-border);
    box-shadow: var(--mg-surface-shadow);
    border-radius: var(--mg-radius-card);
}

.mg-stat-card {
    padding: 15px 0 25px;
    text-align: center;
}

.mg-stat-card strong {
    display: block;
	font-family: var(--mg-font-heading);
    font-size: 26px;
    color: var(--mg-color-accent);
	text-shadow:
		0 0 10px rgba(0,245,255,.6),
		0 0 60px rgba(0,245,255,.10);
}

.mg-stat-card span {
	display: block;
	font-family: var(--mg-font-heading);
	color: var(--mg-color-text-muted);
	line-height: 1.0;
}

.mg-built-panel {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 30px;
    padding: 34px 34px 10px 34px;
}

.orbit {
    position: absolute;
    inset: 0;
    background: url("../images/orbit.webp") center/contain no-repeat;
    opacity: .3;
}

.mg-built-copy ul {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

.mg-built-copy li {
    margin-bottom: 16px;
    color: var(--mg-color-text-muted);
}

.mg-built-metrics {
    position: relative;
}

.mg-webdesign,
.mg-built-panel,
.mg-built-metrics,
.metric {
    isolation: auto;
}

.metric {
    position: relative;
    margin-bottom: 24px;
    text-align: right;
}

.metric strong {
    font-size: 42px;
	color: #67f3ff;
	text-shadow:
		0 0 10px rgba(0,245,255,.6),
		0 0 60px rgba(0,245,255,.10);
}

/* SEO Popup Modal */
.seo-modal .modal {
    max-width: 950px;
}

.seo-modal-header {
    padding: 32px 34px;
    border-bottom: 1px solid rgba(0,245,255,.12);
}

.seo-modal-header h3 {
    margin: 15px 0 12px;
}

.seo-modal-header p {
    margin: 0;
    color: #a7c7ca;
}

.seo-modal-body {
    padding: 34px;
}

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

.seo-card {
    padding: 20px 22px;
    border-radius: 7px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,245,255,.12);
}

.seo-card h4 {
    margin-bottom: 10px;
}

.seo-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #b7d0d2;
}

.seo-note {
    margin-top: 28px;
    padding: 18px 22px;
    border-left: 2px solid rgba(0,245,255,.45);
    background: rgba(255,255,255,.02);
    font-size: 15px;
    color: #9dbabc;
}

@media (max-width: 768px) {
    .seo-grid {
        grid-template-columns: 1fr;
    }
	
    .seo-modal-body {
        padding: 24px;
    }
}

/* Right: What We Design */
.mg-webdesign-subheader {
    display: block;
    font-size: 14px;
	margin-bottom: -20px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67f3ff;
}

.heading-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mg-design-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.mg-design-card {
    position: relative;
	padding: 0 0 20px 0;
    border-radius: 7px;
    overflow: visible;
}

.design-thumb {
    position: relative;
    height: 175px;
    margin-bottom: 40px;
    overflow: visible;
}

.design-thumb img {
    width: 100%;
    height: 100%;
	border-radius: 7px 7px 0 0;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition:
        object-position 10s ease,
        transform .4s ease;
	/* disables right-click behavior: */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.mg-design-card:hover .design-thumb img {
    object-position: center bottom;
}

.design-icon {
    position: absolute;
    left: 50%;
    bottom: -29px;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,245,255,.25);
    background: rgba(3,18,24,.95);
    color: #67f3ff;
    font-size: 24px;
    box-shadow:
        0 0 14px rgba(0,245,255,.18),
        inset 0 0 12px rgba(0,245,255,.08);
    z-index: 5;
}

.mg-design-card h4 {
    text-align: center;
}

.mg-design-card p {
    text-align: center;
    font-size: 16px;
	padding: 0 20px 0 20px;
}

.mg-design-card .btn-locked {
    display: flex;
	align-items: center;
    justify-content: center;
    margin: 0 auto;
	gap: 5px;
	font-size: 14px;
}

/* Center: Design Process Strip */
.mg-design-process {
    position: relative;
    max-width: 1500px;
    margin: 0 auto 60px;
    padding: 40px;
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 40px;
	overflow: hidden;
    z-index: 5;
}

/* grid */
.mg-design-process::before {
    content: "";
    position: absolute;
    inset: 0;
	background:
		linear-gradient(to right, rgba(0,245,255,.10) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,245,255,.10) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: .6;
	transform: perspective(600px) rotateX(70deg);
	transform-origin: bottom center;
	mask-image: linear-gradient(to top, black 40%, transparent 100%);
	-webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
	pointer-events: none;
}

.process-step {
    position: relative;
    z-index: 2;
}

.process-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 8px;
    right: 24px;
    font-size: 26px;
    color: rgba(0,245,255,.45);
    text-shadow:
        0 0 10px rgba(0,245,255,.35);
    pointer-events: none;
}

.process-step span {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #67f3ff;
}

.process-step p {
    font-size: 15px;
    line-height: 1.5;
    color: #bcd4d6;
}

/* ===== SHOWCASE ===== */
.mg-showcase {
    position: relative;
    z-index: 5;
    max-width: 1500px;
    margin: 0 auto;
}

.mg-showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mg-showcase-slider {
    overflow: hidden;
    position: relative;
}

.mg-showcase-track {
    display: flex;
    gap: 18px;
    transition: transform var(--mg-transition-slow);
    will-change: transform;
}

.mg-project-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 54px) / 4);
    overflow: hidden;
}

.project-thumb {
    position: relative;
    height: 225px;
    overflow: hidden;
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
	
	/* disables right-click behavior: */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.project-copy {
    padding: 24px;
}

.project-copy small {
    color: var(--mg-color-accent);
	font-size: 12px;
	margin-bottom: 15px;
}

.project-copy p {
    color: var(--mg-color-text-muted);
    line-height: 1.5;
}

.project-copy span {
    display: inline-block;
    margin-top: 18px;
    color: var(--mg-color-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
}

/* arrows */
.showcase-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

.showcase-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
	color: rgba(0,245,255,.35);
    font-size: 24px;
    cursor: pointer;
    pointer-events: auto;
    transition: all .25s ease;
    animation: arrowPulse 3s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%,100% {
        opacity: .35;
    }
    50% {
        opacity: .8;
    }
}

.showcase-arrow.prev {
    left: -55px;
}

.showcase-arrow.next {
    right: -45px;
}

.showcase-arrow:hover {
	color: var(--mg-color-accent);
    text-shadow:
        0 0 8px rgba(103,243,255,.8),
        0 0 20px rgba(103,243,255,.4);
}

.showcase-arrow.prev:hover {
    transform: translateY(-50%) translateX(-4px);
}

.showcase-arrow.next:hover {
    transform: translateY(-50%) translateX(4px);
}

/* dots */
.mg-showcase-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.mg-showcase-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(0,245,255,.15);
    transition:
        background .25s ease,
        transform .25s ease;
}

.mg-showcase-dots button.active {
    background: rgba(255,255,255,.45);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .mg-project-card {
        flex-basis: calc((100% - 18px) / 2);
    }

}

@media (max-width: 768px) {
    .mg-project-card {
        flex-basis: 100%;
    }

}

/* ===== HOSTING ===== */
.mg-hosting {
    position: relative;
    padding: 120px 60px;
    overflow: hidden;
    background:
        linear-gradient(
        135deg,
        rgba(0,0,0,.96),
        rgba(0,55,60,.92)
        ),
        url("../images/orbit.webp") top/cover no-repeat;
	border-top: 1px solid rgba(0,245,255,.3);
}

.mg-hosting-inner {
    position: relative;
    z-index: 5;
    max-width: 960px;
    margin: 0 auto;
}

.mg-hosting-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 40px;
}

.mg-hosting small {
	margin-top: 10px;
}

.mg-hosting-table-wrap {
    margin-top: 30px;
    overflow-x: auto;
    border-radius: 7px;
    border: 1px solid rgba(0,245,255,.15);
    background:
        linear-gradient(
        -135deg,
        rgba(0,245,255,.04),
        rgba(0,160,185,.08),
        rgba(6,28,34,.55)
        );
    backdrop-filter: blur(16px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        inset 0 0 24px rgba(0,245,255,.08);
}

.mg-hosting-table {
    width: 100%;
    max-width: 960px;
    border-collapse: collapse;
    text-align: center;
}

.mg-hosting-table th, /* th = table header cell */
.mg-hosting-table td { /* td = table data cell */
    padding: 20px 18px; /* controls height of cells */
    border: 1px solid rgba(255,255,255,.06);
}

.mg-hosting-table th {
    position: relative;
    background: rgba(255,255,255,.02);
}

.featured { /* featured column */
    background:
        linear-gradient(
        180deg,
        rgba(0,245,255,.10),
        rgba(0,245,255,.03)
        );
    position: relative;
}

.featured-tag {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,245,255,.15);
    border: 1px solid rgba(0,245,255,.25);
    white-space: nowrap;
}

.plan-name {
    display: block;
    margin: 10px 0 14px;
    font-family: 'Nasalization', monospace;
    font-size: 20px;
    color: #fff;
}

.plan-price {
    display: block;
    font-size: 36px;
    font-weight: 700;
	color: #ccc;
	text-shadow:
		0 0 10px rgba(0,245,255,.6),
		0 0 60px rgba(0,245,255,.10);
}

.feature-col {
    width: 220px;
    text-align: left;
    font-family: 'Nasalization', monospace;
    color: #fff;
    background: rgba(255,255,255,.03);
    position: sticky;
    left: 0;
    z-index: 3;
}

.mg-hosting-table td {
    color: #c9dfe0;
    font-size: 17px;
    line-height: 1.45;
}

.mg-hosting-table tr:hover td {
    background: rgba(255,255,255,.02);
}

.cta-row td {
    padding-top: 30px;
    padding-bottom: 30px;
}

.cta-row .button {
    width: 100%;
}

.hosting-note {
    margin-top: 20px;
    font-size: 14px;
    color: #87a5a8;
    opacity: .8;
}

@media (max-width: 768px) {

    .mg-hosting {
        padding: 100px 20px;
    }

}