/* assets/css/platform.css */
/* =========================================================
   Trace0 Advisory, Nova platform layer.
   Additive only: no existing rule is overridden. Every colour
   comes from the theme tokens defined in base.css, so dark /
   light themes and the accent palette keep working untouched.
   ========================================================= */

/* ---------- 0. Nav fits one more item (Platform / Plataforma) ---------- */

.t0-nav__links a,
.t0-nav__cta {
	white-space: nowrap;
}

/* ---------- 1. Nova section (front page) ---------- */

.t0-nova__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 34px;
}

.t0-nova__card {
	padding: 26px;
}

.t0-nova__tag {
	display: block;
	font-family: var(--t0-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--t0-gold);
	margin-bottom: 14px;
}

.t0-nova__title {
	font-family: var(--t0-display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t0-text);
	margin: 0 0 10px;
}

.t0-nova__desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--t0-text-3);
	margin: 0;
}

.t0-nova__foot {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: end;
	margin-top: 38px;
}

.t0-nova__foot-text p:last-child {
	color: var(--t0-text-2);
}

.t0-nova__foot-cta {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 1024px) {
	.t0-nova__grid { grid-template-columns: repeat(2, 1fr); }
	.t0-nova__foot { grid-template-columns: 1fr; gap: 24px; align-items: start; }
	.t0-nova__foot-cta { justify-content: flex-start; }
}

@media (max-width: 640px) {
	.t0-nova__grid { grid-template-columns: 1fr; }
}

/* ---------- 2. Screenshot slots ---------- */

.t0-shot {
	margin: 0;
	display: block;
}

.t0-shot--wide {
	margin: 32px 0 8px;
}

.t0-shot__frame {
	position: relative;
	border: 1px solid var(--t0-line);
	background: linear-gradient(180deg, var(--t0-panel-2), var(--t0-panel));
	overflow: hidden;
	transition: border-color var(--t0-motion-base) var(--t0-ease), box-shadow var(--t0-motion-base) var(--t0-ease);
}

.t0-shot:is(:hover, :focus-within) .t0-shot__frame {
	border-color: rgba(var(--t0-blue-rgb), 0.5);
	box-shadow: 0 24px 64px -34px rgba(var(--t0-blue-rgb), 0.46), inset 0 1px rgba(var(--t0-blue-rgb), .14);
}

/* browser-chrome strip */
.t0-shot__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--t0-line-soft);
	background: var(--t0-panel-3);
}

.t0-shot__bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t0-line);
	display: block;
}

.t0-shot__bar span:first-child {
	background: rgba(var(--t0-blue-rgb), 0.55);
}

.t0-shot__bar-label {
	margin-inline-start: 10px;
	font-family: var(--t0-display);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t0-muted);
	font-weight: 400;
}

/* the image / placeholder area */
.t0-shot__slot {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background-image:
		linear-gradient(var(--t0-stroke) 1px, transparent 1px),
		linear-gradient(90deg, var(--t0-stroke) 1px, transparent 1px);
	background-size: 34px 34px;
}

.t0-shot__slot::before {
	content: "";
	position: absolute;
	inset: -45% -25%;
	background: linear-gradient(105deg, transparent 38%, rgba(var(--t0-blue-rgb), .13) 50%, transparent 62%);
	opacity: 0;
	transition: opacity var(--t0-motion-base) var(--t0-ease);
	pointer-events: none;
	z-index: 1;
}

.t0-shot:is(:hover, :focus-within) .t0-shot__slot::before {
	opacity: .28;
}

.t0-shot__slot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(var(--t0-bg-rgb), .34) 100%);
	pointer-events: none;
	z-index: 2;
}

.t0-shot__slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: saturate(.9) brightness(.9) contrast(1.02);
	transition: filter var(--t0-motion-base) var(--t0-ease), opacity var(--t0-motion-base) var(--t0-ease);
}

.t0-shot:is(:hover, :focus-within) .t0-shot__slot img {
	filter: saturate(1) brightness(.98) contrast(1.04);
}

.t0-shot__ph {
	width: 46px;
	height: 46px;
	color: var(--t0-muted-2);
	opacity: 0.85;
	animation: hn-placeholder-breathe 3.8s ease-in-out infinite;
	z-index: 3;
}

.t0-shot__ph svg { width: 100%; height: 100%; }

.t0-shot__hint {
	font-family: var(--t0-display);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t0-muted);
	text-align: center;
	padding: 0 16px;
	line-height: 2;
	z-index: 3;
}

@keyframes hn-placeholder-breathe {
	0%, 100% { opacity: .55; transform: translateY(0); }
	50% { opacity: .95; transform: translateY(-4px); }
}

.t0-shot__hint code {
	font-family: var(--t0-display);
	color: var(--nova-text-accent);
	letter-spacing: 0.1em;
	text-transform: none;
}

.t0-shot__cap {
	margin: 16px 0 0;
	padding: 0;
}

.t0-shot__cap-t {
	display: block;
	font-family: var(--t0-display);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t0-text);
	margin-bottom: 7px;
}

.t0-shot__cap-d {
	display: block;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--t0-text-3);
	max-width: 640px;
}

/* screenshot gallery grid */
.t0-shots__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 26px;
	margin-top: 44px;
}

@media (max-width: 768px) {
	.t0-shots__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- 3. Our model / architecture / trust grids ---------- */

.t0-model__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 10px;
}

.t0-arch__grid {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 34px;
}

.t0-model__card {
	position: relative;
	padding: 30px;
}

.t0-model__step {
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--t0-display);
	font-size: 34px;
	line-height: 1;
	color: var(--t0-line);
	pointer-events: none;
	user-select: none;
}

