/* =========================================================================

   Cronuts Digital — Neumorphic Design System (vault Insights + handoff zip)

   ========================================================================= */



:root {

	/* Canvas */

	--cd-canvas:        #E0E5EC;

	--cd-canvas-2:      #D6DCE5;

	--cd-canvas-dark:   #242424;

	--cd-canvas-dark-2: #1A1A1A;



	/* Ink */

	--cd-ink:           #242424;

	--cd-ink-2:         #545760;

	--cd-ink-3:         #848484;

	--cd-ink-inv:       #EBEAEA;

	--cd-ink-inv-2:     #A6A6AA;



	/* Acentos */

	--cd-red:           #E6243F;

	--cd-red-hover:     #C71C33;

	--cd-red-press:     #A8172B;



	/* Shadows neumorphic (regla blur ≥ 2× offset) */

	--nm-out:    -6px -6px 16px 0 rgba(255,255,255,1), 6px 6px 16px 0 rgba(163,177,198,0.55);

	--nm-out-sm: -3px -3px 8px 0 rgba(255,255,255,0.95), 3px 3px 8px 0 rgba(163,177,198,0.45);

	--nm-out-lg: -10px -10px 24px 0 rgba(255,255,255,1), 10px 10px 24px 0 rgba(163,177,198,0.55);

	--nm-in:     inset 4px 4px 8px 0 rgba(163,177,198,0.55), inset -4px -4px 8px 0 rgba(255,255,255,1);

	--nm-in-sm:  inset 2px 2px 5px 0 rgba(163,177,198,0.5), inset -2px -2px 5px 0 rgba(255,255,255,1);



	--nmd-out:    -6px -6px 14px 0 rgba(58,58,58,0.55), 8px 8px 20px 0 rgba(0,0,0,0.6);

	--nmd-out-sm: -3px -3px 7px 0 rgba(58,58,58,0.5), 4px 4px 10px 0 rgba(0,0,0,0.55);

	--nmd-in:     inset 3px 3px 7px 0 rgba(0,0,0,0.55), inset -3px -3px 7px 0 rgba(58,58,58,0.55);



	--nm-red:    -3px -3px 7px 0 rgba(255,255,255,0.9), 5px 5px 14px 0 rgba(230,36,63,0.45);

	--nm-red-d:  -3px -3px 7px 0 rgba(58,58,58,0.35), 5px 5px 14px 0 rgba(230,36,63,0.5);



	/* Fuentes vault */

	--font-display: 'Poppins', system-ui, -apple-system, sans-serif;

	--font-body:    'Inter', system-ui, -apple-system, sans-serif;



	/* Spacing 4pt */

	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;

	--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;



	/* Layout */

	--container-max: 1200px;

	--gutter: 24px;

}



* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {

	background: var(--cd-canvas);

	color: var(--cd-ink);

	font-family: var(--font-body);

	font-size: 16px;

	line-height: 1.55;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	text-rendering: optimizeLegibility;

	overflow-x: hidden;

}



img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: opacity 180ms, color 180ms; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); letter-spacing: -0.02em; color: var(--cd-ink); }

p { margin: 0; }

button { font: inherit; }



.container {

	width: 100%;

	max-width: var(--container-max);

	margin-inline: auto;

	padding-inline: var(--gutter);

}



.eyebrow {

	font-family: var(--font-display);

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: var(--cd-red);

	display: inline-flex;

	align-items: center;

	gap: 8px;

}

.eyebrow::before {

	content: "";

	width: 8px; height: 8px;

	border-radius: 999px;

	background: var(--cd-red);

	box-shadow: 0 0 0 3px rgba(230,36,63,0.18);

}



/* =========================================================================

   Buttons

   ========================================================================= */

.btn {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 14px;

	padding: 13px 22px;

	border-radius: 999px;

	border: 0;

	cursor: pointer;

	display: inline-flex;

	align-items: center;

	gap: 10px;

	transition: transform 160ms, box-shadow 200ms, background 160ms, color 160ms;

	white-space: nowrap;

}

