/* =====================================================================
   ALEX ID - profile platform design system
   Loaded after style.css. Reuses the existing colour tokens so the 3D
   hero, starfield and boot screen keep their identity, and adds the
   layout, cards and profile UI the platform needs.
   ===================================================================== */

:root {
	--maxw: 1340px;
	--gap: 22px;
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 28px;
	--glass: rgba(255, 255, 255, 0.045);
	--glass-2: rgba(255, 255, 255, 0.07);
	--line: rgba(255, 255, 255, 0.09);
	--line-soft: rgba(255, 255, 255, 0.055);
	--blur: 18px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cyan: #22d3ee;
	--lime: #a3e635;
	--amber: #fbbf24;
	--rose: #fb7185;
}

/* ---------- layout primitives ---------- */
.shell {
	width: min(100% - 96px, var(--maxw));
	margin-inline: auto;
}

.sec {
	padding: 88px 0;
	position: relative;
}
.sec.tight { padding: 56px 0; }

/* content-visibility intentionally removed — it was reserving intrinsic
   height that created large blank gaps between sections. */
.sec.lazy {}

.sec-head {
	max-width: 780px;
	margin-bottom: 42px;
}
.sec-head.center {
	margin-inline: auto;
	text-align: center;
}
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	padding: 7px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}
.sec-title {
	font-size: clamp(32px, 3.6vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.sec-sub {
	color: var(--muted);
	font-size: 17.5px;
	line-height: 1.65;
	margin: 0;
}
.grad {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- glass card ---------- */
.glass {
	background: linear-gradient(180deg, var(--glass-2), var(--glass));
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	position: relative;
	overflow: hidden;
}
.glass::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	opacity: 0.6;
}
.glass.hoverable {
	transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.glass.hoverable:hover {
	transform: translateY(-4px);
	border-color: var(--accent-line);
	box-shadow: var(--glow);
}

/* ---------- buttons ---------- */
.ab {
	--bg: var(--grad);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-weight: 650;
	font-size: 14.5px;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--bg);
	color: #0a0616;
	transition: transform 0.25s var(--ease), box-shadow 0.3s, filter 0.25s;
}
.ab:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
	filter: brightness(1.06);
}
.ab:active { transform: translateY(0); }
.ab.ghost {
	background: var(--glass);
	color: var(--txt);
	border-color: var(--line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.ab.ghost:hover {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	box-shadow: none;
}
.ab.sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; }
.ab.lg { padding: 16px 28px; font-size: 15.5px; }
.ab.block { width: 100%; }
.ab.danger { background: linear-gradient(120deg, #fb7185, #f43f5e); color: #1a0409; }
.ab[disabled] { opacity: 0.5; pointer-events: none; }

/* sheen sweep */
.ab::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--ease);
	z-index: -1;
}
.ab:hover::before { transform: translateX(120%); }

/* ---------- chips, pills, tags ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--glass);
	font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
	color: var(--muted);
}
.chip.on {
	color: var(--ok);
	border-color: rgba(34, 209, 140, 0.3);
	background: rgba(34, 209, 140, 0.1);
}
.chip.acc {
	color: var(--accent);
	border-color: var(--accent-line);
	background: var(--accent-soft);
}
.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	animation: pulseDot 2.4s infinite;
}
@keyframes pulseDot {
	0% { box-shadow: 0 0 0 0 rgba(34, 209, 140, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(34, 209, 140, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 209, 140, 0); }
}

/* ---------- hero ---------- */
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 40px;
	align-items: center;
	padding-top: 24px;
	padding-bottom: 28px;
}
.hero-name {
	font-size: clamp(42px, 6.4vw, 96px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 14px 0 18px;
	font-weight: 700;
}
.hero-role {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 17px/1.4 "JetBrains Mono", ui-monospace, monospace;
	color: var(--accent);
	margin-bottom: 18px;
	min-height: 22px;
}
.caret {
	display: inline-block;
	width: 9px;
	height: 18px;
	background: var(--accent);
	animation: blink 1.1s steps(2) infinite;
	vertical-align: -3px;
}
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.hero-lead {
	color: var(--muted);
	font-size: 19.5px;
	line-height: 1.7;
	max-width: 58ch;
	margin: 0 0 28px;
}
.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

/* stat strip */
.statgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.statgrid .s {
	padding: 16px 14px;
	border-radius: var(--r-md);
	border: 1px solid var(--line-soft);
	background: var(--glass);
}
.statgrid .v {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.statgrid .k {
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 3px;
	letter-spacing: 0.02em;
}

/* ---------- project cards ---------- */
/* auto-fill (not auto-fit) keeps the empty tracks alive, so with only two
   projects the cards stay card-sized instead of stretching half a screen
   wide on a desktop monitor */
.proj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
	gap: 18px;
	align-items: start;
}
.proj {
	display: flex;
	flex-direction: column;
	padding: 0;
	max-width: 340px;
}
.proj .shot {
	aspect-ratio: 16 / 9;
	height: auto;
	padding: 8px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(217, 70, 239, 0.12));
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--line-soft);
}
.proj .shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 12px;
	transition: transform 0.6s var(--ease);
}
.proj:hover .shot img { transform: scale(1.03); }
.proj .shot .emo {
	font-size: 40px;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
.proj .body {
	padding: 14px 15px 13px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}
.proj h3 {
	margin: 0;
	font-size: 17px;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 9px;
}
.proj p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
	flex: 0 0 auto;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tagrow {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.tag {
	font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
	padding: 5px 9px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line-soft);
	color: var(--muted);
}
.proj .foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 4px;
	margin-top: auto;
}

