/**
 * Mzansi Cloud Storefront — design system.
 *
 * Reproduces the approved Mzansi Cloud storefront visual design: lime CTAs,
 * navy dark sections, blue domain bar, soft-shadow pricing cards, mock VPS
 * terminal, sticky footer, fully responsive. All content is real Mzansi Cloud
 * content from inc/content.php; this stylesheet only owns the look.
 *
 * Palette (prototype-approved — design is king):
 *   --mc-lime   #8BC34A   primary CTAs / accents
 *   --mc-navy   #2C3E50   dark sections / headings
 *   --mc-blue   #1E5A8E   domain bar / logo block
 *   --mc-gold   #E5A93B   amber catalogue-hold / local accents
 *   --mc-trust  #00B67A   rating stars
 *
 * Real Mzansi brand tokens (source-of-truth, see theme.json):
 *   navy #0F172A · sky #0284C7 · cyan #06B6D4 · gold #E5A93B · pale #F0F9FF
 */

:root {
	/* Approved rendered palette (prototype-approved) */
	--mc-lime:        #8BC34A;
	--mc-lime-hover:  #7CB342;
	--mc-navy:        #2C3E50;
	--mc-blue:        #1E5A8E;
	--mc-blue-hover:  #174a78;
	--mc-gold:        #E5A93B;
	--mc-trust:       #00B67A;

	/* Real Mzansi brand tokens (source-of-truth, documentary) */
	--mc-brand-navy:  #0F172A;
	--mc-brand-sky:    #0284C7;
	--mc-brand-cyan:   #06B6D4;
	--mc-brand-gold:   #E5A93B;
	--mc-brand-pale:   #F0F9FF;

	/* Neutrals */
	--mc-text:        #2C3E50;
	--mc-text-soft:   #333333;
	--mc-muted:       #6b7280;
	--mc-muted-2:     #9ca3af;
	--mc-line:        #E2E8F0;
	--mc-line-soft:   #f1f5f9;
	--mc-bg:          #ffffff;
	--mc-bg-soft:     #FAFAFA;
	--mc-bg-soft-2:   #f3f6f0;

	/* Sizing */
	--mc-container:   1200px;
	--mc-radius:      6px;
	--mc-radius-btn:  4px;
	--mc-shadow:      0 2px 15px rgba(0,0,0,0.08);
	--mc-shadow-hover:0 12px 30px rgba(0,0,0,0.12);
	--mc-shadow-soft: 0 2px 10px rgba(0,0,0,0.05);

	--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.mzansi-cloud-storefront {
	margin: 0;
	color: var(--mc-text);
	background: var(--mc-bg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.mzansi-cloud-storefront a { color: inherit; text-decoration: none; }
.mzansi-cloud-storefront img { max-width: 100%; height: auto; display: block; }
.mzansi-cloud-storefront ul { margin: 0; padding: 0; list-style: none; }
.mzansi-cloud-storefront button { font-family: inherit; cursor: pointer; }
.mzansi-cloud-storefront svg { display: block; }

.mzansi-cloud-storefront .mc-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0;
}

/* layout */
.mc-page { display: flex; flex-direction: column; min-height: 100vh; }
.mc-page > .mc-main { flex: 1 0 auto; }
.mc-container { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; }

.mc-overline {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--mc-lime);
}
.mc-section { padding-block: 5rem; }
.mc-section--soft { background: var(--mc-bg-soft); }
.mc-section-head { max-width: 800px; margin: 0 auto 3rem; text-align: center; }
.mc-section-head h2 { margin: 0.5rem 0 1rem; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--mc-navy); line-height: 1.2; }
.mc-section-head p { margin: 0; color: var(--mc-muted); font-size: 1rem; }

