/* =========================================================
   AI Capability Portfolio -- main stylesheet
   Design tokens taken from the Figma Make source (dark navy/
   indigo hero + footer, blue/purple/green accent system, Inter
   typeface).
   ========================================================= */

:root {
	--aicp-dark-start: #0b1120;
	--aicp-dark-end: #1e1b4b;
	--aicp-blue: #3b82f6;
	--aicp-purple: #8b5cf6;
	--aicp-green: #10b981;
	--aicp-text-dark: #0f172a;
	--aicp-text-gray: #6b7280;
	--aicp-text-gray-light: #94a3b8;
	--aicp-border: #e5e7eb;
	--aicp-bg-alt: #f8fafc;
	--aicp-bg-tinted: #f8fafc;
	--aicp-radius: 16px;
	--aicp-max-width: 1180px;
	--aicp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--aicp-font);
	color: var(--aicp-text-dark);
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #111;
	color: #fff;
	padding: 10px 16px;
	z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; }

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

.aicp-icon { width: 1em; height: 1em; }

/* ---------- Shared: gradient text, pills, dots, buttons ---------- */
.aicp-gradient-text {
	background: linear-gradient(90deg, var(--aicp-blue), var(--aicp-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.aicp-gradient-text--blue-purple { background: linear-gradient(90deg, var(--aicp-blue), var(--aicp-purple)); -webkit-background-clip: text; background-clip: text; }
.aicp-gradient-text--purple-blue { background: linear-gradient(90deg, var(--aicp-purple), var(--aicp-blue)); -webkit-background-clip: text; background-clip: text; }
.aicp-gradient-text--green-blue  { background: linear-gradient(90deg, var(--aicp-green), var(--aicp-blue)); -webkit-background-clip: text; background-clip: text; }

.aicp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; }
.aicp-dot--blue   { background: var(--aicp-blue); }
.aicp-dot--purple { background: var(--aicp-purple); }
.aicp-dot--green  { background: var(--aicp-green); }

.aicp-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.aicp-pill--outline {
	padding: 8px 16px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(148,163,184,.35);
	color: #e2e8f0;
}
.aicp-pill--tinted {
	padding: 5px 12px;
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.aicp-pill--white {
	padding: 9px 18px;
	background: #fff;
	border: 1px solid var(--aicp-border);
	color: #1f2937;
	font-size: 14px;
}

.aicp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.aicp-btn:hover { transform: translateY(-1px); }
.aicp-btn--gradient {
	background: linear-gradient(90deg, var(--aicp-blue), var(--aicp-purple));
	color: #fff;
	box-shadow: 0 8px 20px -6px rgba(99,102,241,.55);
}
.aicp-btn--outline-dark {
	background: rgba(255,255,255,.04);
	border-color: rgba(148,163,184,.4);
	color: #e2e8f0;
}
.aicp-btn--solid { width: 100%; border-radius: 12px; color: #fff; margin-top: 22px; }
.aicp-btn--solid.aicp-btn--blue   { background: linear-gradient(90deg, #38bdf8, #4f7fff); }
.aicp-btn--solid.aicp-btn--purple { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.aicp-btn--solid.aicp-btn--green  { background: linear-gradient(90deg, #10b981, #06b6d4); }

/* ---------- Hero ---------- */
.aicp-hero {
	background: linear-gradient(135deg, var(--aicp-dark-start) 0%, var(--aicp-dark-end) 100%);
	background-image:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0),
		linear-gradient(135deg, var(--aicp-dark-start) 0%, var(--aicp-dark-end) 100%);
	background-size: 22px 22px, 100% 100%;
	padding: 88px 0 48px;
}
.aicp-hero__inner { max-width: 840px; }
.aicp-hero__topline {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 24px;
}
.aicp-hero__photo {
	width: 140px;
	height: 140px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255,255,255,.85);
}
.aicp-hero__headtext {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.aicp-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(148,163,184,.35);
	color: #93c5fd;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.aicp-hero__heading {
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.15;
	font-weight: 800;
	color: #fff;
}
.aicp-hero__heading .aicp-gradient-text { white-space: nowrap; }
.aicp-hero__bio {
	color: var(--aicp-text-gray-light);
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 28px;
}
.aicp-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.aicp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------- Generic section chrome ---------- */
.aicp-section { padding: 88px 0; }
.aicp-section--alt { background: var(--aicp-bg-alt); }
.aicp-section--tinted { background: var(--aicp-bg-tinted); }

/* Work and Skills now share the same background, so tighten the
   shared boundary between them without touching the other section
   gaps (hero->work, skills->footer). */
#work   { padding-bottom: 48px; }
#skills { padding-top: 48px; }

.aicp-section__label {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.aicp-section__label--blue   { color: var(--aicp-blue); }
.aicp-section__label--purple { color: var(--aicp-purple); }
.aicp-section__label--green  { color: var(--aicp-green); }

.aicp-section__heading {
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 800;
	color: var(--aicp-text-dark);
	margin-bottom: 14px;
}
.aicp-section__subtext {
	color: var(--aicp-text-gray);
	font-size: 16px;
	max-width: 640px;
	line-height: 1.6;
	margin-bottom: 48px;
}

/* ---------- Work cards ---------- */
.aicp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.aicp-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--aicp-border);
	border-radius: var(--aicp-radius);
	padding: 32px 26px 26px;
	overflow: hidden;
}
.aicp-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
}

/* Training Plan Generator -- blue */
.aicp-card--blue::before   { background: linear-gradient(90deg, #0ea5e9, #4f7fff); }
.aicp-card--blue           { background: linear-gradient(135deg, #eff6ff, #eef2ff); border-color: rgba(56,189,248,0.25); }
.aicp-card--blue .aicp-card__icon   { background: linear-gradient(135deg, #bae6fd, #c7d2fe); color: #0284c7; }
.aicp-card--blue .aicp-pill--tinted { background: #eff6ff; color: #2563eb; }

/* Week Planner Automation -- purple */
.aicp-card--purple::before { background: linear-gradient(90deg, #7c3aed, #4f46e5); }
.aicp-card--purple           { background: linear-gradient(135deg, #f5f3ff, #eef2ff); border-color: rgba(139,92,246,0.25); }
.aicp-card--purple .aicp-card__icon   { background: linear-gradient(135deg, #ede9fe, #e0e7ff); color: #7c3aed; }
.aicp-card--purple .aicp-pill--tinted { background: #f5f3ff; color: #6d28d9; }

/* Source Verification Assistant -- green */
.aicp-card--green::before  { background: linear-gradient(90deg, #059669, #0891b2); }
.aicp-card--green           { background: linear-gradient(135deg, #ecfdf5, #cffafe); border-color: rgba(16,185,129,0.25); }
.aicp-card--green .aicp-card__icon   { background: linear-gradient(135deg, #d1fae5, #cffafe); color: #059669; }
.aicp-card--green .aicp-pill--tinted { background: #ecfdf5; color: #065f46; }

.aicp-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	font-size: 20px;
}

.aicp-card__points .aicp-dot--blue   { background: #38bdf8; }
.aicp-card__points .aicp-dot--purple { background: #8b5cf6; }
.aicp-card__points .aicp-dot--green  { background: #10b981; }

.aicp-card__title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 10px;
}
.aicp-card__desc {
	color: var(--aicp-text-gray);
	font-size: 14.5px;
	line-height: 1.65;
	margin-bottom: 18px;
}
.aicp-card__points li {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #374151;
	padding: 5px 0;
}

/* ---------- Skills pills ---------- */
.aicp-skill-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Process timeline ---------- */
.aicp-timeline {
	display: flex;
	align-items: flex-start;
	gap: 0;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 56px;
}
.aicp-timeline__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 0 0 auto;
	width: 130px;
}
.aicp-timeline__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef2ff;
	color: var(--aicp-blue);
	border: 1px solid #e0e7ff;
	font-size: 22px;
	margin-bottom: 12px;
}
.aicp-timeline__label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--aicp-text-dark);
	line-height: 1.3;
}
.aicp-timeline__sub {
	font-size: 11px;
	color: var(--aicp-text-gray);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-top: 2px;
}
.aicp-timeline__line {
	flex: 0 0 auto;
	width: 40px;
	height: 1px;
	background: #cbd5e1;
	margin-top: 27px;
}

.aicp-detail-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.aicp-detail-card {
	background: #fff;
	border: 1px solid var(--aicp-border);
	border-radius: 14px;
	padding: 26px;
}
.aicp-detail-card h3 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
}
.aicp-detail-card p {
	color: var(--aicp-text-gray);
	font-size: 14.5px;
	line-height: 1.6;
}

/* ---------- Footer ---------- */
.aicp-footer {
	background: linear-gradient(135deg, var(--aicp-dark-start) 0%, var(--aicp-dark-end) 100%);
	padding: 72px 0 32px;
}
.aicp-footer__brand-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 14px;
}
.aicp-footer__tagline {
	color: var(--aicp-text-gray-light);
	font-size: 14.5px;
	line-height: 1.6;
	max-width: 480px;
	margin-bottom: 26px;
}
.aicp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 40px;
}
.aicp-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #cbd5e1;
	font-size: 14px;
	font-weight: 500;
}
.aicp-footer__social a:hover { color: #fff; }
.aicp-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	border-top: 1px solid rgba(148,163,184,.2);
	padding-top: 24px;
	color: #64748b;
	font-size: 12.5px;
}
.aicp-footer__powered { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- index.php fallback list ---------- */
.aicp-post { padding: 24px 0; border-bottom: 1px solid var(--aicp-border); }
.aicp-post h2 { font-size: 22px; margin-bottom: 8px; }
.aicp-post__excerpt { color: var(--aicp-text-gray); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.aicp-cards,
	.aicp-detail-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.aicp-hero { padding: 56px 0 40px; }
	.aicp-section { padding: 64px 0; }
	.aicp-hero__ctas .aicp-btn { width: 100%; }
	.aicp-hero__topline { flex-direction: column; align-items: flex-start; gap: 16px; }
	.aicp-hero__photo { width: 141px; height: 141px; border-width: 3px; }
	.aicp-hero__heading { font-size: clamp(26px, 8vw, 34px); }
}