.btn--primary { background: var(--cd-red); color: #fff; box-shadow: var(--nm-red); }

.btn--primary:hover { background: var(--cd-red-hover); transform: translateY(-1px); }

.btn--primary:active { transform: translateY(0); box-shadow: inset -2px -2px 5px rgba(255,255,255,0.2), inset 3px 3px 7px rgba(0,0,0,0.35); }

.btn--secondary { background: var(--cd-canvas); color: var(--cd-ink); box-shadow: var(--nm-out-sm); }

.btn--secondary:hover { color: var(--cd-red); transform: translateY(-1px); }

.btn--secondary:active { box-shadow: var(--nm-in-sm); transform: translateY(0); }

.btn--ghost { background: var(--cd-canvas); color: var(--cd-ink); box-shadow: var(--nm-in-sm); }

.btn--ghost:hover { color: var(--cd-red); }

.btn--lg { padding: 16px 28px; font-size: 15px; }



.btn--dark-primary { background: var(--cd-red); color: #fff; box-shadow: 0 4px 16px rgba(230,36,63,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }

.btn--dark-primary:hover { background: var(--cd-red-hover); box-shadow: 0 6px 22px rgba(230,36,63,0.5), inset 0 1px 0 rgba(255,255,255,0.2); transform: translateY(-1px); }

.btn--dark-secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

.btn--dark-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: var(--cd-red); transform: translateY(-1px); }



/* =========================================================================

   Preview top bar

   ========================================================================= */

.preview-bar {

	position: fixed; top: 0; left: 0; right: 0;

	z-index: 99999;

	background: var(--cd-red);

	color: #fff;

	padding: 8px 20px;

	font-family: var(--font-body);

	font-size: 12px;

	font-weight: 600;

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.preview-bar a { color: #fff; text-decoration: underline; }



/* =========================================================================

   Header — floating pill

   ========================================================================= */

.site-header {

	position: fixed;

	top: 56px;

	left: 50%;

	transform: translateX(-50%);

	z-index: 100;

	width: calc(100% - 48px);

	max-width: 1140px;

}

.site-header__pill {

	display: grid;

	grid-template-columns: auto 1fr auto;

	align-items: center;

	gap: 24px;

	padding: 10px 12px 10px 20px;

	border-radius: 999px;

	background: rgba(18,18,18,0.68);

	backdrop-filter: saturate(1.3) blur(10px);

	-webkit-backdrop-filter: saturate(1.3) blur(10px);

	box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 10px 28px rgba(0,0,0,0.35);

	border: 1px solid rgba(255,255,255,0.08);

}

.site-header__pill .btn {

	box-shadow: 0 2px 10px rgba(230,36,63,0.3), inset 0 1px 0 rgba(255,255,255,0.12);

	border: 1px solid rgba(230,36,63,0.5);

}

.site-header__pill .btn:hover {

	box-shadow: 0 3px 14px rgba(230,36,63,0.45), inset 0 1px 0 rgba(255,255,255,0.18);

}

.brand {

	display: flex; align-items: center; gap: 10px;

	font-family: var(--font-display);

	color: rgba(255,255,255,0.95);

	text-decoration: none;

}

.brand__eye { background: transparent; }

.brand__eye {

	width: 30px; height: 30px;

	display: block;

	object-fit: contain;

	flex-shrink: 0;

}

.brand__word {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 18px;

	letter-spacing: -0.02em;

	line-height: 1;

	color: rgba(255,255,255,0.95);

	display: inline-flex;

	align-items: baseline;

}

.brand__word .dot { color: var(--cd-red); padding: 0 1px; }



.site-nav {

	justify-self: center;

	display: flex;

	padding: 3px;

	border-radius: 999px;

	background: rgba(255,255,255,0.04);

	border: 1px solid rgba(255,255,255,0.06);

	gap: 2px;

	position: relative;

}

.site-nav > a,

.site-nav > .nav-drop > a {

	font-family: var(--font-body);

	font-size: 13px;

	font-weight: 500;

	color: rgba(255,255,255,0.72);

	padding: 9px 16px;

	border-radius: 999px;

	transition: color 160ms, background 160ms;

	white-space: nowrap;

	display: inline-flex;

	align-items: center;

	gap: 6px;

	cursor: pointer;

}

.site-nav > a:hover,

.site-nav > .nav-drop > a:hover { color: #fff; background: rgba(255,255,255,0.04); }

.site-nav a.active {

	color: #fff;

	background: rgba(230,36,63,0.18);

	box-shadow: inset 0 0 0 1px rgba(230,36,63,0.35);

}

.nav-drop { position: relative; }

.nav-drop > a::after {

	content: "";

	width: 6px; height: 6px;

	border-right: 1.5px solid currentColor;

	border-bottom: 1.5px solid currentColor;

	transform: rotate(45deg);

	margin-left: 2px;

	margin-bottom: 2px;

	transition: transform 200ms;

	opacity: 0.6;

}

.nav-drop:hover > a::after,

.nav-drop:focus-within > a::after { transform: rotate(225deg); margin-bottom: -2px; opacity: 1; }



/* Mega-menu panel */

.mega {

	position: absolute;

	top: calc(100% + 14px);

	left: 50%;

	transform: translateX(-50%) translateY(8px);

	min-width: 640px;

	max-width: 88vw;

	background: rgba(18,18,18,0.92);

	backdrop-filter: saturate(1.4) blur(18px);

	-webkit-backdrop-filter: saturate(1.4) blur(18px);

	border: 1px solid rgba(255,255,255,0.08);

	border-radius: 20px;

	box-shadow: 0 24px 64px rgba(0,0,0,0.5);

	padding: 24px;

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition: opacity 200ms, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 200ms;

	z-index: 120;

}

.nav-drop:hover .mega,

.nav-drop:focus-within .mega {

	opacity: 1;

	visibility: visible;

	pointer-events: auto;

	transform: translateX(-50%) translateY(0);

}

.mega::before {

	content: "";

	position: absolute;

	top: -14px; left: 50%;

	transform: translateX(-50%);

	width: 100%; height: 14px;

	background: transparent;

}

.mega__grid {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 6px 24px;

}

.mega__group-head {

	grid-column: 1 / -1;

	font-family: var(--font-display);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: var(--cd-red);

	margin: 4px 0 8px;

	padding-bottom: 10px;

	border-bottom: 1px solid rgba(255,255,255,0.08);

}

.mega__group-head span { color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.04em; text-transform: none; margin-left: 8px; font-size: 11px; }

.mega__item {

	padding: 10px 12px;

	border-radius: 10px;

	display: flex;

	flex-direction: column;

	gap: 3px;

	transition: background 160ms;

}

.mega__item { position: relative; border: 1px solid transparent; }

	.mega__item::before {

		content: "";

		position: absolute;

		left: 0; top: 10px; bottom: 10px;

		width: 3px;

		border-radius: 3px;

		background: var(--cd-red);

		transform: scaleY(0);

		transform-origin: center;

		transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);

	}

	.mega__item:hover,

	.mega__item:focus-visible {

		background: rgba(255,255,255,0.09);

		border-color: rgba(255,255,255,0.14);

		transform: translateX(3px);

		box-shadow: 0 6px 20px rgba(0,0,0,0.35);

		transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;

	}

	.mega__item:hover::before,

	.mega__item:focus-visible::before { transform: scaleY(1); }

	.mega__item:hover .mega__item-desc,

	.mega__item:focus-visible .mega__item-desc { color: rgba(255,255,255,0.88); }

.mega__item-name {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 14px;

	color: #fff;

	letter-spacing: -0.01em;

}

.mega__item-desc {

	font-size: 12px;

	color: rgba(255,255,255,0.55);

	line-height: 1.4;

}

.mega__foot {

	margin-top: 18px;

	padding-top: 14px;

	border-top: 1px solid rgba(255,255,255,0.08);

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.mega__foot-link {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 13px;

	color: var(--cd-red);

}

.mega__foot-hint {

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10px;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.35);

}



/* =========================================================================

   Hero — Japanese minimal (ma · enso · sumi ink)

   Paleta estricta: #0A0A0A + #FFFFFF + #E6243F. Nada más.

   ========================================================================= */

.hero {

	background: #0A0A0A;

	color: var(--cd-ink-inv);

	padding: 168px 0 0;

	position: relative;

	overflow: hidden;

	isolation: isolate;

	min-height: auto;

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

}



/* Layer A — tatami dot grid (modularidad japonesa) */

.hero__tatami {

	position: absolute;

	inset: 0;

	z-index: -4;

	pointer-events: none;

	background-image: radial-gradient(circle at center, rgba(255,255,255,0.06) 1px, transparent 1.5px);

	background-size: 56px 56px;

	mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 85%);

	-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 85%);

	animation: heroTatamiDrift 40s linear infinite;

	will-change: background-position;

}

@keyframes heroTatamiDrift {

	from { background-position: 0 0; }

	to   { background-position: 56px 56px; }

}



/* Layer B — kokyu (breath) — single slow red radial pulse far right */

.hero__breath {

	position: absolute;

	top: 50%; right: 6%;

	transform: translateY(-50%);

	width: 620px; height: 620px;

	border-radius: 50%;

	background: radial-gradient(circle, rgba(230,36,63,0.07), transparent 65%);

	z-index: -3;

	filter: blur(50px);

	animation: heroBreath 11s ease-in-out infinite;

	will-change: transform, opacity;

}

@keyframes heroBreath {

	0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(1); }

	50%      { opacity: 1;    transform: translateY(-50%) scale(1.12); }

}



/* Layer C — ensō (円相) hand-drawn once, lingers, fades, redraws */

.hero__enso {

	position: absolute;

	top: 50%; right: 5%;

	transform: translateY(-50%);

	width: min(560px, 48vw);

	aspect-ratio: 1;

	z-index: -2;

	pointer-events: none;

	opacity: 0.55;

}

.hero__enso-arc {

	fill: none;

	stroke: var(--cd-red);

	stroke-width: 2.2;

	stroke-linecap: round;

	stroke-dasharray: 1500;

	stroke-dashoffset: 1500;

	transform-origin: center;

	transform: rotate(-100deg);

	animation: heroEnso 18s cubic-bezier(0.65, 0, 0.35, 1) infinite;

	filter: drop-shadow(0 0 8px rgba(230,36,63,0.35));

}

.hero__enso-drop {

	fill: var(--cd-red);

	opacity: 0;

	animation: heroEnsoDrop 18s ease-out infinite;

}

@keyframes heroEnso {

	0%   { stroke-dashoffset: 1500; opacity: 0; }

	8%   { opacity: 0.85; }

	38%  { stroke-dashoffset: 0; opacity: 0.85; }

	68%  { stroke-dashoffset: 0; opacity: 0.7; }

	82%  { opacity: 0; }

	100% { stroke-dashoffset: 1500; opacity: 0; }

}

@keyframes heroEnsoDrop {

	0%, 32% { opacity: 0; }

	40%     { opacity: 0.9; }

	75%     { opacity: 0.7; }

	85%     { opacity: 0; }

	100%    { opacity: 0; }

}



/* Layer D — mizuhiki thin red hairline descending left */

.hero__line {

	position: absolute;

	left: 7%;

	top: 0;

	width: 1px;

	height: 52%;

	background: linear-gradient(180deg, transparent, var(--cd-red) 35%, var(--cd-red) 85%, transparent);

	opacity: 0.55;

	z-index: -1;

	animation: heroLine 8s ease-in-out infinite;

	transform-origin: top;

	will-change: transform, opacity;

}

@keyframes heroLine {

	0%, 100% { transform: scaleY(0.75); opacity: 0.35; }

	50%      { transform: scaleY(1);    opacity: 0.9;  }

}