/* status light */
.status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--ok);
}
.status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 8px var(--ok);
	display: inline-block;
}
.status.off { color: var(--muted); }
.status.off i { background: var(--muted); box-shadow: none; }

/* ---------- skills ---------- */
.skill-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}
.skill {
	padding: 16px 18px;
	border-radius: var(--r-md);
	border: 1px solid var(--line-soft);
	background: var(--glass);
}
.skill .top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	font-size: 14px;
}
.skill .pct {
	font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace;
	color: var(--accent);
}
.bar {
	height: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.07);
	overflow: hidden;
}
.bar > i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--grad);
	transition: width 1.1s var(--ease);
}

/* ---------- services / feature tiles ---------- */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}
.tile {
	padding: 24px 22px;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-soft);
	background: var(--glass);
	transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s;
}
.tile:hover {
	transform: translateY(-3px);
	border-color: var(--accent-line);
	background: var(--accent-soft);
}
.tile .ic {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	font-size: 22px;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	margin-bottom: 14px;
}
.tile h4 { margin: 0 0 7px; font-size: 16px; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ---------- contact ---------- */
.social-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}
.social {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 17px;
	border-radius: var(--r-md);
	border: 1px solid var(--line-soft);
	background: var(--glass);
	text-decoration: none;
	color: var(--txt);
	transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.social:hover {
	transform: translateY(-3px);
	border-color: var(--accent-line);
	background: var(--accent-soft);
}
.social .ic {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	flex: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line-soft);
}
.social .ic svg { width: 19px; height: 19px; fill: currentColor; }
.social .k { font-size: 11.5px; color: var(--muted); letter-spacing: 0.03em; }
.social .v { font-size: 14px; font-weight: 600; word-break: break-all; }