.t0-arch__tags {
	margin: 0 0 8px;
}

/* Keep long titles clear of the ghost step number. */
.t0-model__card .t0-comm__title {
	padding-inline-end: 54px;
	overflow-wrap: break-word;
}

.t0-arch__grid .t0-comm__title {
	font-size: 15px;
	line-height: 1.3;
}

.t0-arch__grid .t0-model__step {
	font-size: 28px;
	top: 24px;
}

/* Sections that skip the intro lead still need breathing room. */
.t0-h2 + .t0-offer__grid,
.t0-h2 + .t0-comm__grid,
.t0-h2 + .t0-model__grid,
.t0-h2 + .t0-integr__grid,
.t0-h2 + .t0-shots__grid {
	margin-top: 38px;
}

/* Product imagery ships as flattened, privacy-reviewed derivatives. Keep the
   interface readable and use tonal treatment rather than reversible blur. */
:where(.hn-media, [data-media-slot], [data-product-media]) {
	position: relative;
	overflow: hidden;
}
:where(.hn-media, [data-media-slot], [data-product-media]) img {
	filter: saturate(.9) brightness(.9) contrast(1.02);
	transition: filter var(--t0-motion-base) var(--t0-ease), opacity var(--t0-motion-base) var(--t0-ease);
}
:where(.hn-media, [data-media-slot], [data-product-media]):is(:hover, :focus-within) img {
	filter: saturate(1) brightness(.98) contrast(1.04);
}

@media (max-width: 1024px) {
	.t0-model__grid,
	.t0-arch__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.t0-model__grid,
	.t0-arch__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.t0-shot__slot::before,
	.t0-shot__ph { animation: none; }
	.t0-shot__frame,
	.t0-shot__slot img,
	:where(.hn-media, [data-media-slot], [data-product-media]) img { transition: none; }
	.t0-shot:is(:hover, :focus-within) .t0-shot__frame { transform: none; }
}

/* ---------- 4. Integrations ---------- */

.t0-integr__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.t0-integr__card {
	padding: 30px;
}

.t0-integr__card .t0-offer__tags {
	margin-top: 16px;
}

@media (max-width: 768px) {
	.t0-integr__grid { grid-template-columns: 1fr; }
}

/* ---------- 5. Commercial / trust note ---------- */

.t0-comm__note {
	margin: 32px 0 0;
	padding-inline-start: 18px;
	border-inline-start: 1px solid rgba(var(--t0-blue-rgb), 0.35);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--t0-text-3);
	max-width: 760px;
}

.t0-comm__note--top {
	margin: 0 0 12px;
}

/* ---------- 6. Development status pill ---------- */

.t0-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 8px 16px;
	border: 1px solid var(--t0-line);
	background: var(--t0-overlay-4);
	font-family: var(--t0-display);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t0-text-3);
	line-height: 1.6;
}

.t0-status__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--t0-gold);
	box-shadow: 0 0 0 3px rgba(207, 174, 110, 0.16);
}

.t0-page-hero .t0-status {
	margin-bottom: 18px;
}

@media (max-width: 640px) {
	.t0-status { font-size: 9px; letter-spacing: 0.14em; }
}

/* ---------- light theme: product media and supporting surfaces ---------- */

[data-theme="light"] .t0-shot__frame {
	border-color: #cbd6d3;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: var(--t0-shadow-md);
}

[data-theme="light"] .t0-shot:is(:hover, :focus-within) .t0-shot__frame {
	border-color: rgba(var(--t0-blue-rgb), .52);
	box-shadow: var(--t0-shadow-lg);
}

[data-theme="light"] .t0-shot__bar {
	border-bottom-color: #dbe3e1;
	background: #eef2f1;
}

[data-theme="light"] .t0-shot__bar span {
	background: #b8c5c1;
}

[data-theme="light"] .t0-shot__bar span:first-child {
	background: var(--nova-primary);
}

[data-theme="light"] .t0-shot__slot {
	background-color: #f4f7f6;
	background-image:
		radial-gradient(ellipse at 20% 14%, rgba(0, 127, 120, .085), transparent 38%),
		radial-gradient(ellipse at 84% 88%, rgba(7, 21, 18, .05), transparent 40%),
		linear-gradient(145deg, #fbfcfc 0%, #edf3f1 100%);
	background-size: auto;
}

[data-theme="light"] .t0-shot__slot::after {
	background: radial-gradient(circle at 50% 44%, transparent 48%, rgba(7, 21, 18, .055) 100%);
}

[data-theme="light"] .t0-shot__slot img,
[data-theme="light"] :where(.hn-media, [data-media-slot], [data-product-media]) img {
	filter: saturate(.98) brightness(1.01) contrast(1.03);
}

[data-theme="light"] .t0-shot:is(:hover, :focus-within) .t0-shot__slot img,
[data-theme="light"] :where(.hn-media, [data-media-slot], [data-product-media]):is(:hover, :focus-within) img {
	filter: saturate(1.03) brightness(1.02) contrast(1.04);
}

[data-theme="light"] .t0-shot__ph {
	color: #7c918c;
}

[data-theme="light"] .t0-model__step {
	color: #bdcac7;
}

[data-theme="light"] .t0-comm__note {
	padding: 15px 18px;
	border-inline-start: 3px solid var(--nova-primary);
	border-radius: 0 3px 3px 0;
	background: #f2f5f4;
	color: var(--t0-text-2);
}

[data-theme="light"] .t0-status {
	border-color: #c5d1ce;
	border-radius: 999px;
	background: #ffffff;
	color: var(--t0-text-2);
	box-shadow: var(--t0-shadow-xs);
}