.hero__line::after {

	content: "";

	position: absolute;

	left: -3px;

	bottom: -3px;

	width: 7px; height: 7px;

	background: var(--cd-red);

	border-radius: 50%;

	box-shadow: 0 0 10px rgba(230,36,63,0.7);

}



/* Layer E — katakana corner marks (brand moments) */

.hero__mark {

	position: absolute;

	font-family: var(--font-body);

	font-size: 11px;

	font-weight: 500;

	letter-spacing: 0.32em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.28);

	z-index: 2;

	pointer-events: none;

	writing-mode: vertical-rl;

	text-orientation: mixed;

	line-height: 1.4;

}

.hero__mark--tl { top: 180px; left: 32px; }

.hero__mark--br { bottom: 72px; right: 32px; color: var(--cd-red); opacity: 0.7; }



/* Layer E2 — hotarubi (luciérnagas) drifting particles */

.hero__hotarubi {

	position: absolute;

	inset: 0;

	z-index: -2;

	pointer-events: none;

	overflow: hidden;

}

.hero__hotarubi span {

	position: absolute;

	width: 3px; height: 3px;

	border-radius: 50%;

	background: rgba(255,255,255,0.75);

	box-shadow: 0 0 6px rgba(255,255,255,0.4);

	opacity: 0;

	animation: heroHotarubi 14s ease-in-out infinite;

}

.hero__hotarubi span:nth-child(1)  { top: 18%; left: 22%; animation-delay: 0s;    }

.hero__hotarubi span:nth-child(2)  { top: 72%; left: 14%; animation-delay: -2.1s; width: 2px; height: 2px; }

.hero__hotarubi span:nth-child(3)  { top: 32%; left: 48%; animation-delay: -4.2s; background: rgba(230,36,63,0.65); box-shadow: 0 0 10px rgba(230,36,63,0.55); }

.hero__hotarubi span:nth-child(4)  { top: 65%; left: 62%; animation-delay: -6.3s; }

.hero__hotarubi span:nth-child(5)  { top: 24%; left: 78%; animation-delay: -8.4s; background: rgba(230,36,63,0.55); box-shadow: 0 0 8px rgba(230,36,63,0.45); }

.hero__hotarubi span:nth-child(6)  { top: 58%; left: 38%; animation-delay: -10.5s; width: 2px; height: 2px; }

.hero__hotarubi span:nth-child(7)  { top: 82%; left: 78%; animation-delay: -12.6s; }

.hero__hotarubi span:nth-child(8)  { top: 10%; left: 62%; animation-delay: -1.1s;  width: 2px; height: 2px; }

.hero__hotarubi span:nth-child(9)  { top: 46%; left: 10%; animation-delay: -3.3s; }

.hero__hotarubi span:nth-child(10) { top: 88%; left: 44%; animation-delay: -7.5s; background: rgba(230,36,63,0.6); box-shadow: 0 0 9px rgba(230,36,63,0.5); }

@keyframes heroHotarubi {

	0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }

	25%      { opacity: 0.75; transform: translate(6px, -10px) scale(1); }

	55%      { opacity: 0.95; transform: translate(-4px, -22px) scale(1); }

	85%      { opacity: 0.3; transform: translate(10px, -34px) scale(1); }

}



/* Comet dot — orbits the ensō perimeter, appears after the arc draws */

.hero__comet {

	position: absolute;

	top: 50%; right: 5%;

	transform: translateY(-50%);

	width: min(560px, 48vw);

	aspect-ratio: 1;

	z-index: -1;

	pointer-events: none;

}

.hero__comet-orbit {

	position: absolute;

	inset: 0;

	animation: heroCometSpin 18s cubic-bezier(0.65, 0, 0.35, 1) infinite;

	transform-origin: center;

}

.hero__comet-dot {

	position: absolute;

	top: 2.4%; left: 50%;

	transform: translateX(-50%);

	width: 10px; height: 10px;

	border-radius: 50%;

	background: var(--cd-red);

	box-shadow: 0 0 16px rgba(230,36,63,0.85), 0 0 40px rgba(230,36,63,0.4);

	opacity: 0;

	animation: heroCometPulse 18s ease-in-out infinite;

}

@keyframes heroCometSpin {

	from { transform: rotate(-100deg); }

	to   { transform: rotate(260deg); }

}

@keyframes heroCometPulse {

	0%, 38%   { opacity: 0; }

	42%, 68%  { opacity: 1; }

	78%, 100% { opacity: 0; }

}



/* Layer E3 — ink bleed pulse (concentric ripple from enso center) */

.hero__ripple {

	position: absolute;

	top: 50%; right: 5%;

	transform: translateY(-50%);

	width: min(560px, 48vw);

	aspect-ratio: 1;

	z-index: -2;

	pointer-events: none;

	border-radius: 50%;

	border: 1px solid rgba(230,36,63,0.4);

	opacity: 0;

	animation: heroRipple 18s ease-out infinite;

	animation-delay: 6s;

}

@keyframes heroRipple {

	0%   { transform: translateY(-50%) scale(0.85); opacity: 0; }

	20%  { opacity: 0.4; }

	100% { transform: translateY(-50%) scale(1.35); opacity: 0; }

}



/* Layer E4 — second diagonal hairline top-right */

.hero__line-2 {

	position: absolute;

	right: 12%;

	top: -20px;

	width: 1px;

	height: 240px;

	background: linear-gradient(180deg, var(--cd-red) 0%, transparent 100%);

	transform-origin: top right;

	transform: rotate(-24deg) scaleY(0);

	opacity: 0;

	animation: heroLine2 14s ease-out infinite;

	animation-delay: 3s;

	z-index: -1;

}

@keyframes heroLine2 {

	0%, 30%   { opacity: 0; transform: rotate(-24deg) scaleY(0); }

	40%       { opacity: 0.55; transform: rotate(-24deg) scaleY(1); }

	78%       { opacity: 0.55; transform: rotate(-24deg) scaleY(1); }

	88%, 100% { opacity: 0; transform: rotate(-24deg) scaleY(1); }

}



/* Layer F — grain film (sumi texture) */

.hero::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	pointer-events: none;

	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

	opacity: 0.05;

	mix-blend-mode: overlay;

}



/* Layer G — bottom vignette (sumi ink fade) */

.hero::before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	pointer-events: none;

	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);

}



@media (prefers-reduced-motion: reduce) {

	.hero__tatami, .hero__breath, .hero__enso-arc, .hero__enso-drop, .hero__line { animation: none !important; }

}



/* Hero content — asimetr&#237;a left-weighted (rule of thirds) */

.hero__grid {

	position: relative;

	z-index: 1;

	display: block;

	max-width: 1200px;

	margin: 0 auto;

	text-align: left;

	padding-inline: var(--gutter);

}

.hero__inner { max-width: 60%; }

.hero__eyebrow { color: var(--cd-red); margin-bottom: 32px; justify-content: flex-start; }

.hero__title {

	font-family: var(--font-display);

	font-size: clamp(40px, 5.2vw, 64px);

	font-weight: 700;

	line-height: 1.08;

	letter-spacing: -0.03em;

	color: var(--cd-ink-inv);

	margin: 0 0 36px;

	max-width: 17ch;

	text-wrap: balance;

}

.hero__title em {

	font-style: normal;

	color: var(--cd-red);

	position: relative;

}

.hero__title em::after { display: none; }

.hero__lead {

	font-size: 18px;

	line-height: 1.65;

	color: rgba(255,255,255,0.72);

	max-width: 58ch;

	margin: 0 0 44px;

}

.hero__ctas {

	display: flex;

	gap: 12px;

	flex-wrap: wrap;

	margin-bottom: 64px;

}