/* ---------- profile page ---------- */
.banner {
	height: clamp(150px, 26vw, 240px);
	border-radius: var(--r-xl);
	background: linear-gradient(120deg, rgba(139, 92, 246, 0.35), rgba(217, 70, 239, 0.2), rgba(34, 211, 238, 0.18));
	border: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
.pheader {
	display: flex;
	align-items: flex-end;
	gap: 22px;
	margin-top: -58px;
	padding: 0 8px 0 26px;
	position: relative;
	z-index: 2;
}
.avatar {
	width: 118px;
	height: 118px;
	border-radius: 26px;
	flex: none;
	object-fit: cover;
	border: 3px solid var(--bg);
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	display: grid;
	place-items: center;
	font-size: 42px;
	font-weight: 700;
	color: #0a0616;
	box-shadow: var(--glow);
	overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.pmeta { flex: 1; padding-bottom: 8px; min-width: 0; }
.pmeta h1 { margin: 0 0 5px; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; }
.pmeta .role { color: var(--accent); font-size: 15px; margin-bottom: 8px; }
.pmeta .sub { color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- editor UI ---------- */
.edit-grid {
	display: grid;
	grid-template-columns: 232px 1fr;
	gap: 26px;
	align-items: start;
}
.side {
	position: sticky;
	top: 90px;
	padding: 12px;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-soft);
	background: var(--glass);
}
.side a, .side button {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 13px;
	border-radius: 11px;
	border: 1px solid transparent;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.side a:hover, .side button:hover { background: rgba(255, 255, 255, 0.05); color: var(--txt); }
.side .on {
	background: var(--accent-soft);
	border-color: var(--accent-line);
	color: var(--txt);
	font-weight: 600;
}

.panel { display: none; }
.panel.on { display: block; animation: fadeUp 0.45s var(--ease) both; }
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.field { margin-bottom: 18px; }
.field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.field .help { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.inp, textarea.inp, select.inp {
	width: 100%;
	padding: 12px 14px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.28);
	color: var(--txt);
	font: inherit;
	font-size: 14.5px;
	transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.inp:focus, textarea.inp:focus, select.inp:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	background: rgba(0, 0, 0, 0.4);
}
.inp::placeholder { color: rgba(169, 157, 198, 0.55); }
textarea.inp { min-height: 118px; resize: vertical; line-height: 1.6; }
.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.prefixed { display: flex; align-items: stretch; }
.prefixed .px {
	display: grid;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-right: 0;
	border-radius: 11px 0 0 11px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--muted);
	font: 500 13px/1 "JetBrains Mono", ui-monospace, monospace;
	white-space: nowrap;
}
.prefixed .inp { border-radius: 0 11px 11px 0; }

/* switch */
.sw { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw .track {
	width: 46px;
	height: 26px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid var(--line);
	position: relative;
	transition: background 0.3s;
	flex: none;
}
.sw .track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.3s var(--ease);
}
.sw input:checked + .track { background: var(--accent); border-color: var(--accent); }
.sw input:checked + .track::after { transform: translateX(20px); }

/* repeatable rows (skills, projects, links) */
.rowlist { display: flex; flex-direction: column; gap: 12px; }
.rowitem {
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: var(--r-md);
	border: 1px solid var(--line-soft);
	background: rgba(0, 0, 0, 0.2);
	animation: fadeUp 0.35s var(--ease) both;
}
.rowitem .x {
	background: none;
	border: 1px solid var(--line);
	color: var(--muted);
	border-radius: 9px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	font-size: 16px;
	transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.rowitem .x:hover { color: var(--rose); border-color: rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.1); }

/* upload dropzone */
.drop {
	border: 1.5px dashed var(--line);
	border-radius: var(--r-md);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	color: var(--muted);
	font-size: 13.5px;
	transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--txt); }
.drop input { display: none; }

/* save bar */
.savebar {
	position: sticky;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-radius: var(--r-md);
	border: 1px solid var(--accent-line);
	background: rgba(19, 14, 34, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	margin-top: 24px;
	z-index: 20;
}

/* ---------- notes / toasts ---------- */
.note {
	padding: 11px 14px;
	border-radius: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid var(--line);
	background: var(--glass);
	color: var(--muted);
}
.note.good { color: var(--ok); border-color: rgba(34, 209, 140, 0.32); background: rgba(34, 209, 140, 0.1); }
.note.bad { color: var(--rose); border-color: rgba(251, 113, 133, 0.32); background: rgba(251, 113, 133, 0.1); }
.note:empty { display: none; }

.toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 90px);
	padding: 13px 22px;
	border-radius: 12px;
	background: rgba(19, 14, 34, 0.96);
	border: 1px solid var(--accent-line);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
	font-size: 14px;
	z-index: 200;
	transition: transform 0.45s var(--ease), opacity 0.35s;
	opacity: 0;
	pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- skeleton loading ---------- */
.sk {
	border-radius: 10px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.05) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
	from { background-position: 100% 50%; }
	to { background-position: 0 50%; }
}

/* ---------- page transition ---------- */
.pt {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s ease;
}
.pt.on { opacity: 1; pointer-events: all; }

/* ---------- tilted ribbon marquees ---------- */
/* steady, GPU-composited scroll — never re-timed while the user scrolls */
.marquee-track {
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	animation-duration: 42s !important;
	animation-timing-function: linear !important;
}
.marquee.rev .marquee-track { animation-duration: 54s !important; }

