/*
 * DeOdevs Hub — design system.
 *
 * Brand direction (proposed, all tokens below — change here to re-theme
 * the entire site): dark, technical base rather than generic light SaaS,
 * fitting an agency doing app/game/LLM work rather than just marketing
 * sites. Space Grotesk for headings (distinctive, technical), Inter for
 * body copy (clean, highly legible — important given how much policy/legal
 * text lives on this site).
 */

:root {
	/* Surfaces */
	--deodevs-bg: #0b0f14;
	--deodevs-surface: #121821;
	--deodevs-surface-raised: #171f2a;
	--deodevs-border: #232b36;

	/* Text */
	--deodevs-text: #f4f6f8;
	--deodevs-text-muted: #9aa5b1;

	/* Brand accents */
	--deodevs-accent: #4f8cff;
	--deodevs-accent-hover: #3d75e0;
	--deodevs-accent-secondary: #34d399;
	--deodevs-danger: #f87171;

	/* Type */
	--deodevs-font-heading: 'Space Grotesk', system-ui, sans-serif;
	--deodevs-font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--deodevs-container-width: 1200px;
	--deodevs-radius: 10px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--deodevs-bg);
	color: var(--deodevs-text);
	font-family: var(--deodevs-font-body);
	line-height: 1.6;
	font-size: 16px;
}

h1, h2, h3, h4 {
	font-family: var(--deodevs-font-heading);
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
h3 { font-size: 1.15rem; }

a { color: var(--deodevs-accent); text-decoration: none; }
a:hover { color: var(--deodevs-accent-hover); }

.deodevs-container {
	max-width: var(--deodevs-container-width);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

section.deodevs-container { padding-block: 3rem; }

/* ---------------------------------------------------------------- header */

.deodevs-site-header {
	border-bottom: 1px solid var(--deodevs-border);
	position: sticky;
	top: 0;
	background: rgba(11, 15, 20, 0.92);
	backdrop-filter: blur(6px);
	z-index: 50;
}

.deodevs-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.25rem;
}

.deodevs-logo {
	font-family: var(--deodevs-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--deodevs-text);
}

.deodevs-nav__list {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.deodevs-nav__list a { color: var(--deodevs-text-muted); font-weight: 500; }
.deodevs-nav__list a:hover { color: var(--deodevs-text); }

/* ---------------------------------------------------------------- hero / cta */

.deodevs-hero, .deodevs-page-hero {
	text-align: left;
	padding-block: 3.5rem 2rem;
}

.deodevs-hero p, .deodevs-page-hero p {
	color: var(--deodevs-text-muted);
	font-size: 1.1rem;
	max-width: 640px;
}

.deodevs-cta-band {
	text-align: center;
	border-top: 1px solid var(--deodevs-border);
}

.deodevs-button, .deodevs-download-button,
.deodevs-apply-form button, .deodevs-ebook-optin button,
.deodevs-contact-form button, .deodevs-workshop-register button {
	display: inline-block;
	background: var(--deodevs-accent);
	color: #fff;
	border: none;
	border-radius: var(--deodevs-radius);
	padding: 0.7rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--deodevs-font-body);
	font-size: 0.95rem;
}

.deodevs-button:hover, .deodevs-download-button:hover,
.deodevs-apply-form button:hover, .deodevs-ebook-optin button:hover,
.deodevs-contact-form button:hover, .deodevs-workshop-register button:hover {
	background: var(--deodevs-accent-hover);
	color: #fff;
}

/* ---------------------------------------------------------------- cards (shared grid pattern) */

.deodevs-services-grid, .deodevs-portfolio-grid, .deodevs-ebooks-grid, .deodevs-workshops-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.deodevs-service-card, .deodevs-ebook-card, .deodevs-workshop-card,
.deodevs-apply-form, .deodevs-contact-form {
	background: var(--deodevs-surface);
	border: 1px solid var(--deodevs-border);
	border-radius: var(--deodevs-radius);
	padding: 1.5rem;
}

.deodevs-service-card h3 { margin-bottom: 0.5rem; }
.deodevs-service-card p, .deodevs-workshop-card p { color: var(--deodevs-text-muted); }

.deodevs-portfolio-card__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--deodevs-radius);
	display: block;
	border: 1px solid var(--deodevs-border);
}

.deodevs-portfolio-card__nda {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--deodevs-surface);
	border: 1px dashed var(--deodevs-border);
	border-radius: var(--deodevs-radius);
	color: var(--deodevs-text-muted);
	font-size: 0.9rem;
	text-align: center;
	padding: 1rem;
}