.hero__trust {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 1px;

	margin-top: 0;

	padding: 0;

	border-top: 1px solid rgba(255,255,255,0.1);

	border-bottom: 1px solid rgba(255,255,255,0.08);

	background: rgba(255,255,255,0.08);

	max-width: 100%;

}

.hero__trust-item {

	padding: 22px 20px 22px 24px;

	background: #0A0A0A;

	display: flex;

	flex-direction: column;

	gap: 8px;

	align-items: flex-start;

	position: relative;

	transition: background 280ms ease;

}

.hero__trust-item:hover { background: rgba(255,255,255,0.02); }

.hero__trust-item::before {

	content: "";

	position: absolute;

	top: 0;

	left: 24px;

	width: 28px;

	height: 2px;

	background: var(--cd-red);

	opacity: 0.85;

}

.hero__trust-top {

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 100%;

	color: rgba(255,255,255,0.4);

}

.hero__trust-top svg { width: 14px; height: 14px; stroke-width: 1.6; }

.hero__trust-ctx {

	font-family: ui-monospace, Menlo, monospace;

	font-size: 9px;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.35);

}

.hero__trust-num {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 38px;

	letter-spacing: -0.03em;

	color: var(--cd-ink-inv);

	line-height: 1;

	margin-top: 4px;

	display: flex;

	align-items: baseline;

	gap: 2px;

}

.hero__trust-num em { font-style: normal; color: var(--cd-red); }

.hero__trust-num small { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0; text-transform: uppercase; margin-left: 4px; }

.hero__trust-lbl {

	font-family: var(--font-body);

	font-size: 12px;

	font-weight: 500;

	color: rgba(255,255,255,0.6);

	letter-spacing: 0.02em;

	line-height: 1.4;

}






/* =========================================================================

   Sections generic

   ========================================================================= */

.section { padding: var(--sp-11) 0; }

.section--tight { padding: var(--sp-9) 0; }

.section__head { max-width: 780px; margin-bottom: 72px; }

.section__title {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: clamp(36px, 4.2vw, 56px);

	line-height: 1.08;

	letter-spacing: -0.025em;

	margin-top: 16px;

	margin-bottom: 18px;

	text-wrap: balance;

}

.section__title em { font-style: normal; color: var(--cd-red); }

.section__lead {

	font-size: 18px;

	line-height: 1.6;

	color: var(--cd-ink-2);

	max-width: 60ch;

}



/* Strip anti-humo */

.strip {

	padding: 56px 0;

	background: var(--cd-canvas);

	border-top: 1px solid rgba(36,36,36,0.06);

	border-bottom: 1px solid rgba(36,36,36,0.06);

}

.strip__inner {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: space-between;

	gap: 24px;

}

.strip__claim {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 24px;

	line-height: 1.3;

	max-width: 46ch;

	color: var(--cd-ink);

}

.strip__claim em { font-style: normal; color: var(--cd-red); }



/* =========================================================================

   Logos marquee

   ========================================================================= */

.logos {

	padding: 72px 0 56px;

	background: var(--cd-canvas);

	position: relative;

}

.logos__label {

	text-align: center;

	color: var(--cd-ink-3);

	font-family: var(--font-display);

	font-size: 11px;

	font-weight: 600;

	letter-spacing: 0.18em;

	text-transform: uppercase;

	margin-bottom: 32px;

}

.logos__track-wrap {

	overflow: hidden;

	position: relative;

	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);

	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);

}

.logos__track {

	display: flex;

	gap: 24px;

	width: max-content;

	animation: logosMarquee 40s linear infinite;

}

.logos__chip {

	background: var(--cd-canvas);

	box-shadow: var(--nm-out-sm);

	padding: 18px 36px;

	border-radius: 12px;

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 18px;

	letter-spacing: 0.02em;

	color: var(--cd-ink);

	display: flex;

	align-items: center;

	gap: 10px;

	flex-shrink: 0;

	height: 64px;

	min-width: 180px;

	justify-content: center;

	text-transform: uppercase;

}

.logos__chip--italic { font-style: italic; letter-spacing: -0.01em; font-size: 22px; }

.logos__chip--wide { letter-spacing: 0.2em; font-size: 14px; }

.logos__chip--mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: 0.08em; }

.logos__chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cd-red); }

.logos__chip-sq { width: 12px; height: 12px; background: var(--cd-ink); border-radius: 2px; }

.logos__chip-bar { width: 24px; height: 3px; background: var(--cd-red); border-radius: 999px; }

@keyframes logosMarquee {

	from { transform: translateX(0); }

	to   { transform: translateX(-50%); }

}



/* =========================================================================

   Services grid

   ========================================================================= */

.services-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 24px;

}

.service-card {

	position: relative;

	background: var(--cd-canvas);

	border-radius: 12px;

	padding: 28px 26px 24px;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	gap: 14px;

	color: var(--cd-ink);

	transition: box-shadow 240ms, transform 240ms;

	min-height: 300px;

}

.service-card:hover {

	transform: translateY(-2px);

	box-shadow: var(--nm-out-lg);

}

.service-card:hover .service-card__arrow {

	background: var(--cd-red);

	color: #fff;

	transform: translateX(2px);

}

.service-card__icon {

	width: 44px; height: 44px;

	border-radius: 12px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	display: grid; place-items: center;

	color: var(--cd-ink);

}

.service-card__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }

.service-card__eyebrow {

	font-family: var(--font-display);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: var(--cd-red);

	margin-top: 8px;

}

.service-card__title {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 22px;

	line-height: 1.2;

	letter-spacing: -0.015em;

}

.service-card__desc {

	font-size: 14px;

	line-height: 1.55;

	color: var(--cd-ink-2);

	flex: 1;

}

.service-card__foot {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding-top: 12px;

	margin-top: auto;

	border-top: 1px dashed rgba(36,36,36,0.12);

}

.service-card__link {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 13px;

	color: var(--cd-ink);

	display: inline-flex;

	align-items: center;

	gap: 10px;

}

.service-card__arrow {

	width: 30px; height: 30px;

	border-radius: 999px;

	background: var(--cd-canvas);

	color: var(--cd-ink);

	box-shadow: var(--nm-out-sm);

	display: grid; place-items: center;

	transition: background 180ms, color 180ms, transform 180ms;

}

.service-card__arrow svg { width: 14px; height: 14px; stroke-width: 2; }



/* =========================================================================

   Stats band

   ========================================================================= */

.stats-band {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 20px;

}

.stat {

	background: var(--cd-canvas);

	border-radius: 12px;

	padding: 22px;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	gap: 6px;

}

.stat__top { display: flex; align-items: center; justify-content: space-between; }

.stat__chip {

	width: 34px; height: 34px;

	border-radius: 10px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	display: grid; place-items: center;

	color: var(--cd-ink);

}

.stat__chip svg { width: 16px; height: 16px; stroke-width: 1.6; }

.stat__delta {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 11px;

	padding: 4px 10px;

	border-radius: 999px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	display: inline-flex;

	align-items: center;

	gap: 4px;

}