html, body { overflow-x: clip; }

.ribbons {
	position: relative;
	margin: 30px 0 46px;
	isolation: isolate;
	overflow: hidden;
	padding: 18px 0;
}

.marquee,
.marquee + .marquee {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	width: 112%;
	margin-left: -6%;
	padding: 13px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(217, 70, 239, 0.13) 42%, rgba(34, 211, 238, 0.16) 76%, rgba(139, 92, 246, 0.22));
	box-shadow: 0 18px 44px rgba(8, 4, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee { transform: rotate(-2.4deg); z-index: 2; }
.marquee.rev {
	transform: rotate(2.4deg);
	margin-top: -24px;
	z-index: 1;
	background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.14) 50%, rgba(217, 70, 239, 0.20));
}

.marquee::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 130% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 70%);
	pointer-events: none;
}

.marquee-item {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 2.8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
}
.marquee-item:nth-child(even) {
	color: var(--accent);
	text-shadow: 0 0 18px rgba(139, 92, 246, 0.55);
}
.marquee-item::after {
	width: 5px;
	height: 5px;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
	opacity: 0.9;
}

@media (max-width: 700px) {
	.ribbons { margin: 22px 0 34px; }
	.marquee,
	.marquee + .marquee {
		width: 124%;
		margin-left: -12%;
		padding: 10px 0;
	}
	.marquee { transform: rotate(-3.2deg); }
	.marquee.rev { transform: rotate(3.2deg); margin-top: -18px; }
	.marquee-item { font-size: 11px; letter-spacing: 2.2px; }
}

/* ---------- footer ---------- */
.footer {
	border-top: 1px solid var(--line-soft);
	padding: 40px 0 28px;
	margin-top: 0;
	background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.05));
}
.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 34px;
}
.footer h5 {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}
.footer .links { display: flex; flex-direction: column; gap: 10px; }
.footer .links a {
	color: var(--txt);
	text-decoration: none;
	font-size: 14px;
	opacity: 0.82;
	transition: opacity 0.25s, transform 0.25s, color 0.25s;
	width: fit-content;
}
.footer .links a:hover { opacity: 1; color: var(--accent); transform: translateX(3px); }
.footer-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 13px;
}
.iconrow { display: flex; gap: 10px; }
.iconrow a {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--glass);
	color: var(--muted);
	transition: transform 0.3s var(--ease), color 0.25s, border-color 0.25s, background 0.25s;
}
.iconrow a:hover {
	transform: translateY(-3px);
	color: var(--txt);
	border-color: var(--accent-line);
	background: var(--accent-soft);
}
.iconrow svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	.hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
		padding-top: 74px;
		padding-bottom: 20px;
		gap: 14px;
	}
	.hero-lead { margin-inline: auto; }
	.hero-cta, .hero-role { justify-content: center; }
	.edit-grid { grid-template-columns: 1fr; }
	.side {
		position: static;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.side::-webkit-scrollbar { display: none; }
	.side a, .side button { width: auto; white-space: nowrap; }
	.footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	.shell { width: min(100% - 24px, var(--maxw)); }
	.sec { padding: 56px 0; }
	.sec-head { margin-bottom: 30px; }
	.statgrid { grid-template-columns: repeat(2, 1fr); }
	.two { grid-template-columns: 1fr; }
	.hero-name { font-size: clamp(32px, 10vw, 52px) !important; }
	.proj-grid { grid-template-columns: 1fr; }
	.pheader {
		flex-direction: column;
		align-items: flex-start;
		padding-inline: 4px;
		margin-top: -46px;
		gap: 14px;
	}
	.avatar { width: 92px; height: 92px; border-radius: 22px; font-size: 34px; }
	.footer-top { grid-template-columns: 1fr; gap: 26px; }
	.proj-grid { gap: 18px; }

	/* blur is the single most expensive effect on a phone GPU */
	.glass, .savebar, .toast {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(19, 14, 34, 0.86);
	}
	.glass.hoverable:hover { transform: none; }
}

@media (hover: none) {
	.ab:hover { transform: none; box-shadow: none; }
	.tile:hover, .social:hover, .proj:hover .shot img { transform: none; }
}

