/* Cyberdise sitemap prototypes — shared wireframe design system.
   IDENTICAL across sitemap-a / sitemap-b / sitemap-c. Only sitemap.js differs. */

:root {
	--pink: #e6007e;
	--cyan: #00c4bd;
	--purple: #2e1360;
	--ink: #16121f;
	--muted: #6e6880;
	--wire: #f4f3f8;
	--line: #dcd9e6;
	--paper: #ffffff;
	--mono: ui-monospace, "SF Mono", Menlo, monospace;
	--sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
	--maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- wireframe primitives ---------- */
.wire-label {
	font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px;
}
.ph {
	background: var(--wire); border: 1.5px dashed var(--line); border-radius: 8px;
	position: relative; min-height: 48px;
}
.ph-media {
	background: repeating-linear-gradient(135deg, var(--wire), var(--wire) 12px, #eceaf2 12px, #eceaf2 13px);
	border: 1.5px dashed var(--line); border-radius: 10px; aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
}
.ph-media span, .ph > span {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--muted); padding: 8px 12px; text-align: center;
}
.ph-lines { display: grid; gap: 8px; }
.ph-line { height: 11px; border-radius: 4px; background: #e9e7f0; }
.ph-line.short { width: 62%; }

/* ---------- header ---------- */
header.site {
	position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.96);
	backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
/* brand echo: pink→cyan gradient of the current Cyberdise site as a thin accent line */
header.site::before {
	content: ""; display: block; height: 3px;
	background: linear-gradient(90deg, var(--pink), #8a2be2 55%, var(--cyan));
}
.site-bar { display: flex; align-items: center; gap: 20px; height: 72px; }
.logo { display: flex; align-items: center; }
.logo img { height: 56px; width: auto; display: block; }
nav.main { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
nav.main > div { position: relative; }
nav.main > div > a {
	display: block; padding: 8px 12px; font-size: 13.5px; font-weight: 600;
	border-radius: 6px; white-space: nowrap;
}
nav.main > div > a:hover { background: var(--wire); }
nav.main > div > a .caret { font-size: 9px; color: var(--muted); margin-left: 4px; }
.dd {
	display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 18px 50px rgba(22,18,31,0.13); padding: 12px; z-index: 60;
	grid-auto-rows: min-content; gap: 2px 18px; max-width: 92vw; max-height: 72vh; overflow: auto;
}
.dd-cols-1 { width: 300px; grid-template-columns: 1fr; }
.dd-cols-2 { width: 580px; grid-template-columns: 1fr 1fr; }
.dd-cols-3 { width: 780px; grid-template-columns: 1fr 1fr 1fr; }
nav.main > div:hover .dd, nav.main > div:focus-within .dd { display: grid; }
.dd-item { display: flex; gap: 11px; padding: 9px 10px; border-radius: 9px; align-items: flex-start; }
.dd-item:hover { background: var(--wire); }
.dd-ic { flex: none; width: 18px; height: 18px; color: var(--ink); margin-top: 1px; }
.dd-ic svg { width: 18px; height: 18px; }
.dd-item:hover .dd-ic { color: var(--pink); }
.dd-tx b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.dd-tx small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.dd-tx .ext { font-family: var(--mono); font-size: 10px; color: var(--cyan); margin-left: 4px; }
.dd-subitem { padding-left: 34px; }
.dd-subitem .dd-ic { width: 15px; height: 15px; }
.dd-subitem .dd-ic svg { width: 15px; height: 15px; }
.dd-subitem .dd-tx b { font-size: 12.5px; font-weight: 600; }
.site-ctas { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.lang { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-right: 2px; }
.lang b { color: var(--ink); }

.btn {
	display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 13px;
	font-weight: 700; border: 1.5px solid transparent; cursor: pointer;
}
.btn.primary { background: var(--pink); color: #fff; }
.btn.primary:hover { filter: brightness(0.92); }
.btn.secondary { border-color: var(--cyan); color: var(--cyan); background: #fff; }
.btn.secondary:hover { background: rgba(0,180,200,0.07); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: #fff; }

.burger { display: none; }

/* ---------- sections ---------- */
section.blk { padding: 60px 0; }
section.blk + section.blk { border-top: 1px solid #f0eef5; }
h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: 16px; }
.sub { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 60ch; }
.kicker {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--pink); display: block; margin-bottom: 14px;
}
.cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }

.logostrip { display: flex; gap: 14px; flex-wrap: wrap; }
.logostrip .ph { flex: 1 1 140px; height: 52px; display: flex; align-items: center; justify-content: center; }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

.tile { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #fff; }
.tile .icon { width: 30px; height: 30px; border-radius: 7px; background: var(--wire); border: 1.5px dashed var(--line); margin-bottom: 12px; }
.tile h3 { margin-bottom: 6px; }
.tile p { font-size: 13px; color: var(--muted); }
.tile a.more { font-size: 12.5px; font-weight: 700; color: var(--cyan); display: inline-block; margin-top: 10px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.flip > .split-media { order: -1; }
.split ul { margin: 14px 0 0 18px; color: var(--muted); font-size: 14px; display: grid; gap: 6px; }

.band { border-radius: 14px; padding: 44px 40px; color: #fff; }
.band.purple { background: var(--purple); }
.band.pink { background: var(--pink); }
.band.ink { background: var(--ink); }
.band .kicker { color: rgba(255,255,255,0.75); }
.band .sub { color: rgba(255,255,255,0.78); }
.band a.link { color: #fff; font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--cyan); padding-bottom: 2px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.stat .n { font-family: var(--mono); font-size: 38px; font-weight: 700; color: var(--pink); line-height: 1; }
.stat p { font-size: 13px; color: var(--muted); margin-top: 10px; }
.stat-src { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 14px; }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote { border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 10px; padding: 22px; }
.quote .q { font-size: 15px; font-style: italic; }
.quote .who { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.quote .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--wire); border: 1.5px dashed var(--line); flex: none; }
.quote .who p { font-size: 12.5px; color: var(--muted); }
.quote .who b { display: block; color: var(--ink); font-size: 13px; }

table.compare { width: 100%; border-collapse: collapse; margin-top: 20px; }
table.compare th, table.compare td { border: 1px solid var(--line); padding: 12px 16px; font-size: 13.5px; text-align: left; vertical-align: top; }
table.compare th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
table.compare th:first-child, table.compare td:first-child { color: var(--muted); background: var(--wire); width: 50%; }
table.compare th:last-child { color: var(--pink); }

.tiers { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); align-items: stretch; }
.tier { border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; }
.tier.featured { border: 2px solid var(--pink); }
.tier h3 { font-size: 15px; }
.tier .aud { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 12px; }
.tier ul { list-style: none; display: grid; gap: 7px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.tier ul li::before { content: "—"; color: var(--cyan); margin-right: 7px; }
.tier .btn { margin-top: auto; text-align: center; font-size: 12px; padding: 8px 10px; }

.matrix-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.matrix-groups { display: grid; gap: 10px; margin-top: 18px; }
.matrix-group { border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; }
.matrix-group span { font-family: var(--mono); color: var(--muted); font-weight: 400; font-size: 11px; }

.faq-item { border-bottom: 1px solid var(--line); padding: 15px 4px; display: flex; justify-content: space-between; gap: 20px; font-size: 14.5px; font-weight: 600; }
.faq-item span { color: var(--cyan); font-weight: 800; }

.steps { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.step { flex: 1 1 180px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; position: relative; }
.step .num { font-family: var(--mono); font-size: 11px; color: var(--cyan); font-weight: 700; display: block; margin-bottom: 8px; }
.step h3 { font-size: 14px; margin-bottom: 5px; }
.step p { font-size: 12.5px; color: var(--muted); }
.loop-note { font-family: var(--mono); font-size: 11px; color: var(--pink); margin-top: 14px; }

.team-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }
.member .ph-media { aspect-ratio: 1; border-radius: 10px; }
.member.lead { grid-column: span 2; }
.member p { font-size: 12px; margin-top: 7px; font-weight: 600; }
.member span { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.card .ph-media { aspect-ratio: 16 / 9; border: 0; border-bottom: 1.5px dashed var(--line); border-radius: 0; }
.card .body { padding: 15px; }
.card .cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.card h3 { font-size: 14.5px; margin: 7px 0; line-height: 1.3; }
.card .meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

.rows { display: grid; gap: 10px; margin-top: 18px; }
.rowitem { border: 1px solid var(--line); border-radius: 8px; padding: 13px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.rowitem h3 { font-size: 14px; }
.rowitem h3 .ext { font-family: var(--mono); font-size: 10px; color: var(--cyan); margin-left: 5px; }
.rowitem p { font-size: 12.5px; color: var(--muted); text-align: right; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.form-col { border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.form-col h3 { margin-bottom: 14px; }
.form-col .ph { height: 42px; margin-bottom: 10px; display: flex; align-items: center; padding-left: 12px; }
.form-col .ph.tall { height: 230px; align-items: flex-start; padding-top: 10px; }

.anchors { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 72px; background: rgba(255,255,255,0.97); padding: 12px 0; z-index: 40; border-bottom: 1px solid var(--line); }
.anchors a { font-family: var(--mono); font-size: 11px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.anchors a:hover { border-color: var(--cyan); color: var(--cyan); }

.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; color: var(--muted); background: #fff; }

/* ---------- sitemap overview page ---------- */
.tree { font-family: var(--mono); font-size: 13px; line-height: 2; margin-top: 20px; }
.tree ul { list-style: none; padding-left: 22px; border-left: 1px solid var(--line); }
.tree > ul { border: 0; padding-left: 0; }
.tree a:hover { color: var(--pink); }
.tree .tag { font-size: 9.5px; color: var(--cyan); margin-left: 7px; text-transform: uppercase; letter-spacing: 0.08em; }
.tree .toplevel { font-weight: 700; }

/* ---------- footer (big) ---------- */
footer.site { background: var(--ink); color: #b9b4c7; margin-top: 80px; padding: 88px 0 36px; }
footer .foot-grid { display: grid; grid-template-columns: 210px 1fr 290px; gap: 48px; align-items: start; }
footer .foot-aside { text-align: right; }
footer .foot-aside h4, footer .foot-aside .foot-news-p { text-align: left; }
footer .foot-aside .newsletter { width: 100%; }
footer .foot-aside .newsletter .ph { min-width: 0; }
footer .foot-lang { font-family: var(--mono); font-size: 12px; color: #8d86a1; margin-top: 22px; }
footer .foot-lang b { color: #fff; }
footer .foot-lang span { color: #7d7691; margin-right: 6px; }
footer .foot-logo { height: 76px; width: auto; display: block; margin-bottom: 18px; }
footer .foot-tag { font-size: 13.5px; color: #8d86a1; margin-bottom: 22px; }
footer .foot-brand .badges { flex-direction: column; align-items: flex-start; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 44px 32px; }
footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #7d7691; margin-bottom: 16px; }
footer .foot-col a { display: block; font-size: 13.5px; padding: 5px 0; }
footer a:hover { color: #fff; }
footer a .ext { font-family: var(--mono); font-size: 10px; color: var(--cyan); margin-left: 4px; }
footer .foot-news-p { font-size: 12.5px; color: #8d86a1; margin-bottom: 12px; }
footer .foot-meta { border-top: 1px solid #2c2738; margin-top: 56px; padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer .foot-meta p { font-size: 12px; }
footer .legal { display: flex; gap: 16px; flex-wrap: wrap; }
footer .legal a { font-size: 12px; display: inline; }
footer .badges .badge { background: transparent; border-color: #2c2738; color: #7d7691; }
footer .newsletter { display: flex; gap: 8px; margin-top: 8px; }
footer .newsletter .ph { flex: 1; height: 38px; border-color: #2c2738; background: #201b2d; }
@media (max-width: 920px) {
	footer .foot-grid { grid-template-columns: 1fr; gap: 36px; }
	footer .foot-aside { text-align: left; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
	.burger { display: block; background: none; border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px; font-size: 15px; cursor: pointer; }
	nav.main { display: none; position: fixed; inset: 64px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; margin: 0; max-height: calc(100vh - 64px); overflow: auto; }
	body.nav-open nav.main { display: flex; }
	.dd { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; }
	.site-ctas .btn.secondary { display: none; }
	.hero-grid, .split, .form-grid, .quote-grid { grid-template-columns: 1fr; gap: 26px; }
	.split.flip > .split-media { order: 0; }
	.cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
	.cols-5, .tiers { grid-template-columns: 1fr 1fr; }
	.stats { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.cards { grid-template-columns: 1fr; }
	.anchors { position: static; }
}