/* Hero — dot-grid pattern echoes a coordinate grid, tying into "this is
   a map of real infrastructure" rather than being decoration for its
   own sake. Full-bleed, sits outside the 900px .ddc-page container. */
.ddc-hero {
	position: relative;
	background: var(--ddc-ink);
	color: #fff;
	padding: 88px 24px 76px;
	text-align: center;
	overflow: hidden;
	background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
	background-size: 26px 26px;
}
.ddc-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, rgba(26,26,26,0) 0%, var(--ddc-ink) 78%);
}
.ddc-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.ddc-hero-eyebrow { font-family: 'SF Mono', Consolas, monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #F0A5C0; margin-bottom: 18px; }
.ddc-hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; font-weight: 700; }
.ddc-hero h1 span { color: #F0A5C0; }
.ddc-hero p { font-size: 17px; color: #C9C9C9; margin: 0 0 36px; line-height: 1.6; }

.ddc-search-box {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 999px; padding: 6px 6px 6px 22px;
	box-shadow: var(--ddc-shadow-lift); max-width: 560px; margin: 0 auto;
}
.ddc-search-box input { flex: 1; border: none; outline: none; font-size: 15px; padding: 12px 0; color: var(--ddc-ink); background: transparent; }
.ddc-search-box input::placeholder { color: #999; }
.ddc-search-box button { background: var(--ddc-crimson); color: #fff; border: none; border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.ddc-search-box button:hover { background: var(--ddc-crimson-dark); }
.ddc-search-hint { margin-top: 14px; font-size: 12px; color: #999; }
.ddc-search-hint a { color: #F0A5C0; text-decoration: none; }

/* Status readout — reuses the verified-green dot language from the
   badge already used sitewide, styled like a live infrastructure
   dashboard rather than a generic "impressive numbers" stat block.
   This is the homepage's signature element. */
.ddc-readout {
	max-width: 900px; margin: -34px auto 0; position: relative; z-index: 2;
	background: #fff; border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius);
	box-shadow: var(--ddc-shadow-md);
	display: grid; grid-template-columns: repeat(4, 1fr);
}
.ddc-readout-cell { padding: 22px 20px; text-align: center; border-right: 1px solid var(--ddc-hairline); }
.ddc-readout-cell:last-child { border-right: none; }
.ddc-readout-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ddc-verified); margin-right: 6px; }
.ddc-readout-num { font-family: 'SF Mono', Consolas, monospace; font-size: 26px; font-weight: 700; color: var(--ddc-ink); }
.ddc-readout-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; }

.ddc-homepage .ddc-section { padding: 56px 0; }
.ddc-homepage .ddc-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.ddc-homepage .ddc-section-head h2 { font-size: 22px; margin: 0; border-bottom: 2px solid var(--ddc-crimson); padding-bottom: 8px; }

/* Top locations */
.ddc-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ddc-loc-card {
	background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm);
	padding: 18px 20px; box-shadow: var(--ddc-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
	text-decoration: none; color: inherit; display: block;
}
.ddc-loc-card:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-2px); }
.ddc-loc-card .name { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--ddc-ink); }
.ddc-loc-card .count { font-size: 12px; color: var(--ddc-teal); }

/* Top companies */
.ddc-co-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ddc-co-card {
	background: #fff; border: 1px solid var(--ddc-hairline); border-radius: var(--ddc-radius-sm);
	padding: 18px 16px; box-shadow: var(--ddc-shadow-sm); text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease; text-decoration: none; color: inherit; display: block;
}
.ddc-co-card:hover { box-shadow: var(--ddc-shadow-md); transform: translateY(-2px); }
.ddc-co-logo, .ddc-co-logo-img { width: 40px; height: 40px; border-radius: 8px; background: var(--ddc-panel); border: 1px solid var(--ddc-hairline); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #999; object-fit: contain; }
.ddc-co-card .name { font-weight: 600; font-size: 13px; color: var(--ddc-ink); }
.ddc-co-card .type { font-size: 11px; color: #888; margin-top: 2px; }

/* Browse by continent */
.ddc-continent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ddc-continent-card {
	position: relative; border-radius: var(--ddc-radius-sm); overflow: hidden; height: 108px;
	display: flex; align-items: flex-end; padding: 16px; text-decoration: none;
	background: linear-gradient(135deg, var(--ddc-teal), #12505c);
}
.ddc-continent-card .name { color: #fff; font-weight: 700; font-size: 16px; position: relative; z-index: 1; }
.ddc-continent-card .count { color: rgba(255,255,255,0.75); font-size: 11px; position: relative; z-index: 1; }
.ddc-continent-card::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
	background-size: 16px 16px;
}

/* AI Data Centers teaser — deliberately placed last among the content
   sections (after locations/companies/continents), matching the site's
   locked SEO priority: data centers first, colocation second, AI data
   centers weighted below both. Teal rather than crimson so it doesn't
   visually compete with the primary CTA below it, and reuses the
   hero's dot-grid texture to tie the two together as the same "network"
   visual language. Hidden entirely when there are zero AI-flagged
   facilities — same graceful-absence rule as everywhere else in this
   build; no reason to link toward an empty hub page. */
.ddc-ai-teaser {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: linear-gradient(135deg, var(--ddc-teal), #12505c);
	border-radius: var(--ddc-radius);
	padding: 32px 36px;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ddc-ai-teaser::before {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
	background-size: 20px 20px;
}
.ddc-ai-teaser:hover { box-shadow: var(--ddc-shadow-lift); transform: translateY(-2px); }
.ddc-ai-teaser-text { position: relative; z-index: 1; }
/* Higher specificity than the generic .ddc-page h2 rule (crimson
   underline, meant for the light card sections) — this h2 sits on a
   dark background and needs its own look, not the shared default. */
.ddc-homepage .ddc-ai-teaser-text h2 { color: #fff; font-size: 22px; margin: 0 0 8px; border: none; padding: 0; }
.ddc-ai-teaser-text p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.6; margin: 0; max-width: 520px; }
.ddc-ai-teaser-cta {
	position: relative; z-index: 1; flex-shrink: 0;
	background: #fff; color: var(--ddc-teal); font-weight: 700; font-size: 14px;
	padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}

@media (max-width: 760px) {
	.ddc-hero h1 { font-size: 30px; }
	.ddc-readout { grid-template-columns: repeat(2, 1fr); }
	.ddc-readout-cell:nth-child(2) { border-right: none; }
	.ddc-loc-grid, .ddc-continent-grid { grid-template-columns: repeat(2, 1fr); }
	.ddc-co-grid { grid-template-columns: repeat(2, 1fr); }
	.ddc-ai-teaser { flex-direction: column; align-items: flex-start; text-align: left; }
}