/* ---------- 3D project cards ---------- */
.proj-grid {
	perspective: 1500px;
	perspective-origin: 50% 40%;
}
.proj {
	transform-style: preserve-3d;
	position: relative;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.35s ease;
	will-change: transform;
}
/* the two halves of the grid tilt towards each other for a real depth read */
.proj-grid > .proj:hover {
	transform: rotateX(3.5deg) rotateY(5deg) translateY(-7px) scale(1.01);
	border-color: var(--accent-line);
	box-shadow: 26px 40px 70px rgba(0, 0, 0, 0.62), 0 0 46px rgba(139, 92, 246, 0.2);
}
.proj-grid > .proj:nth-child(even):hover {
	transform: rotateX(3.5deg) rotateY(-5deg) translateY(-7px) scale(1.01);
	box-shadow: -26px 40px 70px rgba(0, 0, 0, 0.62), 0 0 46px rgba(139, 92, 246, 0.2);
}
/* stage that holds the artwork */
.proj .shot {
	transform-style: preserve-3d;
	background:
		radial-gradient(120% 90% at 50% 8%, rgba(255, 255, 255, 0.1), transparent 60%),
		linear-gradient(135deg, rgba(139, 92, 246, 0.26), rgba(217, 70, 239, 0.14) 55%, rgba(34, 211, 238, 0.12));
}
/* light sweep across the artwork stage */
.proj .shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.16) 50%, transparent 66%);
	transform: translateX(-120%);
	transition: transform 0.9s var(--ease);
	pointer-events: none;
}
.proj:hover .shot::after { transform: translateX(120%); }
.proj .shot img {
	transform: translateZ(18px) rotateX(1.5deg);
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
	transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.proj:hover .shot img {
	transform: translateZ(32px) rotateX(0deg) scale(1.03);
	filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 22px rgba(139, 92, 246, 0.35));
}
/* emoji logos get the same floating, lit, 3D treatment as the robot */
.proj .shot .emo {
	font-size: 44px;
	line-height: 1;
	transform: translateZ(28px);
	animation: projFloat 6s ease-in-out infinite;
	filter:
		drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6))
		drop-shadow(0 0 26px rgba(139, 92, 246, 0.45));
	transition: transform 0.6s var(--ease);
	will-change: transform;
}
.proj:hover .shot .emo { transform: translateZ(44px) scale(1.05); }
/* soft pedestal under the floating logo */
.proj .shot .emo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14%;
	width: 40%;
	height: 10px;
	transform: translateX(-50%) translateZ(2px);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
	filter: blur(3px);
}
@keyframes projFloat {
	0%, 100% { transform: translateZ(28px) translateY(0) rotateZ(-1.2deg); }
	50% { transform: translateZ(28px) translateY(-7px) rotateZ(1.2deg); }
}
/* card text lifts slightly off the surface so the depth reads all the way down */
.proj .body { transform-style: preserve-3d; }
.proj h3,
.proj .foot {
	transform: translateZ(14px);
	transition: transform 0.55s var(--ease);
}
.proj:hover h3, .proj:hover .foot { transform: translateZ(30px); }
.proj h3 {
	text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* ---------- footer (premium rebuild) ---------- */
.footer {
	position: relative;
	border-top: 1px solid var(--line-soft);
	padding: 66px 0 30px;
	margin-top: 0;
	background:
		radial-gradient(90% 130% at 50% 0%, rgba(139, 92, 246, 0.16), transparent 62%),
		linear-gradient(180deg, rgba(8, 6, 16, 0.2), rgba(9, 6, 18, 0.75));
	overflow: hidden;
}
/* glowing seam along the top edge */
.footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.75) 28%, rgba(217, 70, 239, 0.6) 50%, rgba(34, 211, 238, 0.55) 72%, transparent);
}
.footer .footer-top {
	display: grid;
	grid-template-columns: 1.7fr 0.85fr 0.95fr 1.15fr;
	gap: 40px;
	margin-bottom: 40px;
	align-items: start;
}
.foot-brand {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	color: var(--txt);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.2px;
	margin-bottom: 16px;
}
/* footer logo: same artwork as the navbar, same subtle 3D swing */
.foot-logo {
	width: 46px;
	height: 46px;
	perspective: 520px;
	flex: none;
}
.foot-logo-in {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	animation: footLogoTilt 8s ease-in-out infinite;
	will-change: transform;
}
.foot-logo-in img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 13px;
	border: 1px solid rgba(139, 92, 246, 0.5);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.3);
}
@keyframes footLogoTilt {
	0%, 100% { transform: rotateY(-13deg) rotateX(5deg) translateZ(6px); }
	50% { transform: rotateY(13deg) rotateX(-4deg) translateZ(6px); }
}
.foot-tag {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.7;
	max-width: 38ch;
	margin: 0 0 18px;
}
.foot-cta p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 14px;
	max-width: 30ch;
}
.foot-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(34, 209, 140, 0.28);
	background: rgba(34, 209, 140, 0.09);
	color: #6ee7b7;
	font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
}
.foot-status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
	animation: footPulse 2.4s ease-in-out infinite;
}
@keyframes footPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
.footer .footer-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 13px;
}
.foot-legal {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.foot-legal a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.25s ease;
}
.foot-legal a:hover { color: var(--accent); }