.deodevs-portfolio-card__title { margin-top: 0.75rem; margin-bottom: 0; }
.deodevs-nda-note { color: var(--deodevs-text-muted); font-size: 0.9rem; margin-top: -0.5rem; margin-bottom: 1.5rem; }

.deodevs-workshop-card__date { color: var(--deodevs-accent-secondary); font-weight: 600; font-size: 0.9rem; }

/* ---------------------------------------------------------------- forms (shared) */

.deodevs-apply-form p, .deodevs-contact-form p {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.deodevs-apply-form label, .deodevs-contact-form label, .deodevs-workshop-register label {
	font-size: 0.9rem;
	color: var(--deodevs-text-muted);
}

.deodevs-apply-form input, .deodevs-apply-form textarea,
.deodevs-contact-form input, .deodevs-contact-form textarea,
.deodevs-ebook-optin input, .deodevs-workshop-register input {
	padding: 0.65rem 0.75rem;
	border-radius: 6px;
	border: 1px solid var(--deodevs-border);
	background: var(--deodevs-bg);
	color: var(--deodevs-text);
	font-family: var(--deodevs-font-body);
	width: 100%;
}

.deodevs-apply-form input:focus, .deodevs-contact-form input:focus,
.deodevs-contact-form textarea:focus, .deodevs-ebook-optin input:focus,
.deodevs-workshop-register input:focus {
	outline: 2px solid var(--deodevs-accent);
	outline-offset: 1px;
}

.deodevs-ebook-optin {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.deodevs-ebook-optin__status, .deodevs-apply-form__status,
.deodevs-contact-form__status, .deodevs-workshop-register__status {
	color: var(--deodevs-accent-secondary);
	font-size: 0.9rem;
	width: 100%;
	margin: 0.5rem 0 0;
}

/* ---------------------------------------------------------------- verify page */

.deodevs-verify__form { display: flex; gap: 0.75rem; margin-block: 1.5rem; }
.deodevs-verify__form input { flex: 1; }

.deodevs-verify__card {
	border: 1px solid var(--deodevs-border);
	background: var(--deodevs-surface);
	border-radius: var(--deodevs-radius);
	padding: 1.5rem;
	max-width: 360px;
}

.deodevs-verify__card img { border-radius: 50%; object-fit: cover; }
.deodevs-verify__not-found { color: var(--deodevs-danger); }

/* ---------------------------------------------------------------- contact page */

.deodevs-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 2.5rem;
	margin-top: 2rem;
}

.deodevs-office { display: block; margin-bottom: 1.25rem; font-style: normal; color: var(--deodevs-text-muted); }
.deodevs-office strong { color: var(--deodevs-text); display: block; margin-bottom: 0.2rem; }
.deodevs-contact__email { margin-top: 1.5rem; }

@media (max-width: 820px) {
	.deodevs-contact__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- standard content pages (Privacy/Terms) */

.deodevs-page__content {
	max-width: 760px;
	color: var(--deodevs-text-muted);
}

.deodevs-page__content h2 {
	color: var(--deodevs-text);
	margin-top: 2.25rem;
}

.deodevs-page__content a { color: var(--deodevs-accent); }
.deodevs-page__content em { color: var(--deodevs-accent-secondary); }

/* ---------------------------------------------------------------- footer */

.deodevs-site-footer {
	border-top: 1px solid var(--deodevs-border);
	margin-top: 3rem;
	padding-top: 3rem;
}

.deodevs-site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2rem;
}

.deodevs-footer-col h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--deodevs-text-muted); margin-bottom: 1rem; }
.deodevs-footer-col__tagline { color: var(--deodevs-text-muted); font-size: 0.9rem; margin-top: 0.75rem; }
.deodevs-footer-col__office { color: var(--deodevs-text-muted); font-size: 0.9rem; margin: 0.2rem 0; }

.deodevs-footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.deodevs-footer-nav a { color: var(--deodevs-text-muted); font-size: 0.9rem; }
.deodevs-footer-nav a:hover { color: var(--deodevs-text); }

.deodevs-site-footer__meta {
	border-top: 1px solid var(--deodevs-border);
	padding-block: 1.5rem;
	color: var(--deodevs-text-muted);
	font-size: 0.85rem;
}

@media (max-width: 900px) {
	.deodevs-site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.deodevs-site-footer__grid { grid-template-columns: 1fr; }
	.deodevs-site-header__inner { flex-direction: column; gap: 1rem; align-items: flex-start; }
}