.stat__delta.up { color: #2E6A3A; }

.stat__delta.red { color: var(--cd-red); }

.stat__n {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 46px;

	line-height: 1;

	letter-spacing: -0.035em;

	color: var(--cd-ink);

	margin-top: 6px;

}

.stat__n em { font-style: normal; color: var(--cd-red); }

.stat__lbl { font-size: 13px; color: var(--cd-ink-2); margin-top: 2px; }

.stat__meter {

	margin-top: 12px;

	height: 6px;

	border-radius: 999px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	overflow: hidden;

}

.stat__meter-fill { height: 100%; background: var(--cd-red); border-radius: 999px; }

.stat__meter-fill.ink { background: var(--cd-ink); }

.stat__foot {

	display: flex;

	justify-content: space-between;

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10px;

	color: var(--cd-ink-3);

	margin-top: 6px;

	letter-spacing: 0.04em;

	text-transform: uppercase;

}



/* =========================================================================

   Cases — redesign v2

   ========================================================================= */

.cases-grid {

	display: grid;

	grid-template-columns: 1.4fr 1fr;

	grid-template-rows: auto auto;

	gap: 20px;

}

.case-card {

	position: relative;

	display: block;

	border-radius: 16px;

	overflow: hidden;

	text-decoration: none;

	color: #fff;

	background: #141414;

	box-shadow: var(--nm-out);

	transition: transform 280ms, box-shadow 280ms;

	isolation: isolate;

	min-height: 360px;

}

.case-card:hover { transform: translateY(-4px); box-shadow: var(--nm-out-lg); }

.case-card:hover .case-card__media-img { transform: scale(1.06); }



.case-card--feature {

	grid-row: span 2;

	min-height: 740px;

}



/* Media fills entire card */

.case-card__media {

	position: absolute;

	inset: 0;

	z-index: 0;

	overflow: hidden;

}

.case-card__media-img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	display: block;

	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

}

.case-card__media::before {

	content: "";

	position: absolute;

	inset: 0;

	background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.82) 100%);

	z-index: 1;

}



/* Top chip */

.case-card__chip {

	position: absolute;

	top: 18px; left: 18px;

	z-index: 2;

	font-family: var(--font-display);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: #fff;

	background: rgba(18,18,18,0.55);

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

	padding: 6px 12px;

	border-radius: 999px;

	border: 1px solid rgba(255,255,255,0.12);

}



/* Client logo overlay — top-right with subtle glass backdrop */

.case-card__logo-holder {

	position: absolute;

	top: 14px; right: 14px;

	z-index: 2;

	display: inline-flex;

	align-items: center;

	padding: 10px 18px;

	background: rgba(18,18,18,0.45);

	backdrop-filter: blur(10px);

	-webkit-backdrop-filter: blur(10px);

	border: 1px solid rgba(255,255,255,0.1);

	border-radius: 999px;

}

.case-card--feature .case-card__logo-holder {

	top: 22px; right: 22px;

	padding: 12px 22px;

}

.case-card__logo {

	height: 32px;

	max-width: 150px;

	width: auto;

	object-fit: contain;

	display: block;

}

.case-card--feature .case-card__logo {

	height: 44px;

	max-width: 200px;

}

.case-card__logo--whitewash {

	filter: brightness(0) invert(1);

}



/* Body at bottom */

.case-card__body {

	position: absolute;

	left: 0; right: 0; bottom: 0;

	z-index: 2;

	padding: 26px 26px 22px;

	display: flex;

	flex-direction: column;

	gap: 14px;

}

.case-card--feature .case-card__body { padding: 40px 40px 36px; gap: 18px; }



.case-card__metric {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 40px;

	line-height: 1;

	letter-spacing: -0.035em;

	color: var(--cd-red);

	text-shadow: 0 2px 20px rgba(0,0,0,0.4);

}

.case-card--feature .case-card__metric { font-size: 88px; }



.case-card__headline {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 17px;

	line-height: 1.35;

	letter-spacing: -0.01em;

	color: rgba(255,255,255,0.94);

	max-width: 28ch;

	margin: 0;

}

.case-card--feature .case-card__headline { font-size: 26px; line-height: 1.25; max-width: 22ch; }



.case-card__foot {

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 12px;

	margin-top: 4px;

	padding-top: 14px;

	border-top: 1px solid rgba(255,255,255,0.12);

}

.case-card__services {

	display: flex;

	gap: 6px;

	flex-wrap: wrap;

}

.case-card__service {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 10px;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.72);

}

.case-card__cta {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 12px;

	color: var(--cd-red);

	letter-spacing: 0.02em;

	white-space: nowrap;

}



.cases-foot {

	display: flex;

	justify-content: center;

	margin-top: 40px;

}

.cases-foot__link {

	display: inline-flex;

	align-items: center;

	gap: 14px;

	padding: 14px 28px;

	border-radius: 999px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-out-sm);

	color: var(--cd-ink);

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 14px;

	text-decoration: none;

	letter-spacing: -0.005em;

	transition: transform 220ms, box-shadow 220ms, color 220ms;

}

.cases-foot__link:hover {

	transform: translateY(-2px);

	box-shadow: var(--nm-out);

	color: var(--cd-red);

}

.cases-foot__count {

	font-family: ui-monospace, Menlo, monospace;

	font-size: 11px;

	font-weight: 500;

	color: var(--cd-ink-3);

	letter-spacing: 0.04em;

	padding-left: 14px;

	border-left: 1px solid rgba(36,36,36,0.14);

}

.cases-foot__arrow {

	color: var(--cd-red);

	font-size: 16px;

	transition: transform 220ms;

}

.cases-foot__link:hover .cases-foot__arrow { transform: translateX(4px); }



/* =========================================================================

   Packaged AI Products

   ========================================================================= */

.products {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 20px;

}

.product {

	background: var(--cd-canvas);

	border-radius: 12px;

	padding: 26px;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	gap: 14px;

	position: relative;

	min-height: 260px;

	color: var(--cd-ink);

	text-decoration: none;

	transition: transform 280ms, box-shadow 280ms;

	cursor: pointer;

	overflow: hidden;

}

.product::before {

	content: "";

	position: absolute;

	inset: 0;

	border-radius: 12px;

	border: 1px solid transparent;

	pointer-events: none;

	transition: border-color 220ms;

}

.product:hover {

	transform: translateY(-4px);

	box-shadow: var(--nm-out-lg);

}

.product:hover::before { border-color: rgba(230,36,63,0.38); }

.product:hover .product__icon {

	background: var(--cd-red);

	color: #fff;

	box-shadow: 0 6px 18px rgba(230,36,63,0.32);

}

.product:hover .product__name { color: var(--cd-red); }

.product:hover .product__cta { opacity: 1; transform: translateX(0); }

.product:hover .product__cta span { transform: translateX(4px); }



.product__head {

	display: flex;

	justify-content: space-between;

	align-items: flex-start;

	gap: 12px;

}

.product__icon {

	width: 38px; height: 38px;

	border-radius: 10px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	display: grid; place-items: center;

	color: var(--cd-ink);

	transition: background 220ms, color 220ms, box-shadow 220ms;

}

.product__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

.product__price {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 13px;

	letter-spacing: 0.02em;

	padding: 5px 10px;

	border-radius: 999px;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	color: var(--cd-ink-2);

}

.product__name {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 18px;

	line-height: 1.2;

	letter-spacing: -0.015em;

	color: var(--cd-ink);

	transition: color 220ms;

	margin: 0;

}

.product__desc {

	font-size: 14px;

	line-height: 1.55;

	color: var(--cd-ink-2);

	flex: 1;

	margin: 0;

}

.product__meta {

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 12px;

	padding-top: 14px;

	border-top: 1px dashed rgba(36,36,36,0.12);

}

.product__tag {

	font-family: var(--font-display);

	font-size: 10px;

	font-weight: 600;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color: var(--cd-red);

}

.product__cta {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 12px;

	color: var(--cd-red);

	letter-spacing: 0.02em;

	white-space: nowrap;

	opacity: 0;

	transform: translateX(-4px);

	transition: opacity 220ms, transform 220ms;

	display: inline-flex;

	align-items: center;

	gap: 6px;

}

.product__cta span { transition: transform 220ms; display: inline-block; }



.products-foot {

	display: flex;

	justify-content: center;

	margin-top: 40px;

}



/* =========================================================================

   Testimonios GMB style

   ========================================================================= */

.reviews {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 20px;

}

.review {

	background: var(--cd-canvas);

	border-radius: 12px;

	padding: 24px;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	gap: 14px;

	min-height: 240px;

}

.review__top {

	display: flex;

	gap: 12px;

	align-items: center;

}