/* ---------------------------------------------------------------- top bar */
.mc-topbar { background: #2D2D2D; color: #cbd5e1; font-size: 0.6875rem; }
.mc-topbar-inner { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem; }
.mc-topbar-left { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.mc-topbar-left a, .mc-topbar-left span { display: inline-flex; align-items: center; gap: 0.375rem; color: #cbd5e1; }
.mc-topbar-left a:hover { color: var(--mc-lime); }
.mc-topbar-left svg { width: 0.75rem; height: 0.75rem; color: var(--mc-lime); }
.mc-topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.mc-topbar-right .label { color: #9ca3af; }
.mc-topbar-social { display: flex; align-items: center; gap: 0.5rem; }
.mc-topbar-social a { color: #cbd5e1; display: inline-flex; }
.mc-topbar-social a:hover { color: var(--mc-lime); }
.mc-topbar-social svg { width: 0.875rem; height: 0.875rem; }

/* ---------------------------------------------------------------- navbar */
.mc-nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--mc-line-soft); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.mc-nav-inner { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; gap: 1rem; }
.mc-brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.mc-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 4px; background: var(--mc-blue); color: #fff; font-weight: 800; font-size: 0.9375rem; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.mc-brand-text { display: flex; flex-direction: column; line-height: 1; }
.mc-brand-text strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--mc-navy); }
.mc-brand-text strong .mc-cloud { color: var(--mc-lime); }
.mc-brand-text small { margin-top: 0.25rem; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9ca3af; }

.mc-nav-list { display: flex; align-items: center; gap: 0.25rem; }
.mc-nav-list a { display: inline-block; padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--mc-text-soft); border-radius: 4px; transition: color .15s; }
.mc-nav-list a:hover { color: var(--mc-lime); }
.mc-nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.mc-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: var(--mc-text-soft); transition: background .15s, color .15s; }
.mc-cart:hover { background: #f3f4f6; color: var(--mc-lime); }
.mc-cart svg { width: 1rem; height: 1rem; }
.mc-cart .badge { position: absolute; top: -2px; right: -2px; display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--mc-lime); color: #fff; font-size: 0.5625rem; font-weight: 700; }
.mc-login { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: var(--mc-blue); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: background .15s; }
.mc-login:hover { background: var(--mc-blue-hover); }
.mc-login svg { width: 1rem; height: 1rem; }
.mc-nav-toggle { display: none; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--mc-text-soft); }
.mc-nav-toggle svg { width: 1.25rem; height: 1.25rem; }

