/**
 * TTT Codes Corporate — compiled design system.
 * Generated locally from the theme's design tokens (no runtime CDN dependency).
 * Provides CSS custom properties + a focused utility layer covering every
 * class used by the Elementor-built pages and legacy fallback templates.
 */

/* ---------------------------------------------------------------------
 * 1. Design tokens
 * ------------------------------------------------------------------- */
:root {
	color-scheme: dark;

	/* Color tokens */
	--color-primary: #d0bcff;
	--color-on-primary: #3c0091;
	--color-primary-container: #a078ff;
	--color-on-primary-container: #340080;
	--color-primary-fixed: #e9ddff;

	--color-secondary: #4cd7f6;
	--color-on-secondary: #003640;
	--color-secondary-container: #03b5d3;
	--color-on-secondary-container: #00424e;

	--color-tertiary: #ffb2b7;
	--color-on-tertiary: #67001b;
	--color-tertiary-container: #ff516a;
	--color-on-tertiary-container: #5b0017;

	--color-background: #0b1326;
	--color-on-background: #dae2fd;
	--color-surface: #0b1326;
	--color-surface-dim: #0b1326;
	--color-surface-bright: #31394d;
	--color-surface-glass: rgba(15, 23, 42, 0.7);
	--color-surface-variant: #2d3449;
	--color-surface-container-lowest: #060e20;
	--color-surface-container-low: #131b2e;
	--color-surface-container: #171f33;
	--color-surface-container-high: #222a3d;
	--color-surface-container-highest: #2d3449;

	--color-on-surface: #dae2fd;
	--color-on-surface-variant: #cbc3d7;
	--color-outline: #958ea0;
	--color-outline-variant: #494454;
	--color-border-subtle: rgba(255, 255, 255, 0.1);
	--color-text-muted: #94a3b8;

	--color-error: #ffb4ab;
	--color-on-error: #690005;
	--color-error-container: #93000a;
	--color-on-error-container: #ffdad6;

	--color-inverse-surface: #dae2fd;
	--color-inverse-on-surface: #283044;
	--color-inverse-primary: #6d3bd7;

	/* Radius */
	--radius-default: 0.25rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;
	--radius-full: 9999px;

	/* Spacing */
	--space-container-margin: 1.25rem;
	--space-section-gap-mobile: 4rem;
	--space-section-gap-desktop: 8rem;
	--space-gutter: 1rem;
	--space-stack-sm: 0.5rem;
	--space-stack-md: 1.5rem;

	/* Typography */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	--text-cta: 18px;
	--leading-cta: 24px;
	--weight-cta: 600;

	--text-display-hero: 48px;
	--leading-display-hero: 56px;
	--tracking-display-hero: -0.02em;
	--weight-display-hero: 800;

	--text-label-caps: 12px;
	--leading-label-caps: 16px;
	--tracking-label-caps: 0.1em;
	--weight-label-caps: 600;

	--text-body-md: 16px;
	--leading-body-md: 24px;
	--weight-body-md: 400;

	--text-headline-lg: 32px;
	--leading-headline-lg: 40px;
	--tracking-headline-lg: -0.01em;
	--weight-headline-lg: 700;

	--text-headline-lg-mobile: 28px;
	--leading-headline-lg-mobile: 36px;
	--weight-headline-lg-mobile: 700;

	--container-max: 1280px;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------
 * 2. Base / reset
 * ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-on-surface);
	font-family: var(--font-sans);
	font-size: var(--text-body-md);
	line-height: var(--leading-body-md);
	overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

::selection { background: var(--color-primary); color: var(--color-on-primary); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface-dim); }
::-webkit-scrollbar-thumb { background: var(--color-surface-container-highest); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-container); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	display: inline-flex;
}
.material-symbols-outlined.filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---------------------------------------------------------------------
 * 3. Shared component patterns
 * ------------------------------------------------------------------- */
.glass-card {
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--color-border-subtle);
	transition: all 0.3s var(--ease-standard);
}
.glass-card:hover {
	border-color: rgba(208, 188, 255, 0.4);
	transform: translateY(-4px);
	background: rgba(30, 41, 59, 0.65);
}

.primary-glow { box-shadow: 0 0 24px rgba(139, 92, 246, 0.25); }