.review__avatar {

	width: 44px; height: 44px;

	border-radius: 999px;

	display: grid;

	place-items: center;

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 16px;

	color: #fff;

	flex-shrink: 0;

}

.review__avatar.c1 { background: #E6243F; }

.review__avatar.c2 { background: #2E6A3A; }

.review__avatar.c3 { background: #4A60C4; }

.review__avatar.c4 { background: #B8860B; }

.review__avatar.c5 { background: #7B3FB0; }

.review__meta { display: flex; flex-direction: column; gap: 2px; }

.review__name {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 14px;

	color: var(--cd-ink);

	letter-spacing: -0.01em;

}

.review__role { font-size: 12px; color: var(--cd-ink-3); }

.review__stars {

	display: flex;

	gap: 2px;

	color: #F0B429;

	margin-top: 2px;

}

.review__stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

.review__text {

	font-size: 14px;

	line-height: 1.6;

	color: var(--cd-ink);

	flex: 1;

}

.review__foot {

	display: flex;

	justify-content: space-between;

	align-items: center;

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10px;

	color: var(--cd-ink-3);

	letter-spacing: 0.04em;

	text-transform: uppercase;

	padding-top: 8px;

	border-top: 1px solid rgba(36,36,36,0.06);

}

.review__source {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	color: var(--cd-ink-2);

	font-family: var(--font-display);

	font-weight: 600;

}

.review__source-g {

	display: inline-grid;

	place-items: center;

	width: 16px; height: 16px;

	border-radius: 50%;

	background: var(--cd-canvas);

	box-shadow: var(--nm-in-sm);

	font-size: 10px;

	color: var(--cd-red);

	font-weight: 700;

}



/* =========================================================================

   Pricing tier

   ========================================================================= */

.pricing-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 24px;

}

.tier {

	background: var(--cd-canvas);

	border-radius: 16px;

	padding: 36px 32px;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	gap: 20px;

	position: relative;

}

.tier--featured { background: var(--cd-canvas-dark); color: var(--cd-ink-inv); box-shadow: var(--nmd-out); }

.tier--featured .tier__name,

.tier--featured .tier__price,

.tier--featured .tier__price-suf { color: var(--cd-ink-inv); }

.tier__badge {

	position: absolute;

	top: -12px;

	left: 32px;

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 10px;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: #fff;

	background: var(--cd-red);

	padding: 6px 14px;

	border-radius: 999px;

	box-shadow: var(--nm-red);

}

.tier__name {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 22px;

	letter-spacing: -0.015em;

}

.tier__desc { color: var(--cd-ink-2); font-size: 14px; line-height: 1.55; }

.tier--featured .tier__desc { color: rgba(255,255,255,0.7); }

.tier__price-row { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px dashed rgba(36,36,36,0.12); }

.tier--featured .tier__price-row { border-top-color: rgba(255,255,255,0.12); }

.tier__price {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 44px;

	line-height: 1;

	letter-spacing: -0.03em;

}

.tier__price-suf { font-family: var(--font-body); font-size: 13px; color: var(--cd-ink-2); }

.tier__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.tier__item { font-size: 14px; display: flex; align-items: flex-start; gap: 10px; color: var(--cd-ink-2); }

.tier--featured .tier__item { color: rgba(255,255,255,0.82); }

.tier__item svg { flex-shrink: 0; color: var(--cd-red); width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.2; }

.tier__cta { margin-top: auto; }



/* =========================================================================

   Blog grid (&#250;ltimo an&#225;lisis — pre-footer)

   ========================================================================= */

.blog-grid {

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 24px;

}

.blog-card {

	background: var(--cd-canvas);

	border-radius: 12px;

	overflow: hidden;

	box-shadow: var(--nm-out);

	display: flex;

	flex-direction: column;

	color: var(--cd-ink);

	transition: transform 240ms, box-shadow 240ms;

	text-decoration: none;

}

.blog-card:hover { transform: translateY(-3px); box-shadow: var(--nm-out-lg); }

.blog-card:hover .blog-card__img { transform: scale(1.04); }

.blog-card__media {

	position: relative;

	aspect-ratio: 16 / 10;

	overflow: hidden;

	background: #141414;

}

.blog-card__img {

	width: 100%; height: 100%;

	object-fit: cover;

	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);

}

.blog-card__media::after {

	content: "";

	position: absolute;

	inset: 0;

	background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);

	pointer-events: none;

}

.blog-card__tag {

	position: absolute;

	top: 12px; left: 12px;

	font-family: var(--font-display);

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.85);

	background: rgba(0,0,0,0.55);

	backdrop-filter: blur(6px);

	padding: 5px 10px;

	border-radius: 999px;

	border: 1px solid rgba(255,255,255,0.1);

	z-index: 1;

}

.blog-card__body {

	padding: 22px 24px 24px;

	display: flex;

	flex-direction: column;

	gap: 12px;

	flex: 1;

}

.blog-card__title {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 19px;

	line-height: 1.25;

	letter-spacing: -0.015em;

	color: var(--cd-ink);

}

.blog-card__excerpt {

	font-size: 14px;

	line-height: 1.55;

	color: var(--cd-ink-2);

	flex: 1;

	display: -webkit-box;

	-webkit-line-clamp: 3;

	-webkit-box-orient: vertical;

	overflow: hidden;

}

.blog-card__meta {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding-top: 12px;

	border-top: 1px dashed rgba(36,36,36,0.12);

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10px;

	color: var(--cd-ink-3);

	letter-spacing: 0.06em;

	text-transform: uppercase;

}

.blog-card__meta-read {

	color: var(--cd-red);

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 12px;

	text-transform: none;

	letter-spacing: 0;

}

.blog-more {

	text-align: center;

	margin-top: 48px;

}



/* =========================================================================

   FAQ SEO (GEO citability)

   ========================================================================= */

.faq-seo__list {

	display: flex;

	flex-direction: column;

	border-top: 1px solid rgba(36,36,36,0.1);

}

.faq-seo__item {

	border-bottom: 1px solid rgba(36,36,36,0.1);

	padding-block: 8px;

}

.faq-seo__q {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 20px;

	line-height: 1.3;

	letter-spacing: -0.015em;

	color: var(--cd-ink);

	padding: 18px 48px 18px 0;

	cursor: pointer;

	list-style: none;

	position: relative;

}

.faq-seo__q::-webkit-details-marker { display: none; }

.faq-seo__q::after {

	content: "+";

	position: absolute;

	right: 0; top: 50%;

	transform: translateY(-50%);

	font-family: var(--font-display);

	font-weight: 500;

	font-size: 28px;

	color: var(--cd-red);

	transition: transform 240ms ease;

}

.faq-seo__item[open] > .faq-seo__q::after { transform: translateY(-50%) rotate(45deg); }

.faq-seo__a {

	padding: 0 48px 20px 0;

	color: var(--cd-ink-2);

	font-size: 16px;

	line-height: 1.65;

	max-width: 72ch;

}

.faq-seo__a strong { color: var(--cd-ink); }



/* =========================================================================

   CTA dark

   ========================================================================= */

.cta-dark {

	background: var(--cd-canvas-dark);

	color: var(--cd-ink-inv);

	padding: 120px 0;

}

.cta-dark__inner {

	display: grid;

	grid-template-columns: 1.2fr 1fr;

	gap: 64px;

	align-items: center;

}

.cta-dark__title {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: clamp(40px, 5vw, 64px);

	line-height: 1.02;

	letter-spacing: -0.035em;

	color: var(--cd-ink-inv);

	max-width: 14ch;

}

.cta-dark__title em { font-style: normal; color: var(--cd-red); }

.cta-dark__sub { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.6; max-width: 46ch; }

.cta-dark__form {

	display: flex;

	gap: 8px;

	padding: 6px;

	border-radius: 999px;

	background: var(--cd-canvas-dark-2);

	box-shadow: var(--nmd-in);

	margin-top: 24px;

}

.cta-dark__form input {

	flex: 1;

	background: transparent;

	border: 0;

	color: #fff;

	padding: 14px 20px;

	font-family: var(--font-body);

	font-size: 15px;

	outline: none;

}

.cta-dark__form input::placeholder { color: rgba(255,255,255,0.4); }

.cta-dark__hint {

	font-family: ui-monospace, Menlo, monospace;

	font-size: 11px;

	color: rgba(255,255,255,0.45);

	margin-top: 14px;

	letter-spacing: 0.04em;

}

.cta-dark__guarantee {

	display: flex;

	align-items: center;

	gap: 10px;

	padding: 14px 20px;

	margin-top: 18px;

	border-radius: 12px;

	background: var(--cd-canvas-dark-2);

	box-shadow: var(--nmd-in);

	color: rgba(255,255,255,0.8);

	font-size: 13px;

	line-height: 1.5;

}

.cta-dark__guarantee strong { color: var(--cd-red); font-weight: 600; }

.cta-dark__calc-link {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 13px;

	color: rgba(255,255,255,0.75);

	margin-top: 12px;

	border-bottom: 1px dashed rgba(255,255,255,0.2);

	padding-bottom: 2px;

	width: fit-content;

}

.cta-dark__calc-link:hover { color: var(--cd-red); border-color: var(--cd-red); }



/* ---- Lead-gen form v2 (CRO-optimised) ---- */

.cta-dark__outcomes {

	list-style: none;

	padding: 0;

	margin: 28px 0 0;

	display: grid;

	gap: 12px;

}

.cta-dark__outcomes li {

	display: grid;

	grid-template-columns: 22px 1fr;

	align-items: start;

	gap: 12px;

	color: rgba(255,255,255,0.85);

	font-size: 14.5px;

	line-height: 1.5;

}

.cta-dark__outcomes li i {

	width: 18px; height: 18px;

	stroke-width: 2;

	color: var(--cd-red);

	margin-top: 2px;

}

.cta-dark__outcomes li strong { color: #fff; font-weight: 600; }



.cta-dark__social {

	margin-top: 28px;

	padding-top: 24px;

	border-top: 1px solid rgba(255,255,255,0.08);

	display: flex;

	flex-direction: column;

	gap: 14px;

}

.cta-dark__rating {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	color: rgba(255,255,255,0.75);

	font-size: 13px;

	font-family: var(--font-body);

}

.cta-dark__rating i {

	width: 14px; height: 14px;

	color: #FDB022;

	fill: #FDB022;

	stroke: #FDB022;

}

.cta-dark__rating strong { color: #fff; font-weight: 700; margin-left: 4px; }

.cta-dark__logos-row {

	display: flex;

	align-items: center;

	gap: 18px;

	flex-wrap: wrap;

	opacity: 0.55;

}

.cta-dark__logos-row span {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 12px;

	color: rgba(255,255,255,0.8);

	letter-spacing: 0.02em;

	padding: 6px 10px;

	border: 1px solid rgba(255,255,255,0.12);

	border-radius: 6px;

}



.cta-dark__form-card {

	background: #18181B;

	border: 1px solid rgba(255,255,255,0.08);

	border-radius: 20px;

	padding: 32px;

	box-shadow: 0 24px 64px rgba(0,0,0,0.4);

	position: relative;

}

.cta-dark__form-head { margin-bottom: 22px; }

.cta-dark__form-badge {

	display: inline-block;

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10.5px;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: var(--cd-red);

	background: rgba(230,36,63,0.12);

	border: 1px solid rgba(230,36,63,0.28);

	padding: 4px 10px;

	border-radius: 999px;

	margin-bottom: 14px;

}

.cta-dark__form-head h3 {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 26px;

	letter-spacing: -0.02em;

	color: #fff;

	margin: 0 0 8px;

	line-height: 1.15;

}

.cta-dark__form-head p {

	color: rgba(255,255,255,0.62);

	font-size: 14px;

	line-height: 1.55;

	margin: 0;

}

.cta-dark__form2 { display: block; }

.cta-dark__form-fields { display: grid; gap: 14px; }

.field {

	display: grid;

	gap: 6px;

}

.field__label {

	font-family: var(--font-display);

	font-weight: 600;

	font-size: 11.5px;

	letter-spacing: 0.06em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.55);

}

.field input[type="email"],

.field input[type="tel"],

.field input[type="text"],

.field select {

	width: 100%;

	background: #0F0F11;

	border: 1px solid rgba(255,255,255,0.1);

	border-radius: 10px;

	padding: 13px 16px;

	font-family: var(--font-body);

	font-size: 14.5px;

	color: #fff;

	outline: none;

	transition: border 120ms, box-shadow 120ms;

	appearance: none;

	-webkit-appearance: none;

}

.field input::placeholder { color: rgba(255,255,255,0.3); }

.field input:focus,

.field select:focus {

	border-color: var(--cd-red);

	box-shadow: 0 0 0 3px rgba(230,36,63,0.18);

}

.field select {

	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

	background-repeat: no-repeat;

	background-position: right 16px center;

	padding-right: 44px;

	cursor: pointer;

}

.field--consent {

	display: grid;

	grid-template-columns: 20px 1fr;

	gap: 10px;

	align-items: start;

	padding: 2px 0;

	margin-top: 2px;

}

.field--consent input[type="checkbox"] {

	width: 18px; height: 18px;

	margin-top: 2px;

	accent-color: var(--cd-red);

	cursor: pointer;

}

.field--consent span {

	font-size: 12.5px;

	line-height: 1.5;

	color: rgba(255,255,255,0.6);

}

.field--consent a {

	color: rgba(255,255,255,0.85);

	text-decoration: underline;

	text-decoration-color: rgba(255,255,255,0.3);

	text-underline-offset: 2px;

}

.field--consent a:hover { color: var(--cd-red); }



.cta-dark__submit {

	width: 100%;

	justify-content: center;

	margin-top: 4px;

	padding: 16px 22px;

	font-size: 14.5px;

	letter-spacing: 0.02em;

}

.cta-dark__fallback {

	text-align: center;

	color: rgba(255,255,255,0.5);

	font-size: 12.5px;

	margin: 14px 0 0;

}

.cta-dark__fallback a {

	color: rgba(255,255,255,0.9);

	font-weight: 600;

	text-decoration: underline;

	text-decoration-color: rgba(255,255,255,0.3);

	text-underline-offset: 2px;

}

.cta-dark__fallback a:hover { color: var(--cd-red); }



.cta-dark__trust-inline {

	display: flex;

	align-items: center;

	gap: 10px;

	padding: 12px 14px;

	margin-top: 16px;

	border-radius: 10px;

	background: rgba(230,36,63,0.08);

	border: 1px solid rgba(230,36,63,0.22);

	color: rgba(255,255,255,0.8);

	font-size: 12px;

	line-height: 1.5;

}

.cta-dark__trust-inline i {

	width: 16px; height: 16px;

	color: var(--cd-red);

	flex-shrink: 0;

}

.cta-dark__trust-inline strong { color: #fff; font-weight: 700; }



.cta-dark__form-success {

	display: grid;

	place-items: center;

	text-align: center;

	gap: 14px;

	padding: 36px 16px;

}

.cta-dark__form-success i {

	width: 48px; height: 48px;

	color: #22C55E;

	stroke-width: 1.75;

}

.cta-dark__form-success h4 {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 22px;

	color: #fff;

	margin: 0;

	letter-spacing: -0.01em;

}

.cta-dark__form-success p { color: rgba(255,255,255,0.6); font-size: 14px; margin: 0; max-width: 32ch; line-height: 1.5; }

.cta-dark__form-success a { color: var(--cd-red); font-weight: 600; }



/* =========================================================================

   Footer

   ========================================================================= */

.site-footer {

	background: var(--cd-canvas-dark);

	color: rgba(255,255,255,0.85);

	padding: 96px 0 48px;

}

.site-footer__shell {

	background: var(--cd-canvas-dark);

	border-radius: 16px;

	padding: 48px;

	box-shadow: var(--nmd-out);

	display: grid;

	grid-template-columns: 2fr 1fr 1fr 1fr;

	gap: 48px;

}

.footer-eyebrow {

	font-family: var(--font-display);

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color: rgba(255,255,255,0.45);

	margin-bottom: 14px;

}

.footer-col a {

	display: block;

	font-size: 13px;

	padding: 4px 0;

	color: rgba(255,255,255,0.85);

}

.footer-col a:hover { color: var(--cd-red); }

.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }

.footer-brand__lockup {

	display: flex; align-items: center; gap: 12px;

	text-decoration: none;

}

.footer-brand__eye {

	width: 40px; height: 40px;

	display: block;

	object-fit: contain;

	flex-shrink: 0;

}

.footer-brand__word {

	font-family: var(--font-display);

	font-weight: 700;

	font-size: 22px;

	line-height: 1;

	letter-spacing: -0.02em;

	color: #fff;

	display: inline-flex;

	align-items: baseline;

}

.footer-brand__word .dot { color: var(--cd-red); padding: 0 1px; }

.footer-brand p { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55; margin: 0; }

.footer-socials { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }

.footer-socials a {

	width: 40px; height: 40px;

	border-radius: 999px;

	background: var(--cd-canvas-dark);

	box-shadow: var(--nmd-out-sm);

	display: grid; place-items: center;

	color: #fff;

	padding: 0;

	transition: color 180ms, transform 180ms;

}

.footer-socials a:hover { color: var(--cd-red); transform: translateY(-1px); }

.footer-socials a svg { width: 16px; height: 16px; stroke-width: 1.8; display: block; }

.site-footer__meta {

	margin-top: 32px;

	padding-top: 24px;

	border-top: 1px solid rgba(255,255,255,0.08);

	display: flex;

	justify-content: space-between;

	align-items: center;

	font-family: ui-monospace, Menlo, monospace;

	font-size: 10px;

	color: rgba(255,255,255,0.45);

	letter-spacing: 0.04em;

	text-transform: uppercase;

}

.site-footer__meta .dot { color: var(--cd-red); }



/* =========================================================================

   Responsive

   ========================================================================= */

@media (max-width: 1024px) {

	.hero__inner { max-width: 80%; }

	.hero__trust { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

	.hero__enso { right: -10%; opacity: 0.3; }

	.services-grid, .cases-grid, .stats-band, .pricing-grid, .products, .reviews { grid-template-columns: repeat(2, 1fr); }

	.case-card--feature { grid-row: auto; min-height: 360px; }

	.site-footer__shell { grid-template-columns: 1fr 1fr; gap: 32px; }

	.cta-dark__inner { grid-template-columns: 1fr; gap: 40px; }

}

@media (max-width: 720px) {

	.site-nav { display: none; }

	.site-header__pill { grid-template-columns: 1fr auto; }

	.hero { padding: 180px 0 120px; min-height: auto; }

	.hero__inner { max-width: 100%; }

	.hero__title { font-size: clamp(36px, 9vw, 56px); }

	.hero__trust { grid-template-columns: 1fr; }

	.hero__trust-num { font-size: 30px; }

	.hero__enso { width: 380px; right: -20%; opacity: 0.25; }

	.hero__line { left: 24px; }

	.services-grid, .cases-grid, .stats-band, .pricing-grid, .products, .reviews { grid-template-columns: 1fr; }

	.site-footer__shell { grid-template-columns: 1fr; padding: 32px; }

	.strip__inner { flex-direction: column; align-items: flex-start; }

	.case-card--feature { min-height: 420px; }

	.case-card--feature .case-card__body { padding: 26px 26px 22px; }

	.case-card--feature .case-card__headline { font-size: 18px; }

	.case-card--feature .case-card__metric { font-size: 56px; }

}

.eyebrow::before{box-shadow:0 0 0 3px rgba(230,36,63,.18),0 0 0 0 rgba(230,36,63,.28),0 0 12px rgba(230,36,63,.45) !important;animation:eyebrowPulse 2.4s ease-in-out infinite}

@keyframes eyebrowPulse{

	0%,100%{box-shadow:0 0 0 3px rgba(230,36,63,.18),0 0 0 0 rgba(230,36,63,.22),0 0 10px rgba(230,36,63,.32);transform:scale(1)}

	50%{box-shadow:0 0 0 3px rgba(230,36,63,.14),0 0 0 7px rgba(230,36,63,.06),0 0 16px rgba(230,36,63,.52);transform:scale(1.08)}

}

/* &#9472;&#9472; Team Carousel &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

@keyframes scroll-ltr{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@keyframes scroll-rtl{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.team-carousel{position:relative;background:#121212;overflow:hidden;display:flex;flex-direction:column;padding:0}

.team-carousel__track-wrap{overflow:hidden;width:100%;flex-shrink:0;line-height:0}

.team-carousel__track{display:flex;gap:0;width:max-content}

.team-carousel__track--ltr{animation:scroll-ltr 55s linear infinite}

.team-carousel__track--rtl{animation:scroll-rtl 68s linear infinite}

.team-carousel__item{margin:0;flex-shrink:0;width:clamp(160px,14vw,240px);position:relative;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}

.team-carousel__item img{display:block;width:100%;height:clamp(220px,22vw,340px);object-fit:cover;object-position:top center;filter:grayscale(10%) brightness(.95);-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}

.team-carousel__content,.team-carousel__content *{user-select:text;-webkit-user-select:text}

.team-carousel__item::after{content:none}

.team-carousel__divider{width:100%;height:1px;background:rgba(255,255,255,.06);position:relative;z-index:3}

.team-carousel__overlay{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(12,12,12,.65) 0%,rgba(12,12,12,.45) 50%,rgba(12,12,12,.15) 100%);pointer-events:none;z-index:1}

.team-carousel__content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(1.5rem,4vw,3rem) clamp(1.5rem,8vw,5rem);pointer-events:none}

.team-carousel__content a,.team-carousel__content button{pointer-events:auto}

.team-carousel__eyebrow{font-family:Inter,sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 1.25rem}

.team-carousel__headline{font-family:Poppins,sans-serif;font-size:clamp(1.4rem,3vw,2.5rem);font-weight:700;line-height:1.08;color:#fff;max-width:680px;margin:0 0 1.25rem;letter-spacing:-.02em}

.team-carousel__subtext{font-family:Inter,sans-serif;font-size:clamp(.8rem,1.2vw,.95rem);color:rgba(255,255,255,.55);max-width:460px;margin:0 0 2rem;line-height:1.7;font-weight:400}

.team-carousel__cta{display:inline-flex;align-items:center;gap:.5rem;font-family:Inter,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:.2rem;transition:color .25s,border-color .25s}

.team-carousel__cta::after{content:'\2192';transition:transform .25s}

.team-carousel__cta:hover{color:#fff;border-color:rgba(255,255,255,.6)}

.team-carousel__cta:hover::after{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){.team-carousel__track{animation:none!important}}
/* Home hero: grid 2.5fr/1fr + inner al 100%, título grande en ~3 líneas, sin subrayado en em */
section.hero .hero__grid{display:grid!important;grid-template-columns:2.5fr 1fr!important;gap:40px;align-items:start}
section.hero .hero__inner{max-width:100%!important}
section.hero .hero__title em::after { display: none; }
section.hero .hero__lead{line-height:1.4!important;margin:0 0 32px!important}
@media(max-width:768px){section.hero .hero__grid{display:block!important;grid-template-columns:1fr!important}section.hero .hero__inner{max-width:100%!important}section.hero .hero__lead{font-size:17px!important;margin:0 0 24px!important}}