/* ---------------------------------------------------------------- buttons */
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: var(--mc-radius-btn); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; text-decoration: none; line-height: 1; }
.mc-btn svg { width: 1rem; height: 1rem; }
.mc-btn--primary { background: var(--mc-lime); color: #fff; padding: 0.875rem 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.mc-btn--primary:hover { background: var(--mc-lime-hover); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
.mc-btn--block { width: 100%; padding: 0.75rem 1rem; }
.mc-btn--ghost-light { background: transparent; color: #fff; border: 2px solid #fff; padding: 0.75rem 2rem; }
.mc-btn--ghost-light:hover { background: #fff; color: #4d7c1a; }
.mc-btn--ghost-blue { background: transparent; color: var(--mc-blue); border: 1px solid var(--mc-blue); padding: 0.5rem 1.25rem; }
.mc-btn--ghost-blue:hover { background: var(--mc-blue); color: #fff; }

/* ---------------------------------------------------------------- hero */
.mc-hero { position: relative; min-height: 460px; overflow: hidden; }
.mc-hero-bg { position: absolute; inset: 0; }
.mc-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mc-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.2) 100%); }
.mc-hero-inner { position: relative; width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; min-height: 460px; display: flex; align-items: center; padding-block: 4rem; }
.mc-hero-content { max-width: 620px; }
.mc-hero-content h1 { margin: 0; font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; color: #fff; }
.mc-hero-content h1 .mc-accent { color: var(--mc-lime); display: block; }
.mc-hero-lede { margin: 1rem 0 0; max-width: 520px; color: #e5e7eb; font-size: 1.0625rem; }
.mc-hero-float { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-top: 1.25rem; padding: 0.375rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); backdrop-filter: blur(4px); }
.mc-hero-float span { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #d1d5db; }
.mc-hero-float strong { font-size: 0.8125rem; font-weight: 700; color: #fff; }
.mc-hero-cta { margin-top: 1.75rem; }

/* ---------------------------------------------------------------- domain */
.mc-domain { background: var(--mc-blue); padding-block: 3rem; color: #fff; }
.mc-domain-grid { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.mc-domain-head { max-width: 420px; }
.mc-domain-head h2 { margin: 0.5rem 0 0.75rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 700; color: #fff; line-height: 1.25; }
.mc-domain-head p { margin: 0; color: rgba(255,255,255,0.8); font-size: 0.875rem; }
.mc-domain-form { display: flex; gap: 0.5rem; width: 100%; max-width: 42rem; }
.mc-domain-form input { flex: 1; height: 3rem; border: 0; border-radius: var(--mc-radius-btn); background: #fff; color: #374151; font-size: 0.875rem; padding: 0 1rem; font-family: inherit; }
.mc-domain-form input::placeholder { color: #9ca3af; }
.mc-domain-tlds { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.mc-domain-tlds label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgba(255,255,255,0.9); cursor: pointer; }
.mc-domain-tlds input { width: 1rem; height: 1rem; accent-color: var(--mc-lime); }
.mc-domain-tlds .tld { font-weight: 600; }
.mc-domain-tlds .price { color: rgba(255,255,255,0.6); }
.mc-domain-note { margin-top: 1rem; display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.6875rem; line-height: 1.5; color: rgba(255,255,255,0.7); }
.mc-domain-note svg { flex-shrink: 0; margin-top: 1px; width: 0.875rem; height: 0.875rem; color: var(--mc-gold); }
.mc-domain-status { margin-top: 0.75rem; font-size: 0.8125rem; color: #fff; min-height: 1.25em; }
.mc-domain-status.is-error { color: #fecaca; }
.mc-domain-status.is-ok { color: #d9f99d; }

/* ---------------------------------------------------------------- catalogue hold */
.mc-catalogue-hold { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 2.5rem; padding: 1rem 1.25rem; border-radius: var(--mc-radius); border: 1px solid rgba(229,169,59,0.4); background: rgba(229,169,59,0.1); color: #7a5a16; font-size: 0.8125rem; line-height: 1.6; }
.mc-catalogue-hold svg { flex-shrink: 0; margin-top: 1px; width: 1.25rem; height: 1.25rem; color: var(--mc-gold); }

/* ---------------------------------------------------------------- pricing cards (hosting + email) */
.mc-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.mc-card { display: flex; flex-direction: column; background: #fff; padding: 1.75rem; border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); ring: 1px solid var(--mc-line); border: 1px solid var(--mc-line-soft); transition: transform .25s, box-shadow .25s; }
.mc-card:hover { transform: translateY(-8px); box-shadow: var(--mc-shadow-hover); }
.mc-card-icon { display: flex; justify-content: center; }
.mc-card-icon .mc-icon-circle { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 999px; background: rgba(139,195,74,0.1); color: #5A8E2E; transition: background .2s, color .2s; }
.mc-card:hover .mc-card-icon .mc-icon-circle { background: var(--mc-lime); color: #fff; }
.mc-card-icon .mc-icon-circle--blue { background: rgba(30,90,142,0.1); color: var(--mc-blue); }
.mc-card:hover .mc-card-icon .mc-icon-circle--blue { background: var(--mc-blue); color: #fff; }
.mc-card-icon svg { width: 2rem; height: 2rem; }
.mc-card h3 { margin: 1.25rem 0 0; text-align: center; font-size: 1.125rem; font-weight: 700; color: var(--mc-text-soft); }
.mc-card .mc-card-desc { margin: 0.75rem 0 0; text-align: center; font-size: 0.8125rem; line-height: 1.55; color: var(--mc-muted); flex: 1; }
.mc-card-price { margin-top: 1.25rem; text-align: center; }
.mc-card-price .from { font-size: 0.75rem; color: var(--mc-muted-2); }
.mc-card-price .amount { margin-top: 0.25rem; display: flex; align-items: baseline; justify-content: center; }
.mc-card-price .currency { font-size: 1.25rem; font-weight: 700; color: var(--mc-navy); }
.mc-card-price .value { font-size: 1.875rem; font-weight: 700; color: var(--mc-navy); }
.mc-card-price .period { margin-left: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--mc-muted-2); }
.mc-card-price .annual { margin-top: 0.25rem; font-size: 0.75rem; color: var(--mc-muted-2); }
.mc-card .mc-btn { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- solutions */
.mc-solutions .mc-card { padding: 2rem; box-shadow: 0 2px 15px rgba(0,0,0,0.06); }
.mc-solutions .mc-sol-head { display: flex; align-items: center; gap: 0.75rem; }
.mc-solutions .mc-sol-head .mc-icon-circle { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(30,90,142,0.1); color: var(--mc-blue); transition: background .2s, color .2s; }
.mc-card:hover .mc-sol-head .mc-icon-circle { background: var(--mc-blue); color: #fff; }
.mc-solutions .mc-sol-head svg { width: 1.5rem; height: 1.5rem; }
.mc-solutions .mc-sol-head .idx { font-size: 0.75rem; font-weight: 700; color: var(--mc-muted-2); }
.mc-solutions .mc-card h3 { margin-top: 1.25rem; text-align: left; }

/* ---------------------------------------------------------------- web builders (lime split) */
.mc-split { display: grid; grid-template-columns: 1fr; }
.mc-split-lime { background: var(--mc-lime); padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.mc-split-lime .mc-overline { color: rgba(255,255,255,0.85); }
.mc-split-lime h2 { margin: 0.5rem 0 1.25rem; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: #fff; }
.mc-split-lime p { margin: 0 0 1.5rem; max-width: 450px; color: rgba(255,255,255,0.95); font-size: 1rem; line-height: 1.6; }
.mc-wp-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.mc-wp-chip { display: flex; flex-direction: column; padding: 0.75rem 1.25rem; border-radius: var(--mc-radius); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px); }
.mc-wp-chip strong { font-size: 0.8125rem; font-weight: 700; color: #fff; }
.mc-wp-chip span { font-size: 0.6875rem; color: rgba(255,255,255,0.85); }
.mc-split-image { display: flex; align-items: center; justify-content: center; background: var(--mc-bg-soft-2); padding: 2.5rem 1.5rem; }
.mc-split-image .mc-laptop { position: relative; }
.mc-split-image img { width: 100%; max-width: 28rem; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.mc-play { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; border: 0; border-radius: 999px; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: transform .2s; }
.mc-play:hover { transform: scale(1.1); }
.mc-play svg { margin-left: 2px; width: 1.5rem; height: 1.5rem; color: var(--mc-navy); }

/* ---------------------------------------------------------------- why choose us */
.mc-features { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.mc-feature { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem; transition: transform .2s; }
.mc-feature:hover { transform: translateY(-4px); }
.mc-feature .mc-icon-ring { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 999px; border: 2px solid rgba(139,195,74,0.3); color: #5A8E2E; }
.mc-feature svg { width: 2rem; height: 2rem; }
.mc-feature h3 { margin: 1.25rem 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--mc-text-soft); }
.mc-feature p { margin: 0; max-width: 260px; font-size: 0.8125rem; line-height: 1.55; color: var(--mc-muted); }

/* ---------------------------------------------------------------- VPS (dark) */
.mc-vps { background: var(--mc-navy); padding-block: 5rem; color: #fff; }
.mc-vps-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.mc-vps h2 { margin: 0.5rem 0 0.75rem; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: #fff; }
.mc-vps-lede { margin: 0 0 1.5rem; max-width: 520px; font-size: 0.875rem; line-height: 1.65; color: #cbd5e1; }
.mc-vps-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.mc-vps-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid rgba(139,195,74,0.4); background: rgba(139,195,74,0.1); color: #c5e090; font-size: 0.75rem; font-weight: 600; }
.mc-vps-badge svg { width: 0.75rem; height: 0.75rem; }

.mc-console { margin-bottom: 1.5rem; overflow: hidden; border-radius: var(--mc-radius); border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.6); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.mc-console-bar { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }
.mc-console-bar .dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; }
.mc-console-bar .dot.r { background: rgba(248,113,113,0.7); }
.mc-console-bar .dot.y { background: rgba(250,204,21,0.7); }
.mc-console-bar .dot.g { background: rgba(74,222,128,0.7); }
.mc-console-bar .title { margin-left: 0.5rem; font-size: 0.6875rem; color: #9ca3af; }
.mc-console-body { padding: 1rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.65; color: #cbd5e1; }
.mc-console-body .prompt { color: var(--mc-lime); }
.mc-console-body .cmd { color: #fff; }
.mc-console-body ul { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mc-console-body li { color: #9ca3af; }
.mc-console-body li::before { content: "•"; color: var(--mc-lime); margin-right: 0.5rem; }

.mc-vps-product { border-radius: var(--mc-radius); background: rgba(255,255,255,0.05); padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); }
.mc-vps-product .idx { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-lime); }
.mc-vps-product h3 { margin: 0.25rem 0 0.25rem; font-size: 1.125rem; font-weight: 700; color: #fff; }
.mc-vps-product p { margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.55; color: #9ca3af; }
.mc-vps-product .row { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mc-vps-product .price { display: flex; align-items: baseline; }
.mc-vps-product .price .currency { font-size: 1.25rem; font-weight: 700; color: #fff; }
.mc-vps-product .price .value { font-size: 1.5rem; font-weight: 700; color: #fff; }
.mc-vps-product .price .period { margin-left: 0.25rem; font-size: 0.875rem; color: #9ca3af; }
.mc-vps-product .mc-btn { padding: 0.625rem 1.25rem; }
.mc-vps-art { display: flex; align-items: center; justify-content: center; }
.mc-vps-art img { width: 100%; max-width: 30rem; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); }

/* ---------------------------------------------------------------- insights */
.mc-insights-head { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin-bottom: 3rem; }
.mc-insights-head h2 { margin: 0; max-width: 640px; font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 700; color: var(--mc-text-soft); }
.mc-insights-head p { margin: 0; max-width: 560px; font-size: 0.875rem; color: var(--mc-muted); }
.mc-insights-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.mc-insight { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--mc-radius); border: 1px solid var(--mc-line); background: #fff; box-shadow: var(--mc-shadow-soft); transition: transform .2s, box-shadow .2s; }
.mc-insight:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.mc-insight .tag { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; width: fit-content; }
.mc-insight .tag.perspective { background: rgba(30,90,142,0.1); color: var(--mc-blue); }
.mc-insight .tag.guide { background: rgba(139,195,74,0.15); color: #5A8E2E; }
.mc-insight .tag.readnext { background: rgba(229,169,59,0.15); color: #9a7016; }
.mc-insight h3 { margin: 1rem 0 0; flex: 1; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: var(--mc-text-soft); transition: color .15s; }
.mc-insight:hover h3 { color: var(--mc-blue); }
.mc-insight .more { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--mc-lime); }
.mc-insight .more svg { width: 0.875rem; height: 0.875rem; transition: transform .15s; }
.mc-insight:hover .more svg { transform: translateX(2px); }
.mc-insight--expert { border-color: rgba(139,195,74,0.4); background: rgba(139,195,74,0.05); justify-content: space-between; }
.mc-insight--expert:hover { background: rgba(139,195,74,0.1); }
.mc-insight--expert .tag { background: var(--mc-lime); color: #fff; }
.mc-insight--expert .more { color: #5A8E2E; }
.mc-insight--expert .more svg { width: 0.875rem; height: 0.875rem; }

/* ---------------------------------------------------------------- footer */
.mc-footer { background: #2D2D2D; color: #cbd5e1; }
.mc-social { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mc-social-inner { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 2.5rem; flex-wrap: wrap; }
.mc-social-text .mc-overline { color: var(--mc-lime); }
.mc-social-text h3 { margin: 0.25rem 0 0.25rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
.mc-social-text p { margin: 0; font-size: 0.8125rem; color: #9ca3af; }
.mc-social-pills { display: flex; align-items: center; gap: 0.5rem; }
.mc-social-pills a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid #4b5563; color: #cbd5e1; transition: all .15s; }
.mc-social-pills a:hover { border-color: var(--mc-lime); background: var(--mc-lime); color: #fff; }
.mc-social-pills svg { width: 1rem; height: 1rem; }

.mc-footer-main { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; padding-block: 3.5rem; }
.mc-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.mc-footer-col h4 { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; }
.mc-footer-col li { margin-bottom: 0.625rem; }
.mc-footer-col a { font-size: 0.8125rem; color: #9ca3af; transition: color .15s; }
.mc-footer-col a:hover { color: var(--mc-lime); }
.mc-footer-contact li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #9ca3af; margin-bottom: 0.75rem; }
.mc-footer-contact svg { width: 0.875rem; height: 0.875rem; color: var(--mc-lime); }
.mc-footer-contact a:hover { color: var(--mc-lime); }
.mc-footer-brand .mc-brand-text strong { color: #fff; }
.mc-footer-brand .mc-brand-text strong .mc-cloud { color: var(--mc-lime); }
.mc-footer-brand .mc-brand-text small { color: #9ca3af; }
.mc-footer-brand p { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.65; color: #9ca3af; }

.mc-footer-bottom { border-top: 1px solid #374151; }
.mc-footer-bottom-inner { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 1.25rem; flex-wrap: wrap; }
.mc-footer-bottom p { margin: 0; font-size: 0.75rem; color: #6b7280; }
.mc-footer-legal { display: flex; align-items: center; gap: 1rem; }
.mc-footer-legal a { font-size: 0.75rem; color: #6b7280; transition: color .15s; }
.mc-footer-legal a:hover { color: var(--mc-lime); }

/* ---------------------------------------------------------------- generic content shell (page/single/404) */
.mc-content-shell { width: min(100% - 3rem, 1100px); margin: 4.5rem auto; }
.mc-entry { margin: 0 0 3rem; }
.mc-entry-title { margin: 0 0 1.125rem; color: var(--mc-navy); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.mc-entry-title a { color: inherit; }
.mc-entry-content { line-height: 1.7; }
.mc-entry-content a { color: var(--mc-blue); text-decoration: underline; }
.mc-entry-content img { border-radius: 0.5rem; margin: 1.5rem 0; }
.mc-not-found { text-align: center; }
.mc-not-found h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 640px) {
	.mc-card-grid { grid-template-columns: repeat(2, 1fr); }
	.mc-insights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.mc-split { grid-template-columns: 3fr 2fr; }
	.mc-split-lime { padding: 5rem 3.5rem; }
	.mc-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.mc-card-grid { grid-template-columns: repeat(3, 1fr); }
	.mc-features { grid-template-columns: repeat(3, 1fr); }
	.mc-insights-grid { grid-template-columns: repeat(4, 1fr); }
	.mc-vps-grid { grid-template-columns: 1fr 1fr; }
	.mc-domain-grid { flex-direction: row; align-items: center; justify-content: space-between; }
	.mc-footer-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1024px) {
	.mc-insights-grid { grid-template-columns: repeat(4, 1fr); }
}

/* hide desktop nav on small screens, show toggle */
@media (max-width: 1023px) {
	.mc-nav-list, .mc-nav-actions { display: none; }
	.mc-nav-toggle { display: inline-flex; }
	.mc-nav-mobile { display: block; border-top: 1px solid var(--mc-line-soft); background: #fff; padding: 1rem; }
	.mc-nav-mobile .mc-nav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
	.mc-nav-mobile .mc-nav-list a { padding: 0.625rem 0.75rem; }
	.mc-nav-mobile .mc-nav-actions { display: flex; margin-top: 0.75rem; gap: 0.5rem; }
	.mc-nav-mobile .mc-login { flex: 1; justify-content: center; }
	.mc-nav-mobile .mc-cart { flex: 1; background: #f3f4f6; border-radius: var(--mc-radius); height: 2.25rem; }
	.mc-nav-mobile[hidden] { display: none; }
}
@media (max-width: 600px) {
	.mc-topbar { display: none; }
	.mc-content-shell { width: min(100% - 2rem, 1100px); margin: 3rem auto; }
	.mc-domain-form { flex-direction: column; }
	.mc-domain-form .mc-btn { width: 100%; height: 3rem; }
	.mc-vps-product .row { flex-direction: column; align-items: stretch; }
	.mc-vps-product .mc-btn { width: 100%; }
}