.text-gradient,
.text-glow-gradient {
	background: linear-gradient(135deg, #d0bcff 0%, #4cd7f6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-glow { text-shadow: 0 0 20px rgba(208, 188, 255, 0.4); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: var(--text-cta);
	font-weight: var(--weight-cta);
	line-height: var(--leading-cta);
	padding: 1rem 2.5rem;
	border-radius: var(--radius-xl);
	transition: transform 0.2s var(--ease-standard), background-color 0.2s, box-shadow 0.2s;
	border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(0.97); }

.btn-primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
	box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);
}
.btn-secondary {
	background: var(--color-primary-container);
	color: var(--color-on-primary-container);
}
.btn-outline {
	background: transparent;
	border-color: var(--color-outline);
	color: var(--color-on-surface);
}
.btn-outline:hover { background: var(--color-surface-bright); }
.btn-full { border-radius: var(--radius-full); }
.btn-sm { padding: 0.625rem 1.5rem; font-size: 15px; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 1rem;
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: var(--text-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: var(--weight-label-caps);
	text-transform: uppercase;
	background: rgba(76, 215, 246, 0.1);
	border: 1px solid rgba(76, 215, 246, 0.2);
	color: var(--color-secondary);
}

.icon-tile {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-xl);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------
 * 4. Layout utilities
 * ------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-container-margin); }
.container-narrow { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: var(--space-container-margin); }

.section { padding-block: var(--space-section-gap-mobile); padding-inline: var(--space-container-margin); }
@media (min-width: 1024px) { .section { padding-block: var(--space-section-gap-desktop); } }

.grid { display: grid; gap: var(--space-gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 1023px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.text-center { text-align: center; }

.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ---------------------------------------------------------------------
 * 5. Typography utilities
 * ------------------------------------------------------------------- */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: var(--weight-label-caps);
	text-transform: uppercase;
	color: var(--color-secondary);
}

.h-hero {
	font-family: var(--font-sans);
	font-weight: var(--weight-display-hero);
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: var(--tracking-display-hero);
	color: var(--color-on-surface);
}
@media (min-width: 768px) {
	.h-hero { font-size: var(--text-display-hero); line-height: var(--leading-display-hero); }
}

.h-section {
	font-family: var(--font-sans);
	font-weight: var(--weight-headline-lg-mobile);
	font-size: var(--text-headline-lg-mobile);
	line-height: var(--leading-headline-lg-mobile);
	color: var(--color-on-surface);
}
@media (min-width: 768px) {
	.h-section { font-weight: var(--weight-headline-lg); font-size: var(--text-headline-lg); line-height: var(--leading-headline-lg); letter-spacing: var(--tracking-headline-lg); }
}

.body-muted { color: var(--color-on-surface-variant); }
.body-faint { color: var(--color-text-muted); }

.divider-accent { width: 5rem; height: 4px; background: var(--color-primary); border-radius: var(--radius-full); margin-inline: auto; }

/* ---------------------------------------------------------------------
 * 6. Header / Navigation
 * ------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	background: var(--color-surface-glass);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--color-border-subtle);
}
.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0.875rem var(--space-container-margin);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.site-header__logo img { height: 36px; width: auto; }
.site-header__nav { display: flex; align-items: center; gap: 2rem; }
.site-header__nav a {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-on-surface-variant);
	transition: opacity 0.2s, color 0.2s;
}
.site-header__nav a:hover, .site-header__nav a.is-active { color: var(--color-primary); }
@media (max-width: 900px) { .site-header__nav { display: none; } }

/* ---------------------------------------------------------------------
 * 7. Footer
 * ------------------------------------------------------------------- */
.site-footer {
	background: var(--color-surface-container-lowest);
	border-top: 1px solid var(--color-border-subtle);
	padding: 5rem var(--space-container-margin) 2.5rem;
}
.site-footer__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 4rem;
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; text-align: center; } }

.site-footer h4 {
	font-family: var(--font-mono);
	font-size: var(--text-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface);
	margin-bottom: 1.5rem;
}
.site-footer ul { display: flex; flex-direction: column; gap: 1rem; }
.site-footer a { color: var(--color-text-muted); transition: color 0.2s; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__bottom {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border-subtle);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	color: var(--color-text-muted);
	font-size: 14px;
}
.social-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-container);
	color: var(--color-on-surface);
	transition: background 0.2s, color 0.2s;
}
.social-icon:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------------------------------------------------------------------
 * 8. Elementor compatibility
 * ------------------------------------------------------------------- */
.elementor-widget-text-editor p:last-child,
.elementor-widget-heading .elementor-heading-title { margin: 0; }

.ttt-section { position: relative; }
.ttt-section--tight .elementor-container { gap: 0; }

body.elementor-editor-active .ttt-section,
body.elementor-page .ttt-section { background-clip: padding-box; }

/* Fallback (non-Elementor) header/footer parity kept for safety */
.ttt-stitch-mobile { display: none; }
@media (max-width: 767px) {
	.ttt-stitch-desktop { display: none; }
	.ttt-stitch-mobile { display: block; }
}

main { display: block; }

/* Reveal-on-scroll utility (progressive enhancement, no layout shift if JS disabled) */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

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