@media (max-width: 1080px) {
	.footer .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
	.foot-cta { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.footer { padding: 48px 0 26px; }
	.footer .footer-top { grid-template-columns: 1fr; gap: 28px; }
	.foot-cta { grid-column: auto; }
	.footer .footer-bot { justify-content: flex-start; }
	.proj-grid > .proj:hover,
	.proj-grid > .proj:nth-child(even):hover { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =====================================================================
   mobile navigation
   ===================================================================== */
/* the page must not scroll behind the open menu sheet */
body.nav-open { overflow: hidden; }

/* Sub-pages (project, account, admin, profile, 404) carry their header
   layout as inline styles, so the phone fixes have to outrank those. */
@media (max-width: 760px) {
	.nav > div {
		width: min(100% - 24px, var(--maxw)) !important;
		gap: 10px !important;
		padding: 10px 0 !important;
	}
	.nav nav:not(.nav-links) {
		flex-wrap: wrap !important;
		justify-content: flex-end;
		gap: 6px !important;
		row-gap: 8px;
	}
	.nav nav:not(.nav-links) a {
		padding: 8px 10px !important;
		font-size: 13px !important;
	}
	.nav nav:not(.nav-links) .ab.sm {
		padding: 9px 13px !important;
		font-size: 12.5px !important;
	}
}

/* =====================================================================
   bot console — connected numbers and owner controls
   ===================================================================== */
.bc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.bc-dim { color: var(--muted); font-size: 13.5px; }
.bc-headbtns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bc-actions {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 16px;
}
.bc-actions .inp { flex: 1 1 160px; min-width: 150px; }
.sessnum {
	color: var(--muted);
	font-size: 13px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
}
.bc-out:empty { display: none; }
.bc-out { margin-top: 14px; }
.bc-out .code {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 26px;
	letter-spacing: .22em;
	font-weight: 700;
	color: var(--accent);
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid var(--accent-line);
	border-radius: 12px;
	padding: 13px 18px;
}
.qrimg {
	width: 100%;
	max-width: 220px;
	padding: 10px;
	margin-top: 4px;
	border-radius: 12px;
	background: #fff;
	display: block;
}
.ab[disabled] { opacity: .45; pointer-events: none; }

/* owner control cards */
.bc-card { padding: 22px; margin-bottom: 16px; }
.bc-card > h4 {
	margin: 0 0 4px;
	font-size: 15.5px;
	display: flex;
	align-items: center;
	gap: 9px;
}
.bc-card > .bc-dim { margin-bottom: 18px; }
.bc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.bc-grid .field { margin-bottom: 0; }
.bc-switches { display: grid; gap: 13px; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--glass);
	font: 500 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
}
.bc-chip button {
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: var(--muted);
	border-radius: 50%;
	width: 19px;
	height: 19px;
	line-height: 1;
	cursor: pointer;
	font-size: 13px;
}
.bc-chip button:hover { background: rgba(251, 113, 133, 0.22); color: #fff; }
.bc-savebar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft);
}
.bc-lock { padding: 30px; text-align: center; }
.bc-lock .inp { max-width: 280px; margin-inline: auto; }
@media (max-width: 700px) {
	.bc-head, .bc-card { padding: 16px; }
	.bc-actions .ab.sm { flex: 1 1 auto; justify-content: center; }
	.bc-out .code { font-size: 21px; letter-spacing: .16em; }
}